@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@400;700&display=swap');

:root {
  --page-bg:  #100805;
  --bg:       #2a1810;
  --board:    #5c3220;
  --bdark:    #3d2015;
  --shadow:   #1a0a04;
  --pin:      #d4a843;
  --yellow:   #f5c842;
  --green:    #4caf6a;
  --red:      #e05050;
  --txt:      #1a0a04;
  --fp: 'Noto Sans Thai','Noto Sans JP', sans-serif;
  --fj: 'Noto Sans JP', 'M PLUS Rounded 1c', 'Yu Gothic', 'Hiragino Sans', 'Meiryo', sans-serif;
  --fu: 'Noto Sans Thai','Noto Sans JP', sans-serif;
  --ui: 'Noto Sans Thai','Noto Sans JP', sans-serif;
  --card-fu: 'Noto Sans Thai','Noto Sans JP', sans-serif;
  /* card type palettes */
  --ck:  #ecdbb0; --ckb: #c49a0a; --cks: #f5c842;
  --cf:  #bfe8c8; --cfb: #349858; --cfs: #5edd80;
  --cm:  #bfc8f0; --cmb: #3648be; --cms: #7090f0;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}

body{
  background:var(--bg);
  height:100vh;
  height:100dvh;
  display:flex;flex-direction:column;
  font-family:var(--fu);
  background-image:
    repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(0,0,0,.12) 31px,rgba(0,0,0,.12) 32px),
    repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(0,0,0,.12) 31px,rgba(0,0,0,.12) 32px);
  /* safe area for iPhone notch/home bar */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── DESKTOP CENTERED CONTAINER ── */
@media(min-width:1280px){
  html {
    background:
      radial-gradient(ellipse at 50% 42%, rgba(245,200,66,.10), transparent 28%),
      radial-gradient(ellipse at 50% 56%, rgba(120,56,28,.22), transparent 50%),
      radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0) 42%, rgba(0,0,0,.50) 86%),
      linear-gradient(180deg,#150a06 0%,var(--page-bg) 44%,#080403 100%),
      var(--page-bg);
  }
  body {
    max-width:1100px;
    margin:0 auto;
    background-color:var(--bg);
    background-image:
      repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(0,0,0,.12) 31px,rgba(0,0,0,.12) 32px),
      repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(0,0,0,.12) 31px,rgba(0,0,0,.12) 32px);
    box-shadow:
      0 0 0 1px rgba(245,200,66,.12),
      0 0 42px rgba(245,200,66,.09),
      0 26px 96px rgba(0,0,0,.66),
      0 0 110px rgba(92,42,22,.16),
      0 0 0 9999px transparent;
  }
}
@media(min-width:1920px){
  body { max-width:1240px; }
}
@media(min-width:2560px){
  body { max-width:1440px; }
}

