/* Global: lock Poppins everywhere */
*,
*::before,
*::after { box-sizing: border-box; font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

.hide{
  display: none !important;
}
:root{
  --bg:#0f183a;
  --bg2:#1D355D;
  --panel: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.16);
  --blur: 8px;

  --text:#fff;
  --muted:#cfd8ff;

  --accent:#7c5cff;      /* electric violet */
  --accent2:#00e7ff;     /* cyan */
  --lime:#31fb31;
  --lime-dark:#23d823;
  --sky:#0ea5e9;
  --sky-dark:#0b83ba;

  --chip:#101a3f;
  --chipBorder: rgba(255,255,255,.22);

  --win:#78ffcf;
  --lose:#ff9b9b;

    --solo-1:#ff8aa6;   /* coral */
  --solo-2:#ff6f90;   /* deeper coral */
  --comp-1:#7c5cff;   /* electric violet */
  --comp-2:#39e7ff;   /* cyan */
  --ink:#0b0b13;
  --glass-stroke: rgba(255,255,255,.22);
  --glass-bg: rgba(255,255,255,.08);
  --ring:#a7f3ff;
}

html,body{
  margin:0; padding:0; color:var(--text);

  min-height:100vh;
}

.hidden{ display:none !important; }
.block{ display:block; margin-inline:auto; }

#app{
  width:100%;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:24px 16px 56px;
    background: radial-gradient(1200px 800px at 20% -10%, #233a86 0%, transparent 60%),
              radial-gradient(1000px 700px at 100% 0%, #0b5a9a 0%, transparent 50%),
              linear-gradient(135deg, var(--bg) 0%, var(--bg2) 100%);
}

/* HUD / Leaderboard */
.hud{
  width:min(1200px,95vw);
  margin:8px auto 18px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px;
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(0,231,255,.18));
  border:1px solid var(--stroke);
  backdrop-filter: blur(var(--blur));
  border-radius:20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.hud .divider{ opacity:.7; margin:0 6px; font-weight:700; }
.hud.hidden{ display:none; }

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  font-weight:700; letter-spacing:.3px; line-height:1;
  background: rgba(12,18,48,.65);
  border:1px solid var(--chipBorder);
  color:#dfe7ff;
}
.chip .icon{ opacity:.9 }
.chip.score strong{ font-weight:900; color:#fff; }

.chip.score.you{ background: linear-gradient(135deg, rgba(124,92,255,.28), rgba(0,231,255,.18)); }
.chip.score.npc{ background: linear-gradient(135deg, rgba(0,231,255,.28), rgba(124,92,255,.18)); }

.btn-ghost{
  cursor:pointer; background:rgba(255,255,255,.06); color:#fff; border:1px solid var(--chipBorder);
  transition: all .18s ease; padding:8px 12px; border-radius:999px;
}
.btn-ghost:hover{ background:rgba(255,255,255,.14); transform: translateY(-1px); }

/* Screens */
.screen{
  width:min(1200px,95vw);
  text-align:center;
  margin:0 auto;
}
.title{
  font-size: 5.8rem;
  font-weight:900;
  line-height:1.05;
  text-shadow:0 8px 38px rgba(0,0,0,.35);
  margin-top:6px;
}
.hero{
  width:40rem;
  border-radius:24px;
  margin:18px auto 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  margin-top: 20px;
}

.row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

#hintText{
  font-size: 1.1rem !important;
  padding: 0 !important;
  padding-top: 0px;
  
  font-size: 1rem !important;
background: none;
border: none;
box-shadow: none;
color: rgba(239, 234, 224, 0.686);
font-weight: 200;
text-decoration: underline;
}

.link{
  padding: 0 !important;
  border: none;


}
.solo_row{
  display: flex;
  flex-direction: column;
}

