/* Ensure hidden screens never block clicks */
.screen[hidden]{ display:none !important; pointer-events:none !important; }
.screen{ pointer-events:auto; }

@font-face{
  font-family:"JustMeAgainDownHereLocal";
  src:url("/fonts/JustMeAgainDownHere/JustMeAgainDownHere-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
}
@font-face{
  font-family:"JapaneseES";
  src:url("/fonts/JapaneseES.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#0f172a;
  --muted:rgba(15,23,42,0.62);
  --green:#7ac143;
  --green-d:#63a230;
  --yellow:#ffe815;
  --panel:rgba(255,255,255,0.92);
  --shadow:0 20px 50px rgba(0,0,0,0.14);
  --radius:28px;
}

html, body{
  touch-action: manipulation;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(255,255,255,0.65), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(230,230,230,0.55), transparent 60%),
    radial-gradient(900px 500px at 50% 85%, rgba(210,210,210,0.45), transparent 60%),
    #eef1f5;
}

.wrap{width:min(1100px,94vw); margin:18px auto 46px;}
.fun{font-family:"Mochiy Pop P One", system-ui, sans-serif;}

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.nav-wrap{
  width:100%;
  padding:12px 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:42px;height:42px;display:block}
.brand-title{
  font-family:"JustMeAgainDownHereLocal",cursive;
  font-size:clamp(26px,3.8vw,42px);
  line-height:1;
  color:#000;
}
.nav-links a{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  font-size:18px;
  color:#fff;
  background:linear-gradient(180deg,#90e065,#5cb93a);
  border-radius:14px;
  padding:10px 18px;
  box-shadow:0 4px 0 #4e8c32,0 6px 10px rgba(0,0,0,.15);
  transition:transform .1s,box-shadow .2s;
}
.nav-links a:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 0 #4e8c32,0 10px 14px rgba(0,0,0,.2);
}
.nav-links a:active{
  transform:translateY(2px);
  box-shadow:0 2px 0 #4e8c32;
}

/* Panels */
.screen{margin-top:16px;}
.cardPanel{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:26px;
}

.big-instruction{
  font-size:clamp(36px, 4.5vw, 56px);
  font-weight:900;
  margin:0 0 20px 0;
  color:rgba(15,23,42,0.90);
}

.formRow{margin-top:16px;}
.label{font-weight:900; color:rgba(15,23,42,0.65); margin-bottom:10px;}

.nameInput{
  width:50%;
  max-width:420px;
  min-width:220px;
  font-size:18px;
  padding:14px 14px;
  border-radius:18px;
  border:2px solid rgba(15,23,42,0.14);
  outline:none;
}
.nameInput:focus{border-color:rgba(122,193,67,0.55);}

.modeRow{display:flex; gap:14px;}
.modeBtn{
  flex:1;
  border:0;
  border-radius:22px;
  padding:26px 16px;
  min-height:88px;
  cursor:pointer;
  background:rgba(15,23,42,0.08);
  font-weight:900;
  font-size:22px;
  transition:transform .08s ease;
  -webkit-tap-highlight-color: transparent;
}
.modeBtn:hover{transform:translateY(-1px);}
.modeBtn:active{transform:translateY(2px);}
.modeBtn.active{background:linear-gradient(180deg, var(--yellow), #ffd900);}

.gameModeBtn{
  font-family:"JapaneseES","Zen Kaku Gothic New",sans-serif;
  font-weight:normal;
  font-size:26px;
  letter-spacing:0.5px;
}

.goBtn{
  width:min(520px, 100%);
  display:block;
  margin:22px auto 0;
  border:0;
  border-radius:26px;
  padding:22px 16px;
  min-height:78px;
  font-weight:900;
  font-size:24px;
  cursor:pointer;
  background:linear-gradient(180deg, var(--green), var(--green-d));
  color:white;
  -webkit-tap-highlight-color: transparent;
}

button{
  color: var(--ink);
}

/* Game header */
.gameHeader{
  background:transparent;
  border-radius:0;
  box-shadow:none;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}
.gameTitle{
  font-size:30px;
  font-weight:900;
  line-height:1.2;
}

/* HUD */
.kidHud{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.hudPill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:#fff;
  border:2px solid rgba(15,23,42,0.12);
  border-radius:12px;
  padding:10px 12px;
  font-weight:900;
  box-shadow:0 6px 12px rgba(0,0,0,0.08);
}
.hudTime{ justify-content:flex-start; }
#hudTime{
  display:inline-block;
  width:7ch;
  text-align:right;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.timeIcon{ font-size:12px; font-weight:900; letter-spacing:0.08em; opacity:0.7; }
.hudLives{ width:106px; font-size:18px; }
.hudBtn{
  cursor:pointer;
  background:rgba(15,23,42,0.08);
  border:none;
  box-shadow:none;
  width:140px;
  height:44px;
  font-size:14px;
  padding:0;
  justify-content:center;
}

/* Heart pop */
.hudLives.pop{ animation:heartPop .28s ease; }
@keyframes heartPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.18)}
  100%{transform:scale(1)}
}