/* ── HEADER ── */
header{
  flex-shrink:0;
  background:var(--bdark);border-bottom:3px solid var(--shadow);
  padding:3px 8px;display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 3px 0 rgba(0,0,0,.4);z-index:50;gap:6px;
}
.logo{font-family:var(--fp);font-size:14px;color:var(--yellow);text-shadow:2px 2px 0 #8b5e00;letter-spacing:1px;white-space:nowrap;opacity:.7;}
.logo span{color:#f5ead8;}
.hdr-r{display:flex;gap:6px;align-items:center;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;}
.hdr-r::-webkit-scrollbar{display:none;}

.sbox{background:var(--board);border:2px solid var(--shadow);border-radius:6px;padding:1px 6px;text-align:center;box-shadow:1px 1px 0 var(--shadow);min-width:40px;}
.slb{font-family:var(--fu);font-weight:600;font-size:7px;color:rgba(245,234,216,.40);letter-spacing:0;text-transform:none;}
.svl{font-family:var(--fu);font-weight:600;font-size:12px;color:rgba(245,234,216,.82);line-height:1;}

.tmr{font-family:var(--fu);font-weight:600;font-size:14px;color:var(--yellow);text-shadow:none;min-width:36px;text-align:center;}
.tmr.urg{color:var(--red);animation:pulse .5s ease infinite alternate;}
@keyframes pulse{from{opacity:1}to{opacity:.35}}

.btn{font-family:var(--fu);font-weight:600;font-size:11px;background:var(--yellow);color:#2a1810;border:2px solid var(--shadow);border-radius:7px;padding:4px 9px;cursor:pointer;box-shadow:1px 1px 0 var(--shadow);transition:transform .08s,box-shadow .08s;letter-spacing:0;text-transform:none;white-space:nowrap;}
.btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow);}
.btn:active{transform:translate(2px,2px);box-shadow:0px 0px 0 var(--shadow);}
.btn.sec{background:var(--board);color:#f5ead8;}

/* ── SETTINGS BAR — single compact scrollable row ── */
.sbar{display:none!important;} /* toggles moved into header hdr-r */
.sbar::-webkit-scrollbar{display:none;}
.sblb{font-family:var(--fu);font-weight:600;font-size:9px;color:rgba(245,234,216,.5);letter-spacing:0;text-transform:none;white-space:nowrap;}
.tg{display:flex;border:2px solid var(--shadow);border-radius:7px;overflow:hidden;box-shadow:2px 2px 0 var(--shadow);flex-shrink:0;}
.tb{font-family:var(--fu);font-weight:600;font-size:11px;padding:3px 8px;border:none;background:var(--board);color:#f5ead8;cursor:pointer;border-right:1px solid var(--shadow);transition:background .1s;white-space:nowrap;}
.tb:last-child{border-right:none;}
.tb.on{background:var(--yellow);color:#1a0a04;}
.tb:disabled{opacity:.3;cursor:default;pointer-events:none;}
.vd{width:1px;height:16px;background:rgba(255,255,255,.12);flex-shrink:0;}
.leg{display:none;}

/* ── VOLUME CONTROL ── */
.vol-wrap{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.vol-btn{font-size:15px;background:none;border:none;cursor:pointer;padding:2px 3px;opacity:.7;transition:opacity .15s;line-height:1;}
.vol-btn:hover{opacity:1;}
.vol-slider{-webkit-appearance:none;appearance:none;width:60px;height:6px;background:var(--board);border-radius:3px;border:2px solid var(--shadow);outline:none;cursor:pointer;}
.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:var(--yellow);border:2px solid var(--shadow);cursor:pointer;}
.vol-slider::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--yellow);border:2px solid var(--shadow);cursor:pointer;}

/* ── FILTER PANEL ── */
.panel-btn{font-family:var(--fu);font-weight:600;font-size:12px;background:var(--board);color:#f5ead8;border:2px solid var(--shadow);border-radius:8px;padding:4px 11px;cursor:pointer;box-shadow:2px 2px 0 var(--shadow);letter-spacing:0;transition:background .1s;white-space:nowrap;flex-shrink:0;}
.panel-btn:hover{background:#6a3a25;}
.panel-btn.active{background:var(--yellow);color:#1a0a04;}

/* Default (mobile + tablet ≤1099px): bottom sheet */
.fpanel{
  display:none;position:fixed;left:50%;top:50%;
  width:min(460px,88vw);height:min(560px,74dvh);
  transform:translate(-50%,-50%);
  background:var(--board);border:5px solid var(--shadow);border-radius:18px;
  box-shadow:10px 10px 0 var(--shadow),0 0 0 9999px rgba(26,10,4,.70);
  z-index:200;flex-direction:column;overflow:hidden;max-height:none;
}
/* Tablet (768-1099px): taller bottom sheet */
@media(min-width:768px) and (max-width:1099px){
.fpanel{width:min(460px,90vw);height:min(560px,78dvh);max-height:none;}
}
/* Desktop (≥1100px): right-side drawer */
@media(min-width:1100px){
  .fpanel{width:min(460px,60vw);height:min(560px,74dvh);}
}
/* Large desktop (≥1920px): wider drawer */
@media(min-width:1920px){
  .fpanel{width:min(500px,46vw);height:min(580px,72dvh);}
}
/* 2K desktop (≥2560px): even wider */
@media(min-width:2560px){
  .fpanel{width:min(520px,38vw);height:min(620px,70dvh);}
}
.fpanel-overlay{display:none;position:fixed;inset:0;background:rgba(26,10,4,.70);z-index:199;}
.fpanel.open{display:flex;}
.fpanel-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:3px solid var(--shadow);flex-shrink:0;}
.fpanel-title{font-family:var(--fu);font-weight:600;font-size:15px;color:var(--yellow);letter-spacing:0;}
.fpanel-close{font-family:var(--fu);font-weight:600;font-size:12px;background:var(--board);border:2px solid var(--shadow);border-radius:8px;color:#f5ead8;cursor:pointer;opacity:.92;padding:7px 14px;letter-spacing:0;box-shadow:2px 2px 0 var(--shadow);}
.fpanel-close:hover{opacity:1;}
.fpanel-body{flex:1;overflow-y:auto;padding:14px;max-width:420px;width:100%;margin:0 auto;-webkit-overflow-scrolling:touch;font-family:var(--fu);font-weight:500;}
.fpanel .btn,.fpanel .tb,.fpanel input,.fpanel textarea,.fpanel select{
  font-family:var(--fu)!important;
  font-weight:600;
  letter-spacing:0;
}
.fpanel-handle{display:none;width:40px;height:4px;background:rgba(255,255,255,.2);border-radius:2px;margin:8px auto 0;flex-shrink:0;}
@media(max-width:1099px){.fpanel-handle{display:none;}}
.fpanel-section{margin-bottom:13px;}
.fpanel-slbl{font-family:var(--fu);font-weight:600;font-size:12px;color:var(--pin);letter-spacing:0;text-transform:none;margin-bottom:5px;display:block;}
/* ── RESPONSIVE BREAKPOINTS ── */

/* Very small phones (< 390px) */
@media(max-width:389px){
  header{padding:3px 6px;gap:4px;}
  .logo{font-size:11px;}
  .sbox{min-width:38px;padding:2px 5px;}
  .svl{font-size:12px;} .slb{font-size:8px;}
  .tmr{font-size:14px;min-width:34px;}
  .btn{font-size:10px;padding:3px 6px;}
  .sbar{padding:3px 6px;gap:4px;}
  .tb{font-size:13px;padding:3px 7px;}
  #game{padding:4px 6px 6px;}
  #board{padding:8px 10px 10px;}
}

/* Phones — iPhone 13 Pro = 390px (up to 767px) */
@media(max-width:767px){
  header{padding:3px 7px;}
  .logo{font-size:12px;}
  .sbox{min-width:38px;padding:1px 5px;}
  .svl{font-size:12px;}
  .tmr{font-size:13px;min-width:32px;}
  .btn{font-size:9px;padding:3px 6px;}
  .sbar{padding:3px 7px;gap:5px;}
  #game{padding:6px 8px 8px;}
  #board{padding:10px 12px 12px;}
}

/* Tablet — iPad 13" 2022 = 1024px portrait / 1366px landscape (768–1099px) */
@media(min-width:768px) and (max-width:1099px){
  header{padding:5px 12px;}
  .logo{font-size:15px;}
  .sbox{min-width:48px;padding:2px 8px;}
  .svl{font-size:14px;} .slb{font-size:8px;}
  .tmr{font-size:16px;min-width:42px;}
  .btn{font-size:11px;padding:4px 9px;}
  .sbar{padding:4px 12px;gap:8px;}
  .tb{font-size:12px;padding:4px 10px;}
  .sblb{font-size:10px;}
  #game{padding:12px 20px 16px;}
  #board{padding:16px 22px 18px;}
  .rb{max-width:420px;padding:32px 44px;}
  .rt{font-size:24px;} .re{font-size:70px;}
  #exTooltip{max-width:min(480px,calc(100vw - 40px));}
  .ex-word-ruby{font-size:38px;}
  .ex-meaning{font-size:20px;}
}

/* Tablet landscape / small desktop (1100–1439px) */
@media(min-width:1100px) and (max-width:1439px){
  header{padding:4px 10px;}
  .logo{font-size:15px;}
  .sbox{min-width:44px;}
  .svl{font-size:13px;}
  .tmr{font-size:15px;min-width:38px;}
}

/* Full HD desktop — 1920×1080 (1920–2559px) */
@media(min-width:1920px){
  header{padding:5px 16px;gap:8px;}
  .logo{font-size:17px;}
  .sbox{min-width:52px;padding:2px 10px;}
  .svl{font-size:15px;} .slb{font-size:9px;}
  .tmr{font-size:18px;min-width:48px;}
  .btn{font-size:12px;padding:5px 10px;}
  .sbar{padding:5px 18px;gap:10px;}
  .tb{font-size:13px;padding:4px 11px;}
  .sblb{font-size:11px;}
  #game{padding:14px 28px 18px;}
  #board{padding:18px 26px 22px;}
  .rb{max-width:420px;padding:38px 46px;}
  .rt{font-size:28px;} .re{font-size:78px;}
  .rsc{font-size:20px;} .rti{font-size:15px;}
  #exTooltip{max-width:500px;padding:18px 28px 15px;}
  .ex-word-ruby{font-size:43px;} .ex-meaning{font-size:21px;}
  .wt{font-size:52px;}
  .vol-slider{width:76px;}
}

/* 2K desktop — 2560×1440 (≥2560px) */
@media(min-width:2560px){
  header{padding:7px 22px;gap:10px;}
  .logo{font-size:22px;}
  .sbox{min-width:62px;padding:3px 13px;}
  .svl{font-size:18px;} .slb{font-size:10px;}
  .tmr{font-size:23px;min-width:58px;}
  .btn{font-size:13px;padding:6px 13px;}
  .sbar{padding:6px 26px;gap:12px;}
  .tb{font-size:15px;padding:5px 14px;}
  .sblb{font-size:12px;}
  #game{padding:18px 40px 24px;}
  #board{padding:22px 36px 26px;border-width:6px;border-radius:18px;}
  .rb{max-width:420px;padding:42px 52px;}
  .rt{font-size:30px;} .re{font-size:95px;}
  .rsc{font-size:23px;} .rti{font-size:18px;}
  .rac .btn{font-size:18px;padding:8px 20px;}
  #exTooltip{max-width:560px;padding:20px 32px 17px;}
  .ex-word-ruby{font-size:53px;} .ex-meaning{font-size:25px;}
  .wt{font-size:70px;}
  .vol-slider{width:90px;}
  .prow{margin-bottom:12px;} .pb{height:10px;}
  .card{border-radius:14px;border-width:4px;}
  .rlbl{font-size:13px;margin-bottom:12px;}
}

#ss{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:20px;}
#ss.gone{display:none;}
.wt{font-family:var(--fp);font-size:50px;color:var(--yellow);text-shadow:4px 4px 0 #8b5e00;letter-spacing:4px;}
.splash-status{font-family:var(--fu);font-weight:600;font-size:14px;color:rgba(245,234,216,.5);letter-spacing:0;text-align:center;}

/* ── GAME ── */
#game{flex:1;min-height:0;display:none;flex-direction:column;padding:10px 16px 14px;gap:0;}
#game.on{display:flex;}

.prow{display:flex;flex-direction:column;align-items:center;gap:5px;margin-bottom:8px;flex-shrink:0;}
.progress-status{width:100%;display:flex;justify-content:center;align-items:baseline;text-align:center;line-height:1.15;gap:10px;font-family:var(--ui);font-weight:600;}
.round-words-status{font-family:var(--ui);font-weight:600;font-size:clamp(12px,1vw,16px);color:var(--yellow);}
.pool-words-status{font-family:var(--ui);font-weight:600;font-size:clamp(10px,.85vw,13px);color:rgba(245,234,216,.48);}
.pool-words-status::before{content:'• ';color:rgba(245,234,216,.35);}
.pb{width:100%;height:8px;background:var(--bdark);border:2px solid var(--shadow);border-radius:4px;overflow:hidden;}
.pf{height:100%;background:linear-gradient(90deg,var(--yellow),#f5a030);transition:width 420ms cubic-bezier(.2,0,.2,1);box-shadow:0 0 6px rgba(245,200,66,.5);}
.pt{display:none;}

/* ── BOARD WRAPPER — splits play area + complete zone ── */
#boardWrap{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  gap:10px;
}

/* ── BOARD (play area) ── */
#board{
  flex:1;min-height:0;
  background:var(--board);border:5px solid var(--shadow);border-radius:14px;
  padding:14px 18px 16px;
  box-shadow:8px 8px 0 var(--shadow),
             0 0 0 1px rgba(245,200,66,.06),
             0 0 28px rgba(0,0,0,.55),
             inset 0 0 80px rgba(0,0,0,.24),
             inset 0 0 0 1px rgba(245,200,66,.10);
  position:relative;display:flex;flex-direction:column;
}
#board::before{content:'';position:absolute;inset:0;border-radius:10px;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 18%,rgba(245,200,66,.07),transparent 38%),
    linear-gradient(180deg,rgba(245,200,66,.035),transparent 28%),
    repeating-linear-gradient(88deg,transparent 0px,rgba(0,0,0,.02) 2px,transparent 4px,rgba(255,255,255,.012) 6px);}

.rlbl{display:none;}

/* ── COMPLETE ZONE — hidden, cards now stay on board ── */

/* ── GRID ── */
#cgrid{
  position:relative;
  width:100%;
  overflow-y:auto;
  overflow-x:hidden;
  flex:1;
  min-height:0;
  -webkit-overflow-scrolling:touch;
}

/* ── CELL — holds a pile of cards ── */
.cell{
  position:absolute;
  cursor:pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── CARD ── */
.card{
  position:absolute;
  width:100%; height:100%;
  border:3px solid var(--shadow);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:10px 12px 10px;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.16) 0%,transparent 42%,rgba(0,0,0,.06) 100%),
    radial-gradient(circle at 92% 12%,rgba(255,255,255,.28),transparent 18%),
    linear-gradient(135deg,rgba(255,255,255,.35) 0%,transparent 55%);
  user-select:none;
  overflow:hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1),box-shadow .15s;
  will-change: transform;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

.card[data-t=kanji]{
  background-color:var(--ck);border-color:var(--ckb);
  background-image:linear-gradient(180deg,rgba(255,240,190,.22) 0%,transparent 44%,rgba(0,0,0,.06) 100%),radial-gradient(circle at 92% 12%,rgba(255,255,255,.30),transparent 18%),linear-gradient(135deg,rgba(255,255,255,.38) 0%,transparent 55%);
}
.card[data-t=furigana]{
  background-color:var(--cf);border-color:var(--cfb);
  background-image:linear-gradient(180deg,rgba(210,255,225,.20) 0%,transparent 44%,rgba(0,0,0,.06) 100%),radial-gradient(circle at 92% 12%,rgba(255,255,255,.28),transparent 18%),linear-gradient(135deg,rgba(255,255,255,.34) 0%,transparent 55%);
}
.card[data-t=meaning]{
  background-color:var(--cm);border-color:var(--cmb);
  background-image:linear-gradient(180deg,rgba(220,228,255,.20) 0%,transparent 44%,rgba(0,0,0,.06) 100%),radial-gradient(circle at 92% 12%,rgba(255,255,255,.28),transparent 18%),linear-gradient(135deg,rgba(255,255,255,.33) 0%,transparent 55%);
}

/* top card */
.card.top{z-index:2;box-shadow:4px 4px 0 var(--shadow);}
.card.top::before{
  display:none;
  position:absolute;top:5px;left:6px;z-index:4;
  font-family:var(--ui);font-weight:700;font-size:8px;line-height:1;
  letter-spacing:.5px;
  background:none;border:none;border-radius:0;padding:1px 0;
  pointer-events:none;
}
.card.top[data-t=kanji]::before   { content:'KAN';  color:rgba(86,57,0,.72); }
.card.top[data-t=furigana]::before { content:'READ'; color:rgba(10,72,38,.72); }
.card.top[data-t=meaning]::before  { content:'MEAN'; color:rgba(18,30,105,.72); }
.cell:not(.hidden-slot):not(.cell-complete):hover .card.top{
  transform:translate(-2px,-3px) scale(1.015);
  box-shadow:6px 7px 0 var(--shadow);
  filter:brightness(1.04);
}
.cell:not(.hidden-slot):not(.cell-complete):active .card.top{
  transform:translate(1px,1px) scale(.995);
  box-shadow:2px 2px 0 var(--shadow);
}
.cell.stack-pile .card.top{
  outline:2px solid rgba(245,200,66,.32);
  outline-offset:3px;
}
.cell.stack-pile:not(.sel) .card.top{
  box-shadow:4px 4px 0 var(--shadow),0 0 0 2px rgba(245,200,66,.12);
}
.cell.stack-pulse .card.top{animation:stack-pulse .22s ease-out;}
.cell.stack-pulse .stack-badge{animation:badge-pulse .28s ease-out;}
@keyframes stack-pulse{0%{transform:scale(1);filter:brightness(1)}45%{transform:scale(1.035);filter:brightness(1.12)}100%{transform:scale(1);filter:brightness(1)}}
@keyframes badge-pulse{0%{box-shadow:0 0 0 rgba(245,200,66,0);filter:brightness(1)}50%{box-shadow:0 0 10px rgba(245,200,66,.7);filter:brightness(1.35)}100%{box-shadow:0 0 0 rgba(245,200,66,0);filter:brightness(1)}}

/* selected */
.cell.sel .card.top{
  transform:translate(-1px,-2px) scale(1.025) !important;
  box-shadow:4px 5px 0 var(--shadow),0 0 0 3px rgba(245,200,66,.38),0 0 12px rgba(245,200,66,.18) !important;
  z-index:30;
}
.cell.sel .card.top[data-t=kanji]   {background-color:var(--cks);border-color:var(--ckb);}
.cell.sel .card.top[data-t=furigana]{background-color:var(--cfs);border-color:var(--cfb);}
.cell.sel .card.top[data-t=meaning] {background-color:var(--cms);border-color:var(--cmb);}

/* wrong flash */
.cell.wrong .card.top{animation:wsh .42s ease;border-color:var(--red)!important;filter:saturate(1.35);}
@keyframes wsh{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px) rotate(-2deg)}40%{transform:translateX(9px) rotate(2deg)}65%{transform:translateX(-5px)}82%{transform:translateX(5px)}}
/* Correct match — restrained, mockup-style. Just a clean scale + brightness
   pop. No border-color override, no glow stacking, no shadow soup. The card
   communicates "matched" by popping and then disappearing; downstream effects
   (combo popup, monster hit, damage popup) carry the rest. */
.cell.correct .card.top{animation:cok .35s ease;}
@keyframes cok{
  0%,100% { transform:scale(1);    filter:brightness(1); }
  50%     { transform:scale(1.08); filter:brightness(1.3); }
}

/* card fly animation when stacking */
.card-fly{
  position:fixed;
  pointer-events:none;
  z-index:500;
  border-radius:10px;
  border:3px solid var(--shadow);
  background-image:linear-gradient(135deg,rgba(255,255,255,.35) 0%,transparent 55%);
  contain:layout paint style;
  will-change:transform,opacity;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  transition:transform .20s cubic-bezier(.2,0,.2,1),
             opacity .16s ease .06s;
}

/* completed pile — stays on board with green glow */
.cell-complete { cursor:default; pointer-events:all; }
.cell-complete .card.top {
  border-color: var(--green) !important;
  box-shadow: 0 0 0 2px rgba(76,175,106,.5), 4px 4px 0 var(--shadow) !important;
  opacity: 0.68;
  cursor: default;
}
.cell-complete .card { pointer-events:none; } /* let events bubble to .cell */
.cell-complete .card.top::after {
  content:'✓';
  position:absolute; top:4px; right:7px;
  font-family:var(--fp); font-size:11px;
  color:var(--green); opacity:.9; z-index:5;
  text-shadow:0 0 6px rgba(76,175,106,.7);
}
.cell.hidden-slot {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── FILTER PANEL extras ── */
.filter-section{margin-bottom:6px;}
.range-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.range-input{width:76px;background:var(--board);color:#f5ead8;border:2px solid var(--shadow);border-radius:6px;padding:4px 8px;font-family:var(--fu);font-weight:500;font-size:14px;text-align:center;outline:none;}
.range-input:focus{border-color:var(--yellow);}
.range-sep{font-family:var(--fu);font-weight:500;font-size:14px;color:rgba(245,234,216,.5);}
.tag-grid{display:flex;flex-wrap:wrap;gap:5px;}
.tag-chip{font-family:var(--fu);font-weight:500;font-size:12px;padding:4px 9px;border-radius:20px;border:2px solid var(--shadow);background:var(--board);color:rgba(245,234,216,.68);cursor:pointer;transition:background .1s,color .1s,border-color .1s;}
.tag-chip.on{background:var(--yellow);color:#1a0a04;border-color:var(--ckb);}
.filter-status{font-family:var(--fu);font-weight:600;font-size:13px;color:var(--yellow);margin-bottom:8px;min-height:16px;}

#exTooltip{
  position:fixed;
  bottom:calc(60px + env(safe-area-inset-bottom,0px));
  left:50%;
  transform:translateX(-50%);
  background:rgba(15,8,3,.97);
  border:2px solid rgba(245,200,66,.5);
  border-radius:14px;
  padding:16px 24px 13px;
  width:fit-content;
  min-width:min(220px,calc(100vw - 32px));
  max-width:min(460px,calc(100vw - 32px));
  z-index:300;
  pointer-events:none;
  opacity:0;
  transition:opacity .08s ease;
  box-shadow:0 4px 24px rgba(0,0,0,.7), 0 0 0 1px rgba(245,200,66,.15);
  text-align:center;
  overflow-wrap:anywhere;
}
#exTooltip.show{opacity:1;pointer-events:all;}
/* Word title with ruby */
.ex-word-ruby{
  font-family:var(--fj);font-size:28px;color:#f5ead8;
  line-height:2.4;margin-bottom:4px;
}
.ex-word-ruby ruby{
  display:inline-flex;flex-direction:column-reverse;
  align-items:center;vertical-align:bottom;
}
.ex-word-ruby rt{font-size:13px;color:rgba(245,234,216,.65);line-height:1.3;font-family:var(--fj);}
/* Meaning */
.ex-meaning{
  font-family:var(--fu);font-size:15px;color:#90c8f0;
  margin-bottom:12px;white-space:pre-line;line-height:1.6;
}
.flag-btn{position:absolute;bottom:5px;left:6px;font-size:10px;background:none;border:none;cursor:pointer;opacity:0 !important;pointer-events:none;color:rgba(245,200,66,.60);transition:opacity .15s;z-index:10;padding:2px;line-height:1;}
.cell:hover .flag-btn{opacity:0;}
.flag-btn.flagged{opacity:0 !important;color:var(--yellow);}
.cell.is-flagged .card.top::before{color:rgba(200,50,50,.82);text-shadow:0 0 5px rgba(224,80,80,.40);}

/* stack count badge */
.stack-badge{
  position:absolute;top:5px;right:7px;
  font-family:var(--fp);font-size:10px;opacity:.72;
  letter-spacing:1px;color:#f5ead8;background:rgba(26,10,4,.5);
  border:1px solid rgba(0,0,0,.35);border-radius:8px;
  padding:1px 5px;z-index:4;pointer-events:none;
}

/* content */
.ck{font-family:var(--fj);font-weight:800;color:var(--txt);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.cf{font-family:var(--fj);font-weight:500;color:#103820;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.cm,.cmx{
  font-family:var(--card-fu);max-width:100%;white-space:normal;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;overflow-wrap:anywhere;
}
.cm{font-weight:500;color:#080830;line-height:1.35;padding-bottom:2px;-webkit-line-clamp:3;}
.cm.has-sub{-webkit-line-clamp:2;}
.cmx{color:#303070;margin-top:1px;opacity:.75;font-size:.80em;line-height:1.25;-webkit-line-clamp:1;}
/* Trailing parenthetical qualifier (e.g. "เร็ว (เวลา)" / "to take off (clothes)").
   Rendered as a smaller, softer inline span by writeMeaningInto() in js/main.js.
   Glued to the main word via U+00A0 in JS so it can't orphan onto its own line. */
.cm-qual{font-size:.85em;opacity:.60;font-weight:normal;}
/* In Both mode, the qualifier inside .cmx (already at .80em + opacity .75) needs
   a higher opacity floor so it stays readable on mobile. */
.cmx .cm-qual{opacity:.75;}

/* ── RESULT ── */
.ov{display:none;position:fixed;inset:0;background:rgba(26,10,4,.70);z-index:999;align-items:center;justify-content:center;padding:24px;}
.ov.on{display:flex;}
#pauseOv{background:rgba(15,8,3,.96);}
#defeatOv{background:rgba(26,10,4,.88);}
.rb{background:var(--board);border:5px solid var(--shadow);border-radius:18px;padding:32px 44px;text-align:center;box-shadow:10px 10px 0 var(--shadow);width:min(420px,calc(100vw - 48px));max-width:420px;min-height:330px;max-height:80dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;animation:rpi .35s cubic-bezier(.34,1.2,.64,1);display:flex;flex-direction:column;}
@keyframes rpi{0%{transform:scale(.5) rotate(-5deg);opacity:0}100%{transform:scale(1);opacity:1}}
.re{font-size:65px;display:block;margin-bottom:8px;}
.rt{font-family:var(--fu);font-size:22px;color:var(--yellow);text-shadow:none;letter-spacing:0;margin-bottom:4px;text-align:center;padding-left:0;font-weight:600;}
.rsc{font-family:var(--fu);font-size:18px;color:#f5ead8;opacity:.85;margin-bottom:3px;font-weight:500;}
.rti{font-family:var(--fu);font-size:14px;color:var(--pin);margin-bottom:22px;font-weight:500;}
.rac{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ── SETUP MODAL ── */
.setup-section{margin:7px 0 5px;}
.setup-slbl{font-family:var(--fu);font-weight:600;font-size:11px;color:var(--pin);letter-spacing:0;text-transform:none;margin-bottom:4px;display:block;text-align:left;}
.setup-tg{justify-content:center;width:100%;margin-top:6px;}
.setup-tg .tb{flex:1;text-align:center;padding:9px 5px;font-size:12px;}
.setup-warn{font-family:var(--fu);font-size:11px;color:rgba(245,200,66,.55);letter-spacing:0;min-height:12px;text-align:center;margin-bottom:2px;}
.setup-select{width:100%;background:var(--board);color:#f5ead8;border:3px solid var(--shadow);border-radius:8px;padding:8px 10px;font-family:var(--fu);font-weight:600;font-size:13px;box-shadow:2px 2px 0 var(--shadow);outline:none;}
.setup-select:focus{border-color:var(--yellow);}
.mode-desc,.match-desc{font-family:var(--fu);font-size:12px;color:rgba(245,234,216,.58);line-height:1.25;text-align:center;margin-top:5px;}
.quick-only{display:block;}
.setup-modal-custom .quick-only{display:none;}
.custom-only{display:none;}
.setup-modal-custom .custom-only{display:block;}
.full-only{display:none;}
.setup-mode-full .full-only{display:block;}
/* ── POOL COMPLETE ── */
.result-panel{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%,rgba(245,200,66,.18),transparent 34%),
    linear-gradient(180deg,rgba(111,58,34,.98),rgba(82,43,27,.98));
  border-color:#180704;
  box-shadow:10px 10px 0 var(--shadow),0 0 0 2px rgba(245,200,66,.10),inset 0 0 38px rgba(245,200,66,.08);
  /* Panel rises with weight. Slight delay so the boss-flash (when present) lands first. */
  animation: result-panel-rise .52s cubic-bezier(.22,1.1,.32,1) .04s both;
}
@keyframes result-panel-rise{
  0%   { opacity:0; transform: translateY(22px) scale(.94); }
  60%  { opacity:1; }
  100% { opacity:1; transform: translateY(0) scale(1); }
}
.result-panel::before{
  content:'';position:absolute;inset:10px;border:1px solid rgba(245,200,66,.14);
  border-radius:13px;pointer-events:none;
  z-index:1;
}
/* ::after is reused below ONLY for the boss-defeated gold-flash overlay.
   For a normal run-complete it stays empty (no content). */

/* ── Trophy ─────────────────────────────────────────────────────────────
   Drop from above with a bounce settle. No rotation, no infinite loop.
   The icon sits over a one-shot outward glow ring (added for boss runs). */
.result-icon{
  position:relative;
  display:inline-block;
  font-size:58px;
  line-height:1;
  margin-bottom:10px;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.32));
  animation: result-icon-drop .72s cubic-bezier(.18,.8,.28,1.1) .18s both;
  z-index:2;
}
@keyframes result-icon-drop{
  0%   { transform: translateY(-72px) scale(.55); opacity:0; }
  55%  { transform: translateY(6px)   scale(1.18); opacity:1; }
  78%  { transform: translateY(-2px)  scale(.97); }
  100% { transform: translateY(0)     scale(1); opacity:1; }
}

/* ── Title ──────────────────────────────────────────────────────────────
   Clean wipe-up from below. */
.result-title{
  font-size:clamp(24px,4vw,34px);
  color:var(--yellow);
  margin-bottom:5px;
  text-shadow:0 2px 0 rgba(0,0,0,.35);
  animation: result-title-up .42s cubic-bezier(.22,1.0,.36,1) .42s both;
}
@keyframes result-title-up{
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Badge & subtitle ───────────────────────────────────────────────────
   Soft fade after the title. */
.result-badge{ animation: result-fade-in .35s ease-out .58s both; }
.result-subtitle{ animation: result-fade-in .35s ease-out .50s both; }
@keyframes result-fade-in{
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Stats stagger ──────────────────────────────────────────────────────
   Each tile fades in with a small offset for rhythm. Buttons follow last. */
.pc-stat{ animation: result-stat-in .36s cubic-bezier(.22,1.0,.36,1) both; }
.pc-stat:nth-child(1){ animation-delay:.66s; }
.pc-stat:nth-child(2){ animation-delay:.74s; }
.pc-stat:nth-child(3){ animation-delay:.82s; }
.pc-stat:nth-child(4){ animation-delay:.90s; }
.pc-stat:nth-child(5){ animation-delay:.98s; }
.pc-stat:nth-child(6){ animation-delay:1.06s; }
@keyframes result-stat-in{
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
.result-actions{ animation: result-fade-in .4s ease-out 1.18s both; }

/* ── Boss Defeated variant ──────────────────────────────────────────────
   Adds: brief gold flash overlay, an outward glow ring radiating from the
   trophy (one-shot), and a warmer title tint. No infinite loops. */
.result-panel.boss-defeated{
  box-shadow:10px 10px 0 var(--shadow),0 0 0 2px rgba(255,200,90,.22),inset 0 0 52px rgba(255,180,80,.14);
}
.result-panel.boss-defeated .result-title{
  color:#ffd66a;
  text-shadow:0 0 14px rgba(255,180,80,.45),0 2px 0 rgba(0,0,0,.35);
}
/* Gold flash: bright radial wash that fades quickly. Lands BEFORE the
   panel finishes rising so the moment of victory hits first. */
.result-panel.boss-defeated::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 28%,
    rgba(255,236,160,.95) 0%,
    rgba(255,200,90,.55) 22%,
    rgba(255,160,90,.18) 48%,
    transparent 72%);
  opacity:0;
  pointer-events:none;
  animation: result-flash .58s ease-out both;
  mix-blend-mode:screen;
  z-index:0;
}
@keyframes result-flash{
  0%   { opacity:0; }
  18%  { opacity:1; }
  100% { opacity:0; }
}
/* Outward glow ring radiating from the trophy. One-shot, fades out. */
.result-panel.boss-defeated .result-icon::after{
  content:'';
  position:absolute;
  left:50%; top:55%;
  width:30px; height:30px;
  margin-left:-15px; margin-top:-15px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,210,120,.85) 0%,rgba(255,160,90,.45) 35%,transparent 70%);
  transform:scale(.4);
  opacity:0;
  pointer-events:none;
  animation: result-ring .9s cubic-bezier(.2,.6,.3,1) .55s both;
  z-index:-1;
}
@keyframes result-ring{
  0%   { transform:scale(.4);  opacity:0; }
  18%  { opacity:.9; }
  100% { transform:scale(4.2); opacity:0; }
}
.result-subtitle{
  font-size:16px;
  color:rgba(245,234,216,.78);
  margin-bottom:14px;
}
.result-badge{
  display:inline-block;
  font-family:var(--fu);
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:3px 10px;
  border-radius:999px;
  margin:0 auto 8px;
  border:1px solid rgba(245,200,66,.5);
  background:rgba(26,10,4,.45);
  color:rgba(245,234,216,.88);
}
.result-badge:empty{display:none;}
.result-badge[data-kind="perfect"]{
  color:#fff2a8;
  border-color:rgba(255,106,209,.65);
  background:linear-gradient(180deg,rgba(255,106,209,.18),rgba(255,180,80,.18));
  box-shadow:0 0 12px rgba(255,180,80,.25);
}
.pc-stats{
  margin:4px 0 18px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.pc-stat{
  background:rgba(26,10,4,.34);
  border:2px solid rgba(26,10,4,.72);
  border-radius:9px;
  padding:8px 9px;
  box-shadow:inset 0 1px 0 rgba(245,234,216,.08);
  text-align:left;
}
.pc-stat span{
  display:block;
  font-family:var(--fu);
  font-size:11px;
  font-weight:600;
  color:rgba(245,200,66,.70);
  line-height:1.1;
  margin-bottom:3px;
}
.pc-stat strong{
  display:block;
  font-family:var(--fu);
  font-size:16px;
  font-weight:700;
  color:#f5ead8;
  line-height:1.18;
}
.pc-stat-wide{grid-column:1 / -1;text-align:left;}
.result-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  width:100%;
}
.result-actions .btn{
  width:100%;
  padding:8px 10px;
}

/* ── TOAST / FX ── */
.toast{position:fixed;top:68px;left:50%;transform:translateX(-50%) translateY(-14px);background:var(--shadow);border:3px solid var(--yellow);border-radius:10px;padding:7px 18px;font-family:var(--fp);font-size:15px;color:var(--yellow);z-index:1000;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;box-shadow:3px 3px 0 var(--shadow);}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);}
.cpop{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--fp);font-size:clamp(20px,3.2vw,42px);color:var(--yellow);text-shadow:3px 3px 0 #8b5e00;pointer-events:none;z-index:998;animation:cp .7s ease forwards;letter-spacing:3px;white-space:nowrap;text-align:center;}
.cpop-num{display:block;line-height:1;}
.cpop-sub{display:block;font-size:.36em;color:#f5ead8;text-shadow:2px 2px 0 #000;letter-spacing:2px;margin-top:6px;line-height:1;}
.cpop-tier{font-weight:700;letter-spacing:3px;}
/* Streak tiers — rhythm-game escalation. Higher tiers get warmer colors,
   stronger glow, and a slightly larger pop. Tier label is inline inside
   .cpop-sub; the headline (.cpop-num) is tinted only at excellent/perfect. */
.cpop[data-tier="good"]      .cpop-tier{color:#9bd6a0;}
.cpop[data-tier="great"]     .cpop-tier{color:#74b8ff;}
.cpop[data-tier="excellent"] .cpop-tier{color:#ff9b3a;}
.cpop[data-tier="perfect"]   .cpop-tier{color:#ff6ad1;}
.cpop[data-tier="great"]{
  text-shadow:3px 3px 0 #2a4a82, 0 0 12px rgba(116,184,255,.45);
}
.cpop[data-tier="excellent"]{
  color:#ffd66a;
  text-shadow:3px 3px 0 #8b3e00, 0 0 16px rgba(255,155,58,.55);
  animation:cp .7s ease forwards, cpop-pulse .5s ease-in-out 1;
}
.cpop[data-tier="perfect"]{
  color:#fff2a8;
  text-shadow:3px 3px 0 #b13b9b, 0 0 18px rgba(255,106,209,.6), 0 0 32px rgba(255,180,80,.4);
  animation:cp .7s ease forwards, cpop-pulse .45s ease-in-out 2;
}
/* Practice popup — quiet, no glow, no tier flavor. */
.cpop[data-tier="practice"]{
  color:#d8cdb8;
  text-shadow:2px 2px 0 #000;
  font-size:clamp(16px,2.4vw,30px);
  letter-spacing:2px;
}
@keyframes cp{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}60%{transform:translate(-50%,-95%) scale(1.12);opacity:1}100%{transform:translate(-50%,-135%) scale(.8);opacity:0}}
@keyframes cpop-pulse{0%,100%{filter:brightness(1);}50%{filter:brightness(1.35) saturate(1.2);}}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--board);border-radius:4px}

/* ════════════════════════════════════════
   BATTLE LAYER
   ════════════════════════════════════════ */

/* Dungeon atmosphere when game is active */
#game.on {
  background:
    radial-gradient(ellipse at 12% 100%, rgba(46,138,80,.15), transparent 38%),
    radial-gradient(ellipse at 88% 100%, rgba(192,57,43,.16), transparent 38%),
    radial-gradient(ellipse at 50% 60%, rgba(20,10,5,.60), transparent 55%),
    linear-gradient(180deg,#0d0705 0%,#1a0f08 30%,#2d1a0e 60%,#3d2015 100%);
  position: relative;
}
#game.on::before {
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse at 5% 5%, rgba(245,200,66,.04), transparent 28%),
    radial-gradient(ellipse at 95% 5%, rgba(245,200,66,.03), transparent 24%),
    radial-gradient(ellipse at 8% 95%, rgba(76,175,106,.05), transparent 22%),
    radial-gradient(ellipse at 92% 95%, rgba(192,57,43,.05), transparent 22%),
    radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.18), transparent 65%);
}
#game.on .prow,#game.on #boardWrap { position:relative;z-index:1; }
#game.boss-phase {
  background:
    radial-gradient(circle at 78% 12%, rgba(168,62,196,.34), transparent 34%),
    radial-gradient(circle at 50% 30%, rgba(245,200,66,.08), transparent 44%),
    linear-gradient(180deg,#10040d 0%,#1d0716 32%,#2b0f17 66%,#3d1712 100%);
}
#game.boss-phase #board {
  border-color:rgba(178,70,190,.45);
  box-shadow:0 0 0 2px rgba(245,200,66,.16),0 0 34px rgba(178,70,190,.32) inset,0 0 24px rgba(178,70,190,.18);
  animation:boss-board-pulse 1.9s ease-in-out infinite;
}
#game.boss-phase #board::before{
  background:
    radial-gradient(ellipse at 50% 18%,rgba(215,96,230,.12),transparent 42%),
    linear-gradient(180deg,rgba(178,70,190,.08),transparent 34%),
    repeating-linear-gradient(88deg,transparent 0px,rgba(178,70,190,.025) 2px,transparent 4px,rgba(255,255,255,.014) 6px);
}
#game.boss-phase .pb {
  box-shadow:0 0 16px rgba(178,70,190,.22);
}
#game.boss-phase .round-words-status {
  color:#f5c842;
  text-shadow:0 0 10px rgba(178,70,190,.45);
}
@keyframes boss-board-pulse{0%,100%{box-shadow:0 0 0 2px rgba(245,200,66,.12),0 0 22px rgba(178,70,190,.20) inset,0 0 14px rgba(178,70,190,.12)}50%{box-shadow:0 0 0 2px rgba(245,200,66,.20),0 0 30px rgba(178,70,190,.34) inset,0 0 20px rgba(178,70,190,.18)}}

