/* SIX SEVEN — notebook paper, red marker, two bobbing hands. */
:root{
  --paper:#FDFBF4; --rule:#C5DBEA; --margin:#E8978F; --ink:#1E2530; --red:#D8341B;
  --muted:#8a8473; --cream:#FFF8E8;
  --display:'Archivo Black', Arial, sans-serif;
  --marker:'Permanent Marker', 'Comic Sans MS', cursive;
  --mono:'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  color:var(--ink); font-family:var(--mono); overscroll-behavior:none;
  -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none;
  background:
    linear-gradient(90deg, transparent 44px, var(--margin) 44px, var(--margin) 46px, transparent 46px),
    repeating-linear-gradient(180deg, var(--paper) 0, var(--paper) 38px, var(--rule) 38px, var(--rule) 39.5px),
    var(--paper);
}
.mono{ font-family:var(--mono); }
a{ color:var(--ink); }
button{ font-family:inherit; cursor:pointer; }
[hidden]{ display:none !important; }

.screen{ min-height:100svh; display:flex; flex-direction:column; align-items:center; }

/* ============ HANDS ============ */
.hands{ display:flex; gap:14px; align-items:flex-end; pointer-events:none; }
.hand{ display:block; }
.hand svg{ width:84px; height:84px; display:block; animation:bob 1.15s ease-in-out infinite; }
.hand.r{ transform:scaleX(-1); }
.hand.r svg{ animation-delay:.575s; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-18px);} }
.hands.hit .hand svg{ animation:bob .28s ease-in-out infinite; }
.hands.big .hand svg{ animation:bigbob .3s ease-in-out infinite; }
@keyframes bigbob{ 0%,100%{ transform:translateY(4px) rotate(-6deg);} 50%{ transform:translateY(-34px) rotate(6deg);} }
.hands.dead .hand svg{ animation:none; transform:translateY(26px) rotate(22deg); opacity:.45;
  transition:transform .5s ease, opacity .5s; }

/* ============ INTRO ============ */
.intro{ justify-content:center; text-align:center; padding:24px; gap:0; }
.kicker{ font-weight:700; font-size:.92rem; letter-spacing:.26em; color:var(--muted); }
.wordmark{ font-family:var(--marker); font-weight:400; font-size:clamp(3rem,13vw,4.8rem);
  color:var(--red); line-height:1; margin:8px 0 14px; transform:rotate(-2deg); }
.rule{ font-size:1rem; line-height:1.6; color:var(--ink); margin-bottom:34px; }
.rule b{ color:var(--red); }
.start-btn{ font-family:var(--display); font-size:3.4rem; color:var(--ink); background:transparent;
  border:none; width:170px; height:170px; line-height:170px; position:relative; margin-bottom:30px;
  transition:transform .1s; }
.start-btn::before{ content:''; position:absolute; inset:0; border:6px solid var(--red);
  border-radius:50% 46% 52% 48% / 48% 52% 46% 54%; transform:rotate(-4deg); }
.start-btn:active{ transform:scale(.93); }
.foot{ position:absolute; bottom:14px; left:0; right:0; text-align:center;
  font-size:.74rem; color:var(--muted); }
.foot a{ color:var(--muted); }

/* ============ THE EXAM ============ */
.game{ justify-content:space-between; touch-action:manipulation; }
.bar{ width:100%; max-width:480px; display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px 0; }
.bar-title{ font-family:var(--marker); font-size:1.15rem; color:var(--red); transform:rotate(-2deg); }
.counter{ font-weight:700; font-size:.9rem; color:var(--muted); min-width:62px; text-align:right; }
.lives{ display:flex; gap:2px; min-width:62px; }
.life svg{ width:22px; height:22px; display:block; }
.life.lost{ opacity:.15; filter:grayscale(1); }

.num-zone{ flex:1; width:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:26px; }
.num{ font-family:var(--display); line-height:1; letter-spacing:-.02em; color:var(--ink);
  min-height:1em; }
.num.pop{ animation:numpop .14s ease-out; }
@keyframes numpop{ from{ transform:scale(.7); opacity:0;} to{ transform:scale(1); opacity:1;} }
.timebar{ width:min(240px,60vw); height:5px; background:rgba(30,37,48,.12); border-radius:3px; overflow:hidden; }
.timebar i{ display:block; height:100%; width:100%; background:var(--ink); border-radius:3px; }

.game.wrong{ animation:shake .3s; }
.game.wrong .num{ color:var(--red); }
@keyframes shake{ 20%{ transform:translateX(-9px);} 50%{ transform:translateX(8px);} 80%{ transform:translateX(-4px);} }

.flash{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--marker); font-size:clamp(3.4rem,16vw,7rem); color:var(--red);
  transform:rotate(-5deg); pointer-events:none; z-index:50; animation:flashin .55s ease-out both; }
@keyframes flashin{ 0%{ transform:rotate(-5deg) scale(2.6); opacity:0;} 30%{ opacity:1;}
  100%{ transform:rotate(-5deg) scale(1); opacity:0;} }

.game-hands{ padding-bottom:22px; }

/* ============ THE GRADE ============ */
.result{ justify-content:center; padding:22px 18px 30px; }
.result-inner{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:480px; }
#card{ width:min(420px,92vw); height:auto; display:block; border-radius:16px;
  border:3px solid var(--ink); box-shadow:7px 7px 0 rgba(30,37,48,.2); background:var(--paper); }
.result-actions{ margin-top:18px; }
.big-btn{ font-family:var(--display); font-size:1.1rem; letter-spacing:.04em; color:var(--paper);
  background:var(--ink); border:none; border-radius:14px; padding:18px 34px;
  box-shadow:0 6px 0 rgba(30,37,48,.3); transition:transform .08s; }
.big-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(30,37,48,.3); }
.fine{ font-size:.78rem; color:var(--muted); margin-top:16px; }
.fine a{ color:var(--muted); }

@media (min-width:700px){
  .screen{ max-width:520px; margin:0 auto; }
}
@media (prefers-reduced-motion: reduce){
  .hand svg,.hands.hit .hand svg,.hands.big .hand svg{ animation:none; }
  .num.pop,.game.wrong,.flash{ animation:none; }
}