/* Panels */
.panel{
  margin-top:14px;
  background:rgba(255,255,255,0.70);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
  backdrop-filter: blur(6px);
}

/* Collected row */
.collected{
  min-height:110px;
  display:flex;
  flex-wrap:nowrap;
  gap:2px;
  align-items:center;
  padding:4px;
  background:rgba(255,255,255,0.40);
  border-radius:20px;
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  -webkit-overflow-scrolling: touch;
}

/* Game grid 9/9/8 */
.grid{
  display:grid;
  grid-template-columns:repeat(9, minmax(0, 1fr));
  gap:12px;
}
.grid .card:nth-last-child(8){ grid-column:2; }

.card{
  position:relative;
  height:110px;
  width:100%;
  border-radius:22px;
  display:grid;
  place-items:center;
  font-family:"JapaneseES","Zen Kaku Gothic New",sans-serif;
  font-size:45px;
  font-weight:normal;
  background:white;
  border:3px solid rgba(15,23,42,0.10);
  box-shadow:0 10px 18px rgba(0,0,0,0.10);
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, opacity .12s ease;
}
.card:hover{transform:translateY(-1px);}
.card:active{transform:translateY(1px);}
.card.correct{ background:rgba(204,238,250,0.9); border-color:rgba(122,193,67,0.35); }
.card.disabled{ opacity:0.30; pointer-events:none; }

/* ✅ FIX: M/W smaller */
.card.wideGlyph{
  font-size:42px; /* was 45px */
}

/* Lowercase baseline (abc mode only) */
.lowercase .card::after{
  content:"";
  position:absolute;
  left:14%;
  right:14%;
  bottom:36px;
  height:2px;
  background:#e11d48;
  border-radius:2px;
  pointer-events:none;
  opacity:0.25;
}

/* Wiggle ramp */
.card.wiggleSoft{ animation:wiggleSoft 720ms ease-in-out infinite; }
.card.wiggleStrong{ animation:wiggleStrong 520ms ease-in-out infinite; }

@keyframes wiggleSoft{
  0%{transform:translateX(0) rotate(0)}
  20%{transform:translateX(-1px) rotate(-0.6deg)}
  40%{transform:translateX(1px) rotate(0.6deg)}
  60%{transform:translateX(-1px) rotate(-0.6deg)}
  80%{transform:translateX(1px) rotate(0.6deg)}
  100%{transform:translateX(0) rotate(0)}
}
@keyframes wiggleStrong{
  0%{transform:translateX(0) rotate(0)}
  15%{transform:translateX(-2.5px) rotate(-1.4deg)}
  30%{transform:translateX(2.5px) rotate(1.4deg)}
  45%{transform:translateX(-2px) rotate(-1.1deg)}
  60%{transform:translateX(2px) rotate(1.1deg)}
  75%{transform:translateX(-1.5px) rotate(-0.8deg)}
  100%{transform:translateX(0) rotate(0)}
}

