/* ============================================================
   KOTOBA — shared stylesheet for every page (hub + all levels)
   Level pages override the CSS custom properties on :root to
   theme themselves. Everything structural lives here.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Mali:wght@600;700&family=Nunito:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');

/* Latin from Baloo 2, Thai from Mali (rounded, and unlike Baloo Thai 2 it
   stacks tone marks over upper vowels clearly — e.g. วิ่ง). The browser picks
   per glyph down the stack; Japanese from Noto Sans JP where needed. */

:root{
  /* body backdrop gradient */
  --bg-top:#bfe3a8;
  --bg-mid:#a9d98f;
  --bg-bot:#8fca77;
  /* level badge (round chip, top-left) */
  --badge:#f0b93d;
  --badge-edge:#b3821f;
  /* HUD progress bar + round timer fills */
  --hud-fill:#6fae3e;
  --timer-fill:#f0b93d;
  /* primary panel button */
  --panel-btn:#e6483a;
  --panel-btn-edge:#a8291e;
}

*{box-sizing:border-box;}
html,body{
  margin:0;
  height:100%;
  font-family:'Baloo 2', 'Mali', sans-serif;
  -webkit-user-select:none;
  user-select:none;
  overscroll-behavior:none;
}
body{
  background:linear-gradient(180deg,var(--bg-top) 0%, var(--bg-mid) 40%, var(--bg-bot) 100%);
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
}

.stroke{ color:#3a2a18; }

#frame{
  width:100%;
  max-width:440px;
  min-height:calc(100vh - 28px);
  background:#4a3220;
  border-radius:24px;
  padding:10px;
  box-shadow:0 10px 0 #2e1f12, 0 16px 24px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
}
#inner{
  flex:1;
  background:#f4e3bb;
  border-radius:18px;
  padding:14px 12px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background-image: radial-gradient(#e8d5a6 1px, transparent 1px);
  background-size: 14px 14px;
}

