/* ===========================================================================
   In-bout HUD.

   Built like a game HUD rather than a set of glass cards: near-opaque panels,
   white on near-black, tight bold condensed type, hard offset shadows, and a
   consistent -4deg skew picked up from the wordmark (-5deg) and the headings
   (-4deg). Panels are skewed and their contents counter-skewed so type stays
   upright.

   One command bar across the top -- YOU / clock / ENEMY -- and a control bar
   along the bottom. Health tracks are chunky and hard-notched, and each carries
   a ghost bar that lags the real value so a hit is something you see land.
   ========================================================================= */
:root{
  --ink0:#120d19;        /* panel */
  --white:#fff;
  --soft:rgba(255,255,255,.6);
  --hp:#ffd45e;          /* you */
  --en:#8b0009;          /* the cuboid, and every UI accent */
  --en-lift:#b80a16;     /* hover / alert, one step up from it */
  --ghost:rgba(255,255,255,.85);
  --skew:-4deg;
  --unskew:4deg;
}

/* --- top command bar ----------------------------------------------------- */
#hud{position:absolute;top:clamp(10px,2vh,24px);left:50%;
  transform:translateX(-50%) skewX(var(--skew));
  z-index:6;width:min(1080px,66vw);display:flex;align-items:center;
  gap:clamp(10px,1.3vw,20px);padding:clamp(8px,1.1vh,13px) clamp(14px,1.6vw,24px);
  background:var(--ink0);border:0;border-radius:2px;
  box-shadow:0 9px 0 rgba(11,7,16,.3),0 22px 44px rgba(8,4,14,.4)}
#hud>*{transform:skewX(var(--unskew))}

#hud .health{position:static;width:auto;flex:1 1 0;max-width:none;min-width:0}
#hud .hLabel{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:5px}
#hud .hLabel span{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(11px,1vw,15px);letter-spacing:.05em;color:var(--soft);
  text-transform:uppercase;white-space:nowrap}
#hud .hLabel b{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(18px,1.6vw,26px);line-height:1;color:var(--white);
  font-variant-numeric:tabular-nums}
#hud .health small{display:none}

/* --- chunky hard-notched tracks with a lagging damage ghost --------------- */
#hud .track{position:relative;height:clamp(12px,1.5vh,17px);background:rgba(255,255,255,.13);
  border-radius:0;overflow:hidden;--seg:5%}
#hud .track i,#hud .track .ghost{position:absolute;top:0;bottom:0;left:0;display:block;
  height:100%;border-radius:0}
#hud .track .ghost{width:100%;background:var(--ghost);
  transition:width .42s cubic-bezier(.4,0,.2,1) .16s}
#hud .track i{transition:width .1s linear}
#hud .player .track i{background:var(--hp)}
#hud .opponent .track i{background:var(--en)}
/* the cuboid drains from the centre outwards, mirroring the player */
#hud .opponent .track{transform:scaleX(-1)}
/* hard notches, not hairlines */
#hud .track::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--seg) - 3px),
    var(--ink0) calc(var(--seg) - 3px) var(--seg))}
#hud .track.struck i{animation:struck .22s steps(2) 2}
@keyframes struck{0%{filter:brightness(3)}100%{filter:none}}

/* --- clock --------------------------------------------------------------- */
#hud .round{position:static;flex:0 0 auto;text-align:center;padding:0 clamp(6px,.9vw,16px)}
#hud .round>span{display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(10px,.85vw,13px);letter-spacing:.06em;color:var(--soft);
  text-transform:uppercase;white-space:nowrap;margin-bottom:1px}
#hud .round strong{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(30px,3.2vw,50px);line-height:.86;color:var(--white);
  font-variant-numeric:tabular-nums;display:block}
#hud .round.urgent strong{color:var(--en);animation:tick .8s steps(2) infinite}
@keyframes tick{50%{opacity:.4}}