/* ── SPRITE BAR ── */
#spriteBar {
  display: none;
  flex-shrink: 0;
  flex-direction: row;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 16px 9px;
  background:
    radial-gradient(ellipse at 8% 90%, rgba(76,175,106,.22), transparent 36%),
    radial-gradient(ellipse at 92% 90%, rgba(192,57,43,.20), transparent 36%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.40), transparent 45%),
    linear-gradient(180deg,rgba(4,2,1,.90),rgba(0,0,0,.55));
  border-top: 1px solid rgba(245,200,66,.08);
  border-bottom: 2px solid rgba(0,0,0,.55);
  position: relative;
  z-index: 2;
  min-height: 0;
  box-shadow:inset 0 -16px 26px rgba(0,0,0,.32),inset 0 1px 0 rgba(245,200,66,.08);
  overflow:hidden;
}
#game.on #spriteBar { display: flex; }
#spriteBar::before{
  content:'';position:absolute;left:14px;right:14px;bottom:4px;height:22px;
  background:linear-gradient(90deg,
    rgba(76,175,106,.20) 0%,
    rgba(76,175,106,.12) 18%,
    rgba(245,200,66,.06) 38%,
    rgba(245,200,66,.06) 62%,
    rgba(192,57,43,.12) 82%,
    rgba(192,57,43,.20) 100%);
  border-top:1px solid rgba(245,200,66,.14);
  opacity:.85;pointer-events:none;
}
#game.boss-phase #spriteBar{
  background:
    radial-gradient(ellipse at 8% 90%, rgba(76,175,106,.14), transparent 32%),
    radial-gradient(ellipse at 88% 88%, rgba(178,70,190,.45), transparent 42%),
    radial-gradient(ellipse at 52% 38%, rgba(245,200,66,.06), transparent 44%),
    linear-gradient(180deg,rgba(14,2,16,.94),rgba(15,4,12,.62));
  box-shadow:inset 0 -18px 34px rgba(0,0,0,.38),inset 0 0 26px rgba(178,70,190,.18),0 2px 0 rgba(245,200,66,.12);
}
#game.boss-phase #spriteBar::before{
  background:linear-gradient(90deg,transparent,rgba(178,70,190,.18) 18%,rgba(245,200,66,.12) 50%,rgba(178,70,190,.24) 82%,transparent);
  border-top-color:rgba(215,96,230,.24);
}
#game.boss-phase #spr-minori::after {
  background: radial-gradient(ellipse at 50% 100%, rgba(220,160,60,.48), transparent 68%);
}
#game.boss-phase #spr-boss::after {
  background: radial-gradient(ellipse at 50% 100%, rgba(178,70,190,.68), transparent 68%);
}