.btn{
  --shadow: 0 10px 24px rgba(0,0,0,.28);
  --shadow-press: 0 6px 16px rgba(0,0,0,.32);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:800; letter-spacing:.3px; cursor:pointer;
  font-size:1.3rem; line-height:1;
  padding:14px 20px; border-radius:16px; border:0;
  color:#0a0a0a; background:#fff;
  box-shadow: var(--shadow);
  transition: transform .14s ease, filter .18s ease, box-shadow .16s ease, opacity .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover{ transform: translateY(-1px); filter: saturate(112%); }
.btn:active{ transform: translateY(1px); box-shadow: var(--shadow-press); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; box-shadow:none; }

/* keyboard focus */
.btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(11,11,19,.6),
    0 0 0 6px var(--ring),
    var(--shadow);
}

/* SOLO (warm coral) */
.btn-solo{
  background: linear-gradient(135deg, var(--solo-1), var(--solo-2));
  color: var(--ink);
    font-size: 2rem;
  color:#fdfdfd;

}

#skillSelectionScreen{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 90vw;
}

/* COMPETE (vibrant gradient) */
.btn-compete{
  background: linear-gradient(135deg, var(--comp-1), var(--comp-2));
  color:#fdfdfd;
  font-size: 2rem;
}

/* success/confirm you already use for CHECK etc. */
.btn-lime{
  background: var(--lime);
  color:#05100a;
}
.btn-lime:hover{ background: var(--lime-dark); }

#checkButton{
  margin-top: 10px !important;

}

/* GLASS ghost */
.btn-ghost{
  background: var(--glass-bg);
  color:#ffffff;
  border:1px solid var(--glass-stroke);
  box-shadow: none;
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{ background: rgba(255,255,255,.14); }

/* subtle inner highlight for depth */
.btn::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.btn{ position:relative; overflow:hidden; }

/* optional micro-ripple on hover (desktop only) */
@media (hover:hover){
  .btn:hover::before{
    content:""; position:absolute; inset:-40%;
    background: radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.25), transparent 40%);
    opacity:.35; transition: opacity .25s ease; pointer-events:none;
  }
  .btn:hover{ filter: saturate(118%); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn, .btn:hover, .btn:active{ transition:none }
}
/* Difficulty */
#difficultySelect{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.subtitle{ font-weight:900; letter-spacing:.4px; margin:10px auto 10px; }
.difficulty-grid{
  display:grid; grid-template-columns:repeat(3, minmax(220px, 1fr));
  gap:14px; width:min(900px,96%); margin:12px auto 12px;
}
.difficulty-card{
  cursor:pointer; border:none; color:#fff; padding:20px 16px; border-radius:18px;
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,231,255,.18));
  border:1px solid var(--stroke); backdrop-filter: blur(var(--blur));
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.difficulty-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.diff-title{ display:block; font-weight:900; font-size:2.5rem; }
.diff-note{ opacity:.8; font-weight:600; }

/* Skills */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap:12px; width:min(900px,96%); margin:12px auto 12px;
  min-width: 90vw;
}
.skills-grid .skill-btn{
  cursor:pointer; border:none; color:#fff; padding:16px 14px; border-radius:18px; text-align:left;
  background: conic-gradient(from 210deg, rgba(124,92,255,.35), rgba(0,231,255,.35), rgba(124,92,255,.35));
  border:1px solid var(--stroke); backdrop-filter: blur(var(--blur));
  box-shadow: 0 12px 38px rgba(0,0,0,.25);
  transition: transform .12s ease, filter .18s ease;
  font-size: 1.5rem;
}
.skills-grid .skill-btn:hover{ transform: translateY(-2px); filter: saturate(120%); }
.skills-grid .top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;
}
.skills-grid .label{ font-weight:900; letter-spacing:.2px; }
.skills-grid .badge{ background:rgba(255,255,255,.14); padding:6px 10px; border-radius:999px; font-weight:700; }