/* --- header: wordmark only, no chrome ------------------------------------ */
body.playing header{padding:clamp(10px,2vh,24px) clamp(14px,2.4vw,34px);pointer-events:none}
body.playing header>*{pointer-events:auto}
body.playing .wordmark{display:block;width:clamp(118px,13vw,205px);aspect-ratio:1600/396;
  font-size:0;color:transparent;text-shadow:none;transform:none;background:var(--en);
  -webkit-mask:url('media/swdk-logo.png') left center/contain no-repeat;
          mask:url('media/swdk-logo.png') left center/contain no-repeat;
  -webkit-mask-image:image-set(url('media/swdk-master.webp') type('image/webp'),
                               url('media/swdk-logo.png')  type('image/png'));
          mask-image:image-set(url('media/swdk-master.webp') type('image/webp'),
                               url('media/swdk-logo.png')  type('image/png'));
  filter:drop-shadow(0 4px 0 rgba(11,7,16,.45))}
body.playing .wordmark span,body.playing #connection{display:none}
body.playing .utilities{gap:6px}
body.playing .utilities button{border:0;background:var(--ink0);color:var(--white);
  border-radius:2px;width:auto;min-width:42px;height:42px;padding:0 13px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  transform:skewX(var(--skew));box-shadow:0 6px 0 rgba(11,7,16,.3)}
body.playing .utilities button>*{display:inline-block;transform:skewX(var(--unskew))}

/* --- bottom control bar --------------------------------------------------- */
body.playing footer{background:linear-gradient(transparent,rgba(9,5,14,.55));
  padding:clamp(12px,1.8vh,24px) clamp(14px,2.4vw,34px) clamp(14px,2.2vh,28px);
  gap:clamp(10px,1.5vw,26px)}
body.playing .controls{gap:clamp(5px,.6vw,9px)}
body.playing .controls button{border:0;background:var(--ink0);border-radius:2px;
  padding:0;height:clamp(40px,4.6vh,50px);color:var(--white);gap:0;overflow:hidden;
  flex-direction:row;align-items:stretch;
  transform:skewX(var(--skew));box-shadow:0 6px 0 rgba(11,7,16,.3);
  transition:transform .08s,box-shadow .08s,background .1s}
body.playing .controls button kbd{border:0;background:rgba(255,255,255,.15);color:var(--white);
  border-radius:0;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;
  padding:0 12px;min-width:0;display:flex;align-items:center;
  transform:skewX(var(--unskew))}
body.playing .controls button span{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(12px,1.05vw,16px);letter-spacing:.04em;color:var(--white);
  text-transform:uppercase;display:flex;align-items:center;padding:0 15px 0 12px;
  transform:skewX(var(--unskew))}
body.playing .controls button:active,body.playing .controls button.active{
  background:var(--en);transform:skewX(var(--skew)) translateY(5px);
  box-shadow:0 1px 0 rgba(11,7,16,.3)}
body.playing .controls button.active kbd{background:rgba(0,0,0,.25)}

/* stamina + score */
body.playing .stamina{width:clamp(160px,16vw,240px);color:var(--white)}
body.playing .stamina>div:first-child{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(11px,.95vw,14px);letter-spacing:.05em;color:var(--soft);
  text-transform:uppercase;margin-bottom:5px}
body.playing .stamina>div:first-child b{color:var(--white);font-variant-numeric:tabular-nums}
body.playing .stamina .track{position:relative;height:clamp(10px,1.2vh,14px);
  background:rgba(255,255,255,.13);border-radius:0;overflow:hidden;--seg:10%;
  transform:skewX(var(--skew))}
body.playing .stamina .track i{background:var(--hp);border-radius:0}
body.playing .stamina .track i.low{background:var(--en)}
body.playing .stamina .track::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 calc(var(--seg) - 3px),
    #0b0710 calc(var(--seg) - 3px) var(--seg))}
body.playing .score{color:var(--white);text-align:right}
body.playing .score span{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(11px,.95vw,14px);letter-spacing:.05em;color:var(--soft);text-transform:uppercase}
body.playing .score strong{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(30px,2.8vw,46px);color:var(--white);font-variant-numeric:tabular-nums;
  line-height:.9;display:block}
