:root { color-scheme: light; --ink:#25303b; --tomato:#376a83; --gold:#dfa63c; --cream:#f7fbff; --sage:#4e7768; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; font-family:Inter,ui-rounded,system-ui,sans-serif; color:var(--ink); background:radial-gradient(circle at top,#fff4c8,#b9d9e9 56%,#7399b0); padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom); }
button,select { font:inherit; }
.shell { width:min(960px,calc(100% - 24px)); margin:auto; padding:12px 0 28px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.top a { display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:#fff; color:var(--tomato); text-decoration:none; font-size:25px; }
.top select { width:auto; }
.panel { border:1px solid #fff; border-radius:28px; background:#f7fbfff2; box-shadow:0 20px 60px #20384b2e; padding:28px; }
.menu,.overlay { max-width:780px; margin:auto; text-align:center; }
.hero-icon { font-size:58px; }
.kicker { font-size:12px; font-weight:900; letter-spacing:.14em; color:var(--tomato); }
h1 { margin:9px 0; font-size:clamp(36px,8vw,64px); line-height:1; }
h2 { margin:0; font-size:clamp(22px,5vw,31px); }
.settings { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:620px; margin:22px auto; text-align:left; }
.settings span { display:block; margin-bottom:6px; font-size:13px; font-weight:850; }
select,button { min-height:48px; border:1px solid #d8b990; border-radius:14px; background:#fff; color:var(--ink); padding:10px 14px; font-weight:800; }
select { width:100%; }
button { cursor:pointer; }
button:focus-visible,select:focus-visible { outline:4px solid #315f9c; outline-offset:2px; }
.primary { border:0; background:linear-gradient(135deg,#f6c14d,#d96547); color:#2d1c13; }
.menu>.primary { width:min(360px,100%); }
.boundary { display:block; max-width:680px; margin:16px auto 0; line-height:1.5; color:#6c5a4d; }
.hidden { display:none!important; }
.hud { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.hud span { min-width:105px; border-radius:15px; background:#f3dfb9; padding:8px 13px; text-align:center; }
.hud small,.hud b { display:block; }
.hud small { font-size:10px; font-weight:900; }
.hud b { font-size:21px; }
.hud i { font-style:normal; }
.task-title { display:flex; align-items:center; justify-content:center; gap:15px; margin:22px auto 14px; text-align:left; }
.task-title>span { font-size:54px; }
.task-title small { font-weight:900; color:var(--tomato); }
.sequence { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; min-height:100px; margin:12px 0; padding:0; list-style:none; }
.sequence li { display:grid; place-items:center; min-height:92px; border:2px dashed #d8b990; border-radius:16px; background:#fff; text-align:center; }
.sequence li.done { border-style:solid; border-color:#6fa37f; background:#e8f2e9; }
.sequence .number { font-size:11px; font-weight:900; color:#815a3c; }
.sequence .emoji { display:block; font-size:31px; }
.sequence b { display:block; font-size:12px; line-height:1.2; }
#prompt { text-align:center; font-weight:900; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.cards button { min-height:112px; }
.cards button .emoji { display:block; font-size:40px; }
.cards button.used { visibility:hidden; }
.cards button.hinted { outline:5px solid var(--gold); animation:pulse .75s ease-in-out infinite alternate; }
.cards button.wrong { outline:5px solid #c53e45; }
.tools { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; }
#feedback { min-height:28px; text-align:center; font-weight:850; color:var(--tomato); }
.result-grid { display:flex; justify-content:center; gap:15px; margin:20px; }
.result-grid span { min-width:140px; border-radius:18px; background:#f3dfb9; padding:15px; }
.result-grid small,.result-grid b { display:block; }
.result-grid b { font-size:30px; }
@keyframes pulse { to { transform:translateY(-3px); } }
@media(max-width:680px) { .panel{padding:20px 14px}.settings{grid-template-columns:1fr}.sequence{grid-template-columns:repeat(3,1fr)}.cards{grid-template-columns:repeat(2,1fr)}.hud span{min-width:72px;flex:1}.hero-icon{font-size:44px}h1{font-size:36px}.task-title>span{font-size:44px} }
@media(prefers-reduced-motion:reduce) { .cards button.hinted{animation:none} }