/* Narrow collected tiles */
.collected .card{
  flex:0 0 auto;
  width:38px;
  height:78px;
  box-shadow:none;
}

/* ✅ FIX: M/W collected pills slightly wider */
.collected .card.wideGlyph{
  width:40px; /* was 38px */
}

/* Hint card */
.hintCard{ background:#fff; border-color:rgba(15,23,42,0.16); }

/* Shake wrong */
.card.shake{ animation:shake .22s ease; }
@keyframes shake{
  0%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  50%{transform:translateX(6px)}
  75%{transform:translateX(-4px)}
  100%{transform:translateX(0)}
}

.msg{
  min-height:22px;
  margin-top:12px;
  font-weight:900;
  color:rgba(15,23,42,0.65);
}
.msg.good{color:#0f766e;}
.msg.bad{color:#be123c;}

/* End screen */
.endCard{ text-align:center; animation:fadeUp .35s ease; }
@keyframes fadeUp{
  from{opacity:0; transform:translateY(14px)}
  to{opacity:1; transform:translateY(0)}
}
.endTitle{ font-size:34px; margin:0 0 8px 0; }
.endSub{ font-weight:900; color:rgba(15,23,42,0.72); margin-bottom:14px; }

.endInfo{
  display:grid;
  gap:8px;
  justify-items:center;
  padding:12px;
  border-radius:18px;
  background:rgba(15,23,42,0.05);
  max-width:520px;
  margin:10px auto 14px;
  text-align:left;
}
.endInfo .k{ color:rgba(15,23,42,0.55); font-weight:900; margin-right:8px; }
.endInfo > div{ width:100%; display:flex; justify-content:space-between; gap:18px; }

.scoreBox{
  margin-top:14px;
  background:rgba(15,23,42,0.06);
  border-radius:20px;
  padding:14px;
}
.scoreLabel{ font-weight:900; color:rgba(15,23,42,0.65); margin-bottom:10px; }

/* END: rows 9 / 9 / 8 */
.scoreLetters{
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
}
.scoreRow{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:nowrap;
}
.scoreRow .card{
  width:44px;
  height:62px;
  border-radius:18px;
  font-size:28px;
  box-shadow:none;
}

/* ===== Confetti (Finished only) ===== */
.confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:9999;
}
.confetti-piece{
  position:absolute;
  top:-12px;
  width:10px;
  height:14px;
  border-radius:3px;
  opacity:0.95;
  transform:translateY(-20px) rotate(0deg);
  animation:confettiFall var(--dur, 1400ms) ease-out forwards;
  animation-delay:var(--delay, 0ms);
}
@keyframes confettiFall{
  0%   { transform:translate3d(var(--x,0), -20px, 0) rotate(0deg); opacity:0; }
  10%  { opacity:1; }
  100% { transform:translate3d(var(--x,0), 110vh, 0) rotate(var(--rot, 520deg)); opacity:0; }
}

.endInfo{
  gap:16px;
  padding:18px 20px;
}

.endInfo .k{
  font-size:24px;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:12px;
  margin-right:0;
}

.endInfo > div{
  align-items:center;
}

/* right-side values */
#overName,
#overMode,
#overHint,
#overTime,
#overStamp{
  font-size:24px;
  font-weight:900;
  font-family:"Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  font-variant-numeric: tabular-nums;
}

/* Centered date on END screen */
.endStamp{
  justify-content:center !important;
}

.endStamp span{
  font-size:22px;
  font-weight:900;
  font-family:"Zen Kaku Gothic New", system-ui, -apple-system, sans-serif;
  opacity:0.75;
  white-space:nowrap;
}