html,body{
  margin:0;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  width:100%;
  height:100%;
  background:#071018;
  font-family:'Courier New',ui-monospace,Menlo,Consolas,monospace;
}

#game{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#071018;
}

.hidden{display:none !important;}

.screen{
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  text-align:center;
  padding:24px;
  box-sizing:border-box;
  color:#dff6ff;
  z-index:5;
}

.title{
  font-size:clamp(32px,12vw,84px);
  margin:0;
  letter-spacing:3px;
  font-weight:900;
  color:#47ffce;
  text-shadow:4px 4px 0 #003d2d, 8px 8px 0 rgba(0,0,0,0.4);
}

.subtitle{
  font-size:clamp(18px,6vw,34px);
  margin:0 0 8px;
  letter-spacing:2px;
  color:#47ffce;
}

.tagline{
  font-size:clamp(13px,4vw,20px);
  max-width:min(80vw,560px);
  color:#a9c8e8;
  margin:0;
  letter-spacing:1px;
}

.best-line, .detail-line{
  font-size:clamp(11px,3.6vw,17px);
  color:#7fb3e8;
  margin:0;
  letter-spacing:1px;
}

.roast{
  font-size:clamp(10px,3.2vw,14px);
  color:#5c7590;
  margin:0;
  letter-spacing:0.5px;
  font-style:italic;
}

.cta-btn{
  font-family:inherit;
  font-weight:900;
  font-size:clamp(18px,6vw,28px);
  letter-spacing:2px;
  padding:22px 40px;
  border:none;
  border-radius:14px;
  background:#47ffce;
  color:#2b1800;
  box-shadow:0 8px 0 #00a378, 0 8px 20px rgba(0,0,0,0.5);
  cursor:pointer;
  touch-action:manipulation;
  margin:6px;
}

.cta-btn.small{
  font-size:clamp(14px,4.4vw,22px);
  padding:14px 24px;
}

.cta-btn:active{
  transform:translateY(6px);
  box-shadow:0 2px 0 #00a378;
}

.pulse{
  animation:pulse 1.1s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

.diff-btn{
  font-size:clamp(15px,5vw,24px);
  width:min(60vw,320px);
}

#hud{
  position:fixed;
  top:12px;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  z-index:4;
  pointer-events:none;
  color:#dff6ff;
  text-shadow:2px 2px 0 #000;
}

#turnLabel{
  font-size:clamp(13px,4vw,20px);
  font-weight:900;
  letter-spacing:2px;
  color:#47ffce;
}

#movesLabel{
  font-size:clamp(10px,3vw,15px);
  color:#7fb3e8;
}

/* ---------- Match board ---------- */
#matchScreen{
  justify-content:flex-start;
  padding-top:clamp(60px,14vh,120px);
  gap:8px;
}

.board{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:100%;
}

.side-label{
  font-size:clamp(11px,3.4vw,16px);
  letter-spacing:3px;
  color:#7fb3e8;
}

.hand-row{
  display:flex;
  gap:min(5vw,32px);
  justify-content:center;
}

.hand-box{
  width:26vw;
  height:26vw;
  max-width:150px;
  max-height:150px;
  background:linear-gradient(160deg,#16324a 0%,#0f2233 55%,#0a1a29 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.05), inset 0 -10px 18px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.3);
  border:3px solid #2a4a63;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
  touch-action:manipulation;
  transition:transform 0.08s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

@keyframes tapSquash{
  0%{ transform:scale(1); }
  35%{ transform:scale(0.9,1.08); }
  100%{ transform:scale(1); }
}
@keyframes hitSquash{
  0%{ transform:scale(1); }
  25%{ transform:scale(1.14,0.82); }
  60%{ transform:scale(0.94,1.06); }
  100%{ transform:scale(1); }
}
@keyframes handDeath{
  0%{ transform:scale(1) rotate(0deg); opacity:1; }
  20%{ transform:scale(1.1,0.85) rotate(-3deg); }
  45%{ transform:scale(0.9,1.05) rotate(3deg); }
  70%{ transform:scale(0.96,0.96) rotate(-1deg); }
  100%{ transform:scale(1) rotate(0deg); opacity:1; }
}
.hand-box.tap-squash{ animation:tapSquash 0.18s ease; }
.hand-box.hit-squash{ animation:hitSquash 0.26s ease; }
.hand-box.dying{ animation:handDeath 0.55s ease; }

@keyframes boardShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,2px); }
  40%{ transform:translate(5px,-3px); }
  60%{ transform:translate(-4px,1px); }
  80%{ transform:translate(3px,-1px); }
}
.board.shake{ animation:boardShake 0.32s ease; }
.board.shake-hard{ animation:boardShake 0.5s ease; }

.hand-box.selectable{
  border-color:#47ffce;
  box-shadow:0 0 0 3px rgba(71,255,206,0.25);
}

.hand-box.selected{
  border-color:#4ee6ff;
  background:#123245;
  transform:scale(1.06);
}

.hand-box.dead{
  opacity:0.35;
  cursor:default;
  border-color:#3a3a3a;
}

.hand-box.dead .hand-count{
  text-decoration:line-through;
}

.hand-icon{
  display:flex;
  gap:3px;
}

.finger{
  width:3vw;
  height:8vw;
  max-width:16px;
  max-height:44px;
  background:#3f6a8a;
  border-radius:3px;
}

.hand-box.selected .finger{ background:#4ee6ff; }
.hand-box.dead .finger{ background:#333; }

.hand-count{
  font-size:clamp(22px,8vw,44px);
  font-weight:900;
  color:#dff6ff;
}

.mid-status{
  font-size:clamp(11px,3.6vw,17px);
  letter-spacing:1px;
  color:#47ffce;
  min-height:min(5vw,28px);
  margin:4px 0;
}

.action-row{
  display:flex;
  gap:10px;
  margin-top:6px;
}

.mini-btn{
  font-family:inherit;
  font-weight:900;
  font-size:clamp(13px,4vw,20px);
  letter-spacing:1px;
  padding:12px 22px;
  border:none;
  border-radius:10px;
  background:#1c3a4f;
  color:#dff6ff;
  border:2px solid #2a4a63;
  cursor:pointer;
  touch-action:manipulation;
}

.mini-btn:active{ transform:translateY(2px); }

#splitPanel{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.split-hint{
  font-size:clamp(10px,3.2vw,15px);
  color:#a9c8e8;
  margin:0;
}

.split-controls{
  display:flex;
  align-items:center;
  gap:16px;
}

.split-preview{
  font-size:clamp(18px,6vw,30px);
  font-weight:900;
  color:#4ee6ff;
  min-width:min(20vw,120px);
}

/* ---- Desktop sizing: keep copy from running the full width of a monitor.
   Mobile is unaffected (content is narrower than the cap at 390px). ---- */
.screen > *{
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
}

/* ---- Keyboard hint: desktop (real pointer) only ---- */
.kbd-hint{
  display:none;
  font-size:clamp(10px,3vw,14px);
  letter-spacing:2px;
  opacity:0.55;
  margin:0;
}
@media (hover: hover) and (pointer: fine){
  .kbd-hint{ display:block; }
}

.hand-box.kb-focus{
  outline:3px solid #4ee6ff;
  outline-offset:3px;
}