/* Sprite wrapper — all layers always in DOM, only opacity switches (no image swap = no blink) */
.spr-wrap {
  position: relative;
  flex-shrink: 0;
  image-rendering: pixelated;
  will-change: transform;
  transform: translateZ(0);  /* own compositor layer, isolated from page repaints */
}
.spr-wrap::before{
  content:'';position:absolute;left:8%;right:8%;bottom:1px;height:16%;
  background:radial-gradient(ellipse,rgba(0,0,0,.50),rgba(0,0,0,.16) 60%,transparent 76%);
  transform:translateY(36%);filter:blur(1px);z-index:0;pointer-events:none;
}
#spr-minori { width:112px; height:112px; }
#spr-minori::after {
  content:'';
  position:absolute;
  left:-18%;right:-18%;
  bottom:-3px;height:20px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%, rgba(76,175,106,.55), transparent 68%);
  pointer-events:none;
  z-index:0;
}
#spr-boss   { width:156px; height:156px; }
#spr-boss::after {
  content:'';
  position:absolute;
  left:-18%;right:-18%;
  bottom:-3px;height:20px;
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%, rgba(192,57,43,.50), transparent 68%);
  pointer-events:none;
  z-index:0;
}
#spr-boss.monster-small {
  transform:translate3d(var(--monster-offset-x,0),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8));
  transform-origin:right bottom;
}
@media(min-width:1200px){
  .spr-wrap::before{
    left:4%;right:4%;height:18%;
    background:radial-gradient(ellipse,rgba(0,0,0,.56),rgba(0,0,0,.18) 62%,transparent 78%);
  }
  #spr-minori::after,
  #spr-boss::after{
    left:-22%;right:-22%;height:24px;
  }
  #spr-minori::after{
    background:radial-gradient(ellipse at 50% 100%, rgba(76,175,106,.62), transparent 70%);
  }
  #spr-boss::after{
    background:radial-gradient(ellipse at 50% 100%, rgba(192,57,43,.58), transparent 70%);
  }
}
.spr-layer {
  position: absolute;
  top:0; left:0; width:100%; height:100%;
  z-index:1;
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-position: 0 0;
  /* 0.0001 instead of 0: browser skips rasterization for exactly-zero opacity,
     causing a decode flash on first show. Non-zero forces textures to stay warm. */
  opacity: 0.0001;
  animation-play-state: paused;
  will-change: opacity;
}
.spr-layer.active { opacity: 1; animation-play-state: running; }
.spr-wrap.enemy-attacking{animation:enemy-attack-lunge .38s cubic-bezier(.2,.8,.2,1);}
.spr-wrap.enemy-hit-lite{animation:enemy-hit-lite .30s ease-out;}
.spr-wrap.enemy-hit-boss{animation:enemy-hit-boss .30s ease-out;}

/* ── Monster-defeat slash (normal encounters, not boss) ────────────────
   Spawned by playMonsterSlash() when an encounter clears. Two diagonal
   slashes sweep across the monster from opposite angles, followed by a
   white impact flash. CSS-only — JS just creates the DOM nodes. */
.monster-slash{
  position:absolute;
  left:50%; top:50%;
  width:140%; height:7px;
  margin-left:-70%; margin-top:-3.5px;
  background:linear-gradient(90deg,
    transparent              0%,
    rgba(255,255,255,0)      6%,
    rgba(255,255,255,1)     22%,
    rgba(255,250,210,1)     50%,
    rgba(255,255,255,1)     78%,
    rgba(255,255,255,0)     94%,
    transparent            100%);
  box-shadow:0 0 14px rgba(255,255,255,.85), 0 0 28px rgba(255,200,90,.55);
  filter:blur(.4px);
  border-radius:6px;
  transform-origin:50% 50%;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:8;
  transform: rotate(var(--slash-angle, -30deg)) scaleX(0);
  opacity:0;
  animation: monster-slash-sweep .28s cubic-bezier(.18,.7,.32,1) forwards;
}
@keyframes monster-slash-sweep{
  0%   { transform: rotate(var(--slash-angle,-30deg)) scaleX(0);    opacity:0; }
  18%  { opacity:1; }
  55%  { transform: rotate(var(--slash-angle,-30deg)) scaleX(1.12); opacity:1; }
  100% { transform: rotate(var(--slash-angle,-30deg)) scaleX(1.25); opacity:0; }
}
.monster-slash-flash{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,255,255,.78) 0%,
    rgba(255,220,140,.42) 38%,
    transparent 78%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:9;
  animation: monster-slash-flash .28s ease-out forwards;
}
@keyframes monster-slash-flash{
  0%   { opacity:0; }
  18%  { opacity:1; }
  100% { opacity:0; }
}

/* ── Player charge → attack → projectile (boss-defeat finale) ──────────
   The player builds up a green energy aura, lunges into attack pose, and
   fires a bright green bolt across #spriteBar that strikes the boss.
   Triggers the existing boom sequence at impact. */