/* Countdown */
#countdownScreen{ display:flex; justify-content:center; }
.countdown-card{
  margin:24px auto; padding:32px 36px; border-radius:26px; width:min(680px, 90vw);
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,231,255,.18));
  border:1px solid var(--stroke); backdrop-filter: blur(var(--blur));
  box-shadow: 0 18px 50px rgba(0,0,0,.32);
}
.count{ font-size: clamp(4rem, 14vw, 10rem); font-weight:900; text-shadow:0 12px 40px rgba(0,0,0,.35); animation: pop .6s ease forwards; }
.tip{ color:#e9f1ff; font-weight:600; margin:8px 0 0; }
@keyframes pop{ from{ transform:scale(.92); opacity:.8 } to{ transform:scale(1); opacity:1 } }

/* Game */
.word-image{
  width:22rem; margin:8px auto; display:block;
  filter: drop-shadow(0 12px 28px rgba(0,0,0,.28));
}
.scrambled{
  font-size: 4rem !important;
  font-weight:900; letter-spacing: .08em; margin:6px 0 12px;
}

/* Solo */
.solo-wrap{
  display:flex; flex-direction:column; align-items:center; gap:10px; margin-top:6px;
}
#userAnswerSolo{
  width:min(560px,92vw); padding:12px 14px; text-align:center; border:none; outline:none;
  border-radius:16px; font-weight:900; font-size: clamp(1.4rem, 5vw, 2.6rem);
  background:#0b1436; color:#eaf2ff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.06);
}

