:root{font-family:'Noto Sans KR',sans-serif;color:#fff;--ink:#28174c;--violet:#6c40e8;--pink:#ff72b1;--yellow:#ffe17c}*{box-sizing:border-box}html{min-width:320px}body{margin:0;min-height:100vh;background:radial-gradient(circle at 7% 9%,#6a45c7 0,transparent 24%),radial-gradient(circle at 94% 68%,#5c39b6 0,transparent 27%),linear-gradient(135deg,#2b1c5d,#20113f 75%);overflow-x:hidden}.app-shell{position:relative;z-index:1;max-width:1170px;margin:auto;padding:26px 28px 20px}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}.brand{display:flex;align-items:center;gap:13px}.brand-badge{display:grid;place-items:center;width:49px;height:49px;border-radius:17px;background:linear-gradient(145deg,#ffc76b,#ff7997);box-shadow:0 6px 0 #a0408e,0 12px 25px #09022855;color:#fff;font-size:31px}.brand-top{display:block;font-family:Fredoka,sans-serif;font-size:13px;letter-spacing:.26em;font-weight:700;color:#e8d8ff;line-height:1}.brand h1{font-family:Fredoka,'Noto Sans KR',sans-serif;font-size:34px;line-height:1.1;letter-spacing:.01em;margin:3px 0 0;text-shadow:0 3px 0 #472e89}.icon-button{border:2px solid #a285e6;color:#fff;background:#ffffff1b;border-radius:50%;width:42px;height:42px;font-family:Fredoka,sans-serif;font-size:23px;cursor:pointer}.icon-button:hover,.icon-button:focus-visible{background:#ffffff39;outline:3px solid #ffdb80;outline-offset:3px}.game-layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(450px,620px);justify-content:center;gap:28px;align-items:stretch}.side-panel{padding:32px 28px;border-radius:30px;background:linear-gradient(145deg,#513195,#39246e);border:2px solid #8060c0;box-shadow:inset 0 2px 0 #ffffff22,0 16px 35px #10052b72;display:flex;flex-direction:column}.level-label{display:flex;align-items:center;gap:8px;color:#ffe491;font-family:Fredoka,sans-serif;letter-spacing:.15em;font-size:14px;font-weight:700}.level-sparkle{font-size:23px}.side-panel h2{font-size:30px;line-height:1.35;letter-spacing:-.05em;margin:14px 0 12px;font-weight:800}.side-copy{font-size:16px;line-height:1.6;color:#ded0f4;margin:0 0 24px}.goal-card{border-radius:22px;background:#fff;box-shadow:0 7px 0 #c6a9ee,0 16px 24px #1c0b4c33;color:var(--ink);padding:20px 20px 18px}.goal-top,.score-readout{display:flex;justify-content:space-between;align-items:center;gap:15px}.goal-top span,.score-readout span{font-weight:700;font-size:15px;color:#775f9f}.goal-top strong{font-family:Fredoka,sans-serif;font-size:24px;color:#7e4afa}.progress-track{height:18px;background:#eee5ff;box-shadow:inset 0 2px 3px #8a6ec455;border-radius:99px;overflow:hidden;margin:15px 0}.progress-track>div{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#ff8da4,#ffd773);box-shadow:inset 0 3px 0 #ffffff88;transition:width .3s}.score-readout{border-top:1px dashed #d8c8ec;padding-top:10px}.score-readout strong{font-family:Fredoka,sans-serif;color:#ec4d9e;font-size:31px}.moves-card{margin-top:26px;border:2px solid #a57ae3;border-radius:21px;background:#6f46b9;display:flex;align-items:center;gap:9px;padding:15px 18px;box-shadow:inset 0 3px 0 #ffffff2c;color:#fff;font-weight:700;font-size:17px}.moves-card strong{font-family:Fredoka,sans-serif;font-size:32px;color:#ffe487;margin-left:auto;line-height:1}.moves-icon{font-size:27px;color:#ffd889}.restart-button{margin-top:auto;min-height:50px;border:0;border-radius:16px;background:#ffe083;color:#4d2786;box-shadow:0 6px 0 #bc894d;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .15s}.restart-button:hover{transform:translateY(2px);box-shadow:0 4px 0 #bc894d}.restart-button:active{transform:translateY(5px);box-shadow:0 1px 0 #bc894d}.board-panel{background:linear-gradient(160deg,#8e5eff,#673cc7);border:3px solid #ac8cff;border-radius:34px;padding:19px;box-shadow:inset 0 3px 0 #ffffff68,0 12px 0 #42248d,0 24px 45px #09002299}.board-head{height:35px;display:flex;align-items:center;justify-content:space-between;padding:0 7px 13px;gap:8px}.board-caption{font-family:Fredoka,sans-serif;font-weight:700;letter-spacing:.15em;font-size:14px;color:#ffe596}.board-hint{font-size:14px;color:#efe5ff;font-weight:600}.board-wrap{background:#5530a6;border-radius:22px;padding:11px;box-shadow:inset 0 5px 10px #260d67b0,0 3px 0 #b197ec}.board{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;aspect-ratio:1/1;touch-action:none;user-select:none}.tile{position:relative;border:0;border-radius:13px;background:linear-gradient(145deg,#f4e8ff,#dbc7f6);box-shadow:inset 0 2px 0 #fff,0 4px 0 #ac83d4;cursor:pointer;padding:3px;min-width:0;min-height:0;display:grid;place-items:center;transition:transform .16s,filter .16s,background .16s}.tile:nth-child(odd){background:linear-gradient(145deg,#fff1ff,#e7d7f8)}.tile:hover{transform:translateY(-2px);filter:brightness(1.06)}.tile:focus-visible{outline:3px solid #ffe17c;outline-offset:1px;z-index:2}.tile.selected{background:linear-gradient(145deg,#ffef9e,#ffc75c);box-shadow:inset 0 2px 0 #fff8cf,0 4px 0 #dc8e30;transform:scale(1.08);z-index:3}.tile.matched{animation:pop .25s ease-in forwards}.tile.invalid{animation:shake .26s ease-in-out}.character{display:block;width:100%;height:100%;background-size:400% 266.667%;background-position:var(--pos);background-repeat:no-repeat;filter:drop-shadow(0 3px 1px #8d6b9b55);pointer-events:none}.fallback{display:none;font-size:clamp(23px,4vw,47px);line-height:1;pointer-events:none}.no-sprite .character{display:none}.no-sprite .fallback{display:block}.board-foot{display:flex;align-items:center;justify-content:center;gap:10px;min-height:38px;padding-top:9px;font-size:14px;font-weight:700;text-align:center;color:#fff4ff}.foot-star{color:#ffe68e}.page-footer{text-align:center;color:#aa97d2;font-size:12px;padding-top:25px}.modal{border:0;padding:0;max-width:min(90vw,420px);border-radius:30px;background:linear-gradient(145deg,#fff,#f5ecff);color:var(--ink);box-shadow:0 16px 0 #7047ae,0 30px 60px #13033299;text-align:center}.modal::backdrop{background:#190a41ba;backdrop-filter:blur(5px)}.modal-inner{position:relative;padding:32px 34px 30px}.modal-icon{font-size:44px;color:#f8b850;line-height:1}.modal h2{font-size:26px;margin:6px 0 16px}.modal p{font-size:16px;line-height:1.65;color:#5f497f}.modal-close{position:absolute;right:15px;top:11px;border:0;background:none;color:#8065a8;font-size:29px;cursor:pointer}.modal-action{border:0;border-radius:15px;background:#8051e9;color:#fff;box-shadow:0 5px 0 #4c2b9b;font-family:inherit;font-size:16px;font-weight:800;padding:13px 28px;margin-top:8px;cursor:pointer}@keyframes pop{to{transform:scale(.1) rotate(25deg);opacity:0}}@keyframes shake{25%,75%{transform:translateX(-4px)}50%{transform:translateX(4px)}}@media(max-width:790px){.app-shell{max-width:640px;padding:16px 12px 30px}.topbar{margin-bottom:15px}.brand h1{font-size:27px}.brand-badge{height:42px;width:42px;border-radius:14px}.game-layout{display:flex;flex-direction:column;gap:16px}.side-panel{padding:17px 18px;display:grid;grid-template-columns:1fr auto;column-gap:15px;align-items:center}.level-label{font-size:12px}.side-panel h2{grid-column:1;grid-row:2;margin:2px 0 5px;font-size:20px;line-height:1.25}.side-copy{display:none}.goal-card{grid-column:1/-1;grid-row:3;margin-top:13px;padding:12px 15px;border-radius:16px}.goal-top strong{font-size:20px}.progress-track{height:12px;margin:9px 0}.score-readout strong{font-size:24px}.moves-card{grid-column:2;grid-row:1/3;margin:0;padding:8px 10px;display:flex;flex-direction:column;gap:0;min-width:85px;font-size:12px;border-radius:13px}.moves-icon{display:none}.moves-card strong{margin:0;font-size:25px}.restart-button{grid-column:1/-1;grid-row:4;margin-top:14px;min-height:42px}.board-panel{padding:11px;border-radius:24px}.board-head{height:28px;padding:0 4px 7px}.board-caption{font-size:12px}.board-hint{font-size:12px}.board-wrap{padding:6px;border-radius:16px}.board{gap:3px}.tile{border-radius:9px;padding:1px;box-shadow:inset 0 1px 0 #fff,0 2px 0 #ac83d4}.board-foot{font-size:12px;min-height:31px;padding-top:6px}.page-footer{padding-top:20px}}@media(max-width:380px){.board-hint{display:none}.side-panel{padding:14px}.brand h1{font-size:24px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Open playfield: characters float freely, with a distinct color cue per friend. */
.board-wrap{background:transparent;box-shadow:none;padding:5px}
.board{gap:7px}
.tile,.tile:nth-child(odd){isolation:isolate;border:0;border-radius:50%;background:transparent;box-shadow:none;padding:0;overflow:visible}
.tile::before{content:'';position:absolute;inset:0;z-index:0;border-radius:50%;background:radial-gradient(circle,var(--glow) 0%,var(--glow) 34%,transparent 74%);filter:blur(5px);opacity:.35;transition:opacity .16s,transform .16s}
.tile::after{content:'';position:absolute;inset:0;border:3px solid transparent;border-radius:50%;pointer-events:none;transition:border-color .16s,box-shadow .16s}
.tile:hover{transform:scale(1.05);filter:none}
.tile:hover::before{opacity:1;transform:scale(1.08)}
.tile:focus-visible{outline:0;z-index:4}
.tile:focus-visible::after,.tile.selected::after{border-color:#fff4a7;box-shadow:0 0 0 3px #5b319c,0 0 16px #ffef9aaf}
.tile.selected{background:transparent;box-shadow:none;transform:scale(1.06);z-index:3}
.character{position:relative;z-index:1;transform:scale(1.22);filter:drop-shadow(0 4px 2px #27134d80);transition:transform .16s}
.tile:hover .character,.tile.selected .character{transform:scale(1.28)}
.fallback{position:relative;z-index:1;transform:scale(1.18)}
.type-0{--glow:#5bdcff}
.type-1{--glow:#b5ef91}
.type-2{--glow:#e2d5ff}
.type-3{--glow:#8db9ff}
.type-4{--glow:#ffe364}
.type-5{--glow:#ff8169}
.type-6{--glow:#58e5d7}
.type-4::before,.type-5::before,.type-6::before{opacity:.68}
.type-4 .character{filter:drop-shadow(0 4px 2px #27134d80) drop-shadow(0 0 5px #ffe364)}
.type-5 .character{filter:drop-shadow(0 4px 2px #27134d80) drop-shadow(0 0 5px #ff8169)}
.type-6 .character{filter:drop-shadow(0 4px 2px #27134d80) drop-shadow(0 0 5px #58e5d7)}
@media(max-width:790px){.board-wrap{padding:2px}.board{gap:4px}.tile,.tile:nth-child(odd){box-shadow:none;padding:0}.character{transform:scale(1.2)}.tile:hover .character,.tile.selected .character{transform:scale(1.24)}}

/* Quiet blue-gray backdrop keeps the floating characters in focus. */
body{background:radial-gradient(circle at 8% 9%,#35586a 0,transparent 26%),radial-gradient(circle at 94% 70%,#29475a 0,transparent 27%),linear-gradient(135deg,#172d3e,#132636 75%)}

.brand-top{color:#d9e6ec}
.brand h1{text-shadow:0 3px 0 #1b394a}
.icon-button{border-color:#a6c5d1;background:#ffffff14}
.side-panel{background:linear-gradient(145deg,#37556a,#2b4357);border-color:#7193a5;box-shadow:inset 0 2px 0 #ffffff22,0 16px 35px #0d24347a}
.side-copy{color:#d9e6ec}
.moves-card{border-color:#8fb0c0;background:#4c7186}
.board-panel{background:linear-gradient(160deg,#6d8fa2,#537588);border-color:#a4bec8;box-shadow:inset 0 3px 0 #ffffff65,0 12px 0 #34566b,0 24px 45px #0b21339c}
.board-caption{color:#fff0ac}
.board-hint,.board-foot{color:#f6fbff}
.tile:focus-visible::after,.tile.selected::after{box-shadow:0 0 0 3px #2b5164,0 0 16px #ffef9aaf}
.page-footer{color:#b8cad3}

@media(max-width:790px){
  .app-shell{max-width:600px;padding:10px 6px 18px}
  .topbar{margin-bottom:10px;padding:0 4px}
  .game-layout{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:8px;align-items:stretch}
  .side-panel{display:contents}
  .side-panel .level-label,.side-panel h2,.side-copy{display:none}
  .goal-card{grid-column:1;grid-row:1;min-width:0;margin:0;padding:8px 10px;border-radius:14px;box-shadow:0 3px 0 #c6a9ee}
  .goal-top span,.score-readout span{font-size:12px}
  .goal-top strong{font-size:17px}
  .progress-track{height:8px;margin:5px 0}
  .score-readout{padding-top:4px}
  .score-readout strong{font-size:20px}
  .moves-card{grid-column:2;grid-row:1;min-width:0;margin:0;padding:7px 4px;border-radius:14px;justify-content:center}
  .moves-card strong{font-size:26px}
  .board-panel{grid-column:1/-1;grid-row:2;padding:6px;border-width:2px;border-radius:18px}
  .board-head{height:26px;padding:0 4px 5px}
  .board-caption,.board-hint{font-size:12px}
  .board-wrap{padding:0}
  .board{gap:2px}
  .character{transform:scale(1.25)}
  .tile:hover .character,.tile.selected .character{transform:scale(1.29)}
  .board-foot{min-height:26px;font-size:12px;line-height:1.3}
  .restart-button{grid-column:1/-1;grid-row:3;margin:2px 0 0;min-height:42px}
  .page-footer{padding-top:11px}
}
@media(max-width:360px){
  .app-shell{padding:10px 0 16px}
  .topbar{padding:0 8px}
  .game-layout{gap:6px}
  .goal-card{margin-left:4px}
  .moves-card{margin-right:4px}
  .board-panel{padding:4px 0;border-left:0;border-right:0;border-radius:0}
  .board{gap:1px}
  .restart-button{margin-left:4px;margin-right:4px}
  .character{transform:scale(1.2)}
  .tile:hover .character,.tile.selected .character{transform:scale(1.24)}
}

/* Flat playfield: characters sit directly on the board without circular backplates. */
.board-panel{
  background:#587789;
  border:1px solid #93acb9;
  box-shadow:none;
}
.board-wrap{background:transparent;box-shadow:none}
.tile,.tile:nth-child(odd),.tile.selected{
  background:transparent;
  border:0;
  box-shadow:none;
}
.tile::before{
  content:none;
  display:none;
}
.tile::after{border-width:2px;box-shadow:none}
.tile:focus-visible::after,.tile.selected::after{
  border-color:#fff1a3;
  box-shadow:none;
}
.character,.type-4 .character,.type-5 .character,.type-6 .character{filter:none}

/* Shared flat surfaces, with a complete palette for each time of day. */
:root{
  color-scheme:dark;
  --page:#142a38;
  --panel:#233e4e;
  --card:#2d4b5d;
  --playfield:#4a697b;
  --line:#6d8d9f;
  --text:#f2f7f8;
  --muted:#c0d2dc;
  --accent:#ffe19a;
  --accent-ink:#334450;
  --score:#ffb3cf;
  --track:#183341;
  --decoration:#a8d0dd22;
  --focus:#ffe19a;
  --backdrop:#091b2cd9;
  --heart-stroke:var(--heart-stroke);
  --heart-fill:var(--heart-fill);
  --heart-soft:#ffadc7;
  --confetti-1:#f5b84b;
  --confetti-2:#65bfaf;
  --confetti-3:#fa92aa;
  --confetti-4:#8c9de7;
}
:root[data-theme="day"]{
  color-scheme:light;
  --page:#f3f7fa;
  --panel:#e8eff5;
  --card:#fafcfe;
  --playfield:#e4ebf0;
  --line:#aec1d0;
  --text:#263f51;
  --muted:#526b80;
  --accent:#416a89;
  --accent-ink:#ffffff;
  --score:#a34d73;
  --track:#d5e1eb;
  --decoration:#a8c0d333;
  --focus:#2e5d80;
  --backdrop:#233d5299;
  --heart-stroke:#ba7898;
  --heart-fill:#a95d82;
  --heart-soft:#d8a2ba;
  --confetti-1:#7396b2;
  --confetti-2:#a9c2d5;
  --confetti-3:#c286a4;
  --confetti-4:#d7adbf;
}
body{background:var(--page);color:var(--text)}

.brand-top,.side-copy,.page-footer{color:var(--muted)}
.brand h1{color:var(--text);text-shadow:none}
.brand-badge{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.title-star,.level-label,.moves-icon,.foot-star,.modal-icon{color:var(--accent)}
.topbar{gap:16px}
.theme-switch{display:flex;gap:4px;padding:4px;margin-left:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px}
.theme-button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 16px;border:0;border-radius:11px;background:transparent;color:var(--muted);font:600 15px Fredoka,'Noto Sans KR',sans-serif;cursor:pointer}
.theme-button span{font-size:21px;line-height:1}
.theme-button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.theme-button:hover{filter:brightness(1.08)}
.theme-button:focus-visible,.restart-button:focus-visible,.modal-action:focus-visible,.modal-close:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.icon-button{flex-shrink:0;background:var(--panel);color:var(--text);border:1px solid var(--line)}
.icon-button:hover,.icon-button:focus-visible{background:var(--card);outline-color:var(--focus)}
.side-panel,.moves-card{background:var(--panel);color:var(--text);border:1px solid var(--line);box-shadow:none}
.goal-card{background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:none}
.goal-top span,.score-readout span{color:var(--muted)}
.goal-top strong,.moves-card strong{color:var(--accent)}
.score-readout{border-color:var(--line)}
.score-readout strong{color:var(--score)}
.progress-track{background:var(--track);box-shadow:none}
.progress-track>div{background:var(--accent);box-shadow:none}
.restart-button,.modal-action{background:var(--accent);color:var(--accent-ink);box-shadow:none}
.restart-button:hover,.restart-button:active{transform:none;box-shadow:none;filter:brightness(1.06)}
.board-panel{background:#344b5b;border-color:var(--line);box-shadow:none}
.board-caption{color:var(--accent)}
.board-hint,.board-foot{color:var(--text)}
.tile:focus-visible::after,.tile.selected::after{border-color:var(--focus);box-shadow:none}
.modal{background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:none}
.modal[open]{animation:modal-enter .24s cubic-bezier(.2,.85,.25,1.12) both}
.modal[open]::backdrop{animation:modal-backdrop-in .22s ease-out both}
.modal.is-closing{animation:modal-exit .17s ease-in both}
.modal.is-closing::backdrop{animation:modal-backdrop-out .17s ease-in both}
.modal p,.modal-close{color:var(--muted)}
.modal::backdrop{background:var(--backdrop)}
@keyframes modal-enter{0%{opacity:0;transform:translateY(18px) scale(.94)}72%{opacity:1;transform:translateY(-2px) scale(1.012)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes modal-exit{to{opacity:0;transform:translateY(10px) scale(.97)}}
@keyframes modal-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes modal-backdrop-out{from{opacity:1}to{opacity:0}}
@media(max-width:600px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .brand{gap:10px}
  .theme-switch{grid-column:1/-1;grid-row:2;margin:0}
  .theme-button{flex:1;min-height:40px}
  .icon-button{grid-column:2;grid-row:1}
}

/* Reference portraits are individually framed within the shared transparent atlas. */
.board{grid-template-rows:repeat(8,minmax(0,1fr))}
.tile{--character-scale:1.02;--character-hover-scale:1.06}
.type-1{--character-scale:1.07;--character-hover-scale:1.11}
.type-3{--character-scale:.95;--character-hover-scale:.99}
.type-4{--character-scale:1.1;--character-hover-scale:1.14}
.type-5{--character-scale:.97;--character-hover-scale:1.01}
.type-6{--character-scale:1.03;--character-hover-scale:1.07}
.character{background:none;transform:scale(var(--character-scale));overflow:hidden}
.tile:hover .character,.tile.selected .character{transform:scale(var(--character-hover-scale))}
.character-top-glow{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transform:scale(var(--character-scale));transition:transform .16s}
.profile-top-glow{z-index:2;opacity:0}
.ppomoya-top-glow{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 28%,transparent 54%);mask-image:linear-gradient(to bottom,#000 0%,#000 28%,transparent 54%)}
.seidee-top-glow{-webkit-mask-image:radial-gradient(ellipse 44% 46% at 50% 4%,#000 0%,#000 46%,#0005 78%,transparent 100%);mask-image:radial-gradient(ellipse 44% 46% at 50% 4%,#000 0%,#000 46%,#0005 78%,transparent 100%)}
.tile:hover .character-top-glow,.tile.selected .character-top-glow{transform:scale(var(--character-hover-scale))}
.type-1{--glow:#87939c}
.type-3{--glow:#d6bba4}
.type-5{--glow:#ffdb68}
.type-6{--glow:#f1dcc1}

/* Muted cool backgrounds separate both white and dark portraits from the board. */
:root[data-theme="day"] .board-panel{background:#e4ebf0}
.board-foot #status{flex:1}
.sound-button{display:grid;place-items:center;flex-shrink:0;min-width:40px;min-height:40px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text);cursor:pointer;line-height:1}
.sound-button svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sound-button[aria-pressed="false"]{opacity:.6}
.sound-button:disabled{opacity:.38;cursor:not-allowed}
.sound-button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.stage-celebration{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:inherit;background:var(--card);isolation:isolate;animation:stage-layer-fade 2.8s ease both}
.celebration-card{position:relative;z-index:1;width:94%;text-align:center;padding:20px 10px;animation:celebration-reveal 2.8s ease both}
.celebration-sparkles{position:absolute;z-index:0;inset:-10px;overflow:hidden;pointer-events:none}
.celebration-sparkles i{position:absolute;left:var(--x);top:var(--y);color:var(--sparkle-color);font-style:normal;font-size:var(--size);line-height:1;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--sparkle-color) 70%,transparent));animation:celebration-twinkle .72s ease-in-out var(--delay) infinite alternate}
.celebration-flourish{display:inline-block;border-radius:999px;background:var(--accent);color:var(--accent-ink);padding:8px 19px;font-size:19px;font-weight:900;animation:celebration-pop .5s cubic-bezier(.2,.9,.3,1.3) both}
.celebration-card h2{color:var(--text);font-size:clamp(21px,3vw,34px);line-height:1.3;margin:16px 0 25px;word-break:keep-all}
.celebration-card p{color:var(--muted);font-size:clamp(12px,1.5vw,17px);font-weight:700;margin:24px 0 0}
.celebration-friends{display:flex;justify-content:center;flex-wrap:wrap;gap:16px 8px;max-width:440px;margin:auto}
.celebrating-friend{width:calc(25% - 10px);height:86px;animation:friend-cheer .62s ease-in-out calc(var(--i) * .07s) 3 both;transform-origin:50% 90%}
.celebrating-friend .profile-portrait{max-height:none;height:100%;width:100%}
.stage-clear-foxty{background:radial-gradient(ellipse at 50% 79%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 39%),radial-gradient(circle at 50% 48%,#ffcf8240,transparent 55%),var(--card)}
.stage-clear-foxty .celebration-card{height:100%;padding:18px 8px;display:flex;flex-direction:column;align-items:center}
.stage-clear-foxty .celebration-flourish,.stage-clear-foxty .celebration-card h2,.stage-clear-foxty .celebration-card p{position:relative;z-index:6}
.stage-clear-foxty .celebration-card h2{margin:8px 0 0;text-shadow:0 2px 10px var(--card)}
.stage-clear-foxty .celebration-card p{position:absolute;z-index:7;bottom:5px;margin:0;text-shadow:0 2px 9px var(--card)}
.stage-clear-foxty .celebration-friends{position:absolute;inset:0;max-width:none;display:block;overflow:visible}
.stage-clear-foxty .celebrating-foxty{position:absolute;z-index:4;left:50%;bottom:-2%;translate:-50% 0;width:min(73%,400px);height:min(73%,400px);animation:foxty-hero-cheer 2.8s cubic-bezier(.2,.9,.25,1.15) both}
.stage-clear-foxty .foxty-portrait{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 9px #0000002b) drop-shadow(0 0 20px color-mix(in srgb,var(--accent) 46%,transparent))}
.stage-clear-foxty .foxty-side-friend{position:absolute;z-index:5;width:clamp(55px,16%,90px);height:auto;aspect-ratio:1;animation:foxty-side-float 2.8s cubic-bezier(.2,.9,.25,1.1) calc(var(--i)*.045s) both}
.stage-clear-foxty .foxty-side-friend:nth-child(1){left:3%;top:23%;--side-tilt:-10deg}
.stage-clear-foxty .foxty-side-friend:nth-child(2){left:20%;top:34%;--side-tilt:6deg}
.stage-clear-foxty .foxty-side-friend:nth-child(3){right:20%;top:34%;--side-tilt:-4deg}
.stage-clear-foxty .foxty-side-friend:nth-child(4){right:3%;top:23%;--side-tilt:10deg}
.stage-clear-foxty .foxty-side-friend:nth-child(5){left:3%;top:49%;--side-tilt:-8deg}
.stage-clear-foxty .foxty-side-friend:nth-child(6){right:3%;top:49%;--side-tilt:8deg}
.stage-clear-foxty .foxty-side-friend:nth-child(7){right:8%;top:68%;--side-tilt:5deg}

/* Stage-clear variation: all seven friends crowd around the message. */
.stage-clear-crowd{background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 52%),var(--card)}
.stage-clear-crowd .celebration-card{height:100%;padding:20px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.stage-clear-crowd .celebration-flourish,.stage-clear-crowd .celebration-card h2,.stage-clear-crowd .celebration-card p{position:relative;z-index:2}
.stage-clear-crowd .celebration-card h2{max-width:45%;margin:8px auto;font-size:clamp(24px,4vw,38px);text-shadow:0 2px 12px var(--card)}
.stage-clear-crowd .celebration-card p{margin:10px 0 0;max-width:46%;text-shadow:0 2px 9px var(--card)}
.stage-clear-crowd .celebration-friends{position:absolute;inset:0;max-width:none;display:block}
.stage-clear-crowd .crowd-friend{position:absolute;width:clamp(82px,28%,144px);height:clamp(82px,28%,144px);animation:crowd-cheer .72s cubic-bezier(.2,.9,.25,1.2) calc(var(--i)*.06s) 3 both}
.stage-clear-crowd .crowd-friend:nth-child(1){left:-2%;top:5%;--tilt:-8deg}
.stage-clear-crowd .crowd-friend:nth-child(2){left:36%;top:-5%;--tilt:2deg}
.stage-clear-crowd .crowd-friend:nth-child(3){right:-2%;top:7%;--tilt:8deg}
.stage-clear-crowd .crowd-friend:nth-child(4){left:-5%;top:39%;--tilt:-5deg}
.stage-clear-crowd .crowd-friend:nth-child(5){right:-5%;top:40%;--tilt:6deg}
.stage-clear-crowd .crowd-friend:nth-child(6){left:12%;bottom:-2%;--tilt:-5deg}
.stage-clear-crowd .crowd-friend:nth-child(7){right:12%;bottom:-2%;--tilt:5deg}

/* Stage-clear variation: two random, distinct friends meet in the middle. */
.stage-clear-best-friends{background:radial-gradient(circle at 50% 56%,#ff9fba2e,transparent 48%),var(--card)}
.stage-clear-best-friends .celebration-card h2{margin-bottom:12px}
.stage-clear-best-friends .celebration-friends{position:relative;width:100%;align-items:center;flex-wrap:nowrap;gap:0;max-width:500px;min-height:clamp(210px,49vw,330px);overflow:visible}
.stage-clear-best-friends .best-friend{position:relative;z-index:1;flex:0 0 54%;width:54%;height:auto;aspect-ratio:1;will-change:transform,opacity}
.stage-clear-best-friends .best-friend-left{transform-origin:70% 70%}
.stage-clear-best-friends .best-friend-right{transform-origin:30% 70%}
.stage-clear-best-friends .best-friend::after{content:'';position:absolute;z-index:4;top:63%;width:11%;height:7%;border-radius:50%;background:#ff93aa47;filter:blur(2px);opacity:0;animation:cheek-blush 2.8s ease both}
.stage-clear-best-friends .best-friend-left::after{right:1%;rotate:-12deg}
.stage-clear-best-friends .best-friend-right::after{left:1%;rotate:12deg}
.stage-clear-best-friends .best-friend-left{animation:best-friend-left 2.8s cubic-bezier(.18,.85,.25,1) both}
.stage-clear-best-friends .best-friend-right{margin-left:-8%;animation:best-friend-right 2.8s cubic-bezier(.18,.85,.25,1) both}
.best-friend-heart{position:absolute;z-index:3;left:50%;top:5%;translate:-50% 0;color:#ff91ac;font-style:normal;font-size:clamp(34px,7vw,64px);filter:drop-shadow(0 0 9px #ffb7c7);animation:heart-pop 2.8s ease both}
.best-friend-heart::before,.best-friend-heart::after{content:'♥';position:absolute;font-size:.42em;color:#ffb7c7;opacity:0;animation:heart-side-pop 2.8s ease both}
.best-friend-heart::before{right:115%;top:42%;rotate:-22deg}
.best-friend-heart::after{left:115%;top:30%;rotate:20deg;animation-delay:.04s}

/* Stage-clear variation: random portraits rain around one random hero. */
.stage-clear-character-rain{background:radial-gradient(circle at 50% 72%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 48%),var(--card)}
.stage-clear-character-rain .celebration-card{height:100%;padding:18px 8px;display:flex;flex-direction:column;align-items:center}
.stage-clear-character-rain .celebration-flourish,.stage-clear-character-rain .celebration-card h2,.stage-clear-character-rain .celebration-card p{position:relative;z-index:4}
.stage-clear-character-rain .celebration-card h2{margin:9px 0 0}
.stage-clear-character-rain .celebration-card p{position:absolute;z-index:6;left:0;bottom:5px;width:100%;margin:0;text-shadow:0 2px 8px var(--card)}
.stage-clear-character-rain .celebration-friends{position:absolute;inset:0;max-width:none;display:block;overflow:hidden}
.stage-clear-character-rain .rain-hero{position:absolute;z-index:3;left:50%;bottom:13%;translate:-50% 0;width:clamp(190px,54%,320px);height:clamp(190px,54%,320px);animation:rain-hero-land 2.8s cubic-bezier(.2,.9,.25,1.18) both}
.stage-clear-character-rain .rain-drop{position:absolute;z-index:1;left:var(--x);top:-28%;width:clamp(58px,14%,88px);height:clamp(58px,14%,88px);animation:character-rain-fall 2.05s cubic-bezier(.25,.55,.48,.98) var(--delay) both;opacity:0}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;left:var(--x);top:-16px;width:8px;height:16px;border-radius:2px;background:var(--color);animation:confetti-fall 1.8s ease-out var(--delay) both}
.confetti i:nth-child(3n){border-radius:50%;height:9px;width:9px}
@keyframes celebration-reveal{0%{opacity:0}12%,84%{opacity:1}100%{opacity:0}}
@keyframes stage-layer-fade{0%{opacity:0;transform:scale(.985)}9%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.008)}}
@keyframes celebration-twinkle{from{transform:scale(.72) rotate(-8deg);opacity:.42}to{transform:scale(1.18) rotate(8deg);opacity:1}}
@keyframes celebration-pop{from{transform:scale(.55) rotate(-8deg);opacity:0}to{transform:scale(1) rotate(-3deg);opacity:1}}
@keyframes friend-cheer{0%,100%{transform:translateY(0) rotate(-4deg)}45%{transform:translateY(-18px) rotate(6deg)}70%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes foxty-cheer{0%,100%{transform:translateY(0) scale(.96) rotate(-2deg)}45%{transform:translateY(-16px) scale(1.04) rotate(3deg)}70%{transform:translateY(-3px) scale(1) rotate(-1deg)}}
@keyframes foxty-hero-cheer{0%,12%{transform:translateY(58%) scale(.72,.84);opacity:0}35%,78%{transform:translateY(0) scale(1);opacity:1}48%{transform:translateY(3%) scale(1.08,.92)}60%{transform:translateY(-4%) scale(.97,1.04)}100%{transform:translateY(7%) scale(.94);opacity:0}}
@keyframes foxty-side-float{0%,15%{transform:translateY(28px) scale(.65) rotate(calc(var(--side-tilt) * -1));opacity:0}35%,76%{transform:translateY(0) scale(1) rotate(var(--side-tilt));opacity:1}54%{transform:translateY(-7px) scale(1.04) rotate(calc(var(--side-tilt) * -.5))}100%{transform:translateY(-3px) scale(.92) rotate(var(--side-tilt));opacity:0}}
@keyframes crowd-cheer{0%,100%{transform:translateY(9px) scale(.92) rotate(var(--tilt));opacity:.72}32%,68%{transform:translateY(-7px) scale(1.04) rotate(calc(var(--tilt) * -.45));opacity:1}}
@keyframes best-friend-left{0%{transform:translateX(-78%) rotate(-11deg) scale(.88);opacity:0}18%{transform:translateX(-8%) rotate(-4deg) scale(1);opacity:1}27%{transform:translateX(2.3%) rotate(1.4deg) scaleX(.965) scaleY(1.03);opacity:1}34%{transform:translateX(.3%) rotate(-.6deg) scaleX(1.012) scaleY(.99);opacity:1}43%,76%{transform:translateX(2%) rotate(.8deg) scaleX(.975) scaleY(1.02);opacity:1}84%{transform:translateX(.8%) rotate(-.5deg) scale(1);opacity:1}100%{transform:translateX(-12%) rotate(-5deg) scale(.94);opacity:0}}
@keyframes best-friend-right{0%{transform:translateX(78%) rotate(11deg) scale(.88);opacity:0}18%{transform:translateX(8%) rotate(4deg) scale(1);opacity:1}27%{transform:translateX(-2.3%) rotate(-1.4deg) scaleX(.965) scaleY(1.03);opacity:1}34%{transform:translateX(-.3%) rotate(.6deg) scaleX(1.012) scaleY(.99);opacity:1}43%,76%{transform:translateX(-2%) rotate(-.8deg) scaleX(.975) scaleY(1.02);opacity:1}84%{transform:translateX(-.8%) rotate(.5deg) scale(1);opacity:1}100%{transform:translateX(12%) rotate(5deg) scale(.94);opacity:0}}
@keyframes cheek-blush{0%,20%,86%,100%{opacity:0;transform:scale(.4)}27%,76%{opacity:1;transform:scale(1.08)}34%{opacity:.7;transform:scale(.82)}}
@keyframes heart-pop{0%,20%{transform:translateY(12px) scale(.2) rotate(-15deg);opacity:0}29%,72%{transform:translateY(0) scale(1) rotate(5deg);opacity:1}42%{transform:translateY(-7px) scale(1.22) rotate(-3deg)}100%{transform:translateY(-16px) scale(.6);opacity:0}}
@keyframes heart-side-pop{0%,25%{transform:translateY(8px) scale(.2);opacity:0}34%,68%{transform:translateY(-5px) scale(1);opacity:.9}100%{transform:translateY(-18px) scale(.5);opacity:0}}
@keyframes rain-hero-land{0%,18%{transform:translateY(-115%) scale(.55) rotate(-8deg);opacity:0}42%,82%{transform:translateY(0) scale(1) rotate(1deg);opacity:1}53%{transform:translateY(9%) scale(1.08,.92) rotate(-1deg)}64%{transform:translateY(-7%) scale(.97,1.03)}100%{transform:translateY(5%) scale(.95);opacity:0}}
@keyframes character-rain-fall{0%{transform:translate(-50%,-30px) scale(var(--scale)) rotate(0);opacity:0}12%,76%{opacity:.82}100%{transform:translate(calc(-50% + var(--drift)),var(--fall)) scale(var(--scale)) rotate(var(--spin));opacity:0}}
@keyframes confetti-fall{0%{transform:translate(0,-15px) rotate(0);opacity:0}12%{opacity:1}100%{transform:translate(var(--drift),560px) rotate(var(--turn));opacity:0}}
@media(max-width:600px){
  .celebrating-friend{height:58px}
  .stage-clear-foxty .celebrating-foxty{width:min(76%,330px);height:min(76%,330px)}
  .celebration-friends{gap:10px 6px;max-width:310px}
  .celebration-card{padding:10px 4px}
  .celebration-card h2{margin:12px 0 20px;font-size:23px}
  .celebration-card p{margin-top:19px}
  .celebration-flourish{font-size:16px;padding:6px 15px}
  .stage-clear-crowd .celebration-card h2,.stage-clear-crowd .celebration-card p{max-width:43%}
  .stage-clear-crowd .crowd-friend{width:29%;height:auto;aspect-ratio:1}
  .stage-clear-best-friends .celebration-friends{min-height:190px;max-width:340px}
  .stage-clear-character-rain .rain-hero{bottom:13%;width:52%;height:auto;aspect-ratio:1}
  .stage-clear-character-rain .rain-drop{width:15%;height:auto;aspect-ratio:1}
}
@media(prefers-reduced-motion:reduce){
  .stage-celebration,.celebration-card,.celebration-flourish,.celebrating-friend,.best-friend-heart,.celebration-sparkles i{animation:none}
  .stage-clear-crowd .crowd-friend,.stage-clear-best-friends .best-friend,.stage-clear-character-rain .rain-hero{animation:none}
  .confetti{display:none}
  .stage-clear-character-rain .rain-drop{display:none}
}

/* Score changes and the board entering a new stage share one soft motion rhythm. */
.value-bump{animation:value-bump .38s cubic-bezier(.2,.8,.25,1.2)}
#stage-progress.progress-updated:not(.goal-reached){animation:progress-soft-pulse .36s ease-out}
.game-layout.stage-entering .goal-card,.game-layout.stage-entering .total-card,.game-layout.stage-entering .moves-card{animation:stage-card-arrive .46s cubic-bezier(.2,.82,.25,1.12) both}
.game-layout.stage-entering .total-card{animation-delay:.05s}
.game-layout.stage-entering .moves-card{animation-delay:.1s}
.game-layout.stage-entering .board-panel{animation:stage-board-arrive .58s cubic-bezier(.18,.8,.22,1) both}
@keyframes value-bump{0%,100%{transform:scale(1)}38%{transform:scale(1.13)}68%{transform:scale(.98)}}
@keyframes progress-soft-pulse{0%,100%{filter:none}45%{filter:brightness(1.22);transform:scaleY(1.22)}}
@keyframes stage-card-arrive{0%{opacity:.55;transform:translateY(-7px) scale(.97)}65%{opacity:1;transform:translateY(1px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes stage-board-arrive{0%{opacity:.72;transform:translateY(12px) scale(.985)}60%{opacity:1;transform:translateY(-2px) scale(1.004)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modal[open],.modal[open]::backdrop,.modal.is-closing,.modal.is-closing::backdrop,.stage-celebration,.value-bump,#stage-progress.progress-updated,.game-layout.stage-entering>*{animation:none}}
html[lang="ko"] .side-panel h2{word-break:keep-all}

/* A welcoming, flat introduction in the same day/night palette. */
.language-button{display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap}
.onboarding-modal{width:640px;max-width:calc(100vw - 28px);max-height:92dvh;overflow:auto;border-radius:28px}
.onboarding-modal .modal-inner{padding:32px}
.welcome-wordmark{font-size:11px;letter-spacing:2px;font-weight:800;color:var(--muted);margin-bottom:20px;padding:0 20px}
.welcome-wordmark span{color:var(--accent);padding:0 5px}
.greeting-line{display:flex;justify-content:center;gap:12px;margin:4px 0 20px;font-size:13px;font-weight:700}
.greeting-line span{padding:7px 11px;background:var(--panel);border-radius:10px;color:var(--text)}
.welcome-friends{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 8px;max-width:430px;margin:0 auto 22px}
.welcome-friend{width:calc(25% - 8px);height:80px;animation:friend-wave 3.5s ease-in-out infinite;animation-delay:calc(var(--friend) * -.23s)}
.welcome-friend .profile-portrait{height:100%;max-height:none}
.welcome-modal h2{font-size:30px;margin:8px 0;line-height:1.3;word-break:keep-all}
.welcome-modal .welcome-subtitle{font-size:14px;line-height:1.8;margin:8px 0 22px}
.language-options{display:grid;gap:9px}
.language-options button{display:flex;align-items:center;gap:16px;min-height:60px;padding:10px 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);font:inherit;cursor:pointer;text-align:left}
.language-options button strong{font-size:19px;font-weight:700}
.language-options button>span:last-child{margin-left:auto;color:var(--accent);font-size:22px}
.language-options button:hover{background:var(--playfield);border-color:var(--accent)}
.language-code{font-size:11px;font-weight:800;letter-spacing:1px;color:var(--muted);border-right:1px solid var(--line);padding-right:15px}
.language-options button:focus-visible,.text-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.welcome-modal .welcome-hint{font-size:12px;margin:18px 0 0}
.rules-modal h2{margin:4px 0 6px;font-size:27px;line-height:1.4}
.rules-modal .rules-subtitle{font-size:14px;margin:0 0 20px}
.rule-cards{display:grid;gap:10px;text-align:left}
.rule-card{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.rule-number{font-size:13px;font-weight:800;color:var(--accent);line-height:25px}
.rule-card h3{font-size:16px;line-height:1.5;margin:0 0 6px;word-break:keep-all}
.rule-card p{font-size:13px;line-height:1.7;margin:0;word-break:normal}
.rule-score-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:13px;line-height:1.5;color:var(--text)}
.rule-score-table th,.rule-score-table td{padding:8px 0;border-bottom:1px solid var(--line);text-align:left}
.rule-score-table thead th{font-weight:700;color:var(--muted);font-size:12px}
.rule-score-table tbody th{font-weight:500}
.rule-score-table th:last-child,.rule-score-table td:last-child{text-align:right;white-space:nowrap;padding-left:12px}
.rule-score-table td{font-weight:700;color:var(--accent)}
.rule-score-table tbody tr:last-child>*{border-bottom:0}
.rule-card .combo-rule{margin-top:10px;color:var(--muted)}
.combo-pop{--combo-glow:#8bddec;position:absolute;z-index:8;top:42%;left:50%;isolation:isolate;width:clamp(250px,68%,380px);max-width:88%;padding:0;border:0;background:transparent;color:#ffe083;text-align:center;text-shadow:0 3px 0 #263552,0 0 12px color-mix(in srgb,var(--combo-glow) 64%,transparent);pointer-events:none;animation:combo-bounce 1.4s ease-out both}
.combo-pop.combo-tier-3{--combo-glow:#ff94bc}
.combo-pop.combo-tier-4{--combo-glow:#ffd66f}
.combo-pop strong,.combo-pop>span:not(.combo-aura):not(.combo-energy),.combo-friend{position:relative;z-index:2}
.combo-pop strong{display:block;font-family:Fredoka,'Noto Sans KR',sans-serif;font-size:clamp(38px,7vw,58px);line-height:1.05;font-weight:900;white-space:nowrap}
.combo-pop>span:not(.combo-aura):not(.combo-energy){display:block;margin-top:6px;font-size:clamp(18px,3.2vw,27px);font-weight:900;white-space:nowrap}
.combo-friend{width:clamp(128px,27vw,174px);height:clamp(128px,27vw,174px);margin:-18px auto -4px;filter:drop-shadow(0 0 9px color-mix(in srgb,var(--combo-glow) 74%,transparent));animation:combo-friend-cheer 1.15s ease-out both}
.combo-friend .profile-portrait{display:block;width:100%;height:100%;max-height:none}
.combo-aura{position:absolute;z-index:0;left:50%;top:45%;width:clamp(230px,52vw,330px);height:clamp(230px,52vw,330px);margin:0;border:3px solid color-mix(in srgb,var(--combo-glow) 68%,transparent);border-radius:50%;box-shadow:0 0 18px color-mix(in srgb,var(--combo-glow) 58%,transparent),inset 0 0 18px color-mix(in srgb,var(--combo-glow) 30%,transparent);opacity:0;animation:combo-aura-ring 1.4s ease-out both}
.combo-aura::before,.combo-aura::after{content:'';position:absolute;inset:-7px;border:5px solid transparent;border-top-color:#ffe57d;border-right-color:#ff9fc8;border-radius:50%;transform:rotate(-34deg)}
.combo-aura::after{inset:8px;border-width:3px;border-top-color:#fff2ae;border-right-color:transparent;border-bottom-color:var(--combo-glow);transform:rotate(52deg)}
.combo-pop.combo-tier-3 .combo-aura{border-width:4px}
.combo-pop.combo-tier-4 .combo-aura{border-width:5px}
.combo-energy{position:absolute!important;z-index:1!important;inset:0;margin:0!important;pointer-events:none}
.combo-energy i{position:absolute;left:50%;top:50%;width:auto;height:auto;color:var(--combo-glow);font-style:normal;font-size:19px;line-height:1;text-shadow:0 0 8px var(--combo-glow);opacity:0;animation:combo-energy-burst .75s ease-out var(--delay) both}
.combo-energy .combo-heart{color:#ff9fc8;font-size:23px;text-shadow:0 0 9px #ff9fc8}
.combo-pop.combo-tier-3 .combo-energy i{font-size:22px}
.combo-pop.combo-tier-4 .combo-energy i{font-size:25px}
@keyframes combo-friend-cheer{0%{transform:translateY(8px) scale(.8) rotate(-8deg)}30%{transform:translateY(-5px) scale(1.06) rotate(6deg)}55%{transform:translateY(0) scale(1) rotate(-4deg)}75%,100%{transform:translateY(0) scale(1) rotate(0)}}
@keyframes combo-bounce{0%{opacity:0;transform:translate(-50%,-35%) scale(.6) rotate(-7deg)}16%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(3deg)}28%,82%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-80%) scale(.92)}}
@keyframes combo-aura-ring{0%{transform:translate(-50%,-50%) scale(.35) rotate(-12deg);opacity:0}16%{transform:translate(-50%,-50%) scale(1.06) rotate(2deg);opacity:1}82%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:.92}100%{transform:translate(-50%,-50%) scale(1.12) rotate(8deg);opacity:0}}
@keyframes combo-energy-burst{0%{transform:translate(-50%,-50%) scale(.3);opacity:0}16%{opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15);opacity:0}}
@keyframes combo-panel-pulse{0%,100%{filter:none}45%{filter:brightness(1.08) saturate(1.08)}}
.board-panel.combo-panel-active{animation:combo-panel-pulse .5s ease-out}
.board-panel.combo-tier-3{animation-duration:.62s}
.board-panel.combo-tier-4{animation-duration:.76s}
@media(prefers-reduced-motion:reduce){.combo-pop{animation:none;transform:translate(-50%,-50%)}.combo-friend,.combo-aura,.combo-energy i,.board-panel.combo-panel-active{animation:none}}
.match-demo{display:flex;align-items:center;gap:8px;margin-top:10px}
.match-demo span{display:block;width:44px;height:44px}
.match-demo b{color:var(--accent);font-size:25px;margin-left:10px}
.stage-demo{display:flex;gap:9px;align-items:center;margin-top:12px;font-size:12px;color:var(--accent);font-weight:700}
.stage-demo span{background:var(--card);padding:5px 9px;border-radius:7px;border:1px solid var(--line)}
.rules-modal .rule-detail{font-size:12px;line-height:1.7;margin:16px 2px;text-align:left}
#help-continue{width:100%;margin-top:0}
.text-button{display:block;width:100%;padding:12px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;margin-top:5px;text-decoration:underline;text-underline-offset:3px}
html[lang="en"] .avatar-name{font-size:8px;letter-spacing:-.3px}
html[lang="ja"] .avatar-name{font-size:9px}
html[lang="en"] .board-foot{font-size:12px}
@keyframes friend-wave{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-5px) rotate(2deg)}}
@media(max-width:600px){
  .topbar{grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
  .language-button{grid-row:1;grid-column:2;font-size:12px;padding:7px 9px;min-height:38px}
  .icon-button{grid-column:3;grid-row:1;width:36px;height:36px;font-size:20px}
  .brand h1{font-size:21px}
  .brand-badge{height:34px;width:34px;flex-shrink:0;font-size:25px;border-radius:10px}
  .brand{gap:7px}
  .brand-top{font-size:10px}
  .onboarding-modal .modal-inner{padding:24px 18px}
  .welcome-wordmark{font-size:9px;letter-spacing:1.4px;margin-bottom:18px}
  .welcome-friends{gap:10px 6px;margin-bottom:16px}
  .welcome-friend{height:61px}
  .greeting-line{font-size:11px;gap:6px;margin-bottom:15px}
  .greeting-line span{padding:6px 9px}
  .welcome-modal h2{font-size:25px}
  .language-options button{min-height:54px}
  .rules-modal h2{font-size:23px}
  .rule-card{padding:12px;gap:7px;grid-template-columns:25px minmax(0,1fr)}
  .rule-card h3{font-size:15px}
  .rule-card p{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.welcome-friend{animation:none}}

/* Stage progress, profiles and the shared leaderboard use the same flat palette. */
.goal-top strong span{font-size:inherit;color:inherit}
.goal-top{flex-wrap:wrap;gap:6px 12px}
.goal-top>span,.goal-top>strong{white-space:nowrap}
#stage-progress{display:block;appearance:none;border:0;width:100%;height:7px;margin:12px 0;background:var(--track);border-radius:4px;overflow:hidden}
#stage-progress::-webkit-progress-bar{background:var(--track)}
#stage-progress::-webkit-progress-value{background:var(--accent)}
#stage-progress::-moz-progress-bar{background:var(--accent)}
#stage-progress.goal-reached{animation:goal-progress-bounce .78s cubic-bezier(.2,.82,.24,1.25);transform-origin:88% 50%}
.goal-card.goal-reached{animation:goal-card-glow .9s ease-out}
.goal-spark-flight{position:fixed;inset:0;z-index:70;overflow:hidden;pointer-events:none}
.goal-spark-flight i{position:absolute;color:var(--star-color);font-style:normal;font-size:clamp(12px,1.7vw,21px);line-height:1;text-shadow:0 0 7px var(--star-color),0 0 13px var(--star-color);opacity:0;will-change:transform,opacity;animation:goal-star-flight .9s cubic-bezier(.18,.72,.25,1) var(--delay) both}
@keyframes goal-progress-bounce{
  0%,100%{transform:scale(1)}
  26%{transform:scaleX(1.045) scaleY(1.7)}
  48%{transform:scaleX(.985) scaleY(.82)}
  68%{transform:scaleX(1.012) scaleY(1.18)}
}
@keyframes goal-card-glow{
  0%,100%{box-shadow:none}
  34%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 42%,transparent),0 0 22px color-mix(in srgb,var(--accent) 48%,transparent)}
}
@keyframes goal-star-flight{
  0%{transform:translate(-50%,-50%) scale(.2) rotate(0);opacity:0}
  12%{opacity:1}
  58%{transform:translate(calc(-50% + var(--mid-x)),calc(-50% + var(--mid-y))) scale(1.15) rotate(130deg);opacity:1}
  100%{transform:translate(calc(-50% + var(--end-x)),calc(-50% + var(--end-y))) scale(.18) rotate(280deg);opacity:0}
}
.board-panel{position:relative}
.stage-notice{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:8;width:max-content;max-width:94%;padding:12px 18px;background:var(--accent);color:var(--accent-ink);border-radius:12px;font-weight:800;text-align:center;pointer-events:none}
.leaderboard-panel{margin-top:24px;padding:24px;background:var(--panel);border:1px solid var(--line);border-radius:24px}
.leaderboard-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.eyebrow{font-size:11px;letter-spacing:2px;color:var(--muted);font-weight:700}
.leaderboard-heading h2{margin:4px 0;font-size:25px}
.ranking-note,.field-hint{font-size:12px!important;line-height:1.6!important;color:var(--muted)!important}
.quiet-button{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--card);color:var(--text);font:700 14px inherit;cursor:pointer;min-height:42px}
.quiet-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
#view-record{margin-top:8px;grid-column:1/-1;grid-row:4}
button:disabled{cursor:wait;opacity:.55}
.personal-best{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;background:var(--card);border-radius:12px;padding:14px;font-size:13px;margin:15px 0}
.personal-best strong{color:var(--accent)}
.personal-best #best-nickname{margin-left:auto;color:var(--muted)}
.leaderboard-list{list-style:none;padding:0;margin:0;display:grid;gap:5px}
.leaderboard-row{display:grid;grid-template-columns:28px 48px minmax(0,1fr) 90px 90px;align-items:center;gap:12px;padding:9px 12px;border:1px solid transparent;border-bottom-color:var(--line)}
.leaderboard-row.is-me{background:var(--card);border-color:var(--accent);border-radius:12px}
.rank-number{font-weight:800;color:var(--muted);text-align:center}
.profile-portrait{position:relative;isolation:isolate;display:block;width:100%;height:auto;aspect-ratio:1;max-height:64px;overflow:visible;pointer-events:none}
.profile-portrait>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.profile-image{z-index:1}
.rank-name{overflow-wrap:anywhere;font-weight:700}
.rank-stage{color:var(--accent);font-size:13px;white-space:nowrap}
.rank-score{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.record-status{font-size:13px!important;color:var(--muted);line-height:1.6;min-height:20px;overflow-wrap:anywhere}
.record-modal{max-width:min(94vw,570px);max-height:92dvh;overflow-y:auto;border-radius:24px}
.record-modal .modal-inner{padding:25px}
.record-modal .modal-icon{font-size:30px}
.record-modal h2{margin-bottom:8px}
.record-modal #end-message{margin:0 0 18px;font-size:14px}
.avatar-fieldset{border:0;padding:0;margin:0 0 17px;text-align:left;min-width:0}
.avatar-fieldset legend,.nickname-label{font-weight:700;font-size:14px;margin-bottom:10px}
.avatar-picker{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.avatar-option{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:7px 3px;border:2px solid transparent;border-radius:12px;cursor:pointer;min-width:0;background:var(--panel)}
.avatar-option:has(input:checked){border-color:var(--accent);background:var(--playfield)}
.avatar-option:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.avatar-option input{position:absolute;opacity:0;width:1px;height:1px}
.avatar-option .profile-portrait{height:49px}
.avatar-name{font-size:10px;color:var(--text);white-space:nowrap}
.nickname-label{display:block;text-align:left}
#nickname{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font:inherit;font-size:17px;padding:12px 14px;outline-offset:3px}
#nickname:focus{outline:2px solid var(--focus)}
.record-modal .field-hint{text-align:left;margin:8px 0 0}
.field-error{color:var(--score)!important;font-size:12px!important;min-height:18px;text-align:left;margin:5px 0 10px}
.record-preview{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:4px 10px;text-align:left;background:var(--panel);border-radius:12px;padding:12px;margin-bottom:10px}
.record-preview .profile-portrait{grid-row:1/3;height:42px}
.preview-name{grid-column:2;grid-row:1/3;overflow-wrap:anywhere;font-weight:700}
.preview-stage,.preview-score{grid-column:3;font-size:12px;text-align:right;white-space:nowrap}
.preview-stage{color:var(--accent)}
#save-record{width:100%;font-size:15px}
#play-again{width:100%;margin-top:7px}
@media(max-width:790px){
  .leaderboard-panel{padding:16px 12px;margin-top:14px;border-radius:18px}
  .leaderboard-heading h2{font-size:21px}
  .leaderboard-row{grid-template-columns:20px 38px minmax(0,1fr) auto;gap:3px 8px;padding:8px 5px}
  .rank-number,.leaderboard-row .profile-portrait,.rank-name{grid-row:1/3}
  .rank-stage,.rank-score{grid-column:4;font-size:12px;text-align:right}
  .personal-best{font-size:12px;padding:10px}
  .personal-best #best-nickname{width:100%;margin:0}
  #stage-progress{margin:6px 0;height:5px}
  .stage-notice{font-size:12px;padding:10px}
}
@media(max-width:480px){
  .record-modal .modal-inner{padding:20px 14px}
  .avatar-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .avatar-option .profile-portrait{height:43px}
  .avatar-option{padding:5px 2px;gap:3px}
}

/* Expressions stay readable before the match bursts or the failed pair settles. */
.tile.swapping{transition:none;will-change:transform;pointer-events:none}
.tile.swapping::before,.tile.swapping::after{opacity:0}
.tile.swapping .character,.tile.swapping .fallback{transform:scale(var(--character-scale,1.02));transition:none}
.tile.falling{transition:none;will-change:transform,opacity;transform-origin:50% 88%;pointer-events:none;z-index:4}
.tile.falling .character,.tile.falling .fallback{transition:none}
.board.is-refilling{overflow:hidden}
/* Character-specific day shadows keep pale faces legible without a shared backdrop. */
:root[data-theme="day"] .type-0 .character,
:root[data-theme="day"] .profile-portrait[data-character="0"]{
  filter:drop-shadow(0 1px 1.2px #263d6d58) drop-shadow(0 3px 3.5px #334c782b);
}
:root[data-theme="day"] .type-2 .character,
:root[data-theme="day"] .profile-portrait[data-character="2"]{
  filter:drop-shadow(0 0 1.5px #05090c80) drop-shadow(0 3px 4.2px #1f344844);
}
:root[data-theme="day"] .type-3 .character,
:root[data-theme="day"] .profile-portrait[data-character="3"]{
  filter:drop-shadow(0 2px 1.2px #75423459) drop-shadow(0 4px 3.2px #8b604038);
}
:root[data-theme="day"] .type-5 .character,
:root[data-theme="day"] .profile-portrait[data-character="5"]{
  filter:drop-shadow(0 1px 1.2px #a65b8170) drop-shadow(0 3px 3px #d485a340);
}
:root[data-theme="day"] .type-6 .character,
:root[data-theme="day"] .profile-portrait[data-character="6"]{
  filter:drop-shadow(0 1px 1.2px #4f887c70) drop-shadow(0 3px 3px #72a79b40);
}
/* Jelly-yu gets a luminous cool halo instead of a directional day shadow. */
:root[data-theme="day"] .type-1 .character,
:root[data-theme="day"] .profile-portrait[data-character="1"]{
  filter:drop-shadow(0 0 1.8px #e2f8ffbf) drop-shadow(0 0 5px #91d7e97a);
}
/* A cool, diffused halo separates Jelly-yu from the night playfield. */
:root[data-theme="night"] .type-1 .character,
:root[data-theme="night"] .profile-portrait[data-character="1"]{
  filter:drop-shadow(0 0 1.5px #c4e7ef99) drop-shadow(0 0 4px #a5dceb66);
}
/* Dark edge light keeps the five pale friends distinct without adding a backdrop. */
:root[data-theme="night"] :is(.type-2,.type-3,.type-4,.type-5,.type-6) .character,
:root[data-theme="night"] .profile-portrait:is(
  [data-character="2"],
  [data-character="3"],
  [data-character="4"],
  [data-character="5"],
  [data-character="6"]
){
  filter:drop-shadow(0 0 1.5px #05090c80) drop-shadow(0 2px 4px #02050759);
}
/* Seidee's dark antlers keep their full halo while the ochre crown fades sooner. */
:root[data-theme="night"] .seidee-top-glow{
  opacity:.94;
  filter:drop-shadow(0 -1px 2px #fff1c7d9) drop-shadow(0 -3px 6px #e9b25fa8);
}
/* Ppomoya's dark crown gets its own rosy halo, distinct from the blue and gold cues. */
:root[data-theme="night"] .ppomoya-top-glow{
  opacity:.68;
  filter:drop-shadow(0 -1px 2px #ffd9ec99) drop-shadow(0 -3px 6px #ff8dbb66);
}
.tile.matched,.tile.invalid{animation:none;transform:none}
.tile.matched{--burst-color:#ec759e;--burst-soft:var(--heart-soft);z-index:5}
.tile.matched.match-tier-2{--burst-color:#79d8e8;--burst-soft:#c4f4f9}
.tile.matched.match-tier-3{--burst-color:#ff8db7;--burst-soft:#ffd0df}
.tile.matched.match-tier-4{--burst-color:#ffd260;--burst-soft:#fff0a8}
.tile.invalid{z-index:4}
.tile.matched .character,.tile.matched .fallback,.tile.matched .character-top-glow{animation:friend-match-pop .62s ease-in-out both}
.tile.invalid .character,.tile.invalid .fallback,.tile.invalid .character-top-glow{animation:friend-oops .68s ease-in-out both}
.tile.matched::before{opacity:0}
.tile.matched::after{border-color:transparent}
.match-burst{position:absolute;inset:0;z-index:3;pointer-events:none}
.burst-heart{position:absolute;inset:8%;width:84%;height:84%;fill:none;stroke:var(--burst-color);stroke-width:1.6;stroke-linejoin:round;overflow:visible;opacity:0;animation:match-heart .4s ease-out .2s both}
.heart-particle{position:absolute;left:50%;top:50%;width:13px;height:13px;fill:var(--burst-color);overflow:visible;opacity:0;animation:match-spark .4s ease-out calc(.18s + var(--spark-delay,0ms)) both}
.heart-particle:nth-child(odd){width:10px;height:10px;fill:var(--burst-soft)}
@keyframes friend-match-pop{
  0%{transform:scale(var(--character-scale,1.02));opacity:1}
  20%{transform:scale(calc(var(--character-scale,1.02) * 1.05)) rotate(-3deg);opacity:1}
  38%{transform:scale(calc(var(--character-scale,1.02) * 1.18)) rotate(3deg);opacity:1}
  58%{transform:scale(calc(var(--character-scale,1.02) * 1.18)) rotate(1deg);opacity:1}
  72%{transform:scale(calc(var(--character-scale,1.02) * 1.1));opacity:1}
  100%{transform:scale(.18);opacity:0}
}
@keyframes friend-oops{
  0%,100%{transform:translateX(0) rotate(0) scale(var(--character-scale,1.02))}
  16%{transform:translateX(-4px) rotate(-7deg) scale(calc(var(--character-scale,1.02) * 1.02))}
  32%{transform:translateX(4px) rotate(6deg) scale(calc(var(--character-scale,1.02) * 1.02))}
  48%{transform:translateX(-3px) rotate(-4deg) scale(var(--character-scale,1.02))}
  65%,85%{transform:translateX(0) rotate(0) scale(calc(var(--character-scale,1.02) * .94))}
}
@keyframes match-heart{0%{transform:scale(.5);opacity:.95}100%{transform:scale(1.7);opacity:0}}
@keyframes match-spark{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}18%{opacity:1}100%{transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) rotate(var(--turn)) scale(.25);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .tile.matched .character,.tile.invalid .character,.tile.matched .fallback,.tile.invalid .fallback,.tile.matched .character-top-glow,.tile.invalid .character-top-glow{animation:none}
  .match-burst{display:none}
}

/* Compact header: wordmark, language, then the two appearance icons. */
html{min-width:0}
.restart-modal{width:min(90vw,420px)}
.restart-actions{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.restart-actions button{width:100%;min-height:48px;margin:0;padding:12px;font-size:15px}
.restart-actions .quiet-button{border:2px solid var(--accent);font-weight:800}
.topbar{display:flex;justify-content:space-between;gap:12px}
.header-actions{display:flex;align-items:center;gap:9px;margin-left:auto;flex-shrink:0}
.header-actions .theme-switch{margin:0;padding:3px;gap:2px;border-radius:13px}
.header-actions .theme-button{width:37px;min-width:37px;min-height:37px;padding:7px;flex:none;border-radius:9px}
.theme-button svg{display:block;width:23px;height:23px;pointer-events:none}
.header-actions .language-button{min-height:44px}
@media(max-width:600px){
  .topbar{gap:8px;flex-wrap:wrap}
  .header-actions{gap:5px}
  .header-actions .language-button{padding:7px 8px;min-height:40px;font-size:12px}
  .header-actions .theme-button{width:31px;min-width:31px;min-height:34px;padding:5px}
  .header-actions .icon-button{width:34px;height:34px}
  .brand h1{font-size:21px}
}

/* One stable row keeps all four run controls above the playfield. */
.game-layout{display:flex;flex-direction:column;gap:16px;max-width:680px;margin:0 auto}
.game-layout .side-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:8px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.side-panel .goal-card,.side-panel .total-card,.side-panel .moves-card,.side-panel .safe-restart{grid-column:auto;grid-row:auto;min-width:0;min-height:80px;margin:0;padding:10px 8px;border:1px solid var(--line);border-radius:15px;box-shadow:none}
.side-panel .goal-card{display:flex;flex-direction:column;justify-content:center}
.side-panel .goal-top{display:flex;flex-direction:column;gap:5px;align-items:center}
.side-panel .goal-top span,.side-panel .total-card>span,.side-panel .moves-card>span{font-size:13px;line-height:1.2;white-space:nowrap;color:var(--muted);font-weight:700}
.side-panel .goal-top strong{font-size:18px;white-space:nowrap;line-height:1.2}
.side-panel #stage-progress{height:4px;margin:6px 0 0}
.side-panel .total-card,.side-panel .moves-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--card)}
.side-panel .total-card strong,.side-panel .moves-card strong{font-size:27px;line-height:1;margin:0}
.side-panel .safe-restart{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-color:var(--accent);font-size:15px;line-height:1.3;overflow-wrap:normal;word-break:keep-all}
.safe-restart .restart-icon{font-family:Arial,sans-serif;font-size:26px;line-height:1}
.side-panel #view-record{grid-column:1/-1;grid-row:auto;margin:0}
@media(max-width:600px){
  .game-layout{gap:14px}
  .game-layout .side-panel{gap:5px}
  .side-panel .goal-card,.side-panel .total-card,.side-panel .moves-card,.side-panel .safe-restart{min-height:70px;padding:8px 4px;border-radius:12px}
  .side-panel .goal-top span,.side-panel .total-card>span,.side-panel .moves-card>span{font-size:11px}
  .side-panel .goal-top strong{font-size:14px}
  .side-panel .total-card strong,.side-panel .moves-card strong{font-size:22px}
  .side-panel .safe-restart{font-size:12px}
}
@media(max-width:360px){.game-layout .side-panel{margin:0 4px}.side-panel .safe-restart{font-size:11px}.side-panel .total-card strong{font-size:19px}}
.storage-notice{max-width:680px;margin:14px auto 0;padding:12px 15px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);font-size:13px;line-height:1.5}
/* Seidee's antlers occupy more of the crop: a subtle optical size correction. */
.profile-portrait[data-character="4"]{scale:1.08}
.leaderboard-row .profile-portrait[data-character="0"],
.leaderboard-row .profile-portrait[data-character="2"]{scale:1}
.leaderboard-row .profile-portrait[data-character="1"]{scale:1.05}
.leaderboard-row .profile-portrait[data-character="3"]{scale:.93}
.leaderboard-row .profile-portrait[data-character="4"]{scale:1.08}
.leaderboard-row .profile-portrait[data-character="5"]{scale:.95}
.leaderboard-row .profile-portrait[data-character="6"]{scale:1.01}
.board-row{display:contents}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hint-button{flex-shrink:0;min-height:40px;min-width:48px;padding:7px 9px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-family:inherit;font-weight:700;font-size:12px;cursor:pointer}
.hint-button:disabled{opacity:.5;cursor:default}
.hint-button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tile.hinted::after{content:'';position:absolute;inset:1px;border:2px dashed var(--focus);border-radius:12px;pointer-events:none}
@media(orientation:landscape) and (max-height:600px){
  .game-layout .board-panel{width:min(100%,calc(100svh - 70px));align-self:center;padding:6px;border-radius:18px}
  .board-wrap{padding:0}
  .board-foot{font-size:11px;gap:6px}
}

:root[data-theme="day"] .brand h1{color:var(--accent)}
:root[data-theme="day"] .title-star,:root[data-theme="day"] .welcome-wordmark>span:first-child{color:var(--score)}

/* Lighter assets and a quieter three-card status row keep the game first. */

.game-layout .side-panel{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
.header-restart{font-family:Arial,sans-serif;font-size:23px;line-height:1}
.header-restart .restart-icon{display:block;transform:translateY(-1px)}

/* The card stays opaque while it moves; only the backdrop fades in. */
@keyframes modal-enter{
  0%{transform:translateY(18px) scale(.94)}
  72%{transform:translateY(-2px) scale(1.012)}
  100%{transform:translateY(0) scale(1)}
}

/* Short play guide with optional details. */
.foxty-match-demo img{display:block;width:58px;height:52px;object-fit:contain}
:root[data-theme="day"] .foxty-match-demo img{
  filter:drop-shadow(0 3px 2px rgba(24,42,76,.38)) drop-shadow(0 0 5px rgba(38,63,105,.18));
}
:root[data-theme="day"] .stage-clear-foxty .foxty-portrait{
  filter:drop-shadow(0 12px 9px rgba(20,34,61,.2)) drop-shadow(0 4px 3px rgba(24,42,76,.42)) drop-shadow(0 0 16px rgba(38,63,105,.2));
}
.rule-details{margin:12px 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);text-align:left;overflow:hidden}
.rule-details summary{padding:13px 15px;color:var(--text);font-size:13px;font-weight:800;cursor:pointer;list-style-position:inside}
.rule-details[open] summary{border-bottom:1px solid var(--line)}
.rule-details-body{padding:2px 15px 14px}
.rule-details .rule-score-table{margin-top:7px}
.rule-details .rule-detail{margin:12px 0 0}
.leaderboard-toggle{display:block;margin:12px auto 8px;min-width:150px}
.leaderboard-toggle[hidden]{display:none}

/* Quiet, flat cues for the final moves and a compact ranking. */
:root{--move-warning:#ffd0c4;--move-warning-bg:#503b3a;--move-warning-line:#bc8074;--podium-bg:#314552;--podium-ink:#e6cb91}
:root[data-theme="day"]{--move-warning:#934335;--move-warning-bg:#f9e6df;--move-warning-line:#ce9586;--podium-bg:#e9eff3;--podium-ink:#685333}
.side-panel .moves-card.is-low{background:var(--move-warning-bg);border-color:var(--move-warning-line)}
.side-panel .moves-card.is-low>span,.side-panel .moves-card.is-low strong{color:var(--move-warning)}
.goal-remaining{display:block;margin-top:5px;text-align:center;font-size:11px;line-height:1.4;color:var(--muted);font-weight:600;white-space:nowrap}
#leaderboard-status:empty{display:none}
.leaderboard-row[data-podium]{border-radius:12px;background:var(--podium-bg)}
.leaderboard-row[data-podium] .rank-number{display:grid;place-items:center;min-height:26px;border-radius:8px;color:var(--podium-ink);background:var(--card)}
.leaderboard-row[data-podium="1"] .rank-number{background:var(--podium-ink);color:var(--panel)}
.leaderboard-row.is-me{border-color:var(--accent);background:var(--card);border-inline-start-width:3px}
.personal-best{border-inline-start:3px solid var(--accent)}
.board-foot #status{min-width:0;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
@media(max-width:600px){
  .board-foot{display:grid;grid-template-columns:minmax(0,1fr) 40px 40px;gap:7px 8px;padding-top:8px}
  .board-foot #status{grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:center;min-height:36px;font-size:12px;line-height:18px}
  .board-foot .hint-button{grid-column:1;grid-row:2;justify-self:start;min-height:40px;white-space:nowrap}
  .board-foot #sound-button{grid-column:2;grid-row:2}
  .board-foot #vibration-button{grid-column:3;grid-row:2}
  .goal-remaining{font-size:10px}
}
@media(max-width:360px){.app-shell{padding-inline:4px}}

@media(max-width:600px){
  .header-actions{gap:4px}
  .header-restart{width:34px;height:34px}
  .foxty-match-demo img{width:48px;height:44px}
}