body.playing #hookMode{border:0;background:var(--ink0);color:var(--white);border-radius:2px;
  padding:12px 18px;font-family:'Barlow Condensed',sans-serif;font-size:15px;letter-spacing:.05em;
  font-weight:700;text-transform:uppercase;transform:skewX(var(--skew));
  box-shadow:0 6px 0 rgba(11,7,16,.3)}
body.playing #hookMode.active{background:var(--en)}

/* --- cue + combo ---------------------------------------------------------- */
body.playing #cue{top:clamp(88px,12vh,140px);padding:11px 26px;border-radius:2px;
  background:var(--ink0);border:0;color:var(--white);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  font-family:'Barlow Condensed',sans-serif;font-size:clamp(15px,1.5vw,23px);
  letter-spacing:.05em;font-weight:700;text-transform:uppercase;
  transform:translateX(-50%) skewX(var(--skew));
  box-shadow:0 8px 0 rgba(11,7,16,.3),0 20px 40px rgba(8,4,14,.4)}
body.playing #cue.warning{background:var(--en);color:var(--white);
  animation:alert .5s steps(2) infinite}
@keyframes alert{50%{background:var(--en-lift)}}
body.playing #combo{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:clamp(38px,4.4vw,70px);color:var(--white);text-shadow:0 5px 0 rgba(11,7,16,.45);
  letter-spacing:-.02em}

/* --- Thai word card ------------------------------------------------------- */
body.playing #wordCard{background:var(--ink0);border:0;border-radius:2px;color:var(--white);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 9px 0 rgba(11,7,16,.3),0 22px 44px rgba(8,4,14,.4)}
body.playing #wordCard .wordHead{color:var(--soft);border-bottom:2px solid rgba(255,255,255,.12)}
body.playing #wordCard .wordHead span{color:var(--soft);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
body.playing #thaiWord{color:var(--white)}
body.playing #romanWord{color:var(--soft)}
body.playing #englishWord{color:var(--white)}
body.playing #wordCard .wordFoot{border-top:2px solid rgba(255,255,255,.12)}
body.playing #wordCard #wordCategory{color:var(--soft);font-family:'Barlow Condensed',sans-serif;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase}
body.playing #wordCard button{color:var(--white);border:0;background:rgba(255,255,255,.13);
  border-radius:2px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase}
body.playing #wordCard .speechToggle[aria-pressed="true"]{background:var(--en);color:var(--white)}

@media(max-width:700px){
  #hud{width:calc(100vw - 18px);gap:8px;padding:8px 10px}
  #hud .round strong{font-size:28px}
  #hud .round>span{font-size:9px}
  #hud .hLabel span{font-size:10px}
  #hud .hLabel b{font-size:16px}
  #hud .track{height:11px}
  body.playing header{padding:0}
  body.playing .wordmark{display:none}
  body.playing .utilities{position:absolute;top:calc(clamp(10px,2vh,24px) + 78px);right:10px}
  body.playing .controls button{height:44px}
  body.playing .controls button span{font-size:11px;padding:0 9px 0 8px}
  body.playing .controls button kbd{font-size:12px;padding:0 8px}
  body.playing .stamina{width:calc(100% - 150px)}
  body.playing .score strong{font-size:26px}
}
@media(prefers-reduced-motion:reduce){
  #hud .track .ghost{transition:none}
  #hud .round.urgent strong,body.playing #cue.warning{animation:none}
  #hud .track.struck i{animation:none}
}

/* --- refinements ---------------------------------------------------------- */
/* the card header holds three items in a narrow column; keep it on one line */
body.playing #wordCard .wordHead{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
body.playing #wordCard .wordHead span{font-size:11px;white-space:nowrap}
body.playing #wordCard .wordHead span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
body.playing #wordCard .wordHead .speechToggle{flex:0 0 auto;padding:4px 8px;font-size:10px}

/* denser control row */
body.playing .controls{gap:4px}
body.playing #hud .hLabel span{font-size:clamp(12px,1.05vw,16px)}