/* Versus */
.versus{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; width:min(1000px,96%); margin:10px auto 0;
}
.col{
  text-align:left; padding:14px; border-radius:18px; background:var(--panel); border:1px solid var(--stroke); backdrop-filter: blur(var(--blur));
}
.col-head{ color:#d2e2ff; font-weight:800; margin-bottom:8px; letter-spacing:.4px; }
#userAnswer, #npcAnswer{
  width:100%; padding:12px 14px; border:none; border-radius:14px;
  text-align:center; background:#0b1436; color:#eaf2ff;
  font-weight:800; font-size: clamp(1.2rem, 3.8vw, 2.2rem);
}
#npcAnswer{ color:#d2d2d2; letter-spacing: .15em; }
.progress{ margin-top:10px; width:100%; height:8px; background:#08102a; border-radius:999px; overflow:hidden; }
#npcProgressBar{ height:100%; width:0%; background: linear-gradient(90deg, #39e7ff, #7c5cff); transition: width .25s ease; }

/* Result */
#correctScreen .result-h1{
  font-weight:900; font-size: clamp(2rem, 6vw, 4.8rem);
  background: linear-gradient(135deg, #78ffcf, #39e7ff); -webkit-background-clip:text; background-clip:text; color:transparent;
  margin:10px auto 8px;
}
.gif{ width:min(520px, 92%); max-height:520px; object-fit:contain; border-radius:18px; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.result-meta{ margin:10px 0 14px; display:flex; gap:10px; justify-content:center; }
.hidden.result-meta{ display:none; }

/* Game Over */
.gameover-card{
  width:min(900px, 94vw); margin:16px auto 0; padding:20px 20px 24px;
  background: linear-gradient(135deg, rgba(124,92,255,.22), rgba(0,231,255,.18));
  border:1px solid var(--stroke); border-radius:26px; box-shadow: 0 22px 60px rgba(0,0,0,.34);
  backdrop-filter: blur(var(--blur));
}
.ribbon{
  display:inline-block; padding:10px 14px; border-radius:14px; font-weight:900; letter-spacing:.4px; margin-top:2px; margin-bottom:10px;
  background: linear-gradient(135deg, #7c5cff, #39e7ff); color:#071127;
}
.end-gif{ width:min(720px, 96%); border-radius:18px; box-shadow: 0 14px 40px rgba(0,0,0,.28); }
.final-result{ margin:12px 0 14px; font-weight:800; letter-spacing:.3px; }

@media (max-width: 820px){
  .difficulty-grid{ grid-template-columns:1fr; }
  .skills-grid{ grid-template-columns:1fr; }
  .versus{ grid-template-columns:1fr; }
}

/* =========================================================
   RESPONSIVE MEDIA QUERIES — Reading Scramble Mania (RSM)
   Paste this at the very end of rsm.css
   ========================================================= */

/* ---------- Global helpers ---------- */
@media (hover: none) {
  .btn:hover { transform: none; filter: none; }
}
@supports (padding: max(0px)) {
  /* iOS safe-area for full-height screens */
  .screen { padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
            padding-bottom: max(1.25rem, env(safe-area-inset-bottom)); }
}

/* =========================================================
   XS — very small phones (≤ 360px)
   ========================================================= */
@media (max-width: 360px) {
  .title { font-size: 2.1rem; line-height: 1.05; }
  .subtitle { font-size: 1.1rem; }
  .hero { width: 84%; border-radius: 16px; }
  .row { gap: .6rem; flex-wrap: wrap; }
  .btn { font-size: 1rem; padding: .8rem 1rem; min-height: 44px; width: 100%; }

  /* HUD / Leaderboard */
  .hud { gap: .5rem; padding: .6rem; }
  .hud-left, .hud-center, .hud-right { gap: .4rem; }
  .hud { flex-direction: column; align-items: stretch; }
  .hud-center { justify-content: center; }
  .chip.score { font-size: .95rem; padding: .4rem .6rem; }

  /* Grids */
  .difficulty-grid { grid-template-columns: 1fr; gap: .7rem; }
  .skills-grid { grid-template-columns: 1fr; gap: .7rem; }
  .skill-btn .label { font-size: 1rem; }
  .skill-btn .badge { font-size: .8rem; }

  /* Countdown */
  .countdown-card { padding: 1rem; border-radius: 18px; }
  .countdown-card .count { font-size: 3.2rem; }
  .countdown-card .tip { font-size: .95rem; }

  /* Game */
  .word-image { width: 68vw; max-height: 36vh; }
  .scrambled { font-size: 1.6rem; letter-spacing: .06em; }

  /* Solo */
  .solo-wrap input { font-size: 1.05rem; padding: .75rem .9rem; }
  #hintText { font-size: .95rem; }

  /* Compete */
  .versus { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  .versus .col { padding: .75rem; border-radius: 14px; }
  .versus .col-head { font-size: .9rem; }
  .versus input { font-size: 1.05rem; padding: .7rem .9rem; }
  .progress { height: 8px; border-radius: 10px; }

  /* Result */
  .result-h1 { font-size: 1.6rem; }
  .gif { width: 70vw; max-height: 36vh; border-radius: 16px; }
  #resultScore, #resultRound { font-size: .95rem; }

  /* Game Over */
  .gameover-card { padding: 1rem; border-radius: 18px; }
  .gameover-card .ribbon { font-size: 1.3rem; padding: .6rem .9rem; }
  .end-gif { width: 72vw; max-height: 36vh; border-radius: 16px; }
  .final-result { font-size: 1rem; }
}

/* =========================================================
   SM — small phones (361–479px)
   ========================================================= */
@media (min-width: 361px) and (max-width: 479px) {
  .title { font-size: 2.4rem; }
  .subtitle { font-size: 1.15rem; }
  .btn { font-size: 1.05rem; padding: .9rem 1.1rem; min-height: 46px; width: 100%; }

  .hud { flex-direction: column; gap: .6rem; }
  .chip.score { font-size: 1rem; }

  .difficulty-grid { grid-template-columns: 1fr; gap: .8rem; }
  .skills-grid { grid-template-columns: 1fr; gap: .8rem; }

  .countdown-card .count { font-size: 3.6rem; }

  .word-image { width: 64vw; max-height: 38vh; }
  .scrambled { font-size: 1.8rem; }

  .versus { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
  .versus input { font-size: 1.1rem; }
  .progress { height: 9px; }

  .gif, .end-gif { width: 70vw; max-height: 40vh; }
}

/* --- Modern Skill Cards --- */
.skills-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  width:min(1000px,96%);
  margin:16px auto 0;
}

.skills-grid .skill-card{
  position: relative;
  cursor: pointer;
  border: 0;
  padding: 16px 18px;
  border-radius: 18px;
  text-align: center;

  /* glassy / gradient vibe */
  color: #ffffff;
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(124,92,255,.20), transparent 60%),
    radial-gradient(120% 180% at 100% 0%, rgba(0,231,255,.16), transparent 60%),
    rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0,0,0,.28);

  /* motion + feel */
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

/* soft gradient ring */
.skills-grid .skill-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:19px;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(124,92,255,.45), rgba(0,231,255,.35));
  opacity:.25;
  mask: linear-gradient(#000 0 0) exclude, linear-gradient(#000 0 0) content-box;
  padding:1px; /* “stroke” thickness */
}

/* shine sweep on hover (desktop) */
@media (hover:hover){
  .skills-grid .skill-card::after{
    content:"";
    position:absolute; inset:0; border-radius:18px; pointer-events:none;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .5s ease;
  }
  .skills-grid .skill-card:hover::after{ transform: translateX(120%); }
}

.skills-grid .skill-card:hover{
  transform: translateY(-2px);
  filter: saturate(116%);
  box-shadow: 0 16px 42px rgba(0,0,0,.34);
  border-color: rgba(255,255,255,.26);
}

.skills-grid .skill-card:active{
  transform: translateY(0);
  box-shadow: 0 8px 24px rgba(0,0,0,.32);
}

/* keyboard focus */
.skills-grid .skill-card:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(11,11,19,.6),
    0 0 0 6px var(--ring, #a7f3ff),
    0 16px 42px rgba(0,0,0,.34);
}

/* label styling */
.skills-grid .skill-card .skill-title{
  display:block;
  font-weight: 900;
  letter-spacing: .3px;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0,0,0,.35);
}

/* tiny caption option (if you add one later) */
.skills-grid .skill-card .skill-caption{
  margin-top: 4px;
  opacity: .8;
  font-weight: 600;
  font-size: .95rem;
}

/* mobile tweaks */
@media (max-width: 820px){
  .skills-grid{ gap:12px; }
  .skills-grid .skill-card{ padding: 14px 16px; border-radius:16px; }
}


/* =========================================================
   MD — big phones / small phablets (480–639px)
   ========================================================= */
@media (min-width: 480px) and (max-width: 639px) {
  .title { font-size: 2.8rem; }
  .subtitle { font-size: 1.2rem; }
  .btn { font-size: 1.1rem; padding: 1rem 1.2rem; min-height: 48px; width: auto; }

  .hud { flex-direction: column; align-items: stretch; gap: .7rem; }
  .hud-center { order: -1; justify-content: center; }

  .difficulty-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }

  .countdown-card .count { font-size: 4rem; }

  .word-image { width: 56vw; max-height: 42vh; }
  .scrambled { font-size: 2rem; }

  .versus { grid-template-columns: 1fr; gap: 1.2rem; }
  .versus .col { padding: 1rem; }
  .progress { height: 10px; }

  .gif, .end-gif { width: 62vw; max-height: 44vh; }
}

