:root{--paper:#f6f5ef;--ink:#203d32;--muted:#69786c;--green:#2d624a;--line:#d9dfd2;--surface:#fffef9;--soft:#e8eddf;--shadow:0 12px 38px #243e3010}
html{scroll-behavior:smooth}body{background:radial-gradient(ellipse at 95% 0%,#e8eddf 0,transparent 40%),var(--paper)}button{transition:background .18s,transform .18s,border-color .18s,box-shadow .18s}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible{outline:3px solid #c79543;outline-offset:4px}button:disabled{transform:none}header{max-width:1440px;margin:auto;padding:0 36px;height:86px;border-color:var(--line);gap:12px}.brand{font-size:25px;font-weight:600;letter-spacing:-.8px}.logo{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--green);color:#f6f5e9}.logo svg{width:30px;height:30px}.tag{font-size:8px;letter-spacing:2px;margin-left:6px}.quiet{font-size:12px;font-weight:500}.quiet:hover{background:var(--soft)}header #theme-toggle,header #sound{border:1px solid var(--line);border-radius:30px;padding:10px 15px}main{max-width:1440px;padding:0 36px}.eyebrow{font-size:10px;letter-spacing:1.8px;color:#728564}.intro:before,.intro:after{display:none}.intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:left;gap:40px;padding:65px 22px 58px;min-height:490px}.hero-copy>.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:9px;letter-spacing:1.4px}.hero-copy>.eyebrow i{width:6px;height:6px;border-radius:50%;background:#789364;box-shadow:0 0 0 4px #78936415}h1{font-size:clamp(48px,5vw,72px);letter-spacing:-2.8px;margin:18px 0 20px;line-height:1.08}h1 em{color:#748b5b}.intro p{font-size:15px;line-height:1.7}.hero-cta{display:inline-flex;align-items:center;gap:30px;margin:10px 0 24px;padding:15px 21px;background:var(--green);color:white;border-radius:10px;text-decoration:none;font-size:13px;font-weight:600;box-shadow:0 4px 10px #294d3619;transition:transform .2s}.hero-cta:hover{transform:translateY(-2px);background:#234f3b}.hero-cta>span{font-size:20px}.hero-notes{display:flex;gap:17px;font-size:10px;color:var(--muted)}.hero-notes span:before{content:'\2713';margin-right:5px;color:#80956b}.hero-art{position:relative;height:360px;min-width:0}.hero-orbit{position:absolute;inset:5% 2%;background:#e2e8d6;border-radius:52% 48% 45% 55%;transform:rotate(-12deg)}.hero-photo{position:absolute;width:57%;margin:0;padding:10px 10px 0;background:#fffef7;box-shadow:0 14px 24px #2b443125;border:1px solid #fff;border-radius:4px}.hero-photo img{width:100%;height:240px;object-fit:cover;display:block}.hero-photo figcaption{padding:12px 3px 13px;font:italic 15px 'Playfair Display',serif;color:#617358}.hero-photo-back{right:2%;top:12px;transform:rotate(11deg)}.hero-photo-front{left:2%;top:48px;transform:rotate(-9deg);z-index:1}.hero-sticker{position:absolute;right:0;bottom:5px;z-index:2;background:#e9c77f;border:5px solid var(--paper);width:119px;height:119px;display:grid;align-content:center;text-align:center;border-radius:50%;font:italic 15px/1.4 'Playfair Display',serif;color:#4a4b2e;transform:rotate(9deg)}.hero-spark{position:absolute;top:-5px;left:22px;z-index:3;color:#809565;transform:rotate(-15deg)}.hero-spark svg{width:55px;height:55px}.section-title{margin-bottom:22px}.section-title h2{font-size:28px;letter-spacing:-.5px}.section-title>span{font-size:12px}.gallery{gap:22px;scroll-margin-top:24px}.card,.card:hover{background:var(--surface);border:1px solid var(--line);box-shadow:0 5px 20px #29443106;border-radius:16px}.card:hover{box-shadow:0 16px 34px #29443118}.card .photo{height:236px}.card-body{padding:23px}.card h3{font-size:25px;letter-spacing:-.5px}.card p{font-size:13px;margin:8px 0 22px}.badge{background:#fffdf1ec;backdrop-filter:blur(4px);color:#38533c;border-radius:30px;padding:8px 11px;font-size:8px}.card-foot{font-size:9px;letter-spacing:.5px}.card-foot b{width:34px;height:34px;border-color:var(--line);background:var(--soft)}.daily-card{border-radius:16px;padding:28px;background:var(--green);border-color:transparent;color:#fffef2;box-shadow:var(--shadow)}.daily-card .eyebrow{color:#bed0a5;font-size:8px}.daily-card h2{font-size:26px}.daily-card p,.daily-card small{color:#d0ddc9;font-size:12px}.daily-card small{font-size:10px;line-height:1.6;display:block}.daily-card .primary{background:#f4f1df;color:#2b513a;white-space:normal;min-width:140px;padding:15px;font-size:12px}.daily-card .primary:hover{background:white}.room-card{background:#e9e6da;color:var(--ink);box-shadow:none;border:1px solid var(--line)}.room-card .eyebrow{color:#8b8769}.room-card p{color:var(--muted)}.room-card button{background:var(--surface);font-size:12px;min-width:155px}.bottom-grid{gap:18px;margin-top:0}.upload,.resume{background:var(--surface);border:1px dashed #c1cdb7;border-radius:16px;padding:25px;box-shadow:0 4px 18px #243e3005}.upload:hover,.resume:hover{background:var(--soft)}.upload h3,.resume h3{font-size:15px}.upload p,.resume p{font-size:12px}.upload strong,.resume b{font-size:12px}.upload-icon{background:var(--soft);flex-shrink:0}.resume>span{color:#7c9668}footer{padding:30px 0;font-size:8px;letter-spacing:1.2px;border-top:1px solid var(--line);margin-top:15px}dialog{background:var(--surface);border:1px solid var(--line);padding:28px;border-radius:20px}dialog::backdrop{background:#142d2780;backdrop-filter:blur(8px)}dialog .close{line-height:1;background:var(--surface);color:var(--ink);width:38px;height:38px;padding:0;display:grid;place-items:center}.difficulty button{border-radius:11px}.difficulty .selected{background:var(--soft);box-shadow:inset 0 0 0 1px var(--green)}.primary{border-radius:10px}.progress i{background:#819c64}.dark{--paper:#14291f;--ink:#e8eddf;--muted:#a4b4a5;--green:#60916d;--line:#354e3d;--surface:#1c3427;--soft:#294332;--shadow:0 12px 38px #0002}.dark body{background:radial-gradient(ellipse at 95% 0%,#28432c 0,transparent 40%),var(--paper)}.dark .card,.dark .card:hover,.dark .preview-wrap{background:var(--surface)}.dark .hero-orbit{background:#29432c}.dark .hero-sticker{border-color:var(--paper)}.dark .daily-card{background:#294c36;border-color:#3b5c3d}.dark .room-card{background:#343a29}.dark .daily-card p,.dark .daily-card small{color:#c0cfb9}.dark .upload-icon,.dark .difficulty .selected{background:var(--soft)}.dark canvas{filter:none}.dark .tray-bar button.active{background:var(--green)}
@media(min-width:801px){#lobby{display:grid;grid-template-columns:1fr 1fr;gap:22px}.intro{grid-column:1/-1;order:0;margin-bottom:0}.section-title{grid-column:1/-1;order:1;margin-bottom:0}.gallery{grid-column:1/-1;order:2;margin-bottom:8px}.daily-card{order:3;margin:0;display:flex;align-items:center;gap:15px}.room-card{order:4}.bottom-grid{order:5;grid-column:1/-1}.bottom-grid .resume{border-style:solid}footer{order:6;grid-column:1/-1}.game-playing header{height:68px}.game-playing main{max-width:1640px;padding:0 26px}.game-top{padding:24px 0 18px;gap:20px}.game-top h2{font-size:28px}.game-top #back{border:1px solid var(--line);background:var(--surface);border-radius:30px;padding:10px 17px}.stats{padding:10px 17px;min-width:128px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.stats b{font-size:17px}.stats span{font-size:10px}.room-bar{padding:12px 17px;margin-bottom:18px;border:1px solid var(--line);background:var(--surface);border-radius:12px;gap:8px}.room-bar>span{display:flex;align-items:center;gap:8px;font-size:11px}.room-bar>span:before{content:'';width:7px;height:7px;border-radius:50%;background:#8a9d6c}.room-bar button{background:var(--soft);border-color:transparent;border-radius:7px;padding:9px 13px}.room-bar #room-create{background:var(--green);color:white}.play-layout{grid-template-columns:208px 1fr;gap:20px;align-items:start}aside{background:var(--surface);padding:18px;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.preview-wrap{padding:5px;margin:0 0 22px;transform:rotate(-2deg);background:#fffcf0}.preview-wrap img{aspect-ratio:3/2;object-fit:cover;border-radius:2px}aside>.eyebrow{font-size:8px}aside p{font-size:11px;margin:10px 0 18px}aside button{font-size:11px;display:flex;align-items:center;gap:9px;min-height:40px;padding:10px 8px;border-radius:8px;margin-bottom:3px}aside button svg{width:16px;height:16px;opacity:.65;flex-shrink:0}aside small{font-size:9px;line-height:1.6}.progress{margin-top:18px;height:5px;background:var(--soft)}.board-area{background:var(--surface);border:1px solid var(--line);padding:14px;border-radius:16px;box-shadow:var(--shadow)}.tray-bar{margin:0 0 10px;gap:8px}.tray-bar button,.tray-bar select{border-color:var(--line);font-size:10px;min-height:36px;padding:8px 10px;border-radius:8px;background:var(--paper)}.tray-bar>div:first-child{background:var(--soft);padding:3px;border-radius:10px;gap:2px}.tray-bar>div:first-child button{border:0;background:none}.tray-bar>div:first-child .active{background:var(--green);color:white;box-shadow:0 2px 5px #0001}.tray-pages{justify-content:space-between;padding:0 4px;gap:8px;margin:0;font-size:10px}.tray-pages button{font-size:10px;padding:7px 10px;border-color:transparent}.tray-help{font-size:10px;padding:0 4px;margin:5px 0 12px}.canvas-viewport{height:min(64vh,850px);min-height:400px;max-height:none;border-radius:12px;outline:1px solid #15291b12;background:#d9e3d6;scrollbar-width:thin;scrollbar-color:#8caa84 transparent}canvas{border-radius:12px;cursor:grab;box-shadow:none}canvas:active{cursor:grabbing}.board-bottom{padding:12px 3px 0;gap:12px}.board-bottom>div{background:var(--soft);border-radius:8px;padding:3px;min-width:142px;justify-content:space-between}.board-bottom button{font-size:16px;min-width:34px;min-height:29px}.board-bottom>span{font-size:10px}.dark .canvas-viewport{background:#263f36}#toast{z-index:100}}
@media(min-width:801px) and (max-width:1100px){.intro{gap:20px;padding:45px 0}.hero-photo img{height:210px}.hero-art{height:320px}.hero-notes{gap:10px;font-size:9px}.daily-card{display:block}.daily-card>button{margin-top:16px;width:100%}.card .photo{height:200px}.card h3{font-size:22px}.card-body{padding:18px}.play-layout{grid-template-columns:175px 1fr;gap:14px}aside{padding:14px}.board-area{padding:10px}.game-top h2{font-size:25px}.tag{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button,.card,.hero-cta,.card img{transition:none}}
@media(min-width:801px){.game-top{padding:16px 0}.game-top h2{font-size:26px}.room-bar{padding:8px 14px;margin-bottom:14px}.board-area{padding:12px}.tray-bar{margin-bottom:6px}.tray-bar button,.tray-bar select{min-height:32px}.tray-pages button{padding:5px 10px}.tray-help{line-height:1.3;margin:2px 0 9px}.canvas-viewport{height:calc(100dvh - 400px);min-height:320px;max-height:850px}}