.player-charge-aura{
  position:absolute;
  left:50%; top:50%;
  width:34px; height:34px;
  margin-left:-17px; margin-top:-17px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(circle,
    rgba(220,255,220,1)   0%,
    rgba(120,230,140,.85) 28%,
    rgba(76,175,106,.55)  55%,
    rgba(76,175,106,.18)  72%,
    transparent           85%);
  transform:translate(-50%,-50%) scale(.4);
  opacity:0;
  mix-blend-mode:screen;
  filter:blur(.5px);
  z-index:5;
  animation: player-charge-build .42s cubic-bezier(.4,.0,.6,1) forwards;
}
@keyframes player-charge-build{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.40); }
  30%  { opacity:1; transform:translate(-50%,-50%) scale(1.30); }
  80%  { opacity:1; transform:translate(-50%,-50%) scale(2.10); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.35); }
}
.spr-wrap.player-charging{ animation: player-charge-shudder .07s ease-in-out infinite; }
@keyframes player-charge-shudder{
  0%,100% { transform:translate3d(var(--monster-offset-x,0), var(--monster-offset-y,0), 0) scale(var(--monster-scale,1)); }
  50%     { transform:translate3d(calc(var(--monster-offset-x,0) + 1.5px), var(--monster-offset-y,0), 0) scale(var(--monster-scale,1)); }
}

/* Energy bolt: bright green core, sized from --proj-from-x to --proj-to-x */
.player-projectile{
  position:absolute;
  width:46px; height:16px;
  border-radius:50% / 50%;
  pointer-events:none;
  background:radial-gradient(ellipse,
    rgba(255,255,235,1)   0%,
    rgba(190,255,200,.95) 28%,
    rgba(120,255,140,.72) 55%,
    rgba(76,175,106,.32)  80%,
    transparent           100%);
  box-shadow:0 0 18px rgba(140,255,160,.85), 0 0 36px rgba(76,175,106,.5);
  filter:blur(.4px);
  mix-blend-mode:screen;
  z-index:6;
  transform: translate(var(--proj-from-x,0), -50%) scaleX(1);
  opacity:0;
  animation: player-projectile-fly var(--proj-time, 280ms) cubic-bezier(.35,.0,.5,1) forwards;
}
@keyframes player-projectile-fly{
  0%   { transform: translate(var(--proj-from-x,0), -50%) scaleX(1.0); opacity:0; }
  12%  { opacity:1; }
  85%  { opacity:1; }
  100% { transform: translate(var(--proj-to-x,0),   -50%) scaleX(1.7); opacity:1; }
}

/* ── Boss-defeat explosions ─────────────────────────────────────────────
   Spawned by playBossDefeatExplosions() during finishBossRound().
   Small booms hit at random spots around the boss, then a big climactic
   boom + shockwave + white flash vanishes the boss. */
.boss-boom-spot{
  position:absolute;
  width:90px;height:90px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;
  background:radial-gradient(circle,
    rgba(255,255,230,1)  0%,
    rgba(255,210,90,.95) 22%,
    rgba(255,130,50,.78) 45%,
    rgba(180,40,20,.42) 65%,
    transparent 80%);
  mix-blend-mode:screen;
  filter:blur(.5px);
  z-index:10;
  animation: boss-boom .46s cubic-bezier(.2,.7,.3,1) forwards;
}
.boss-boom-spot.big{
  width:200px;height:200px;
  animation: boss-boom-big .72s cubic-bezier(.18,.7,.28,1) forwards;
}
@keyframes boss-boom{
  0%   { opacity:0;  transform:translate(-50%,-50%) scale(.20); }
  15%  { opacity:1;  transform:translate(-50%,-50%) scale(1.00); }
  45%  { opacity:.85;transform:translate(-50%,-50%) scale(1.40); }
  100% { opacity:0;  transform:translate(-50%,-50%) scale(1.75); }
}
@keyframes boss-boom-big{
  0%   { opacity:0;  transform:translate(-50%,-50%) scale(.30); }
  12%  { opacity:1;  transform:translate(-50%,-50%) scale(1.05); }
  38%  { opacity:1;  transform:translate(-50%,-50%) scale(1.55); }
  100% { opacity:0;  transform:translate(-50%,-50%) scale(2.50); }
}
.boss-shockwave{
  position:absolute;
  left:50%; top:48%;
  width:48px; height:48px;
  margin-left:-24px; margin-top:-24px;
  border-radius:50%;
  border:3px solid rgba(255,220,140,.85);
  box-shadow:0 0 12px rgba(255,180,80,.5);
  transform:scale(.3);
  opacity:0;
  pointer-events:none;
  z-index:9;
  animation: boss-shockwave 1.0s cubic-bezier(.18,.65,.3,1) forwards;
}
@keyframes boss-shockwave{
  0%   { opacity:0;  transform:scale(.30); border-width:3px; }
  10%  { opacity:1; }
  100% { opacity:0;  transform:scale(4.2); border-width:1px; }
}
/* Boss shudder while explosions are landing */
.spr-wrap.boss-shaking{ animation: boss-shudder .11s ease-in-out infinite; }
@keyframes boss-shudder{
  0%,100% { transform:translate3d(var(--monster-offset-x,0),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8)); }
  25%     { transform:translate3d(calc(var(--monster-offset-x,0) - 3px), var(--monster-offset-y,0), 0) scale(var(--monster-scale,.8)); }
  75%     { transform:translate3d(calc(var(--monster-offset-x,0) + 3px), var(--monster-offset-y,0), 0) scale(var(--monster-scale,.8)); }
}
/* White-out flash that covers the boss during the big boom */
.boss-final-flash{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.96) 0%, rgba(255,240,200,.7) 38%, transparent 75%);
  opacity:0;
  pointer-events:none;
  border-radius:6px;
  mix-blend-mode:screen;
  z-index:11;
  animation: boss-final-flash .58s ease-out forwards;
}
@keyframes boss-final-flash{
  0%   { opacity:0; }
  18%  { opacity:1; }
  100% { opacity:0; }
}
@keyframes enemy-attack-lunge{
  0%,100%{transform:translate3d(var(--monster-offset-x,0),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8))}
  18%{transform:translate3d(calc(var(--monster-offset-x,0) + 4px),var(--monster-offset-y,0),0) scale(calc(var(--monster-scale,.8) * .995))}
  48%{transform:translate3d(calc(var(--monster-offset-x,0) - 10px),calc(var(--monster-offset-y,0) - 1px),0) scale(calc(var(--monster-scale,.8) * 1.03))}
  76%{transform:translate3d(calc(var(--monster-offset-x,0) - 2px),var(--monster-offset-y,0),0) scale(calc(var(--monster-scale,.8) * 1.01))}
}
@keyframes enemy-hit-lite{
  0%,100%{filter:none;transform:translate3d(var(--monster-offset-x,0),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8))}
  36%{filter:brightness(1.65) saturate(1.32);transform:translate3d(calc(var(--monster-offset-x,0) - 3px),var(--monster-offset-y,0),0) scale(calc(var(--monster-scale,.8) * 1.035))}
  70%{filter:brightness(1.12) saturate(1.08);transform:translate3d(calc(var(--monster-offset-x,0) - 1px),var(--monster-offset-y,0),0) scale(calc(var(--monster-scale,.8) * 1.01))}
}
@keyframes enemy-hit-boss{0%,100%{filter:none;transform:translate3d(0,0,0) scale(1)}35%{filter:brightness(2.0) saturate(1.5) hue-rotate(15deg);transform:translate3d(-5px,0,0) scale(1.04)}70%{filter:brightness(1.15);transform:translate3d(-1px,0,0) scale(1.01)}}
/* Minori layers (display 112×112, frame 256×256, scale 0.44) */
.char-idle-b    { background-image:url('assets/char_idle.png');   background-size:448px 112px; animation:sfc4 0.64s steps(4) infinite; }
.char-attack-b  { background-image:url('assets/char_attack.png'); background-size:448px 112px; animation:sfc4-os 0.28s steps(3,end) 1 forwards; }
.char-hit-b     { background-image:url('assets/char_hit.png');    background-size:224px 112px; animation:sfc2-os 0.28s steps(1,end) 1 forwards; }
.char-victory-b { background-image:url('assets/char_idle.png');   background-size:448px 112px; animation:sfc4 0.16s steps(4) infinite; filter:brightness(1.6) saturate(2); }
.char-last-b    { background-image:url('assets/char_hit.png');    background-size:224px 112px; animation:sfc2 0.2s steps(2) infinite, lc-glow 0.3s ease-in-out infinite alternate; }
/* Boss layers (display 156×156, frame 512×512, scale 0.30) */
.boss-idle-b     { background-image:var(--boss-idle,url('assets/boss_idle.png'));         background-size:624px 156px; animation:sfb4 0.80s steps(4) infinite; }
.boss-attack-b   { background-image:var(--boss-attack,url('assets/boss_attack.png'));     background-size:468px 156px; animation:sfb3-os 0.30s steps(2,end) 1 forwards; }
.boss-hit-b      { background-image:var(--boss-hit,url('assets/boss_hit.png'));           background-size:468px 156px; animation:sfb3-os 0.30s steps(2,end) 1 forwards; }
.boss-defeated-b { background-image:var(--boss-defeated,url('assets/boss_defeated.png')); background-size:624px 156px; animation:sfb4-os 0.80s steps(3,end) 1 forwards; }
@keyframes sfc4 { from{background-position-x:0} to{background-position-x:-448px} }
@keyframes sfc2 { from{background-position-x:0} to{background-position-x:-224px} }
@keyframes sfb4 { from{background-position-x:0} to{background-position-x:-624px} }
@keyframes sfb3 { from{background-position-x:0} to{background-position-x:-468px} }
/* One-shot keyframes: end at last valid frame, not past the sheet */
@keyframes sfc4-os { from{background-position-x:0} to{background-position-x:-336px} }
@keyframes sfc2-os { from{background-position-x:0} to{background-position-x:-112px} }
@keyframes sfb4-os { from{background-position-x:0} to{background-position-x:-468px} }
@keyframes sfb3-os { from{background-position-x:0} to{background-position-x:-312px} }
@keyframes lc-glow { from{filter:brightness(1) saturate(1)} to{filter:brightness(2.5) saturate(3) hue-rotate(10deg)} }

