/* A fresh visual language: cozy pastel tabletop, one tidy game board. */
:root{--cream:#fff9ed;--paper:#fffdf7;--ink:#4c3e68;--muted:#837595;--lav:#896bc3;--lav-dark:#5e477f;--mint:#83d7bd;--peach:#ffb982;--line:#e4d7f3;color-scheme:light}html{background:#f6eaf6}body{min-height:100vh;margin:0;padding:26px 16px 38px;color:var(--ink);background:radial-gradient(circle at 12% 12%,#fff6bd 0 2px,transparent 3px),radial-gradient(circle at 84% 20%,#bdece0 0 3px,transparent 4px),radial-gradient(circle at 8% 73%,#ffd4cb 0 3px,transparent 4px),linear-gradient(135deg,#f7eafd,#e8f5f0 52%,#fff2df)}.app{max-width:850px;margin:auto}.hero{position:relative;text-align:center;padding:4px 0 17px}.hero:after{display:none}.eyebrow{color:#9c719a;font-size:.65rem;letter-spacing:.19em;font-weight:900}.hero h1{margin:6px 0 3px;color:#5a457d;font-size:clamp(2.1rem,6vw,3.3rem);letter-spacing:-.06em;line-height:1}.hero p{margin:0;color:#89769b;font-size:.92rem}.hero-mascot{position:absolute;right:calc(50% - 350px);bottom:-14px;width:94px;height:94px;object-fit:contain;filter:drop-shadow(0 8px 8px #8a628344);rotate:7deg}.shell{position:relative;overflow:visible;padding:20px;background:var(--paper);border:2px solid #eadff3;border-radius:30px;box-shadow:0 18px 45px #72538425}.shell:before{content:"";position:absolute;inset:7px;border:1px dashed #ead4aa;border-radius:24px;pointer-events:none}.heading,.options,.stats,.streak,.progress,.board-frame,.message,.actions,.mini,.quest-strip{position:relative}.quest-strip{display:flex;align-items:center;gap:9px;max-width:620px;margin:0 auto 13px;padding:9px 11px;border-radius:15px;background:#f7edff;border:1px solid #e4d4f5;color:#664c83}.quest-orb{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:linear-gradient(135deg,#ffc67c,#f69d91);color:white;box-shadow:0 3px 0 #db8880}.quest-copy small{color:#a182a5;font-size:.55rem;font-weight:900;letter-spacing:.12em}.quest-copy strong{font-size:.75rem}.quest-stars{margin-left:auto;color:#d89d48;letter-spacing:1px}.heading{display:flex;align-items:center;justify-content:space-between;margin:0 auto 10px;max-width:620px}.heading h2{margin:0;font-size:1rem;color:#715583}.pill{padding:6px 10px;border-radius:999px;background:#e3f5ec;color:#41856d;font-size:.68rem;font-weight:900}.options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:620px;margin:auto;padding:8px;border-radius:15px;background:#faf6ef;border:1px solid #eee2d2}.field label{display:block;margin:0 0 4px;color:#a2878b;font-size:.58rem;font-weight:900;letter-spacing:.05em}select{width:100%;height:38px;padding:0 9px;border:1px solid #e0d3e9;border-radius:10px;background:#fff;color:#624f75;font-weight:800}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;max-width:620px;margin:12px auto 8px}.stat{padding:8px 9px;border:1px solid #eee0f3;border-radius:13px;background:#fcf8ff;text-align:center}.stat span{display:block;color:#aa95b0;font-size:.58rem;font-weight:800}.stat strong{display:block;margin-top:3px;color:#62497b;font-size:1.28rem;line-height:1}.streak{min-height:20px;margin:3px 0 7px;color:#5f9d85;text-align:center;font-size:.73rem;font-weight:900}.progress{max-width:620px;height:7px;margin:0 auto 13px;border-radius:99px;background:#f3e8f4;overflow:hidden}.progress div{height:100%;background:linear-gradient(90deg,#ffb987,#89d8bd);border-radius:inherit}.board-frame{max-width:650px;margin:auto;padding:11px;border:2px solid #dfd0ed;border-radius:24px;background:linear-gradient(145deg,#a889ca,#755793);box-shadow:0 10px 0 #604276,0 18px 28px #61476b2b}.board-caption{display:flex;justify-content:space-between;padding:0 3px 8px;color:#fff7e9;font-size:.61rem;font-weight:900;letter-spacing:.13em}.board-caption span:last-child{padding:3px 7px;border-radius:999px;background:#ffffff2a;letter-spacing:.03em}.board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:9px;padding:9px;border-radius:17px;background:#60477d;border:1px solid #ffffff3b}.tile{position:relative;width:100%;aspect-ratio:1/1.04;padding:0;border:0;border-radius:12px;background:transparent;transform-style:preserve-3d;transition:transform .3s ease}.tile.revealed,.tile.matched{transform:rotateY(180deg)}.tile-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden}.tile-back{background:linear-gradient(145deg,#ffd6bf,#f1a6b3);border:3px solid #fff3e9;box-shadow:inset 0 0 0 3px #b77aa5,0 4px 0 #805374}.tile-back:before{content:"";position:absolute;inset:9px;border:2px dashed #fff9e5;border-radius:7px}.tile-back:after{content:"✦";display:grid;place-items:center;width:34%;aspect-ratio:1;border-radius:50%;background:#fff6d9;color:#c67c94;font-size:clamp(1rem,3vw,1.55rem);box-shadow:0 3px 0 #d59089}.tile-front{overflow:hidden;transform:rotateY(180deg);background:#fffdf9;border:3px solid #fff4ea;box-shadow:inset 0 0 0 2px #d7c5eb}.memory-art{width:100%;height:100%;padding:10px;object-fit:contain;filter:drop-shadow(0 5px 4px #754a5522)}.tile.matched .tile-front{background:#ddf6ea;border-color:#fff}.tile.matched .tile-front:after{content:"✓";position:absolute;right:5px;top:3px;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#65b696;color:white;font-size:12px;font-weight:900}.tile:not(:disabled):not(.revealed):hover{transform:translateY(-4px) rotate(-1deg)}.message{min-height:20px;margin:13px 0 10px;color:#7e668a;text-align:center;font-size:.82rem;font-weight:800}.actions{display:flex;justify-content:center;gap:7px;flex-wrap:wrap}.btn{min-height:40px;padding:9px 12px;border:1px solid #dfcce9;border-radius:11px;background:#f6edfb;color:#654d7a;font-size:.76rem;font-weight:900}.btn.primary{background:linear-gradient(135deg,#8cdbbd,#6fc7ae);border-color:#6db99f;color:#164d40;box-shadow:0 3px 0 #4d9c87}.mini{margin:11px 0 0;color:#a18da4;text-align:center;font-size:.64rem}.meta,footer{color:#9d89a2;text-align:center;font-size:.72rem;margin-top:14px}.overlay{background:#6e5179a6;backdrop-filter:blur(7px)}.modal{max-width:410px;border:2px solid #ead8f3;border-radius:27px;background:#fffaf1;color:#604b70;box-shadow:0 24px 70px #3e254766}.modal p{color:#806d8d}.start-card{padding:25px 22px 22px}.start-mascot{width:150px;height:150px;object-fit:contain;margin:-25px auto -7px;filter:drop-shadow(0 9px 8px #78547644)}.start-card h2{font-size:1.9rem;color:#5d4576}.start-list span{background:#f3e6f7;border:1px solid #e4cfea;color:#795f8d}.pause-avatar{filter:drop-shadow(0 9px 10px #76527644)}
@media(max-width:640px){body{padding:13px 9px 26px}.hero{padding:4px 0 13px}.hero h1{font-size:2.1rem}.hero-mascot{right:1px;bottom:-6px;width:70px;height:70px}.shell{padding:13px 10px;border-radius:21px}.shell:before{inset:5px;border-radius:16px}.quest-strip{margin-bottom:10px;padding:8px}.quest-stars{font-size:.68rem}.options{grid-template-columns:1fr 1fr}.field:last-child{grid-column:span 2}.stats{gap:5px}.stat{padding:7px 4px}.stat strong{font-size:1.05rem}.board-frame{padding:7px;border-radius:18px;box-shadow:0 7px 0 #604276,0 12px 20px #61476b2b}.board{gap:6px;padding:6px;border-radius:13px}.tile,.tile-face{border-radius:9px}.tile-back{border-width:2px;box-shadow:inset 0 0 0 2px #b77aa5,0 3px 0 #805374}.tile-back:before{inset:6px}.actions .btn{flex:1 1 auto;padding:8px 7px;font-size:.68rem}.mini{display:none}.start-mascot{width:125px;height:125px}}