/* --- guard broken --------------------------------------------------------
   A block that could not be paid for now reads differently from simply not
   guarding: the cue calls it out and the stamina meter flashes, so the reason
   the guard failed is on screen rather than left to guess. */
body.playing #cue.broken{background:var(--en);color:var(--white);animation:none}
.stamina .track.broken{animation:guardFlash .12s steps(2) 5}
@keyframes guardFlash{0%{background:var(--en)}100%{background:rgba(255,255,255,.13)}}

/* ===========================================================================
   MODALS — result, paused, help, notebook.
   Same panel language as the HUD: near-black, white type, hard offset shadow.
   The h2 already carries the -4deg skew from the base sheet.
   ========================================================================= */
.modal{background:var(--ink0);border:0;border-radius:2px;color:var(--white);
  -webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 12px 0 rgba(11,7,16,.4),0 34px 80px rgba(8,4,14,.55)}
.modal .eyebrow{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.08em;color:var(--soft);text-transform:uppercase}
.modal .eyebrow i{background:var(--en)}
.modal h2{color:var(--white);letter-spacing:-.025em}
.modal p{color:var(--soft);font-size:14px;line-height:1.65;max-width:none}
.modal b,.modal strong{color:var(--white)}

.stats{border-top:2px solid rgba(255,255,255,.12);padding-top:22px;margin-top:34px}
.stats b{color:var(--white);font-weight:700;font-size:clamp(38px,4vw,52px);line-height:.9}
.stats span{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.06em;color:var(--soft);text-transform:uppercase}

.modal .primary{background:var(--en);color:var(--white);border-radius:2px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:.05em;
  text-transform:uppercase;padding:17px 22px;transform:skew(-4deg);
  box-shadow:0 7px 0 rgba(11,7,16,.45);transition:background .15s,transform .12s}
.modal .primary>*{display:inline-block;transform:skew(4deg)}
.modal .primary:hover{background:var(--en-lift);transform:skew(-4deg) translateY(-2px)}
.modal .primary:active{transform:skew(-4deg) translateY(4px);box-shadow:0 3px 0 rgba(11,7,16,.45)}

.resultLinks{margin-top:20px}
.resultLinks button,.modal .menufoot,.pronunciationNote,.modal small{color:var(--soft)}
.resultLinks button{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;background:none;border:0;transition:color .15s}
.resultLinks button:hover{color:var(--white)}
.modal kbd{border:0;background:rgba(255,255,255,.15);color:var(--white);border-radius:2px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700}
.modal .speechToggle{border:0;background:rgba(255,255,255,.13);color:var(--white);border-radius:2px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.modal .speechToggle[aria-pressed="true"]{background:var(--en);color:var(--white)}
#wordList{color:var(--white)}
#wordList div,#wordList li{border-color:rgba(255,255,255,.12)}

/* --- personal best --------------------------------------------------------- */
body.playing .score{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
#bestScore{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:clamp(11px,.95vw,14px);letter-spacing:.06em;color:var(--soft);
  text-transform:uppercase;font-variant-numeric:tabular-nums;transition:color .2s}
#bestScore.beating{color:var(--hp)}

.bestLine{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);
  margin:22px 0 0;padding:11px 14px;background:rgba(255,255,255,.07);border-radius:2px}
.bestLine.beat{background:var(--hp);color:#120d19}
.bestLine:empty{display:none}

/* --- the TH word count was unreadably small ------------------------------ */
body.playing #notebook{gap:7px}
body.playing #wordCount{display:inline-block;min-width:20px;padding:2px 5px;margin-left:6px;
  background:rgba(255,255,255,.16);border-radius:3px;font-size:13px;font-weight:700;
  font-variant-numeric:tabular-nums;line-height:1.15;color:var(--white)}

/* ===========================================================================
   MOBILE — the ring is the controller.

   Taps punch (left half / right half) and two fingers guard, so the jab, cross
   and block pads are duplicates of gestures the player already has. They go,
   leaving one large thumb-sized DODGE, which is the only move with no gesture.
   The keycaps go with them: A / D / SPACE mean nothing on a phone.
   ========================================================================= */
