.logo{--logo-size:5rem;object-fit:contain;inline-size:var(--logo-size)}.logo.is-large{--logo-size:12rem}@media (width<=35rem){.logo{--logo-size:4rem}.logo.is-large{--logo-size:8rem}}.top{border-radius:var(--radius-lg);border:1px solid var(--surface-strong);background:var(--surface-soft);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);justify-content:space-between;align-items:center;gap:.75rem;padding:.625rem .875rem;display:flex}@media (width<=35rem){.top{padding:.5rem .625rem}}.top .logo-badge{block-size:5.25rem;inline-size:5.25rem}@media (width<=35rem){.top .logo-badge{block-size:4rem;inline-size:4rem}}.top .logo-badge .logo-image{block-size:5rem;inline-size:5rem}@media (width<=35rem){.top .logo-badge .logo-image{block-size:3.75rem;inline-size:3.75rem}}.top .brand{align-items:center;gap:.625rem;display:flex}.top h1{letter-spacing:0;color:var(--ink);background:var(--logo-text-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(1.08rem,2.2vw,1.65rem)}.top .subtitle{color:var(--soft-ink);white-space:normal;text-overflow:ellipsis;font-size:clamp(1.02rem,1.5vw,1.12rem);overflow:hidden}.top .controls{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.top .sound-toggle{border-radius:var(--radius-sm);cursor:pointer;background:var(--surface-strong);block-size:2.625rem;inline-size:2.625rem;box-shadow:var(--shadow-control);border:2px solid #0000;place-items:center;transition:background .2s,box-shadow .2s,border-color .2s;display:grid}@media (width<=35rem){.top .sound-toggle{block-size:2.375rem;inline-size:2.375rem}}.top .sound-toggle svg{block-size:1.375rem;inline-size:1.375rem}.top .sound-toggle.is-on{color:#2f7a57;border-color:#42a87873}.top .sound-toggle.is-off{color:#c44650;border-color:#dc545e73}.top .sound-toggle:hover{background:var(--surface-tint);box-shadow:var(--shadow-control)}.top .sound-toggle:focus-visible{box-shadow:var(--focus-ring), var(--shadow-control);outline:none}dialog[open]{border-radius:var(--radius-lg);background:var(--surface-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;block-size:fit-content;max-block-size:none;inline-size:min(100% - 1rem,28rem);box-shadow:var(--shadow-lift);border:none;grid-auto-rows:min-content;align-content:start;gap:1rem;margin:auto;padding:1rem;transition:opacity .2s,transform .2s;display:grid;overflow:visible}@starting-style{dialog[open]{opacity:0;transform:scale(.95)}}@media (width<=35rem){dialog[open]{gap:.5rem;width:min(100% - .75rem,26rem);padding:.85rem}}dialog[open]>*{margin:0}dialog[open]::backdrop{background:var(--backdrop-scrim);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:.85;transition:opacity .2s,-webkit-backdrop-filter .2s,backdrop-filter .2s}@starting-style{dialog[open]::backdrop{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}dialog[open] .header{gap:.45rem;display:grid}dialog[open] .header h2{margin:0;font-size:clamp(1.4rem,4.2vw,1.95rem)}dialog[open] .header p{color:var(--soft-ink);margin:0;font-size:1.06rem}dialog[open] .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:.35rem 0;display:grid}dialog[open] .stats .stat{border-radius:var(--border-radius);color:var(--soft-ink);border:1px solid var(--border-soft);gap:.2rem;padding:.55rem .45rem;display:grid}dialog[open] .stats .level{background:var(--gradient-level)}dialog[open] .stats .pairs{background:var(--gradient-pairs)}dialog[open] .stats .time{background:var(--gradient-time)}dialog[open] .stats .moves{background:var(--gradient-moves)}dialog[open] .stats span{font-size:1.05rem}dialog[open] .stats strong{color:var(--ink);font-size:1.1rem}dialog[open] .actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}@media (width<=35rem){dialog[open] .actions{gap:.45rem}}dialog[open] :is(.primary,.secondary){flex:none;width:auto;min-height:0;padding:.625rem 1rem}@media (width<=35rem){dialog[open] :is(.primary,.secondary){width:auto;padding:.5625rem .875rem}}.card{cursor:pointer;perspective:56.25rem;width:var(--card-size);height:calc(var(--card-size) * 1.25);background:0 0;border:none;padding:0;transition:transform .15s}.card:disabled{cursor:default}.card:not(:disabled):hover .card-front{border-color:var(--border-play);background:linear-gradient(145deg,#fff,#f3fbff)}.card:focus-visible{outline:none}.card:focus-visible .card-face{box-shadow:var(--focus-ring), var(--shadow)}:is(.card.is-flipped,.card.is-matched) .card-inner{transform:rotateY(180deg)}.card.is-selected{transform:translateY(-1px)scale(1.02)}.card.is-selected .card-back{box-shadow:var(--selected-ring), var(--shadow-selected)}.card.is-shaking{animation:.34s ease-in-out wrong-pair-shake}@media (prefers-reduced-motion:reduce){.card.is-shaking{animation:none}}.card.is-matched{transform:scale(.98)}.card.is-matched .card-back{box-shadow:0 0 0 3px var(--border-on-light) inset, var(--shadow-match)}.card .card-inner{block-size:100%;inline-size:100%;transform-style:preserve-3d;transition:transform .5s;display:block;position:relative}.card .card-face{border-radius:var(--border-radius);backface-visibility:hidden;box-shadow:var(--shadow);place-items:center;display:grid;position:absolute;inset:0}@media (width<=35rem){.card .card-face{box-shadow:none}}.card .card-front{background:var(--gradient-card-front);border:2px dashed var(--border-medium)}.card .card-mark{color:var(--mark-muted);text-shadow:0 2px #ffffffdb;font-size:clamp(1.4rem,2.5vw,2.2rem);font-weight:700}.card .card-back{border:2px solid var(--border-on-light);text-align:center;box-shadow:var(--shadow-soft);flex-direction:column;justify-content:center;align-items:center;gap:.5rem;padding:.5rem;display:flex;transform:rotateY(180deg)}.card .character-image{object-fit:contain;filter:drop-shadow(0 5px 8px #2f2b3a29);max-block-size:calc(100% - 1.875rem);inline-size:100%}.card .name{color:var(--ink);white-space:nowrap;text-overflow:ellipsis;max-inline-size:100%;font-size:1rem;font-weight:700;line-height:1.1;overflow:hidden}@keyframes wrong-pair-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}.board{--columns:4;--card-size:6.25rem;--board-gap:.625rem;grid-template-columns:repeat(var(--columns), var(--card-size));gap:var(--board-gap);background:0 0;place-content:center;max-block-size:100%;inline-size:max-content;max-inline-size:100%;display:grid}@media (width<=35rem){.board{background:0 0}}.board-wrap{background:0 0;justify-content:center;align-items:center;block-size:100%;min-block-size:0;inline-size:100%;display:flex;overflow:hidden}@media (width<=35rem){.board-wrap{background:0 0}}.status-dock{background:var(--surface-soft);border:1px solid var(--surface-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;padding:.5rem;display:grid}@media (width<=53.75rem){.status-dock{gap:.25rem;padding:.25rem}}@media (width<=35rem){.status-dock{gap:.375rem}.status-dock .status-label{display:none}}.status-dock .status-item{text-align:center;border-radius:var(--radius-md);background:var(--surface-strong);border:1px solid var(--border-soft);min-width:0;color:var(--soft-ink);flex-direction:column;gap:.125rem;padding:.5rem .375rem;display:flex}@media (width<=53.75rem){.status-dock .status-item{padding:.4375rem .25rem}}@media (width<=35rem){.status-dock .status-item{flex-direction:row;justify-content:center;align-items:center;gap:.375rem;padding:.5rem .25rem}}.status-dock .status-item.level{background:var(--gradient-level)}.status-dock .status-item.pairs{background:var(--gradient-pairs)}.status-dock .status-item.time{background:var(--gradient-time)}.status-dock .status-item.moves{background:var(--gradient-moves)}.status-dock .status-item span{white-space:normal;font-size:1.05rem}.status-dock .status-item strong{color:var(--ink);white-space:normal;font-size:1.08rem}.status-dock .status-icon{color:var(--ink);flex:none;width:1.25rem;height:1.25rem;display:none}@media (width<=35rem){.status-dock .status-icon{justify-content:center;align-items:center;font-size:1.25rem;display:inline-flex}}.welcome{border-radius:var(--radius-lg);border:1px solid var(--surface-strong);background:rgb(from var(--surface) r g b / 50%);inline-size:min(100%,53.75rem);box-shadow:var(--shadow-lift);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:1rem;max-height:min(92dvh,45rem);margin-inline:auto;padding:1rem;display:grid}@media (width<=35rem){.welcome{border-radius:var(--radius-md);max-height:min(92dvh,42.5rem);margin:0 auto;padding:.75rem}}.welcome h1{color:var(--ink);background:var(--logo-text-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:clamp(1.35rem,3.1vw,2.2rem)}.welcome p{color:var(--soft-ink);font-size:1.06rem;font-weight:500}.welcome .brand{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:0;display:flex}.welcome .character-selector{grid-template-rows:auto minmax(0,1fr);gap:.5rem;display:grid;position:relative}@media (width<=53.75rem){.welcome .character-selector{gap:.45rem}}.welcome .character-selector h2{color:var(--soft-ink);text-align:center;font-size:1.3rem;font-weight:700}.welcome .character-list{scrollbar-width:thin;scrollbar-color:#5b5566bf transparent;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:.0625rem .25rem .75rem;list-style:none;display:grid;overflow-y:auto}@media (width<=53.75rem){.welcome .character-list{grid-template-columns:1fr}}.welcome .character-scroll-hint{border-radius:var(--radius-pill);border:1px solid var(--border-medium);background:var(--surface-strong);block-size:2.75rem;inline-size:2.75rem;box-shadow:var(--shadow-control);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none;z-index:2;opacity:1;align-content:center;justify-items:center;gap:.125rem;transition:opacity .2s,transform .2s;display:grid;position:absolute;bottom:.5rem;left:50%;transform:translate(-50%)}@media (width<=53.75rem){.welcome .character-scroll-hint{width:2.5rem;height:2.5rem;bottom:.375rem}}.welcome .character-scroll-hint.is-hidden{opacity:0;transform:translate(-50%,.375rem)scale(.92)}.welcome .scroll-chevron{border-bottom:3px solid #494359c7;border-right:3px solid #494359c7;block-size:.75rem;inline-size:.75rem;animation:1.15s ease-in-out infinite scroll-chevron-drop;transform:rotate(45deg)}.welcome .scroll-chevron:last-child{margin-top:-.5rem;animation-delay:.14s}@media (prefers-reduced-motion:reduce){.welcome .scroll-chevron{opacity:.85;animation:none}}.welcome .character-option{border:2px solid var(--border-soft);border-radius:var(--border-radius);cursor:pointer;background:var(--surface);gap:.375rem;padding:.625rem;transition:background .2s,border-color .2s,box-shadow .2s;display:grid;box-shadow:inset 0 1px #ffffffd9}.welcome .character-option:hover{background:var(--surface-strong);border-color:var(--border-medium)}.welcome .character-option:has(input:checked){border-color:var(--border-play);background:var(--surface-tint);box-shadow:inset 0 0 0 1px #7171e72e}.welcome .character-option:focus-within{box-shadow:var(--focus-ring), var(--shadow-control);outline:none}.welcome .character-option-head{align-items:center;gap:.5rem;display:flex}.welcome .character-option-head input{accent-color:#69aef7;margin:0}.welcome .character-option-head h3{font-size:1.18rem;font-weight:700}.welcome .character-preview{gap:.375rem;display:flex}.welcome .preview-avatar{border-radius:var(--radius-sm);border:1px solid var(--border-soft);background:var(--surface-strong);object-fit:contain;block-size:3.5rem;inline-size:3.5rem;box-shadow:var(--shadow-avatar)}@media (width<=35rem){.welcome .preview-avatar{block-size:2.875rem;inline-size:2.875rem}}.welcome .preview-more{color:var(--soft-ink);background:linear-gradient(145deg,#f0f5ff,#e7eeff);border-style:dashed;place-items:center;display:grid}.welcome .preview-more-icon{block-size:1.375rem;inline-size:1.375rem}.welcome .start-button{justify-self:center;align-items:center;gap:.375rem;display:inline-flex}.welcome .button-icon{block-size:1.25rem;inline-size:1.25rem}.welcome footer{text-align:center;color:var(--soft-ink)}.welcome footer div{justify-content:center;gap:.25rem;display:flex}.welcome footer ul{align-items:center;gap:.25rem;margin-block-end:.5rem;list-style:none;display:flex}.welcome footer a{color:inherit;transition:color .2s}.welcome footer a:hover{color:var(--ink)}@keyframes scroll-chevron-drop{0%{opacity:0;transform:translateY(-.25rem)rotate(45deg)}30%{opacity:1}to{opacity:0;transform:translateY(.4375rem)rotate(45deg)}}.app{flex-direction:column;gap:.625rem;max-width:73.75rem;height:100dvh;margin-inline:auto;padding:.75rem 1rem 1rem;display:flex;overflow:hidden}.app .main-content{flex:1;min-height:0;display:flex;overflow:hidden}.app .main-content.is-welcome{justify-content:center;align-items:center}.app .main-content.is-game{background:0 0}@media (width<=53.75rem){.app{gap:.5rem;padding:.625rem .625rem .75rem}}@media (width<=35rem){.app .main-content.is-game{background:0 0}}:root{color:#2f2b3a;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--ink:#2f2b3a;--soft-ink:#5b5566;--surface:#ffffffc7;--surface-strong:#ffffffed;--surface-soft:#ffffffa8;--surface-tint:#f7f3ffdb;--border-soft:#2f2b3a1a;--border-medium:#2f2b3a29;--border-play:#7171e775;--border-on-light:#ffffffb8;--mark-muted:#2f2b3a80;--backdrop-scrim:#2f2b3a2e;--bg-gradient:linear-gradient(135deg, #dff4ff 0%, #fff8df 34%, #f4edff 68%, #e2f8ec 100%);--shadow:0 12px 30px #402c6e1f;--shadow-soft:0 10px 24px #402c6e1a;--shadow-lift:0 16px 26px #402c6e29;--shadow-control:0 8px 14px #402c6e1f;--shadow-primary:0 10px 18px #5a66cf33;--shadow-primary-hover:0 14px 20px #5a66cf3d;--shadow-avatar:0 5px 10px #402c6e14;--shadow-selected:0 0 18px #7c7cef38;--shadow-match:0 10px 18px #42a87829;--focus-ring:0 0 0 4px #ffd469a8;--selected-ring:0 0 0 3px #ffeaa7b3;--radius-sm:12px;--radius-md:16px;--radius-lg:24px;--radius-pill:999rem;--border-radius:var(--radius-md);--gradient-primary:linear-gradient(135deg, #77d8ff, #bda5ff 52%, #ffcae0);--gradient-primary-hover:linear-gradient(135deg, #8fe0ff, #c8b5ff 52%, #ffd4e8);--logo-text-gradient:linear-gradient(90deg, #279ee8 0%, #f4bf2f 48%, #ef5f77 100%);--gradient-card-front:radial-gradient(circle at 28% 24%, #fffffff2 0 12%, transparent 13%), radial-gradient(circle at 72% 72%, #ffeaa7cc 0 14%, transparent 15%), linear-gradient(145deg, #fff, #e9f7ff);--gradient-level:linear-gradient(145deg, #e5f2ff, #cfe7ff);--gradient-pairs:linear-gradient(145deg, #e9f8e7, #d9f2d2);--gradient-time:linear-gradient(145deg, #fff0d9, #ffe4bf);--gradient-moves:linear-gradient(145deg, #f0e8ff, #e5d9ff);font-family:Fredoka,Trebuchet MS,Arial,sans-serif;line-height:1.35}*{box-sizing:border-box}body{background:var(--bg-gradient);min-block-size:100dvh}:where(body,h1,h2,h3,h4,h5,h6,p,ul){margin:0}:where(ul){padding:0}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance;line-height:1.2}:where(p){text-wrap:pretty}:where(button,input,select,textarea){font:inherit}:where(img){max-inline-size:100%;display:block}.primary{border-radius:var(--radius-pill);background:var(--gradient-primary);color:#1f1c2b;box-shadow:var(--shadow-primary);cursor:pointer;border:none;padding:.75rem 1.25rem;font-size:1.05rem;font-weight:700;transition:background .2s,box-shadow .2s}.primary:hover{background:var(--gradient-primary-hover);box-shadow:var(--shadow-primary-hover)}.primary:focus-visible{box-shadow:var(--focus-ring), var(--shadow-primary-hover);outline:none}.secondary{border:2px solid var(--border-medium);border-radius:var(--radius-pill);background:var(--surface-strong);color:var(--ink);cursor:pointer;box-shadow:var(--shadow-control);padding:.625rem 1.125rem;font-size:1.05rem;font-weight:700;transition:background .2s,border-color .2s,box-shadow .2s}.secondary:hover{border-color:var(--border-play);background:var(--surface-tint);box-shadow:var(--shadow-lift)}.secondary:focus-visible{box-shadow:var(--focus-ring), var(--shadow-lift);outline:none}