/* =========================================================
   ESCAPE FROM CLOWN ISLAND — the cabinet it lives in
   Rides on style.css for the fonts, the colours and the nav.
   ========================================================= */

html, body.isl-body { height: 100%; }

body.isl-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ink);
}

/* the nav stays, but it gives the game the rest of the screen.
   style.css parks it at top:47px to clear the ticker — there is no
   ticker here, so put it back at zero or it sits on the HUD. */
body.isl-body .nav { position: relative; top: 0; z-index: 40; flex: 0 0 auto; }

/* =========================================================
   THE SHELL
   ========================================================= */
.isl {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-top: 5px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, #0b2a4a 0 40px, #0d3053 40px 80px);
}

#islCanvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}

/* =========================================================
   HUD — the camera this was recorded on
   ---------------------------------------------------------
   Corner readouts in a monospace face, hairline rules, and a
   viewfinder bracket at each corner. Nothing is boxed: the
   game is dark and the overlay should sit on it like burnt-in
   timecode, not like a dashboard bolted over the top.
   ========================================================= */
.isl-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  font-family: "Consolas", "SF Mono", "Menlo", "Courier New", monospace;
  font-variant-numeric: tabular-nums;
  color: rgba(244, 240, 228, .92);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 0 12px rgba(0, 0, 0, .7);
  letter-spacing: .04em;
}

/* viewfinder brackets, all four corners */
.hud-frame { position: absolute; inset: 14px; }
.hud-frame::before,
.hud-frame::after,
.isl-hud::before,
.isl-hud::after {
  content: "";
  position: absolute;
  width: 26px; height: 26px;
  border: 2px solid rgba(244, 240, 228, .34);
  pointer-events: none;
}
.hud-frame::before { left: 0;  top: 0;    border-right: 0; border-bottom: 0; }
.hud-frame::after  { right: 0; bottom: 0; border-left: 0;  border-top: 0; }
.isl-hud::before   { right: 14px; top: 14px;    border-left: 0;  border-bottom: 0; }
.isl-hud::after    { left: 14px;  bottom: 14px; border-right: 0; border-top: 0; }

.hud-corner { position: absolute; display: flex; flex-direction: column; gap: 3px; }
.hud-tl { left: 22px; top: 20px; }
.hud-tr { right: 22px; top: 20px; align-items: flex-end; }
.hud-bl { left: 22px; bottom: 20px; }
.hud-br { right: 22px; bottom: 20px; align-items: flex-end; gap: 6px; }

/* ---------- the tape ---------- */
.hud-rec {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  color: #ff5a4d;
  letter-spacing: .18em;
}
.hud-rec i {
  width: 9px; height: 9px; border-radius: 50%;
  background: #ff2f22;
  box-shadow: 0 0 8px 2px rgba(255, 60, 40, .6);
  animation: hudRec 1.4s steps(1) infinite;
}
@keyframes hudRec { 0%, 55% { opacity: 1 } 56%, 100% { opacity: .15 } }

