@font-face{font-family:Comic Neue;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/comic-neue-latin-400-normal.woff2) format("woff2")}@font-face{font-family:Comic Neue;font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/comic-neue-latin-700-normal.woff2) format("woff2")}:root{color-scheme:light;--ink: #171717;--muted: #756c60;--paper: #fffaf0;--board: #f7f0e0;--blue: #155bd7;--red: #ef402f;--yellow: #f7c928;--green: #4f963f}body{position:relative;display:block;min-height:100vh;padding:clamp(14px,3vw,30px) 14px 24px;color:var(--ink);font-family:Comic Neue,Comic Sans MS,Comic Sans,Trebuchet MS,sans-serif;background:linear-gradient(#f7f0e02e,#f7f0e02e),url(../assets/zanagrams-concept/doodle-backdrop.webp) center top / cover fixed,var(--board)}body:before{content:"";position:fixed;z-index:-1;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0,rgba(255,255,255,.5),transparent 45%)}main{position:relative;width:min(100%,660px);margin:0 auto;padding:clamp(18px,4vw,30px);border:3px solid var(--ink);border-radius:31px 25px 34px 27px;background:#fffaf0ed;box-shadow:8px 9px #155bd738,0 22px 50px #4d33122e}.masthead{position:relative;min-height:112px;margin-bottom:18px;text-align:center}.masthead:before,.masthead:after{content:"";position:absolute;width:66px;height:18px;border-top:5px solid currentColor;border-radius:50%}.masthead:before{left:2px;top:45px;color:var(--blue);transform:rotate(-9deg)}.masthead:after{right:4px;bottom:5px;color:var(--red);transform:rotate(8deg)}.eyebrow{display:inline-block;margin:0 0 8px;padding:5px 13px 4px;color:#5c4c18;border:2px solid var(--ink);border-radius:45% 55% 48% 52%;background:var(--yellow);box-shadow:3px 3px #1717172e;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-1.5deg)}h1{margin:0;font-size:clamp(35px,9vw,54px);font-weight:900;line-height:.94;letter-spacing:-.055em;text-shadow:2px 2px 0 var(--paper),4px 4px 0 rgba(21,91,215,.2);transform:rotate(-.5deg)}.tagline{margin:10px 54px 0;color:var(--muted);font-size:13px;font-weight:800}.help-open,.icon-button{display:grid;place-items:center;border:0;color:var(--ink);font:900 20px/1 inherit;cursor:pointer;background:transparent url(../assets/zanagrams-concept/doodle-round-button.webp) center / contain no-repeat;transition:transform .13s ease}.help-open{position:absolute;top:1px;right:0;width:48px;height:48px;border-radius:0;box-shadow:none;color:transparent;font-size:0;transform:rotate(3deg)}.help-open:after{content:"";position:absolute;left:50%;top:50%;width:25px;height:25px;background:url(../assets/zanagrams-concept/nav-help-handdrawn.webp) center / contain no-repeat;transform:translate(-50%,-50%);pointer-events:none}.help-open:hover,.help-open:focus-visible,.icon-button:hover,.icon-button:focus-visible{outline:none;background:transparent url(../assets/zanagrams-concept/doodle-round-button.webp) center / contain no-repeat;transform:translateY(-2px) rotate(-2deg) scale(1.05)}.games{gap:10px}.games li:nth-child(odd){transform:rotate(-.2deg)}.games li:nth-child(2n){transform:rotate(.2deg)}.games li:first-child{transform:none}.game{--accent: var(--blue);position:relative;min-height:88px;gap:12px;overflow:hidden;padding:11px 13px;border:2.5px solid var(--ink);border-radius:20px 24px 19px 23px;background-position:center;background-size:cover;box-shadow:4px 5px color-mix(in srgb,var(--accent) 30%,transparent),0 9px 18px #412c0f1f;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s ease}.game:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fffaf0fc,#fffaf0f2 40%,#fffaf040,#fffaf00a)}.game:hover,.game:focus-visible{z-index:1;outline:none;transform:translateY(-3px) rotate(-.35deg) scale(1.01);box-shadow:6px 8px color-mix(in srgb,var(--accent) 35%,transparent),0 15px 26px #412c0f2b}.game:focus-visible{outline:3px dashed var(--accent);outline-offset:4px}.game:active{transform:translateY(2px);box-shadow:2px 2px color-mix(in srgb,var(--accent) 35%,transparent)}.zanagrams{--accent: var(--blue);background-image:url(../assets/zanagrams-concept/doodle-menu-art.webp)}.wordscape{--accent: var(--green);background-image:url(../assets/zanagrams-concept/wordscape-menu-art.webp)}.hive{--accent: #d99900;background-image:url(../assets/zanagrams-concept/hive-menu-art.webp)}.ladder{--accent: var(--blue);background-image:url(../assets/zanagrams-concept/ladder-menu-art.webp)}.drop{--accent: var(--red);background-image:url(../assets/zanagrams-concept/drop-menu-art.webp)}.waffle{--accent: var(--red);background-image:url(../assets/zanagrams-concept/waffle-menu-art.webp)}.wordbank{--accent: var(--blue);background-image:url(../assets/zanagrams-concept/wordbank-menu-art.webp)}.glyph,.body,.go{position:relative;z-index:1}.glyph{width:45px;height:45px;color:var(--accent);border:2px solid var(--ink);border-radius:48% 52% 46% 54%;background:#fffaf0f0;box-shadow:2px 3px color-mix(in srgb,var(--accent) 25%,transparent);transform:rotate(-2deg)}.glyph svg{width:25px;height:25px}.body{width:min(48%,245px);flex:none}.game h2{font-size:18px;font-weight:900;letter-spacing:-.02em}.puzzle-number{display:inline-block;margin-top:6px;padding:2px 8px 1px;color:color-mix(in srgb,var(--accent) 76%,var(--ink));border:1.5px solid currentColor;border-radius:48% 52% 45% 55%;background:#fffaf0e0;font-size:10.5px;font-weight:900;line-height:1.35;transform:rotate(-1deg)}.go{width:36px;height:36px;margin-left:auto;border:2px solid var(--ink);background:var(--paper);box-shadow:2px 3px 0 var(--accent);font-size:20px;font-weight:900}.game:hover .go{background:var(--paper);transform:translate(3px) rotate(-5deg)}.offline-note{margin:20px auto 22px;max-width:49ch;color:var(--muted);font-size:11.5px;font-weight:700;line-height:1.45}.offline-note:before{content:"✓";margin-right:6px;color:var(--green);font-size:15px}.modal{background:#3125146e;backdrop-filter:blur(4px)}.panel{width:min(100%,510px);padding:22px 23px 26px;border:3px solid var(--ink);border-radius:28px 23px 31px 25px;background:var(--paper);box-shadow:8px 9px #ef402f47,0 22px 60px #17171747}.panel h2{font-size:25px;letter-spacing:-.03em;transform:rotate(-1deg)}.icon-button{width:45px;height:45px;font-size:27px}.help-list{gap:15px}.help-item{grid-template-columns:43px 1fr;gap:13px}.help-item .glyph{width:43px;height:43px;background:var(--paper)}.help-item h3{font-size:16px;font-weight:900}.help-item p{font-size:13.5px;line-height:1.42}@media(max-width:520px){body{padding:10px 8px 18px}main{padding:17px 12px 20px;border-radius:25px 22px 28px 23px;box-shadow:5px 6px #155bd738}.masthead{min-height:100px;margin-bottom:12px}.masthead:before,.masthead:after{width:43px}.tagline{margin-right:45px;margin-left:45px;font-size:11.5px}.games{gap:8px}.game{min-height:78px;padding:9px 10px;border-width:2px}.game:after{background:linear-gradient(90deg,#fffaf0fc,#fffaf0f0 45%,#fffaf038 78%,#fffaf00d)}.glyph{width:39px;height:39px}.glyph svg{width:22px;height:22px}.game h2{font-size:16px}.body{width:48%}.go{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}