@media(max-width:700px){
  body.playing .controls button[data-action="left"],
  body.playing .controls button[data-action="right"],
  body.playing .controls button[data-action="block"]{display:none}
  body.playing .controls{order:2;width:auto;flex:0 0 auto}
  body.playing .controls button[data-action="dodge"]{height:52px;padding:0 4px;min-width:118px;
    justify-content:center}
  body.playing .controls button kbd{display:none}
  body.playing .controls button span{font-size:15px;letter-spacing:.06em;padding:0 18px}

  body.playing footer{padding:10px 12px 14px;gap:10px;align-items:flex-end}
  body.playing .stamina{order:1;width:auto;flex:1 1 auto;min-width:0}
  body.playing .score{order:3;flex:0 0 auto}
  body.playing .score strong{font-size:24px}
  body.playing #bestScore{font-size:10px}
  body.playing footer .music{position:absolute;left:10px;top:calc(-1 * (100vh - 168px));margin:0}
  body.playing .musicToggle{width:42px;height:42px;border-radius:13px}

  /* the word card competes with the ring on a small screen */
  body.playing #wordCard{left:8px;right:8px;width:auto;max-width:none;top:auto;
    bottom:calc(100% - 100vh + 96px);padding:11px 13px}
  body.playing #thaiWord{font-size:26px}
  body.playing #wordCard .wordFoot,body.playing #wordCard .speechNotice{display:none}

  body.playing #cue{top:auto;bottom:34vh;font-size:13px;padding:9px 16px;white-space:nowrap}
  body.playing #combo{left:auto;right:14px;top:36vh;font-size:34px}
}

/* a phone in landscape has almost no height to spare */
@media(max-width:900px) and (orientation:landscape){
  #hud{top:6px;padding:5px 9px}
  #hud .round strong{font-size:22px}
  #hud .track{height:8px}
  body.playing footer{padding:8px 12px 10px}
  body.playing #wordCard{display:none}
}

/* first-bout touch hint */
#touchHint{position:absolute;left:50%;top:26vh;transform:translateX(-50%) skewX(var(--skew));
  z-index:8;background:var(--ink0);color:var(--white);border-radius:2px;padding:10px 16px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;
  transition:opacity .35s;box-shadow:0 8px 0 rgba(11,7,16,.3)}
#touchHint.on{opacity:1}

/* --- dodge readiness -----------------------------------------------------
   Dodge has a recharge and a stamina price, so pressing it can legitimately do
   nothing. The pad now says so instead of just ignoring the press. */
body.playing .controls button[data-action="dodge"]{position:relative;transition:opacity .15s,
  transform .08s,box-shadow .08s,background .1s}
body.playing .controls button[data-action="dodge"].notReady{opacity:.4}
body.playing .controls button[data-action="dodge"].notReady span{color:rgba(255,255,255,.6)}

/* --- paused modal --------------------------------------------------------- */
.pauseSettings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:30px 0 4px}
.pauseSettings>div{display:contents}
.pauseSettings .speechToggle{height:52px;width:100%;margin:0;padding:0 14px;font-size:14px;
  letter-spacing:.05em;white-space:nowrap;display:flex;align-items:center;justify-content:center;
  line-height:1}
.pauseSettings .speechNotice,.pauseSettings small{display:none}
.modal .primary.centred{justify-content:center;text-align:center}

/* --- keep the command bar clear of the corner furniture ------------------
   The bar is centred and the wordmark and utilities sit either side of it, so
   on narrower desktops it was growing underneath them. Reserve their width. */
#hud{width:min(1080px,calc(100vw - 470px));min-width:min(560px,calc(100vw - 28px))}

/* --- word card: drop the labels that earn nothing ------------------------
   The header truncated to "LEARN WIT…" and the category told the player
   nothing they act on. Both go; the counter, the voice toggle and a legible
   REVIEW WORDS stay. */