/* =========================================================
   LG PHONE / SMALL TABLET portrait (640–767px)
   ========================================================= */
@media (min-width: 640px) and (max-width: 767px) {
  .title { font-size: 3rem; }
  .subtitle { font-size: 1.25rem; }
  .hero { width: 70%; }

  .hud { flex-wrap: wrap; gap: .8rem; }
  .chip.score { font-size: 1.05rem; }

  .difficulty-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .skills-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }

  .countdown-card .count { font-size: 4.4rem; }

  .word-image { width: 48vw; max-height: 46vh; }
  .scrambled { font-size: 2.2rem; }

  .versus { grid-template-columns: 1fr; gap: 1.2rem; }
  .progress { height: 10px; }

  .gif, .end-gif { width: 56vw; max-height: 46vh; }
  .gameover-card { max-width: 620px; margin-inline: auto; }
}

/* =========================================================
   TABLET portrait (768–1023px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 1023px) {
  .title { font-size: 3.4rem; }
  .subtitle { font-size: 1.35rem; }
  .hero { width: 64%; }

  .hud { gap: .9rem; padding: .8rem 1rem; }
  .chip { font-size: 1rem; }
  .chip.score { font-size: 1.1rem; }

  .difficulty-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .skills-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
  .skill-btn .label { font-size: 1.05rem; }
  .skill-btn .badge { font-size: .9rem; }

  .countdown-card .count { font-size: 4.8rem; }

  .game-screen { gap: 1.2rem; }
  .word-image { width: 44vw; max-height: 48vh; }
  .scrambled { font-size: 2.4rem; }

  .versus { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .versus .col { padding: 1.1rem; }
  .versus input { font-size: 1.1rem; }
  .progress { height: 12px; }

  .gif, .end-gif { width: 48vw; max-height: 48vh; }
  .gameover-card { max-width: 720px; }
  .final-result { font-size: 1.15rem; }
}

/* =========================================================
   TABLET landscape / SMALL DESKTOP (1024–1279px)
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  .title { font-size: 3.8rem; }
  .subtitle { font-size: 1.45rem; }
  .hero { width: 56%; }

  .hud { gap: 1rem; padding: .9rem 1.25rem; }
  .chip { font-size: 1.05rem; }
  .chip.score { font-size: 1.15rem; }

  .difficulty-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
  .skills-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

  .countdown-card .count { font-size: 5.2rem; }

  .word-image { width: 38vw; max-height: 50vh; }
  .scrambled { font-size: 2.6rem; }

  .versus { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .versus input { font-size: 1.15rem; }
  .progress { height: 12px; }

  .gif, .end-gif { width: 42vw; max-height: 50vh; }
  .gameover-card { max-width: 860px; }
  .final-result { font-size: 1.2rem; }
}


/* =========================================================
   SHORT HEIGHT screens (≤ 700px height)
   ========================================================= */