/* HP column */
.hp-col {
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-width:0;
  gap:2px;
}
.hp-col.right { align-items:flex-end; }
.hp-name-lbl { font-family:var(--ui);font-weight:600;font-size:13px;color:rgba(245,234,216,.68); }
.hp-track { width:100%;height:10px;background:rgba(0,0,0,.55);border:2px solid rgba(0,0,0,.7);border-radius:4px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
.hp-fill { height:100%;border-radius:2px;transition:width .42s cubic-bezier(.2,0,.2,1);will-change:width; }
.hp-fill-grn { background:linear-gradient(90deg,#2e8a50,#4caf6a);box-shadow:0 0 6px rgba(76,175,106,.5); }
.hp-fill-ora { background:linear-gradient(90deg,#c0601a,#e67e22);box-shadow:0 0 6px rgba(230,126,34,.5); }
.hp-fill-red { background:linear-gradient(90deg,#922b21,#e74c3c);box-shadow:0 0 6px rgba(231,76,60,.5); }
.hp-fill-bos { background:linear-gradient(90deg,#7a1a1a,#c0392b);box-shadow:0 0 6px rgba(192,57,43,.5); }
.hp-sub { font-family:var(--ui);font-weight:500;font-size:12px;color:rgba(255,255,255,.4); }

/* ── COMPLETE DECK ── */
/* ── RECENT REVIEW STRIP (compact cleared zone) ── */
#completeDeck {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,.3);
  border-top: 2px solid rgba(0,0,0,.4);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  padding: 0 12px;
}
.deck-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}
.deck-title  { font-family:var(--fu);font-weight:700;font-size:11px;color:rgba(245,234,216,.55);letter-spacing:1.5px;text-transform:uppercase; }
.deck-count  { font-family:var(--fp);font-size:13px;color:var(--green);letter-spacing:1px; }
.deck-toggle { display:none; }
.deck-scroll {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.10) transparent;
  -webkit-overflow-scrolling: touch;
}
.deck-scroll::-webkit-scrollbar { height: 3px; }
.deck-scroll::-webkit-scrollbar-thumb { background:rgba(255,255,255,.15);border-radius:2px; }
.deck-card {
  flex-shrink: 0;
  height: 26px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20,12,6,.62);
  border: 1px solid rgba(245,234,216,.13);
  border-radius: 13px;
  cursor: help;
  animation: deck-chip-in .18s ease-out;
  transition: border-color .14s ease, background-color .14s ease, color .14s ease;
}
.deck-card:hover {
  border-color: rgba(144,200,240,.45);
  background: rgba(34,22,14,.7);
}
.deck-card:last-child {
  border-color: rgba(245,200,66,.42);
  background: rgba(48,32,10,.62);
}
.deck-card * { pointer-events:none; }
@keyframes deck-chip-in { from{opacity:0;transform:translateY(2px)} to{opacity:1;transform:translateY(0)} }
.dc-kanji { font-family:var(--fj);font-size:15px;color:rgba(245,234,216,.86);font-weight:600;line-height:1; }
/* Furigana / meaning are hidden in the chip — the existing tooltip provides full info on hover/tap. */
.dc-furi, .dc-mean { display:none; }
@media (prefers-reduced-motion: reduce){
  .deck-card{animation:none;}
}

/* ── ROUND FLASH (inside #board, auto-dismiss) ── */
#roundFlash {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 50;
  background: rgba(10,5,2,.87);
  border-radius: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}
#roundFlash.show { display:flex; }
.rf-emo   { font-size:48px;line-height:1; }
.rf-label { font-family:var(--fp);font-size:clamp(25px,5vw,38px);color:var(--yellow);letter-spacing:4px;text-shadow:3px 3px 0 #8b5e00; }
.rf-stats { font-family:var(--fp);font-size:16px;color:rgba(245,234,216,.65);letter-spacing:1px; }
.rf-next  { font-family:var(--fp);font-size:13px;color:rgba(245,234,216,.3);letter-spacing:2px;margin-top:6px;animation:pulse .7s ease infinite alternate; }

/* ── ENCOUNTER BANNER (non-blocking, top-center of board) ── */
#encounterBanner{
  position:absolute;top:8px;left:50%;
  transform:translate3d(-50%,-8px,0);
  z-index:60;pointer-events:none;opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 16px;
  background:linear-gradient(180deg,rgba(26,10,4,.92),rgba(26,10,4,.74));
  border:2px solid rgba(245,200,66,.42);
  border-radius:10px;
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
  transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.2,.64,1);
  max-width:calc(100% - 24px);text-align:center;white-space:nowrap;
}
#encounterBanner.show{opacity:1;transform:translate3d(-50%,0,0);}
#encounterBanner.boss{
  border-color:rgba(220,140,255,.58);
  background:linear-gradient(180deg,rgba(38,12,32,.94),rgba(38,12,32,.78));
  box-shadow:4px 4px 0 rgba(0,0,0,.55), 0 0 14px rgba(220,140,255,.35);
}
.enc-label{
  font-family:var(--fp);font-weight:700;
  font-size:clamp(12px,1.6vw,13px);
  color:rgba(245,200,66,.88);
  letter-spacing:2px;text-transform:uppercase;line-height:1;
}
#encounterBanner.boss .enc-label{color:rgba(232,170,255,.95);}
.enc-name{
  font-family:var(--fp);font-weight:700;
  font-size:clamp(15px,2.4vw,19px);
  color:#f5ead8;
  text-shadow:2px 2px 0 rgba(0,0,0,.55);
  line-height:1.05;letter-spacing:1px;
}

/* ── MONSTER ENTRANCE / DEFEATED (existing sprites only, opacity+filter) ── */
.spr-wrap.monster-entering{animation:monster-enter .36s ease-out;}
@keyframes monster-enter{
  0%  {opacity:0;filter:brightness(2.1) saturate(1.4);}
  55% {opacity:1;filter:brightness(1.35) saturate(1.15);}
  100%{opacity:1;filter:none;}
}
.spr-wrap.monster-defeating{animation:monster-defeat .46s cubic-bezier(.22,.9,.28,1) forwards;}
@keyframes monster-defeat{
  0%  {opacity:1;filter:none;transform:translate3d(var(--monster-offset-x,0),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8));}
  28% {opacity:1;filter:brightness(1.18) saturate(1.08);transform:translate3d(calc(var(--monster-offset-x,0) + 3px),calc(var(--monster-offset-y,0) - 3px),0) scale(calc(var(--monster-scale,.8) * 1.025));}
  68% {opacity:.58;filter:grayscale(.46) brightness(.78) saturate(.72);transform:translate3d(calc(var(--monster-offset-x,0) - 1px),calc(var(--monster-offset-y,0) + 8px),0) scale(calc(var(--monster-scale,.8) * .97));}
  100%{opacity:0;filter:grayscale(.8) brightness(.42) saturate(.55);transform:translate3d(var(--monster-offset-x,0),calc(var(--monster-offset-y,0) + 15px),0) scale(calc(var(--monster-scale,.8) * .94));}
}
.spr-wrap.boss-victory-payoff{animation:boss-victory-sink 1.45s cubic-bezier(.18,.78,.28,1) forwards;}
#spr-boss.boss-victory-payoff::before{animation:boss-victory-bloom 1.35s ease-out forwards;}
@keyframes boss-victory-sink{
  0%{transform:translate3d(0,0,0) scale(1);}
  18%{transform:translate3d(3px,-4px,0) scale(1.035);}
  62%{transform:translate3d(-1px,5px,0) scale(.99);}
  100%{transform:translate3d(0,10px,0) scale(.965);}
}
@keyframes boss-victory-bloom{
  0%{
    background:radial-gradient(ellipse,rgba(245,200,66,.28),rgba(178,70,190,.18) 58%,transparent 78%);
    filter:blur(1px) brightness(1);
    box-shadow:0 0 8px rgba(245,200,66,.14),0 0 12px rgba(178,70,190,.12);
  }
  35%{
    background:radial-gradient(ellipse,rgba(245,200,66,.68),rgba(178,70,190,.46) 56%,transparent 82%);
    filter:blur(1.5px) brightness(1.22);
    box-shadow:0 0 18px rgba(245,200,66,.34),0 0 28px rgba(178,70,190,.30);
  }
  100%{
    background:radial-gradient(ellipse,rgba(245,200,66,.18),rgba(178,70,190,.12) 58%,transparent 78%);
    filter:blur(1px) brightness(.95);
    box-shadow:0 0 8px rgba(245,200,66,.10),0 0 12px rgba(178,70,190,.10);
  }
}

/* ── NAMEPLATE POLISH (right-side enemy panel) ── */
.hp-col.right .hp-name-lbl{
  color:rgba(245,200,66,.82);
  letter-spacing:.5px;
  font-weight:700;
}

/* ══════════════════════════════════════════════
   VISUAL GAMEPLAY FEEDBACK — PASS 1
   ══════════════════════════════════════════════ */

/* A1 — Card entrance: fade + rise when cards deal in */
@keyframes card-in {
  from { opacity:0; transform:translateY(5px); }
  to   { opacity:1; transform:translateY(0); }
}
.card-in .card.top {
  animation: card-in .20s ease-out both;
}

/* A2 — Wrong match: red vignette on board edge */
#board.board-wrong::after {
  content:'';
  position:absolute;inset:0;border-radius:10px;
  box-shadow:inset 0 0 52px rgba(224,80,80,.62);
  animation:board-wrong-vignette .34s ease-out forwards;
  pointer-events:none;z-index:70;
}
@keyframes board-wrong-vignette {
  0%   { opacity:1; }
  100% { opacity:0; }
}