body.playing #wordCard .wordHead span:first-child,
body.playing #wordCategory{display:none}
body.playing #wordCard .wordHead{justify-content:flex-end;gap:10px}
body.playing #wordCard #wordIndex{margin-right:auto;font-size:13px}
body.playing #reviewWords{font-family:'Barlow Condensed',sans-serif;font-weight:700;
  font-size:14px;letter-spacing:.05em;text-transform:uppercase;padding:8px 12px;
  background:rgba(255,255,255,.13);border-radius:2px;color:var(--white)}
body.playing #reviewWords:hover{background:rgba(255,255,255,.22)}
body.playing #wordCard .wordFoot{justify-content:flex-end}

/* ===========================================================================
   MOBILE, second pass — from a real device.

   Everything stacks down the top: the bar, then the utilities and the music
   toggle on one row tucked under it, then the Thai word. The bottom carries
   nothing but stamina and score. DODGE is gone entirely -- a swipe down does
   it now, so the last pad can go and the ring is the whole controller.
   ========================================================================= */
@media(max-width:700px){
  body.playing .utilities{position:absolute;top:76px;right:10px;gap:6px}
  body.playing .utilities button{height:38px;min-width:38px;padding:0 11px;font-size:14px}
  /* the toggle lives in the footer, which is pinned to the bottom, so it needs
     taking out of that flow to sit at the top */
  body.playing footer .music{position:fixed;top:76px;left:10px;margin:0;z-index:7}
  body.playing .musicToggle{width:38px;height:38px;border-radius:12px}

  body.playing #wordCard{top:126px;left:10px;right:10px;bottom:auto;width:auto;
    max-width:none;padding:11px 13px}
  body.playing #thaiWord{font-size:25px}
  body.playing #wordCard .wordFoot{display:none}

  body.playing .controls{display:none}          /* swipe down replaces DODGE */
  body.playing footer{padding:12px 14px 18px;gap:14px;align-items:flex-end;
    background:linear-gradient(transparent,rgba(9,5,14,.6))}
  body.playing .stamina{width:auto;flex:1 1 auto;min-width:0}
  body.playing .score{flex:0 0 auto}
  body.playing .score strong{font-size:26px}

  #touchHint{top:auto;bottom:22vh;font-size:11px;padding:9px 13px;
    white-space:normal;max-width:78vw;text-align:center;line-height:1.5}
}

/* AUTO PRONUNCIATION: ON will not fit half of a phone-width modal, so the pair
   stacks there rather than overflowing the card */
@media(max-width:700px){
  .pauseSettings{grid-template-columns:1fr;gap:8px}
  .pauseSettings .speechToggle{height:46px;font-size:13px}
}

/* ===========================================================================
   MOBILE, third pass — the word card was the tallest thing on screen.

   It is trimmed down hard, and the music toggle leaves the top row for the
   bottom-right corner beside the score, which frees the band under the bar.
   ========================================================================= */
@media(max-width:700px){
  /* music rejoins the footer, last in the row */
  body.playing footer .music{position:static;order:3;margin:0}
  body.playing .musicToggle{width:36px;height:36px;border-radius:11px}
  body.playing .stamina{order:1}
  body.playing .score{order:2}
  body.playing footer{gap:10px}

  /* utilities tuck closer to the bar now nothing shares their row */
  body.playing .utilities{top:74px}
  body.playing .utilities button{height:34px;min-width:34px;padding:0 9px;font-size:13px}

  /* a much shorter card */
  body.playing #wordCard{top:116px;padding:7px 11px}
  body.playing #wordCard .wordHead{margin-bottom:5px;padding-bottom:5px;border-bottom-width:1px}
  body.playing #wordCard .wordHead span{font-size:11px}
  body.playing #wordCard .speechToggle{height:24px;padding:0 8px;font-size:10px}
  body.playing #thaiWord{font-size:20px;line-height:1.2;margin:0}
  body.playing #romanWord{font-size:11px;margin:1px 0 0}
  body.playing #englishWord{font-size:14px}
}

/* REMATCH centres on a phone the way RESUME does; the corner arrow is a
   desktop affordance and only crowds the button at this width */
@media(max-width:700px){
  #restart span{display:none}
  #restart{justify-content:center}
}