/* ============ flat button base (no glossy shine) ============ */
.flatbtn{
  --base:#3b8fd1;
  --edge:#1f5c8f;
  background:var(--base);
  border:3px solid #2e2013;
  border-radius:14px;
  box-shadow:0 5px 0 var(--edge);
  transition:transform .06s, box-shadow .06s;
}
.flatbtn:active{
  transform:translateY(4px);
  box-shadow:0 1px 0 var(--edge);
}
.c-sky{ --base:#4fb8e8; --edge:#2a80ab; }
.c-blue{ --base:#3b7fd1; --edge:#254f8a; }
.c-green{ --base:#6fae3e; --edge:#4a7a27; }
.c-yellow{ --base:#f0b93d; --edge:#b3821f; }
.c-purple{ --base:#9c6fd6; --edge:#6a45a0; }
.c-red{ --base:#e6483a; --edge:#a8291e; }
.c-orange{ --base:#f2914a; --edge:#c1611f; }
.c-gray{ --base:#8891a0; --edge:#5b6472; }
.c-cream{ --base:#f4e3bb; --edge:#c9ac6e; }

/* ============ brand line ============ */
.brand{
  text-align:left;
  font-size:18px;
  font-weight:800;
  letter-spacing:.5px;
  color:#8a6a3a;
  margin:0 0 2px 4px;
}

/* ============ header ============ */
#header{ display:flex; align-items:center; gap:8px; }
.levelbadge{
  --base:var(--badge); --edge:var(--badge-edge);
  width:52px; height:52px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.levelbadge span{ font-size:20px; font-weight:800; color:#3a2a18; }

#hud-plate{
  flex:1;
  background:#fffaf0;
  border:3px solid #2e2013;
  border-radius:14px;
  padding:6px 10px;
  min-width:0;
}
#hud-title{
  font-size:17px;
  font-weight:800;
  color:#8a6a3a;
  letter-spacing:.3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#hud-bar-track{
  height:14px;
  background:#e2cf9e;
  border-radius:7px;
  overflow:hidden;
  position:relative;
  margin-top:3px;
}
#hud-bar-fill{
  height:100%;
  background:var(--hud-fill);
  border-radius:7px 0 0 7px;
  transition:width .3s ease;
}
#hud-bar-track span{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#3a2a18;
}

/* ============ stat row ============ */
#statrow{ display:flex; gap:8px; }
#heartsPill{
  --base:#fffaf0; --edge:#c9ac6e;
  flex-shrink:0;
  padding:8px 10px;
  display:flex; align-items:center; gap:4px;
}
.heart-icon{ width:20px; height:18px; }

#timerPill{
  --base:#fffaf0; --edge:#c9ac6e;
  flex:1;
  height:36px;
  overflow:hidden;
  position:relative;
  display:flex; align-items:center;
}
#timerFill{
  position:absolute; top:0; left:0; bottom:0;
  background:var(--timer-fill);
  transition:width 1s linear;
}
#timerPill span{
  position:relative; z-index:2; width:100%;
  text-align:center; font-size:14px; font-weight:800; color:#3a2a18;
}

/* ============ grid ============ */
#gridWrap{ flex:1; display:flex; align-items:flex-start; }
#grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
}
.card{
  --base:#fffaf0; --edge:#c9ac6e;
  aspect-ratio:1/0.82;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  overflow:hidden;
}
/* Balatro-style idle wobble — lives on an inner wrapper so it never fights
   the outer .card's own transform (press, .selected lift, .correct/.wrong).
   Engine gives each card a randomized negative delay + duration so a full
   board doesn't wobble in lockstep. */
.card-jiggle{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  animation:cardJiggle 2.6s ease-in-out infinite;
  transform-origin:50% 55%;
}
@keyframes cardJiggle{
  0%,100%{ transform:rotate(-1.4deg) translateY(0); }
  50%{ transform:rotate(1.4deg) translateY(-2px); }
}
.card.cleared .card-jiggle{ animation:none; }
.card.selected .card-jiggle,
.card.correct .card-jiggle,
.card.wrong .card-jiggle{ animation-play-state:paused; }
.card.deal-in .card-jiggle{ animation-play-state:paused; }
@media (prefers-reduced-motion:reduce){
  .card-jiggle{ animation:none; }
}

/* Deal-in — cards fly from the grid's center to their slot when a round is
   dealt (engine sets --dx/--dy per card and staggers animation-delay). */
.card.deal-in{
  animation:cardDeal .42s cubic-bezier(.22,.85,.32,1.2) both;
}
@keyframes cardDeal{
  from{ transform:translate(var(--dx,0),var(--dy,0)) scale(.4) rotate(-14deg); opacity:0; }
  55%{ opacity:1; }
  to{ transform:translate(0,0) scale(1) rotate(0); opacity:1; }
}
@media (prefers-reduced-motion:reduce){
  .card.deal-in{ animation:none; }
}
/* kanji cards: slate background + white text, set apart from the cream
   meaning cards. --base/--edge feed .flatbtn's background + press-shadow,
   so this also recolors the pressed/selected state for free. */
.card[data-kind="jp"]{
  --base:#475569;
  --edge:#1e293b;
}
.card[data-kind="jp"] .jp{ color:#fff; }
.card[data-kind="jp"] .jp rt{ color:#cbd5e1; }
.card-body{
  flex:1;
  min-height:0;            /* don't let long text stretch the card */
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:4px 5px;
}
.card .jp{
  font-family:'Noto Sans JP','Baloo 2','Mali',sans-serif;
  font-size:20px;          /* starting size — engine's fitCardText() shrinks to fit */
  font-weight:700;
  color:#3a2a18;
  overflow-wrap:anywhere;
}
.card .jp rt{
  font-family:'Noto Sans JP','Baloo 2','Mali',sans-serif;
  font-size:.5em;
  font-weight:700;
  color:#8a6a3a;           /* furigana — same warm-brown as the HUD label */
  letter-spacing:0;
}
.card .en{
  font-size:14px;          /* starting size — engine's fitCardText() shrinks to fit */
  font-weight:700;
  line-height:1.45;
  color:#3a2a18;
  overflow-wrap:anywhere;
}
.card.selected{
  transform:translateY(2px);
  box-shadow:0 0 0 3px #3b7fd1, 0 3px 0 var(--edge);
}
/* matched pair: rattle, then shrink + fade away (Balatro-style "destroy") */
.card.correct{
  animation:cardDestroy .58s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events:none;
}
@keyframes cardDestroy{
  0%{ transform:scale(1) rotate(0); opacity:1; }
  8%{ transform:scale(1.05) rotate(-6deg); }
  18%{ transform:scale(1.05) rotate(6deg); }
  28%{ transform:scale(1.05) rotate(-5deg); }
  38%{ transform:scale(1.05) rotate(5deg); }
  48%{ transform:scale(1.02) rotate(-2deg); }
  58%{ transform:scale(1) rotate(0); opacity:1; }
  100%{ transform:scale(.15) rotate(10deg) translateY(-10px); opacity:0; }
}
.card.wrong{ animation:shake .3s ease; }
@keyframes shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-6px);}
  75%{transform:translateX(6px);}
}
@media (prefers-reduced-motion:reduce){
  .card.correct{ animation:none; opacity:0; transition:opacity .3s ease; }
}
.card.cleared{ visibility:hidden; pointer-events:none; }

.popup{
  position:fixed;
  font-family:'Baloo 2','Mali',sans-serif;
  font-weight:800;
  font-size:15px;
  pointer-events:none;
  animation:floatUp .8s ease forwards;
  z-index:60;
}
@keyframes floatUp{
  0%{opacity:1; transform:translateY(0);}
  100%{opacity:0; transform:translateY(-40px);}
}

/* ============ bottom nav ============ */
#navbar{
  background:#2b3648;
  border-radius:16px;
  padding:8px 10px;
  display:flex;
  justify-content:flex-start;
  gap:12px;
}
.navicon{
  width:46px; height:46px;
  border-radius:12px;
  background:#3b4658;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:#f4e3bb;
  font-weight:800;
  font-size:13px;
}
.navicon svg{ width:22px; height:22px; }
.navicon:active{ background:#4a5670; }
.navicon.disabled{ opacity:.32; pointer-events:none; }
.navicon.lang-btn{ width:auto; padding:0 12px; }
.navicon.lang-btn.active{ background:var(--badge); color:#2e2013; }

/* ============ overlay ============ */
#overlay{
  position:fixed; inset:0;
  background:rgba(30,20,10,.6);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:20px;
  overflow-y:auto;          /* let a tall review panel scroll on short screens */
}
#overlay.show{ display:flex; }
#panel{
  width:100%;
  max-width:330px;
  background:#f4e3bb;
  border:4px solid #2e2013;
  border-radius:20px;
  padding:28px 22px 24px;
  text-align:center;
  box-shadow:0 8px 0 #2e2013;
}
#panel h2{ font-size:24px; margin:0 0 12px; color:#3a2a18; }
#panel p{
  font-size:14px; font-weight:600; color:#6b5636;
  line-height:1.7; margin:0 0 22px;
}
#panel p b{ color:var(--hud-fill); }