/* B1 — HP bar drain impact: brightness spike on the hp-track element */
@keyframes hp-drain-pulse {
  0%   { filter:brightness(1); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
  38%  { filter:brightness(1.9) saturate(1.45); box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 12px rgba(245,200,66,.34),0 0 8px rgba(192,57,43,.32); }
  100% { filter:brightness(1); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
}
.hp-drain-pulse {
  animation: hp-drain-pulse .30s ease-out !important;
}
@keyframes hp-boss-damage-pulse {
  0%   { filter:brightness(1); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
  34%  { filter:brightness(2.08) saturate(1.6); box-shadow:inset 0 2px 4px rgba(0,0,0,.42),0 0 16px rgba(245,200,66,.48),0 0 18px rgba(178,70,190,.48); }
  68%  { filter:brightness(1.28) saturate(1.18); box-shadow:inset 0 2px 4px rgba(0,0,0,.48),0 0 10px rgba(178,70,190,.28); }
  100% { filter:brightness(1); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
}
.hp-boss-damage-pulse {
  animation: hp-boss-damage-pulse .38s ease-out !important;
}

/* B2 — Boss HP critical: urgent red pulse when <= 20% remaining */
@keyframes hp-bos-crit-pulse {
  0%,100% { opacity:1; box-shadow:0 0 12px rgba(192,57,43,.85); }
  50%     { opacity:.62; box-shadow:0 0 18px rgba(245,200,66,.46),0 0 20px rgba(178,70,190,.38); }
}
.hp-bos-critical {
  background: linear-gradient(90deg,#6b0808,#c0392b) !important;
  box-shadow: 0 0 12px rgba(192,57,43,.85) !important;
  animation: hp-bos-crit-pulse .65s ease-in-out infinite;
}
.hp-boss-critical-track {
  border-color:rgba(245,200,66,.46);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 10px rgba(192,57,43,.34),0 0 14px rgba(178,70,190,.24);
}

/* C2 — Boss victory: golden radial overlay flashes over board */
#board.board-victory-flash::after {
  content:'';
  position:absolute;inset:0;border-radius:10px;
  background:radial-gradient(ellipse at 50% 38%,rgba(245,200,66,.30) 0%,rgba(245,200,66,.10) 52%,transparent 72%);
  animation:board-vf-fade .70s ease-out forwards;
  pointer-events:none;z-index:71;
}
@keyframes board-vf-fade {
  0%   { opacity:0; }
  28%  { opacity:1; }
  100% { opacity:0; }
}

/* D1 — Combo gold rim: local pulse on the matched pile at combo >= 4 */
@keyframes combo-ring-glow {
  0%   { transform:scale(1); box-shadow: 0 0 0 2px rgba(245,200,66,.72), 4px 4px 0 var(--shadow); }
  48%  { transform:scale(1.04) translateY(-1px); box-shadow: 0 0 0 4px rgba(245,200,66,.52), 0 0 12px rgba(245,200,66,.22), 5px 6px 0 var(--shadow); }
  100% { transform:scale(1); box-shadow: 0 0 0 1px rgba(245,200,66,.00), 4px 4px 0 var(--shadow); }
}
.cell.combo-hit .card.top {
  animation: combo-ring-glow .20s ease-out forwards !important;
}

/* D2 — Boss phase atmospheric shimmer on sprite bar ground line */
#game.boss-phase #spriteBar::before {
  animation: boss-shimmer 2.4s ease-in-out infinite;
}
@keyframes boss-shimmer {
  0%,100% { opacity:.75; }
  50%     { opacity:1; }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .card-in .card.top                    { animation:none; }
  #board.board-wrong::after             { animation:none; opacity:0; }
  .hp-drain-pulse                       { animation:none !important; }
  .hp-bos-critical                      { animation:none !important; }
  .cell.combo-hit .card.top             { animation:none !important; }
  .cpop[data-tier="excellent"],
  .cpop[data-tier="perfect"]            { animation:cp .7s ease forwards; }
  #board.board-victory-flash::after     { animation:none; opacity:0; }
  #game.boss-phase #spriteBar::before   { animation:none; opacity:.75; }
  .result-panel                         { animation:none; }
  .result-panel.boss-defeated::after    { animation:none; opacity:0; }
  .result-icon                          { animation:none; }
  .result-panel.boss-defeated .result-icon::after { animation:none; opacity:0; }
  .result-title                         { animation:none; }
  .result-badge,
  .result-subtitle,
  .result-actions                       { animation:none; }
  .pc-stat                              { animation:none; }
  .boss-boom-spot                       { animation:none; opacity:0; }
  .boss-shockwave                       { animation:none; opacity:0; }
  .spr-wrap.boss-shaking                { animation:none; }
  .boss-final-flash                     { animation:none; opacity:0; }
  .player-charge-aura                   { animation:none; opacity:0; }
  .spr-wrap.player-charging             { animation:none; }
  .player-projectile                    { animation:none; opacity:0; }
  .monster-slash                        { animation:none; opacity:0; }
  .monster-slash-flash                  { animation:none; opacity:0; }
}

/* Respect reduced motion for the new presentation effects */
@media (prefers-reduced-motion: reduce){
  #encounterBanner{transition:opacity .12s linear;transform:translate3d(-50%,0,0);}
  #encounterBanner.show{transform:translate3d(-50%,0,0);}
  .spr-wrap.monster-entering,
  .spr-wrap.monster-defeating{animation:none !important;}
}

/* ── DAMAGE FLOATS ── */
.dmg-float {
  position:fixed;
  font-family:var(--fp);font-weight:600;
  pointer-events:none;z-index:290;
  animation:dmg-rise 1.2s ease-out forwards;
  text-shadow:2px 2px 0 rgba(0,0,0,.9),0 0 12px currentColor;
}
.dmg-float.boss { font-size:28px;color:var(--yellow); }
.dmg-float.char { font-size:22px;color:#ff6b6b; }
.dmg-float.miss { font-size:14px;color:rgba(255,255,255,.5); }

/* ── Visual FX: Light mode overrides ─────────────────────────────────
   Calm / simple / low-noise feedback. prefers-reduced-motion has its own
   stronger @media block elsewhere and continues to win.
   Goal: still readable, still gives feedback, but minimal glow/flash. */

/* Damage / CLEAR / VICTORY text — small, low-glow, slightly dimmed.
   filter:opacity() composes with the dmg-rise animation's opacity. */
body.fx-light .dmg-float       { filter:opacity(.85); }
body.fx-light .dmg-float.boss  { font-size:19px; text-shadow:1px 1px 0 rgba(0,0,0,.75); }
body.fx-light .dmg-float.char  { font-size:16px; text-shadow:1px 1px 0 rgba(0,0,0,.75); }
body.fx-light .dmg-float.miss  { font-size:12px; text-shadow:1px 1px 0 rgba(0,0,0,.75); }

/* Monster slash — thinner, subtler, fewer dramatic flashes.
   Keyframes drive opacity directly, so we use filter:opacity() which
   composes with (and dampens) the animated opacity, not just the base. */
body.fx-light .monster-slash       { filter:blur(.4px) opacity(.42); box-shadow:0 0 6px rgba(255,255,255,.45); }
body.fx-light .monster-slash-flash { filter:opacity(.28); }

/* Boss finale — keep timing/sequence; reduce flash and shockwave intensity. */
body.fx-light .boss-final-flash    { filter:opacity(.32); }
body.fx-light .boss-shockwave      { filter:opacity(.45); }
body.fx-light .boss-boom-spot      { filter:opacity(.78); }
body.fx-light .boss-boom-spot.big  { filter:opacity(.85); }

/* Board flashes — softer victory / wrong vignette.
   board-victory-flash / board-wrong pseudo-elements use animated opacity,
   so filter:opacity() composes with the keyframe. */
body.fx-light #board.board-victory-flash::after { filter:opacity(.55); }
body.fx-light #board.board-wrong::after         { filter:opacity(.7); }

/* Combo popup — no pulse, minimal glow, lower-key labels. */
body.fx-light .cpop { font-size:clamp(16px,2.3vw,28px); letter-spacing:2px; }
body.fx-light .cpop[data-tier="great"],
body.fx-light .cpop[data-tier="excellent"],
body.fx-light .cpop[data-tier="perfect"] {
  animation: cp .7s ease forwards;            /* drop cpop-pulse */
  text-shadow: 2px 2px 0 rgba(0,0,0,.85);     /* drop colored glow halos */
  color: var(--yellow);                       /* base color, no tier-tinted headline */
}
body.fx-light .cpop[data-tier="good"]      .cpop-tier { color:#9bd6a0; }
body.fx-light .cpop[data-tier="great"]     .cpop-tier { color:#9fc8f5; }
body.fx-light .cpop[data-tier="excellent"] .cpop-tier { color:#ffc274; }
body.fx-light .cpop[data-tier="perfect"]   .cpop-tier { color:#ffa6d4; }

/* Combo HUD ring/box pop — drop the cell ring effect under Light. */
body.fx-light .cell.combo-hit .card.top { animation:none !important; }

/* Correct match — replace the scale-and-brightness pop with a tiny
   brightness blip only. The card still confirms "matched" but without
   the bouncy scale. */
body.fx-light .cell.correct .card.top { animation: cok-light .28s ease; }
@keyframes cok-light {
  0%,100% { filter:brightness(1); }
  50%     { filter:brightness(1.12); }
}

/* Wrong match — keep red border (it's the primary signal) but tone down
   the shake amplitude and drop the saturation boost. */
body.fx-light .cell.wrong .card.top {
  animation: wsh-light .30s ease;
  filter: saturate(1.0);
}
@keyframes wsh-light {
  0%,100% { transform:translateX(0); }
  30%     { transform:translateX(-4px); }
  65%     { transform:translateX(4px); }
}

/* Partial stack pulse — smaller scale + brightness peak. */
body.fx-light .cell.stack-pulse .card.top { animation: stack-pulse-light .20s ease-out; }
@keyframes stack-pulse-light {
  0%,100% { transform:scale(1);     filter:brightness(1); }
  50%     { transform:scale(1.02);  filter:brightness(1.07); }
}

/* Completed pile — softer green ring + drop ✓ halo. */
body.fx-light .cell-complete .card.top {
  box-shadow: 0 0 0 1px rgba(76,175,106,.35), 4px 4px 0 var(--shadow) !important;
  opacity: 0.62;
}
body.fx-light .cell-complete .card.top::after {
  text-shadow: none;
  opacity: .7;
}
@keyframes dmg-rise {
  0%   { opacity:1;transform:translateY(0) scale(1); }
  25%  { opacity:1;transform:translateY(-18px) scale(1.25); }
  100% { opacity:0;transform:translateY(-65px) scale(0.85); }
}

/* ── LAST CHANCE OVERLAY ── */
#lastChanceOv {
  position:fixed;inset:0;z-index:270;
  display:flex;align-items:center;justify-content:center;
  background:rgba(180,0,0,.12);pointer-events:none;opacity:0;
}
#lastChanceOv.show { animation:lc-bg 1.8s ease forwards; }
@keyframes lc-bg { 0%{opacity:0}10%{opacity:1}40%{opacity:.8}60%{opacity:.9}85%{opacity:.3}100%{opacity:0} }
.lc-txt {
  font-family:var(--fp);font-size:clamp(28px,5vw,52px);
  color:#ff3333;letter-spacing:4px;
  text-shadow:0 0 24px rgba(255,0,0,.9),3px 3px 0 rgba(0,0,0,.95);
  animation:lc-pop 1.8s ease forwards;
}
@keyframes lc-pop {
  0%{transform:scale(.4);opacity:0}18%{transform:scale(1.25);opacity:1}
  35%{transform:scale(1);opacity:1}80%{transform:scale(1.02);opacity:1}
  100%{transform:scale(.9);opacity:0}
}

/* Board semi-transparent so dungeon bg shows */
#game.on #board { background:rgba(30,15,8,.8) !important; }

/* Device layout: mobile/tablet need different structure, not only smaller type */
@media(max-width:767px){
  body{overflow:hidden;}
  header{
    flex-wrap:nowrap;
    align-items:center;
    padding:calc(3px + env(safe-area-inset-top)) 7px 3px;
    gap:4px;
    min-height:0;
    height:clamp(42px,8dvh,56px);
    max-height:15dvh;
    overflow:hidden;
  }
  .logo{font-size:clamp(8px,2vw,10px);letter-spacing:.3px;line-height:1;max-width:78px;overflow:hidden;text-overflow:ellipsis;opacity:.7;}
  .hdr-r{gap:4px;padding-bottom:2px;}
  .sbox{min-width:34px;padding:1px 4px;border-width:2px;border-radius:6px;box-shadow:1px 1px 0 var(--shadow);}
  .slb{font-size:6px;letter-spacing:.3px;}
  .svl{font-size:clamp(9px,2.4vw,11px);}
  .tmr{font-size:clamp(10px,2.7vw,12px);min-width:28px;line-height:1.1;}
  #pauseBtn{font-size:0;padding:2px 5px;min-width:25px;border-width:2px;box-shadow:1px 1px 0 var(--shadow);}
  #pauseBtn::before{content:'II';font-family:var(--fp);font-size:11px;letter-spacing:0;}
  .hdr-r .btn:not(#pauseBtn):not(#settingsBtn){display:none;}
  #settingsBtn{font-size:15px;padding:2px 5px;min-width:25px;border-width:2px;box-shadow:1px 1px 0 var(--shadow);line-height:1;}

  .sbar{padding:2px 6px;gap:4px;border-bottom-width:2px;min-height:28px;}
  .sblb{font-size:7px;}
  .tg{border-width:2px;border-radius:6px;box-shadow:2px 2px 0 var(--shadow);}
  .tb{font-size:8px;padding:2px 5px;border-right-width:1px;}
  .panel-btn{font-size:8px;padding:4px 7px;border-width:2px;box-shadow:1px 1px 0 var(--shadow);}
  .vd{height:12px;}

  #game{padding:4px max(10px,env(safe-area-inset-left)) 6px max(10px,env(safe-area-inset-right));gap:4px;}
  #spriteBar{
    display:grid;
    grid-template-columns:56px minmax(0,1fr) 72px;
    grid-template-rows:auto;
    grid-template-areas:"minori hp boss";
    align-items:end;
    gap:5px;
    padding:2px 7px 3px;
    min-height:68px;
  }
  #spr-minori{grid-area:minori;width:56px;height:56px;}
  #spr-boss{grid-area:boss;width:72px;height:72px;justify-self:end;}
  .hp-col{
    grid-area:hp;
    align-self:end;
    gap:3px;
    min-width:0;
    width:100%;
  }
  .hp-col.right{align-self:start;align-items:stretch;}
  .hp-name-lbl,.hp-sub{font-size:8px;letter-spacing:.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .hp-track{height:6px;border-width:1px;}
  .char-idle-b,.char-attack-b,.char-victory-b{background-size:224px 56px;}
  .char-hit-b,.char-last-b{background-size:112px 56px;}
  .boss-idle-b,.boss-defeated-b{background-size:288px 72px;}
  .boss-attack-b,.boss-hit-b{background-size:216px 72px;}
  @keyframes sfc4{from{background-position-x:0}to{background-position-x:-224px}}
  @keyframes sfc2{from{background-position-x:0}to{background-position-x:-112px}}
  @keyframes sfb4{from{background-position-x:0}to{background-position-x:-288px}}
  @keyframes sfb3{from{background-position-x:0}to{background-position-x:-216px}}
  @keyframes sfc4-os{from{background-position-x:0}to{background-position-x:-168px}}
  @keyframes sfc2-os{from{background-position-x:0}to{background-position-x:-56px}}
  @keyframes sfb4-os{from{background-position-x:0}to{background-position-x:-216px}}
  @keyframes sfb3-os{from{background-position-x:0}to{background-position-x:-144px}}

  .prow{gap:3px;margin-bottom:0;}
  .round-words-status{font-size:11px;letter-spacing:0;}
  .pool-words-status{font-size:8px;}
  .pb{height:6px;border-width:1px;}
  #boardWrap{gap:5px;}
  #board{
    border-width:3px;
    border-radius:10px;
    padding:7px 9px 8px;
    box-shadow:4px 4px 0 var(--shadow),inset 0 0 45px rgba(0,0,0,.2);
  }
  #cgrid{min-height:0;}
  .card{border-width:2px;border-radius:8px;padding:8px 6px 8px;}
  .card.top::before{font-size:7px;top:3px;left:4px;padding:1px 3px;border-radius:4px;opacity:.72;}
  .card-fly{transition:transform .14s cubic-bezier(.2,0,.2,1),opacity .12s ease .04s;}
  .card.top{box-shadow:3px 3px 0 var(--shadow);}
  .flag-btn{font-size:8px;bottom:3px;left:4px;}

  #completeDeck{border-radius:0 0 9px 9px;height:38px;min-height:38px;max-height:38px;padding:0 8px;gap:7px;}
  .deck-header{padding:0;gap:5px;}
  .deck-title{font-size:9px;letter-spacing:1.2px;}
  .deck-count{font-size:11px;}
  .deck-scroll{height:28px;gap:4px;padding:0;}
  .deck-card{height:22px;padding:0 7px;border-radius:11px;}
  .dc-kanji{font-size:13px;}
  .ov{padding:16px;}
  .rb{width:min(360px,calc(100vw - 32px));min-height:330px;max-height:80dvh;padding:20px 16px;}
  .result-icon{font-size:44px;margin-bottom:7px;}
  .result-title{font-size:22px;}
  .result-subtitle{font-size:13px;margin-bottom:10px;}
  .pc-stats{gap:6px;margin-bottom:12px;}
  .pc-stat{padding:6px 7px;border-radius:8px;}
  .pc-stat span{font-size:10px;}
  .pc-stat strong{font-size:14px;}
  .result-actions{grid-template-columns:1fr;gap:7px;}
  #pauseOv .re,#defeatOv .re{font-size:44px;margin-bottom:6px;}
  #exTooltip{padding:12px 18px 10px;}
  .fpanel{width:min(420px,92vw);height:min(600px,76dvh);border-radius:16px;}
  .fpanel-body{padding:12px;}
  /* Filter panel polish on mobile */
  .filter-section{margin-bottom:12px;}
  .tag-chip{font-size:11px;padding:6px 10px;}
  .range-input{padding:7px 8px;width:80px;}
  .fpanel .btn,.fpanel .btn.sec{padding:8px 14px!important;font-size:13px!important;}
  /* Setup modal header compacted on mobile */
  #setupModal .rt{font-size:17px;margin-bottom:2px;}
  /* Setup modal body spacing compacted on mobile */
  #setupModal .setup-section{margin:5px 0 3px;}
  #setupModal .setup-slbl{margin-bottom:2px;}
  #setupModal .mode-desc,
  #setupModal .match-desc{font-size:11px;margin-top:3px;}
}

@media(min-width:768px) and (max-width:1199px){
  header{flex-wrap:nowrap;padding:8px 18px;gap:10px;height:clamp(58px,8dvh,86px);max-height:15dvh;overflow:hidden;}
  .logo{font-size:clamp(14px,1.7vw,19px);max-width:24vw;overflow:hidden;text-overflow:ellipsis;opacity:.7;}
  .hdr-r{max-width:100%;}
  #game{padding:10px 22px 14px;gap:8px;}
  #spriteBar{padding:4px 14px 5px;gap:10px;}
  #spr-minori{width:92px;height:92px;}
  #spr-boss{width:128px;height:128px;}
  .char-idle-b,.char-attack-b,.char-victory-b{background-size:368px 92px;}
  .char-hit-b,.char-last-b{background-size:184px 92px;}
  .boss-idle-b,.boss-defeated-b{background-size:512px 128px;}
  .boss-attack-b,.boss-hit-b{background-size:384px 128px;}
  @keyframes sfc4{from{background-position-x:0}to{background-position-x:-368px}}
  @keyframes sfc2{from{background-position-x:0}to{background-position-x:-184px}}
  @keyframes sfb4{from{background-position-x:0}to{background-position-x:-512px}}
  @keyframes sfb3{from{background-position-x:0}to{background-position-x:-384px}}
  @keyframes sfc4-os{from{background-position-x:0}to{background-position-x:-276px}}
  @keyframes sfc2-os{from{background-position-x:0}to{background-position-x:-92px}}
  @keyframes sfb4-os{from{background-position-x:0}to{background-position-x:-384px}}
  @keyframes sfb3-os{from{background-position-x:0}to{background-position-x:-256px}}
  .hp-name-lbl{font-size:12px;}
  .hp-sub{font-size:11px;}
  #board{padding:14px 20px 16px;}
  .card{padding:12px 9px 8px;}
  .card.top::before{font-size:8px;top:4px;left:5px;padding:1px 4px;opacity:.66;}
  .cm{line-height:1.32;padding-bottom:4px;}
  .cmx{line-height:1.22;margin-top:0;}
  .stack-badge{top:4px;right:6px;font-size:9px;padding:1px 4px;}
  .deck-card{height:24px;padding:0 8px;}
}

@media(min-width:1920px){
  #spriteBar{max-height:172px;}
  #spr-minori{width:124px;height:124px;}
  #spr-boss{width:172px;height:172px;}
  .char-idle-b,.char-attack-b,.char-victory-b{background-size:496px 124px;}
  .char-hit-b,.char-last-b{background-size:248px 124px;}
  .boss-idle-b,.boss-defeated-b{background-size:688px 172px;}
  .boss-attack-b,.boss-hit-b{background-size:516px 172px;}
  @keyframes sfc4{from{background-position-x:0}to{background-position-x:-496px}}
  @keyframes sfc2{from{background-position-x:0}to{background-position-x:-248px}}
  @keyframes sfb4{from{background-position-x:0}to{background-position-x:-688px}}
  @keyframes sfb3{from{background-position-x:0}to{background-position-x:-516px}}
  @keyframes sfc4-os{from{background-position-x:0}to{background-position-x:-372px}}
  @keyframes sfc2-os{from{background-position-x:0}to{background-position-x:-124px}}
  @keyframes sfb4-os{from{background-position-x:0}to{background-position-x:-516px}}
  @keyframes sfb3-os{from{background-position-x:0}to{background-position-x:-344px}}
}

/* Responsive: compact sprites on small phones */
@media(max-width:389px){
  #spr-minori{width:68px;height:68px;}
  #spr-boss{width:96px;height:96px;}
  .char-idle-b,.char-attack-b,.char-victory-b{background-size:272px 68px;}
  .char-hit-b,.char-last-b{background-size:136px 68px;}
  .boss-idle-b,.boss-defeated-b{background-size:384px 96px;}
  .boss-attack-b,.boss-hit-b{background-size:288px 96px;}
  @keyframes sfc4{from{background-position-x:0}to{background-position-x:-272px}}
  @keyframes sfc2{from{background-position-x:0}to{background-position-x:-136px}}
  @keyframes sfb4{from{background-position-x:0}to{background-position-x:-384px}}
  @keyframes sfb3{from{background-position-x:0}to{background-position-x:-288px}}
  @keyframes sfc4-os{from{background-position-x:0}to{background-position-x:-204px}}
  @keyframes sfc2-os{from{background-position-x:0}to{background-position-x:-68px}}
  @keyframes sfb4-os{from{background-position-x:0}to{background-position-x:-288px}}
  @keyframes sfb3-os{from{background-position-x:0}to{background-position-x:-192px}}
}

@media(max-width:767px){
  .cell.stack-pulse .card.top{animation-duration:.18s;}
  .spr-wrap.enemy-attacking{animation-duration:.24s;}
  .spr-wrap.enemy-hit-lite{animation-duration:.18s;}
  .spr-wrap.enemy-hit-boss{animation-duration:.22s;}
  .hp-boss-damage-pulse{animation-duration:.28s!important;}
  #game.boss-phase #board{animation-duration:2.4s;}
}
@media(max-width:1099px){
  /* Responsive effects policy: disable expensive/noisy effects on mobile/tablet. */
  #game.boss-phase #board{animation:none;}
  #game.boss-phase #spriteBar::before{animation:none;}
}
@media(max-width:1099px){
  @keyframes enemy-attack-lunge{
    0%,100%{transform:translate3d(var(--monster-offset-x,0),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8))}
    22%{transform:translate3d(calc(var(--monster-offset-x,0) + 2px),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8))}
    52%{transform:translate3d(calc(var(--monster-offset-x,0) - 5px),var(--monster-offset-y,0),0) scale(calc(var(--monster-scale,.8) * 1.015))}
    78%{transform:translate3d(calc(var(--monster-offset-x,0) - 1px),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8))}
  }
  @keyframes monster-defeat{
    0%  {opacity:1;filter:none;transform:translate3d(var(--monster-offset-x,0),var(--monster-offset-y,0),0) scale(var(--monster-scale,.8));}
    32% {opacity:1;filter:brightness(1.1) saturate(1.04);transform:translate3d(calc(var(--monster-offset-x,0) + 2px),calc(var(--monster-offset-y,0) - 1px),0) scale(calc(var(--monster-scale,.8) * 1.012));}
    72% {opacity:.6;filter:grayscale(.4) brightness(.82) saturate(.8);transform:translate3d(var(--monster-offset-x,0),calc(var(--monster-offset-y,0) + 5px),0) scale(calc(var(--monster-scale,.8) * .98));}
    100%{opacity:0;filter:grayscale(.72) brightness(.48) saturate(.65);transform:translate3d(var(--monster-offset-x,0),calc(var(--monster-offset-y,0) + 9px),0) scale(calc(var(--monster-scale,.8) * .96));}
  }
  @keyframes hp-boss-damage-pulse {
    0%   { filter:brightness(1); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
    38%  { filter:brightness(1.7) saturate(1.35); box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 10px rgba(245,200,66,.34),0 0 10px rgba(178,70,190,.32); }
    100% { filter:brightness(1); box-shadow:inset 0 2px 4px rgba(0,0,0,.5); }
  }
  .spr-wrap.boss-victory-payoff{animation-duration:1.1s;}
  #spr-boss.boss-victory-payoff::before{animation-duration:1.05s;}
  @keyframes boss-victory-sink{
    0%{transform:translate3d(0,0,0) scale(1);}
    24%{transform:translate3d(1px,-2px,0) scale(1.015);}
    100%{transform:translate3d(0,5px,0) scale(.98);}
  }
  @keyframes boss-victory-bloom{
    0%{
      background:radial-gradient(ellipse,rgba(245,200,66,.20),rgba(178,70,190,.12) 58%,transparent 78%);
      filter:blur(1px);
      box-shadow:0 0 6px rgba(245,200,66,.10),0 0 8px rgba(178,70,190,.08);
    }
    42%{
      background:radial-gradient(ellipse,rgba(245,200,66,.42),rgba(178,70,190,.24) 58%,transparent 80%);
      filter:blur(1.2px) brightness(1.1);
      box-shadow:0 0 12px rgba(245,200,66,.20),0 0 16px rgba(178,70,190,.16);
    }
    100%{
      background:radial-gradient(ellipse,rgba(245,200,66,.14),rgba(178,70,190,.10) 58%,transparent 78%);
      filter:blur(1px);
      box-shadow:0 0 6px rgba(245,200,66,.08),0 0 8px rgba(178,70,190,.08);
    }
  }
  .hp-boss-critical-track {
    border-color:rgba(245,200,66,.34);
    box-shadow:inset 0 2px 4px rgba(0,0,0,.45),0 0 8px rgba(192,57,43,.26);
  }
}

/* ── AMBIENT VISUAL EFFECTS (desktop ≥1100px) ── */
/* spr-idle-bob: keyframe preserves monster-small positioning via CSS var fallbacks.
   Applied at class specificity (0,1,0) so hit-animation classes (0,2,0) always override. */
@keyframes spr-idle-bob {
  0%, 100% { transform:translate3d(var(--monster-offset-x,0px),var(--monster-offset-y,0px),0) scale(var(--monster-scale,1)) translateY(0px); }
  50%      { transform:translate3d(var(--monster-offset-x,0px),var(--monster-offset-y,0px),0) scale(var(--monster-scale,1)) translateY(-3px); }
}
@keyframes hp-shimmer {
  0%   { left:-50%; }
  100% { left:120%; }
}
@keyframes board-ambient-breathe {
  0%, 100% { opacity:.72; }
  50%      { opacity:1; }
}
@media(min-width:1100px){
  /* 1A — sprite idle breathing */
  .spr-wrap { animation:spr-idle-bob 4.5s ease-in-out infinite; }
  /* 1B — HP bar living shimmer */
  .hp-fill { position:relative; overflow:hidden; }
  .hp-fill::after {
    content:''; position:absolute;
    top:0; left:-50%; width:40%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    animation:hp-shimmer 3.0s ease-in-out infinite;
    pointer-events:none;
  }
  .hp-fill-bos::after { animation-delay:1.4s; }
  /* 2A — boss phase game edge vignette */
  #game.boss-phase { box-shadow:inset 0 0 100px rgba(130,0,180,.14); }
  /* 2B — boss low-HP tension: local ground/aura pulse only */
  #spr-boss.boss-critical-aura::before {
    animation:boss-critical-ground-aura 1.35s ease-in-out infinite;
  }
  /* 1C — board ambient breathe: pulses the decorative ::before overlay only */
  #board::before { animation:board-ambient-breathe 7s ease-in-out infinite; }
  #game.boss-phase #board::before { animation:none; }
}
@keyframes boss-critical-ground-aura {
  0%,100% {
    background:radial-gradient(ellipse,rgba(192,57,43,.56),rgba(92,22,100,.22) 58%,transparent 78%);
    filter:blur(1px);
    box-shadow:0 0 10px rgba(192,57,43,.18),0 0 16px rgba(178,70,190,.14);
  }
  50% {
    background:radial-gradient(ellipse,rgba(245,200,66,.42),rgba(178,70,190,.38) 58%,transparent 80%);
    filter:blur(1.2px) brightness(1.08);
    box-shadow:0 0 15px rgba(245,200,66,.22),0 0 22px rgba(178,70,190,.24);
  }
}

/* ── SETTINGS GEAR PANEL ── */
/* top/right set dynamically by JS anchoring to the gear button on each open */
#settingsPanel{
  display:none;position:fixed;
  background:var(--board);border:3px solid var(--shadow);border-radius:10px;
  padding:12px 16px;z-index:500;box-shadow:4px 4px 0 var(--shadow);
  gap:10px 18px;align-items:center;
}
#settingsPanel.open{display:grid;grid-template-columns:max-content max-content;}
#settingsPanel .sblb{font-size:11px;font-weight:700;color:rgba(245,234,216,.58);display:block;margin-bottom:0;white-space:nowrap;}
#settingsPanel .tg{max-width:calc(100vw - 28px);}
#settingsPanel .tb{white-space:nowrap;text-align:center;}
/* 2-button rows fill the column width evenly; Language row stays at natural button sizes */
#sfxTg .tb,#voiceTg .tb,#fullMatchTg .tb,#effectModeTg .tb{flex:1;min-width:0;}

@media(max-width:767px){
  #settingsPanel{
    padding:6px 10px;
    gap:4px 10px;
    width:auto;
    max-width:calc(100vw - 16px);
  }
  #settingsPanel.open{
    display:grid;
    grid-template-columns:auto auto;
    align-items:center;
  }
  #settingsPanel .sblb{font-size:10px;margin-bottom:0;white-space:nowrap;}
  /* Mobile: widen all groups so Language buttons are equal at ~55px each */
  #settingsPanel .tg{width:224px;}
  #lgTg .tb{flex:1;min-width:0;}
}

@media(prefers-reduced-motion:reduce){
  .cell.stack-pulse .card.top,
  .cell.stack-pulse .stack-badge,
  .spr-wrap.enemy-attacking,
  .spr-wrap.enemy-hit-lite,
  .spr-wrap.enemy-hit-boss,
  .hp-boss-damage-pulse,
  #spr-boss.boss-critical-aura::before,
  .spr-wrap.boss-victory-payoff,
  #spr-boss.boss-victory-payoff::before,
  #game.boss-phase #board{
    animation:none!important;
  }
  .hp-fill{transition:none;}
  .lc-txt{animation:none;}
  .spr-wrap{animation:none;}
  .hp-fill::after{display:none;}
  .pf{transition:none;}
  #board::before{animation:none;}
}