.hud-tc { font-size: 27px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.hud-line { display: flex; align-items: baseline; gap: 8px; font-size: 11px; opacity: .82; }
.hud-line--r { justify-content: flex-end; }
.hud-line b { font-size: 13px; opacity: 1; }
.hud-lap { color: var(--lime); font-size: 12px; }
.hud-cam { font-size: 10px; opacity: .55; letter-spacing: .12em; }

.hud-splits { display: flex; gap: 6px; margin-top: 2px; }
.isl-split { font-size: 10px; opacity: .55; }
.isl-split--gold { color: var(--gold); opacity: .95; }

/* ---------- vitals ---------- */
.hud-vitals { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hud-lab { font-size: 10px; letter-spacing: .16em; opacity: .6; }
.hud-num { font-size: 13px; min-width: 40px; }

.hud-meter {
  position: relative;
  display: block;
  width: 168px; height: 7px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(244, 240, 228, .35);
}
.hud-meter i {
  display: block; height: 100%; width: 100%;
  background: var(--cream);
  transition: width .12s linear;
}
.hud-meter--hp i { background: linear-gradient(90deg, #7cff4f, #d8ff4f); }
.hud-low .hud-meter--hp i { background: linear-gradient(90deg, #ff3b30, #ff7a5a); }
.hud-low .hud-num { color: #ff6a5a; animation: hudPulse .5s infinite alternate; }
@keyframes hudPulse { from { opacity: .55 } to { opacity: 1 } }

/* ---------- objectives ---------- */
.hud-obj { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.hud-obj span { opacity: .82; }
.hud-obj b { font-size: 14px; opacity: 1; }
.hud-mult { font-style: normal; font-size: 11px; opacity: .5; }
.hud-mult--hot {
  opacity: 1;
  color: var(--ink);
  background: var(--gold);
  padding: 1px 5px;
  border-radius: 3px;
  animation: hudPop .4s infinite alternate;
}
@keyframes hudPop { from { transform: scale(1) } to { transform: scale(1.12) } }

/* ---------- gauges ---------- */
.hud-gauge { display: flex; align-items: center; gap: 8px; }
.hud-gauge span:first-child { font-size: 10px; letter-spacing: .14em; opacity: .6; }
.hud-gauge .hud-meter { width: 96px; height: 6px; }
.hud-gauge--honk .hud-meter i { background: var(--pink); }
.hud-gauge--honk.hud-ready .hud-meter i {
  background: var(--gold);
  animation: hudPulse .5s infinite alternate;
}
.hud-gauge--tide .hud-meter i { background: linear-gradient(90deg, #22d3ee, #1c5fb4); }
.hud-gauge--boost { opacity: .38; transition: opacity .18s; }
.hud-gauge--boost.hud-on { opacity: 1; }
.hud-gauge--boost .hud-meter i {
  background: linear-gradient(90deg, #ffffff, #cfe6ff);
  transition: width .06s linear;
}
.hud-gauge--boost.hud-on .hud-meter { border-color: rgba(255,255,255,.95); }

@media (max-width: 760px) {
  .hud-corner { gap: 2px }
  .hud-tl, .hud-bl { left: 14px }
  .hud-tr, .hud-br { right: 14px }
  .hud-tl, .hud-tr { top: 12px }
  .hud-bl, .hud-br { bottom: 12px }
  .hud-tc { font-size: 20px }
  .hud-meter { width: 112px }
  .hud-gauge .hud-meter { width: 66px }
  .hud-splits { display: none }
  .hud-cam { display: none }
  .hud-frame { inset: 8px }
  .isl-hud::before { right: 8px; top: 8px }
  .isl-hud::after { left: 8px; bottom: 8px }
}

/* =========================================================
   DIFFICULTY PICKER
   ========================================================= */
.isl-diff {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin: 14px 0 8px;
}
.isl-diff button {
  font-family: var(--font-big);
  font-size: 11px;
  line-height: 1.15;
  padding: 9px 5px;
  min-height: 58px;
  border: 4px solid var(--ink);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.isl-diff button:hover { transform: translate(-1px, -1px); }
.isl-diff button em {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 9px;
  letter-spacing: .04em;
  opacity: .6;
}
.isl-diff button[aria-checked="true"] {
  background: var(--gold);
  box-shadow: 3px 3px 0 var(--ink);
}
.isl-diff button[aria-checked="true"] em { opacity: .85; }
.isl-diff button[data-d="lastonein"][aria-checked="true"] { background: var(--red); color: #fff; }
.isl-diff button[data-d="lastonein"][aria-checked="true"] em { color: #ffd7d2; }
.isl-diff-blurb { margin: 0 0 4px; min-height: 34px; font-size: 13px; }

@media (max-width: 560px) {
  .isl-diff { grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   SOUND SETTINGS
   ---------------------------------------------------------
   One panel, moved between the title card and the pause
   screen. It used to live next to the HUD styles and got
   deleted with them when the HUD was rebuilt, which left the
   controls rendering as raw browser defaults.
   ========================================================= */
.isl-slot { display: block; }

.isl-settings {
  margin: 14px auto 2px;
  max-width: 420px;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
}
.isl-set-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.isl-set-k {
  font-family: var(--font-big);
  font-size: 12px;
  width: 66px;
  flex: 0 0 auto;
}
.isl-set-toggle {
  font-family: var(--font-big);
  font-size: 11px;
  width: 48px;
  flex: 0 0 auto;
  padding: 6px 0;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: var(--lime);
  color: var(--ink);
  cursor: pointer;
}
.isl-set-toggle:hover { transform: translate(-1px, -1px); }
.isl-set-toggle:active { transform: translate(2px, 2px); }
.isl-set-toggle[aria-pressed="false"] { background: #b9b3a8; color: #4a453d; }
.isl-set-v {
  font-family: "Consolas", "SF Mono", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  width: 28px;
  flex: 0 0 auto;
  text-align: right;
}
.isl-slider {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  margin: 0;
  border: 3px solid var(--ink);
  border-radius: 7px;
  background: var(--cream);
  cursor: pointer;
}
.isl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--ink);
}
.isl-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--ink);
}
.isl-slider:disabled { opacity: .4; cursor: default; }
.isl-set-note { margin: 4px 0 0; font-size: 11px; line-height: 1.45; }

@media (max-width: 560px) {
  .isl-set-k { width: 54px; font-size: 11px; }
  .isl-set-toggle { width: 42px; }
  .isl-settings { padding: 10px; }
}

/* =========================================================
   THE BOARD
   ---------------------------------------------------------
   Top three runs on the difficulty being played, sitting
   above the clock so a speedrunner can see the target
   without leaving the game. Local to the browser.
   ========================================================= */
.hud-board {
  list-style: none;
  margin: 2px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 10px;
  opacity: .62;
}
.hud-board li { display: flex; gap: 7px; align-items: baseline; }
.hud-board .hud-board__n { width: 10px; opacity: .55; }
.hud-board .hud-board__t { color: var(--lime); }
.hud-board .hud-board__s { opacity: .7; }
.hud-board li.is-you { opacity: 1; color: var(--gold); }
.hud-board li.is-you .hud-board__t { color: var(--gold); }

.hud-diff {
  font-size: 10px;
  letter-spacing: .18em;
  opacity: .75;
  color: var(--gold);
}

/* the picker again, on the end cards */
.isl-diff-lab {
  margin: 14px 0 0;
  font-family: var(--font-big);
  font-size: 11px;
  letter-spacing: .1em;
  opacity: .65;
}
.isl-diff--end { margin-top: 6px; }
.isl-diff--end button { min-height: 46px; font-size: 10px; padding: 7px 4px; }
.isl-diff--end button em { display: none; }

/* =========================================================
   THE EVIDENCE SHOT
   ---------------------------------------------------------
   The still on the game-over and win cards. It is meant to
   read as a frame pulled off a security tape: a hard border,
   REC burnt into the top left, a timecode bottom right, and
   a caption underneath in the same monospace as the HUD.

   These rules went missing when the HUD was rebuilt, which
   left the REC dot and the timestamp flowing as loose text
   under the video.
   ========================================================= */
.isl-shot {
  position: relative;
  display: block;
  margin: 14px auto;
  max-width: 340px;
  padding: 0;
  border: 4px solid var(--ink);
  border-radius: 8px;
  background: #0a0908;
  overflow: hidden;
  line-height: 0;
}
.isl-shot img,
.isl-shot video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: cover;
  filter: saturate(.72) contrast(1.12) brightness(.92);
}

/* REC, burnt in */
.isl-shot__rec {
  position: absolute;
  top: 8px;
  left: 9px;
  z-index: 2;
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1;
  color: #ff5a4d;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
  animation: shotRec 1.4s steps(1) infinite;
}
@keyframes shotRec { 0%, 55% { opacity: 1 } 56%, 100% { opacity: .2 } }

/* timecode, bottom right */
.isl-shot__ts {
  position: absolute;
  right: 9px;
  top: 8px;              /* opposite REC — the bottom belongs to the caption */
  z-index: 2;
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  font-size: 10px;
  letter-spacing: .06em;
  line-height: 1;
  color: rgba(244, 240, 228, .9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .95);
}

/* scanline wash so it does not read as a clean video embed */
.isl-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, .16) 2px 3px);
}

.isl-shot figcaption {
  position: relative;
  z-index: 2;
  padding: 7px 9px 8px;
  background: var(--ink);
  color: var(--cream);
  font-family: "Consolas", "SF Mono", "Menlo", monospace;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

@media (max-width: 560px) {
  .isl-shot { max-width: 100%; }
  .isl-shot img,
  .isl-shot video { max-height: 168px; }
  .isl-shot figcaption { font-size: 10px; }
}

/* =========================================================
   SCREENS
   ========================================================= */
.isl-screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;      /* not center: a card taller than the screen
                                   gets its top clipped and cannot be scrolled
                                   back to. margin:auto on the card centres it
                                   when it fits and lets it scroll when it
                                   does not. */
  justify-content: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 40%, rgba(13, 11, 15, .72), rgba(13, 11, 15, .93));
  overflow: auto;
  overscroll-behavior: contain;
}

.isl-card {
  background: var(--cream);
  border: 6px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  padding: 26px 30px;
  max-width: 560px;
  width: 100%;
  text-align: center;
  transform: rotate(-.6deg);
  margin: auto;
}
.isl-card--wide { max-width: 680px; }

.isl-card h1 {
  font-family: var(--font-shade);
  font-size: clamp(26px, 5.4vw, 50px);
  color: var(--red);
  line-height: .95;
  margin-bottom: 6px;
}
.isl-card h2 {
  font-family: var(--font-big);
  font-size: clamp(19px, 3.4vw, 30px);
  color: var(--ink);
  margin-bottom: 6px;
}
.isl-card p { font-family: var(--font-body); font-weight: 700; margin-bottom: 14px; }
.isl-card .isl-sub { color: #6b5f4f; font-style: italic; }

.isl-rows { margin: 14px 0 18px; }
.isl-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-big);
  font-size: 14px;
  padding: 7px 10px;
  border-bottom: 3px dashed rgba(13, 11, 15, .2);
}
.isl-row b { color: var(--red); }
.isl-row:last-child { border-bottom: 0; background: var(--yellow); border-radius: 8px; }

.isl-keys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
  text-align: left;
}
.isl-key {
  font-family: var(--font-body);
  font-size: 13px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.isl-key b {
  flex: 0 0 auto;
  font-family: var(--font-big);
  background: var(--ink);
  color: var(--cream);
  border-radius: 5px;
  padding: 2px 6px;
  margin-right: 6px;
  font-size: 11px;
}

.isl-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.isl-cast div {
  font-family: var(--font-body);
  font-size: 12px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.isl-cast b { font-family: var(--font-big); display: block; font-size: 13px; margin-bottom: 2px; }
.isl-cast--mime b { color: #444; }
.isl-cast--jug b { color: var(--orange); }
.isl-cast--ring b { color: var(--red); }
.isl-cast--shark b { color: #4a6b80; }

.isl-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.isl-best {
  font-family: var(--font-big);
  font-size: 13px;
  color: var(--ink);
  background: var(--gold);
  border: 3px solid var(--ink);
  border-radius: 8px;
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 12px;
}

/* =========================================================
   TOUCH CONTROLS
   ========================================================= */
.isl-touch {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 15;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px 18px 22px;
  pointer-events: none;
}

.isl-stick {
  pointer-events: auto;
  flex: 0 0 auto;          /* a flex row was squashing it into an oval */
  width: 128px;
  height: 128px;
  border-radius: 50%;
  border: 4px solid rgba(253, 246, 227, .7);
  background: rgba(13, 11, 15, .35);
  position: relative;
  touch-action: none;
}
.isl-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: var(--red);
  border: 4px solid var(--cream);
}

.isl-tbtns { pointer-events: auto; display: flex; gap: 10px; flex: 0 0 auto; }
.isl-tbtn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: var(--gold);
  font-family: var(--font-big);
  font-size: 12px;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  touch-action: none;
}
.isl-tbtn.on { background: var(--lime); transform: translate(3px, 3px); box-shadow: none; }
#btnHonk { background: var(--pink); color: #fff; }



@media (max-width: 760px) {
  .isl-card { padding: 20px 18px; }
}

/* the game is a bad idea on a 400px-tall laptop; say so rather than break */
.isl-rotate { display: none; }
@media (max-height: 420px) and (orientation: portrait) {
  .isl-rotate {
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 30;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-big);
    text-align: center;
    padding: 20px;
  }
}

/* =========================================================
   SHORT SCREENS
   ---------------------------------------------------------
   A phone in portrait is about 520 usable pixels tall once
   the site nav has taken its cut, and the title card was
   700. START ended up below the fold, so the first thing a
   player had to do was scroll — on a screen that gives no
   hint there is anything to scroll to.

   So on short viewports the card loses the things it can
   afford to lose: the long intro paragraph (the difficulty
   blurb underneath still explains the game), the per-option
   taglines, and most of the padding. The nav goes to one
   row and gives the canvas its height back.
   ========================================================= */
@media (max-height: 760px) {
  .nav { padding: 6px 10px; gap: 8px; flex-wrap: nowrap; }
  .nav__brand span { font-size: 15px; }
  .nav__head { width: 26px; }
  .nav__links { gap: 8px; flex-wrap: nowrap; }
  .nav__links a { font-size: 10px; padding: 5px 7px; }

  .isl-card { padding: 15px 17px; }
  .isl-card h1 { font-size: clamp(21px, 5vw, 34px); }
  .isl-card h2 { font-size: clamp(17px, 4vw, 24px); }
  .isl-sub { font-size: 12px; }

  /* the long flavour paragraph — the only unclassed <p> on the card */
  .isl-card > p:not([class]) { display: none; }

  .isl-best { margin: 7px 0; padding: 6px 10px; font-size: 12px; }
  .isl-diff { gap: 5px; margin: 9px 0 5px; }
  .isl-diff button { min-height: 42px; font-size: 10px; padding: 6px 4px; }
  .isl-diff button em { display: none; }
  .isl-diff-blurb { min-height: 0; margin-bottom: 2px; font-size: 12px; }
  .isl-btns { gap: 8px; }

  .isl-shot { margin: 9px auto; }
  .isl-shot img, .isl-shot video { max-height: 116px; }
  .isl-rows { font-size: 12px; }
}

/* landscape phones are shorter still */
@media (max-height: 460px) {
  .isl-card { padding: 12px 14px; }
  .isl-card h1 { font-size: 21px; }
  .isl-sub { display: none; }
  .isl-shot img, .isl-shot video { max-height: 84px; }
  .isl-diff button { min-height: 36px; }
}

/* =========================================================
   HUD vs THUMBS
   ---------------------------------------------------------
   The stick and the buttons occupy the bottom ~166px of the
   screen. The vitals and the gauges live in the same place,
   so on a phone the score sat underneath the joystick. When
   touch is in use the bottom corners move up above the
   control strip. <body> gets the flag the moment a real
   touch happens, so a mouse never pays for it.
   ========================================================= */
body.touch .hud-bl,
body.touch .hud-br { bottom: 176px; }

@media (max-height: 460px) {
  body.touch .hud-bl,
  body.touch .hud-br { bottom: 132px; }
  /* A landscape phone is 390px tall and the thumbstick takes the bottom third
     of it. The board and the splits are speedrunner extras and there is simply
     no room for them here — without this the top-left stack runs into the
     vitals by about four pixels once the touch controls lift them. */
  body.touch .hud-board,
  body.touch .hud-splits { display: none; }
  body.touch .hud-tc { font-size: 18px; }
  .isl-stick { width: 104px; height: 104px; }
  .isl-tbtn { width: 62px; height: 62px; font-size: 11px; }
  .isl-touch { padding: 10px 14px 14px; }
}

/* the game-page nav must never collide with itself: the brand shrinks
   first, then loses its wordmark, before anything overlaps */
.nav__brand { min-width: 0; flex: 0 1 auto; }
.nav__links { min-width: 0; }
@media (max-width: 560px) {
  .nav__brand span { display: none; }
  .nav__links a { font-size: 9.5px; letter-spacing: .02em; }
}

/* Narrow phones: stick 128 + three 76px buttons + gaps came to 412px of
   controls on a 375px screen, which pushed HONK off the right edge. */
@media (max-width: 440px) {
  .isl-touch { padding: 12px 12px 18px; }
  .isl-stick { width: 108px; height: 108px; }
  .isl-knob { width: 46px; height: 46px; }
  .isl-tbtns { gap: 7px; }
  .isl-tbtn { width: 62px; height: 62px; font-size: 10.5px; }
  body.touch .hud-bl,
  body.touch .hud-br { bottom: 150px; }
}


/* =========================================================
   SHARE
   ---------------------------------------------------------
   The X button on the end cards, and the line that explains
   the attachment step — the web intent cannot carry a file,
   so on desktop the picture is saved and the post is opened
   with the words already in it.
   ========================================================= */
.btn--x {
  background: #0f1419;
  color: #fff;
  border-color: var(--ink);
}
.btn--x:hover { background: #272c30; }



/* Deliberately modest. At full card width the preview is 315px tall and it
   pushes RUN IT BACK off the bottom of a laptop screen — the picture is a
   receipt, not the point of the screen. */
.isl-sharewrap { margin: 14px auto 4px; max-width: 340px; }

.isl-sharecard {
  margin: 0;
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: var(--shadow);
  background: #0b0e14;
  overflow: hidden;
  line-height: 0;
}
.isl-sharecard img { width: 100%; height: auto; display: block; }

.isl-sharenote {
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--lime);
  border: 3px solid var(--lime);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
}

/* a brief word over the game, for a setting that changed quietly */
.isl-hudtoast {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translateX(-50%);
  z-index: 30;
  margin: 0;
  padding: 11px 20px;
  background: rgba(13, 11, 15, .88);
  color: var(--cream);
  border: 3px solid var(--gold);
  border-radius: 9px;
  font-family: var(--font-big);
  font-size: 15px;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow);
}
.isl-hudtoast.is-in { animation: hudToastIn 1.9s ease-out forwards; }
@keyframes hudToastIn {
  0%   { opacity: 0; transform: translate(-50%, 10px); }
  12%  { opacity: 1; transform: translate(-50%, 0); }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}