@media (max-height: 700px) {
  .hero, .gif, .end-gif { max-height: 36vh; }
  .word-image { max-height: 34vh; }
  .hud { position: static; }
  .screen { padding-top: .75rem; }
  .row { margin-top: .6rem; }
}

/* =========================================================
   MOBILE landscape optimizations
   ========================================================= */
@media (max-width: 900px) and (orientation: landscape) {
  .title { font-size: 2rem; }
  .subtitle { font-size: 1rem; }
  .hero { width: 46%; }

  .hud { flex-direction: row; flex-wrap: wrap; gap: .5rem; }
  .chip { font-size: .95rem; }

  .countdown-card .count { font-size: 3rem; }

  .game-screen { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 1rem; }
  .word-image { width: 40vw; max-height: 46vh; }
  .scrambled { font-size: 1.8rem; }

  .versus { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .versus .col { padding: .8rem; }

  .gif, .end-gif { width: 42vw; max-height: 46vh; }

  .row .btn { min-width: 140px; }
}

/* =========================================================
   COMPONENT-SPECIFIC tweaks for modern look on small screens
   ========================================================= */

/* Difficulty cards */
@media (max-width: 767px) {
  .difficulty-card { padding: 1.1rem; border-radius: 18px; }
  .difficulty-card .diff-title { font-size: 1.1rem; }
}

/* Skill cards */
@media (max-width: 767px) {
  .skill-btn { padding: 1rem; border-radius: 18px; }
  .skill-btn .top { gap: .5rem; }
}

/* Inputs */
@media (max-width: 640px) {
  input#userAnswerSolo,
  input#userAnswer,
  input#npcAnswer {
    border-radius: 14px;
  }
}

/* Buttons wrap on tiny screens */
@media (max-width: 420px) {
  .row { display: grid; grid-template-columns: 1fr; }
  .row .btn { width: 100%; }
}

/* HUD back buttons hide on very small widths, show as one link below */
@media (max-width: 380px) {
  .hud-right { display: none; }
  #backToSkills, #backToMode { display: none; }
}

/* Countdown screen full-bleed centering */
@media (max-width: 767px) {
  #countdownScreen.screen.active { display: grid; place-items: center; }
  .countdown-card { width: min(520px, 92vw); }
}

/* Result screen spacing on phones */
@media (max-width: 540px) {
  .result-meta { gap: .5rem; }
  #resultScore, #resultRound { padding: .35rem .6rem; }
}

/* Game Over action row wrap nicely */
@media (max-width: 560px) {
  #gameOverScreen .row { display: grid; grid-template-columns: 1fr; gap: .7rem; }
  #gameOverScreen .btn { width: 100%; }
}