/* end-of-game review — the verbs from the round you were on */
#reviewList{
  margin:0 0 20px;
  max-height:44vh;
  overflow-y:auto;
  border:3px solid #2e2013;
  border-radius:12px;
  background:#fffaf0;
  text-align:left;
}
.rev-head{
  position:sticky; top:0;
  background:#f0b93d;
  border-bottom:3px solid #2e2013;
  padding:6px 10px;
  font-size:10px; font-weight:800; letter-spacing:.3px;
  color:#3a2a18; text-transform:uppercase;
}
.rev-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:2px 8px;
  padding:7px 10px;
  border-bottom:2px solid #ece0c0;
}
.rev-row:last-child{ border-bottom:0; }
.rev-row.done{ opacity:.5; }
.rev-jp{
  font-family:'Noto Sans JP','Baloo 2',sans-serif;
  font-size:16px; font-weight:700; color:#3a2a18;
}
.rev-rd{ font-size:11px; font-weight:700; color:#8a6a3a; }
.rev-mean{ flex-basis:100%; font-size:12px; font-weight:600; color:#6b5636; }
.rev-row.done .rev-jp::after{ content:" ✓"; color:var(--hud-fill); }

#panelBtn{
  --base:var(--panel-btn); --edge:var(--panel-btn-edge);
  width:100%;
  color:#fffaf0;
  font-family:'Baloo 2','Mali',sans-serif;
  font-weight:800;
  font-size:19px;
  padding:15px;
  cursor:pointer;
}

/* ============================================================
   HUB / level-select screen (index.html) — static, no JS
   ============================================================ */
#hub{
  width:100%;
  max-width:440px;
  min-height:calc(100vh - 28px);
  background:#4a3220;
  border-radius:24px;
  padding:10px;
  box-shadow:0 10px 0 #2e1f12, 0 16px 24px rgba(0,0,0,.35);
  display:flex;
}
#hub-inner{
  flex:1;
  background:#f4e3bb;
  border-radius:18px;
  padding:22px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
  background-image: radial-gradient(#e8d5a6 1px, transparent 1px);
  background-size: 14px 14px;
}
.hub-title{
  text-align:center;
  font-size:34px;
  font-weight:800;
  color:#3a2a18;
  letter-spacing:2px;
}
.hub-title .jp{
  font-family:'Noto Sans JP','Baloo 2','Mali',sans-serif;
  display:block;
  font-size:18px;
  color:#8a6a3a;
  letter-spacing:4px;
}
.hub-sub{
  text-align:center;
  font-size:13px;
  font-weight:700;
  color:#6b5636;
  line-height:1.6;
  margin:0 4px 6px;
}
.hub-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  text-decoration:none;
  color:#fffaf0;
}
.hub-link .lv{
  font-size:22px;
  font-weight:800;
  letter-spacing:1px;
  min-width:38px;
}
.hub-link .desc{
  flex:1;
  font-size:13px;
  font-weight:700;
  opacity:.95;
}
.hub-link .arrow{ font-size:16px; }

/* card text is sized by fitCardText() in the engine, not by breakpoint */