.icefishin-page {
  --ice-steel: var(--muted, #929bb3);
  --ice-frost: var(--text, #edf2ff);
  --ice-water: var(--purple, #8b5cf6);
  --ice-success: var(--success, #39dfa0);
  --ice-panel: rgba(17, 22, 36, .88);
  color-scheme: dark;
}
.icefishin-layout { align-items:start; }
.ice-brand img { width:54px; height:54px; object-fit:contain; border-radius:8px; filter:saturate(.84) contrast(1.05); }
.icefishin-stage {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(180deg,#17242d 0%,#536872 43%,#cfd8da 44%,#e7ecec 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 24px 70px rgba(0,0,0,.32);
}
.icefishin-stage::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:7;
  pointer-events:none;
  opacity:.18;
  mix-blend-mode:soft-light;
  background:
    radial-gradient(circle at 16% 12%,rgba(255,255,255,.18) 0 1px,transparent 2px),
    radial-gradient(circle at 68% 34%,rgba(255,255,255,.12) 0 1px,transparent 2px),
    radial-gradient(circle at 42% 72%,rgba(23,39,48,.16) 0 1px,transparent 2px);
  background-size:17px 19px,23px 27px,31px 29px;
}
.icefishin-stage::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 52%,rgba(3,8,11,.20) 100%);
}
#game-canvas {
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  touch-action:none;
  filter:saturate(.88) contrast(1.05) brightness(.98);
}
.ice-hud { z-index:10; pointer-events:none; }
.ice-hud .hud-cluster { flex-wrap:wrap; }
.ice-hud .hud-chip {
  border-color:rgba(218,231,235,.16);
  background:rgba(8,14,18,.72);
  box-shadow:0 5px 18px rgba(0,0,0,.16);
  backdrop-filter:blur(8px);
}
.ice-hud .hud-chip strong { white-space:nowrap; color:#f0f4f5; }

.ice-start-card { max-width:760px; background:rgba(8,14,18,.94); border-color:rgba(219,230,233,.16); }
.ice-start-card .overlay-shot { display:block; width:min(520px,100%); }
.ice-logo {
  display:block;
  width:min(360px,72vw);
  max-height:170px;
  object-fit:contain;
  margin:0 auto 8px;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.42)) saturate(.85) contrast(1.05);
}

.ice-controls {
  position:absolute;
  left:50%;
  bottom:14px;
  z-index:11;
  transform:translateX(-50%);
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:center;
  width:min(430px,calc(100% - 20px));
  pointer-events:none;
}
.ice-dpad {
  display:grid;
  grid-template-columns:50px 50px 50px;
  grid-template-rows:46px 46px 46px;
  grid-template-areas:
    ". forward ."
    "left . right"
    ". backward .";
  gap:4px;
  flex:0 0 auto;
  pointer-events:auto;
}
.ice-move-forward { grid-area:forward; }
.ice-move-left { grid-area:left; }
.ice-move-right { grid-area:right; }
.ice-move-backward { grid-area:backward; }
.ice-controls button {
  min-height:46px;
  border:1px solid rgba(214,225,229,.30);
  border-radius:10px;
  background:linear-gradient(180deg,rgba(28,38,43,.94),rgba(12,20,24,.94));
  color:#eef2f3;
  font:800 .94rem/1 system-ui,sans-serif;
  letter-spacing:.025em;
  cursor:pointer;
  box-shadow:0 9px 22px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
  touch-action:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.ice-controls button:hover,.ice-controls button:focus-visible,.ice-controls button.active {
  outline:none;
  border-color:rgba(236,243,245,.52);
  background:linear-gradient(180deg,rgba(45,59,66,.98),rgba(18,29,34,.98));
}
.ice-controls .ice-action {
  min-width:160px;
  min-height:66px;
  margin-bottom:39px;
  padding:0 18px;
  pointer-events:auto;
  border-radius:12px;
}
.ice-controls .ice-action[data-biting="true"] {
  border-color:rgba(155,199,167,.78);
  background:linear-gradient(180deg,rgba(41,68,52,.97),rgba(17,38,27,.97));
  box-shadow:0 8px 20px rgba(0,0,0,.3),inset 0 0 0 1px rgba(177,214,187,.15);
}

.ice-career-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.catch-layout { display:grid; grid-template-columns:118px 1fr; gap:14px; align-items:center; }
.catch-layout h2 { margin:.1rem 0 .35rem; }
.catch-layout p { margin:0 0 .35rem; color:#aeb8bd; }
.sheet-sprite {
  width:118px;
  height:86px;
  border-radius:8px;
  background-repeat:no-repeat;
  border:1px solid rgba(217,228,232,.14);
  background-color:#111d23;
  box-shadow:inset 0 0 28px rgba(0,0,0,.32);
}
.fish-sprite {
  background-image:url('../assets/IceFishin/Infin8-IceFishin-Fish.png');
  background-size:400% 300%;
  background-position:calc(var(--sprite-col,0) * -100%) calc(var(--sprite-row,0) * -100%);
  filter:saturate(.88) contrast(1.06);
}
.asset-preview-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.asset-preview-row img {
  width:100%;
  height:140px;
  object-fit:cover;
  object-position:center;
  border-radius:8px;
  border:1px solid rgba(214,225,229,.14);
  background:#111b20;
  filter:saturate(.82) contrast(1.06);
}

.muted-copy,.submit-status,.leaderboard-status { color:#aeb8bd; }
.inventory-list,.upgrade-list { display:grid; gap:8px; margin:12px 0; }
.inventory-row,.upgrade-row {
  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  width:100%;
  padding:11px 12px;
  border:1px solid rgba(212,223,227,.12);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(23,34,40,.78),rgba(13,22,27,.78));
  color:#edf1f2;
  text-align:left;
}
.inventory-row span,.upgrade-row small { display:block; margin-top:3px; color:#9faab0; font-size:.78rem; font-weight:500; }
.inventory-row b,.upgrade-row b { white-space:nowrap; color:#d6e1e4; }
.inventory-row.rarity-rare,.inventory-row.rarity-epic { border-color:rgba(166,183,190,.24); }
.inventory-row.rarity-legendary { border-color:rgba(190,170,119,.44); background:linear-gradient(180deg,rgba(52,47,34,.80),rgba(24,24,19,.80)); }
.inventory-row.rarity-legendary b { color:#d8c28d; }
.upgrade-row { cursor:pointer; font:inherit; }
.upgrade-row:hover:not(:disabled),.upgrade-row:focus-visible:not(:disabled) { border-color:rgba(218,230,233,.32); background:rgba(31,45,52,.86); outline:none; }
.upgrade-row:disabled { opacity:.58; cursor:default; }
.upgrade-row em { color:#b9c9cf; font-style:normal; font-size:.72rem; }
.wide-button { width:100%; justify-content:center; }

.ice-score-actions { display:grid; gap:10px; margin-top:16px; }
.ice-leaderboard-wrap { overflow-x:auto; }
.ice-leaderboard-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.ice-leaderboard-table th,.ice-leaderboard-table td { padding:9px 7px; border-bottom:1px solid rgba(216,228,232,.10); text-align:left; }
.ice-leaderboard-table th:nth-child(1),.ice-leaderboard-table td:nth-child(1),.ice-leaderboard-table th:nth-child(3),.ice-leaderboard-table td:nth-child(3),.ice-leaderboard-table th:nth-child(4),.ice-leaderboard-table td:nth-child(4) { text-align:right; }

@media (max-width:980px) { .ice-career-grid { grid-template-columns:1fr; } }
@media (max-width:720px) {
  .ice-brand img { width:46px; height:46px; }
  .ice-controls { bottom:8px; gap:8px; width:calc(100% - 12px); justify-content:space-between; }
  .ice-dpad { grid-template-columns:42px 42px 42px; grid-template-rows:40px 40px 40px; gap:3px; }
  .ice-controls button { min-height:40px; border-radius:9px; }
  .ice-controls .ice-action { min-width:128px; min-height:58px; margin-bottom:33px; padding:0 12px; font-size:.82rem; }
  .ice-hud .hud-chip:nth-child(n+6) { display:none; }
  .catch-layout { grid-template-columns:96px 1fr; }
  .sheet-sprite { width:96px; height:74px; }
  .asset-preview-row img { height:110px; }
}
@media (max-width:460px) {
  .ice-dpad { grid-template-columns:38px 38px 38px; grid-template-rows:36px 36px 36px; }
  .ice-controls .ice-action { min-width:110px; min-height:52px; margin-bottom:29px; padding:0 8px; }
}

/* Catch mini-game: "Fight at the hole" */
.ice-fight {
  position:absolute;
  top:132px;
  right:14px;
  z-index:12;
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:14px;
  width:min(330px,calc(100% - 28px));
  padding:14px 16px;
  border:1px solid rgba(219,230,233,.18);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(10,18,24,.90),rgba(6,12,16,.90));
  box-shadow:0 18px 40px rgba(0,0,0,.38);
  backdrop-filter:blur(10px);
  color:#eef3f4;
  pointer-events:none;
}
.ice-fight[hidden] { display:none; }
.ice-fight h2 { margin:.15rem 0 .6rem; font-size:1.05rem; }
.ice-fight p { margin:.55rem 0 0; font-size:.86rem; font-weight:700; color:#cfdadd; }
.ice-fight-depth { display:grid; grid-template-rows:auto 1fr auto; gap:6px; justify-items:center; font-size:.68rem; color:#9fb0b6; }
.ice-fight-depth strong { color:#e7eef0; font-size:.72rem; white-space:nowrap; }
.ice-fight-shaft {
  position:relative;
  width:18px;
  min-height:120px;
  border-radius:9px;
  border:1px solid rgba(214,226,230,.18);
  background:linear-gradient(180deg,#3a5866 0%,#162b36 45%,#070f14 100%);
  overflow:hidden;
}
.ice-fight-fish {
  position:absolute;
  left:50%;
  bottom:0;
  width:10px;
  height:22px;
  transform:translate(-50%,0);
  border-radius:50% 50% 45% 45%;
  background:linear-gradient(180deg,#cdb66c,#6d6230);
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
  transition:bottom .08s linear;
}
.ice-fight-meter {
  position:relative;
  height:18px;
  border-radius:9px;
  border:1px solid rgba(214,226,230,.2);
  background:linear-gradient(90deg,#1c2a31 0%,#243841 70%,#4a2620 90%,#6b2418 100%);
  overflow:hidden;
}
.ice-fight-zone { position:absolute; top:0; bottom:0; background:rgba(155,199,167,.55); box-shadow:inset 0 0 0 1px rgba(196,232,205,.55); }
.ice-fight-needle { position:absolute; top:-2px; bottom:-2px; width:4px; margin-left:-2px; border-radius:2px; background:#f4f7f8; box-shadow:0 0 6px rgba(0,0,0,.6); }
.ice-fight-scale { display:flex; justify-content:space-between; margin-top:4px; font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; color:#8e9ea5; }
.ice-fight[data-state="good"] { border-color:rgba(155,199,167,.55); }
.ice-fight[data-state="surge"] { border-color:rgba(214,170,98,.7); }
.ice-fight[data-state="surge"] p { color:#e2c07e; }
.ice-fight[data-state="danger"] { border-color:rgba(214,96,74,.8); }
.ice-fight[data-state="danger"] p { color:#f09a86; }
.ice-controls .ice-action[data-fight="true"] {
  border-color:rgba(190,170,119,.7);
  background:linear-gradient(180deg,rgba(62,54,34,.97),rgba(30,26,17,.97));
}
@media (max-width:720px) {
  .ice-fight { top:auto; bottom:128px; right:50%; transform:translateX(50%); grid-template-columns:40px minmax(0,1fr); padding:10px 12px; }
  .ice-fight-shaft { min-height:84px; }
}

/* Analog thumbstick for touch devices; the d-pad stays for mouse/keyboard play. */
.ice-stick {
  display:none;
  position:relative;
  width:118px;
  height:118px;
  flex:0 0 auto;
  border-radius:50%;
  border:1px solid rgba(214,225,229,.28);
  background:radial-gradient(circle,rgba(28,38,43,.55) 0 55%,rgba(12,20,24,.7) 100%);
  box-shadow:0 9px 22px rgba(0,0,0,.28);
  pointer-events:auto;
  touch-action:none;
}
.ice-stick-knob {
  position:absolute;
  left:50%;
  top:50%;
  width:50px;
  height:50px;
  margin:-25px 0 0 -25px;
  border-radius:50%;
  border:1px solid rgba(236,243,245,.45);
  background:linear-gradient(180deg,rgba(60,76,84,.96),rgba(22,32,38,.96));
  pointer-events:none;
}
@media (pointer:coarse) {
  .ice-dpad { display:none; }
  .ice-stick { display:block; }
  .ice-controls { width:calc(100% - 24px); justify-content:space-between; }
  .ice-controls .ice-action { margin-bottom:26px; }
}

/* Phones: the 3D view fills a tall stage so the thumbstick and action button sit over the lake. */
@media (max-width:720px) {
  .icefishin-stage { min-height:min(76svh,660px); }
  #game-canvas { position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; }
  .ice-hud .hud-row { gap:6px; }
  .ice-hud .hud-chip { padding:4px 8px; min-width:0; }
  .ice-hud .hud-chip span { font-size:.56rem; }
  .ice-hud .hud-chip strong { font-size:.8rem; }
  .ice-hud .hud-chip:has(#hud-streak) { display:none; }
  .ice-fight { top:auto; bottom:150px; }
}

/* Shared lake (Infin8 World Server): remote angler name tags and a quiet catch feed. */
.world-tags { position:absolute; inset:0; z-index:6; pointer-events:none; overflow:hidden; }
.world-tag {
  position:absolute; left:0; top:0; padding:2px 7px; border-radius:6px; white-space:nowrap;
  font-size:.7rem; font-weight:600; letter-spacing:.01em; color:#e9eff1;
  background:rgba(12,20,26,.55); box-shadow:inset 0 0 0 1px rgba(216,228,232,.14);
  opacity:0; transition:opacity .25s linear; will-change:transform,opacity;
}
.world-feed { position:absolute; left:14px; top:132px; z-index:9; display:grid; gap:4px; max-width:min(300px,46%); pointer-events:none; }
.world-feed-row {
  padding:4px 9px; border-radius:7px; font-size:.72rem; line-height:1.3; color:#d8e2e5;
  background:rgba(12,20,26,.52); box-shadow:inset 0 0 0 1px rgba(216,228,232,.10);
  transition:opacity .9s ease;
}
.world-feed-row.rarity-rare { box-shadow:inset 2px 0 0 #8fb7c9; }
.world-feed-row.rarity-epic,.world-feed-row.rarity-legendary { box-shadow:inset 2px 0 0 #d6b36a; }
.world-feed-row.is-fading { opacity:0; }
@media (max-width:640px) { .world-feed { top:auto; bottom:190px; max-width:62%; } .world-feed-row:nth-last-child(n+3) { display:none; } }

/* Jig & attract: ice flasher (sonar) dial */
.ice-flasher {
  position:absolute;
  top:132px;
  right:14px;
  z-index:12;
  display:grid;
  justify-items:center;
  gap:6px;
  width:176px;
  padding:10px 10px 12px;
  border:1px solid rgba(219,230,233,.16);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(10,18,24,.88),rgba(6,12,16,.88));
  box-shadow:0 14px 32px rgba(0,0,0,.34);
  backdrop-filter:blur(8px);
  color:#dfe8ea;
  pointer-events:none;
}
.ice-flasher[hidden] { display:none; }
.ice-flasher svg { width:150px; height:150px; display:block; font-family:system-ui,sans-serif; }
.ice-flasher p { margin:0; font-size:.76rem; font-weight:700; text-align:center; color:#c7d3d7; }
.ice-flasher[data-phase="bite"] { border-color:rgba(184,81,60,.75); }
.ice-flasher[data-phase="bite"] p { color:#eeb0a0; }
.ice-flasher[data-phase="nibble"] p { color:#dcc18a; }

/* Landing moment: catch reveal card over the stage */
.ice-reveal {
  position:absolute;
  left:50%;
  top:18%;
  z-index:14;
  display:grid;
  grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:16px;
  align-items:center;
  width:min(470px,calc(100% - 32px));
  padding:16px 18px;
  transform:translateX(-50%);
  border:1px solid rgba(219,230,233,.2);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(12,20,26,.93),rgba(7,12,16,.93));
  box-shadow:0 22px 48px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  color:#eef3f4;
  pointer-events:none;
  animation:ice-reveal-in .35s ease-out;
}
.ice-reveal[hidden] { display:none; }
.ice-reveal-sprite { width:100%; aspect-ratio:4 / 3; border-radius:8px; }
.ice-reveal-sprite[data-model="3d"] { background-color:transparent; background-size:contain; background-position:center; background-repeat:no-repeat; background-image:none; animation:ice-fish-bob 2.4s ease-in-out infinite; filter:drop-shadow(0 10px 12px rgba(0,0,0,.45)); }
@keyframes ice-fish-bob { 0%,100% { transform:translateY(0) rotate(-1.5deg); } 50% { transform:translateY(-4px) rotate(1.5deg); } }
@media (prefers-reduced-motion: reduce) { .ice-reveal-sprite[data-model="3d"] { animation:none; } }
.ice-reveal-rarity { font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#9fb0b6; }
.ice-reveal[data-rarity="rare"] .ice-reveal-rarity { color:#b9cbd6; }
.ice-reveal[data-rarity="epic"] .ice-reveal-rarity { color:#d2c29a; letter-spacing:.2em; }
.ice-reveal[data-rarity="legendary"] .ice-reveal-rarity { color:#e0c98f; letter-spacing:.24em; font-weight:800; }
.ice-reveal h2 { margin:.2rem 0 .55rem; font-size:1.25rem; }
.ice-reveal dl { display:grid; grid-template-columns:repeat(3,auto); gap:4px 14px; margin:0; }
.ice-reveal dt { font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:#8e9ea5; }
.ice-reveal dd { margin:0; font-size:.9rem; font-weight:700; color:#e7eef0; white-space:nowrap; }
.ice-reveal-pb { margin:.6rem 0 0; font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#d6bd84; }
@keyframes ice-reveal-in { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion:reduce) { .ice-reveal { animation:none; } }
@media (max-width:720px) {
  /* Phones: a compact dial tucked under the HUD so it never covers the angler or the hole; the Line chip carries the hint text. */
  .ice-flasher { top:128px; bottom:auto; left:8px; right:auto; width:auto; padding:4px; gap:0; border-radius:50%; background:rgba(8,14,18,.55); }
  .ice-flasher svg { width:72px; height:72px; }
  .ice-flasher p { display:none; }
  .ice-reveal { top:12%; grid-template-columns:1fr; gap:10px; width:min(330px,calc(100% - 24px)); }
  .ice-reveal-sprite { max-width:220px; justify-self:center; }
  .ice-reveal dl { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ==========================================================================
   IceFishin theme layer — one visual system for HUD, controls and panels.
  Shared Infin8 Apps / Arcade cyan, purple and dark surfaces.
   ========================================================================== */
.icefishin-page {
  --if-ink: #0b101c;
  --if-glass: rgba(17, 22, 36, .82);
  --if-glass-strong: rgba(11, 16, 28, .94);
  --if-line: rgba(160, 208, 228, .22);
  --if-line-strong: rgba(172, 222, 242, .5);
  --if-frost: var(--cyan, #31d7eb);
  --if-frost-bright: #b4f7ff;
  --if-snow: var(--text, #edf1ff);
  --if-steel: var(--purple, #a982ff);
  --if-brass: var(--cyan, #31d7eb);
  --if-amber: #e3a857;
  --if-danger: #d9674f;
  --if-ok: #8fc9a4;
  --if-radius: 12px;
  --if-shadow: 0 10px 28px rgba(0, 0, 0, .32);
}
/* Shared glass surface for every in-game panel. */
.icefishin-page :is(.ice-hud .hud-chip, .ice-hud-status, .ice-fight, .ice-flasher, .ice-reveal, .world-feed-row) {
  border: 1px solid var(--if-line);
  background: linear-gradient(180deg, rgba(14, 28, 37, .80), var(--if-glass));
  box-shadow: var(--if-shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
  color: var(--if-snow);
}
.icefishin-page :is(.ice-fight, .ice-flasher, .ice-reveal) { border-radius: var(--if-radius); }
.icefishin-page .eyebrow { color: var(--if-frost); }

/* HUD: session stats left, career right; the hole status line lives in the bottom band (#ice-footer). */
.ice-hud-bar {
  position: absolute; top: 12px; left: 12px; right: 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px;
}
.ice-hud-group { display: flex; gap: 6px; }
.ice-hud .hud-chip { min-width: 64px; padding: 6px 10px; border-radius: 10px; }
.ice-hud .hud-chip span { color: var(--if-frost); font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ice-hud .hud-chip span b { color: var(--if-snow); font-size: .72rem; letter-spacing: .04em; }
.ice-hud .hud-chip strong { color: var(--if-snow); font-size: .98rem; font-variant-numeric: tabular-nums; }
.ice-hud-status {
  justify-self: center; display: grid; justify-items: center; gap: 1px;
  min-width: 0; max-width: 460px; padding: 6px 16px; border-radius: 999px; text-align: center;
}
.ice-hud-status span { color: var(--if-frost); font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ice-hud-status strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }

/* Controls: frosted ice glass, frost-blue edge, state colours on the action button. */
.ice-controls button, .ice-stick {
  border: 1px solid var(--if-line-strong);
  background: radial-gradient(120% 120% at 50% 0%, rgba(40, 64, 76, .92), rgba(10, 20, 27, .92));
  color: var(--if-snow);
  box-shadow: var(--if-shadow), inset 0 1px 0 rgba(212, 241, 251, .12);
}
.ice-controls button:hover, .ice-controls button:focus-visible, .ice-controls button.active {
  border-color: var(--if-frost-bright);
  background: radial-gradient(120% 120% at 50% 0%, rgba(56, 88, 102, .96), rgba(14, 28, 36, .96));
}
.ice-controls .ice-move { border-radius: 12px; color: var(--if-frost); }
.ice-controls .ice-action { border-radius: 14px; letter-spacing: .08em; }
.ice-controls .ice-action[data-biting="true"] {
  border-color: var(--if-amber); color: #1a1006;
  background: linear-gradient(180deg, #f0c27d, var(--if-amber));
  animation: if-bite 0.6s ease-in-out infinite alternate;
}
.ice-controls .ice-action[data-fight="true"] {
  border-color: var(--if-brass); color: #17120a;
  background: linear-gradient(180deg, #dcc08a, var(--if-brass));
}
@keyframes if-bite { from { box-shadow: 0 0 0 0 rgba(227, 168, 87, .55); } to { box-shadow: 0 0 0 8px rgba(227, 168, 87, 0); } }
@media (prefers-reduced-motion: reduce) { .ice-controls .ice-action[data-biting="true"] { animation: none; } }
.ice-stick { border-radius: 50%; background: radial-gradient(circle, rgba(20, 36, 46, .55) 0 55%, rgba(9, 19, 26, .75) 100%); }
.ice-stick-knob { border-color: var(--if-frost-bright); background: radial-gradient(circle at 40% 35%, #5f8494, #1a2c35); }

/* Fight + flasher accents use the same state colours. */
.ice-fight-zone { background: rgba(143, 201, 164, .5); box-shadow: inset 0 0 0 1px rgba(196, 232, 205, .55); }
.ice-fight[data-state="good"] { border-color: rgba(143, 201, 164, .6); }
.ice-fight[data-state="surge"] { border-color: var(--if-amber); }
.ice-fight[data-state="danger"] { border-color: var(--if-danger); }
.ice-fight-fish { background: linear-gradient(180deg, var(--if-frost-bright), var(--if-frost)); }
.ice-flasher[data-phase="bite"] { border-color: var(--if-amber); }

/* Start screen + side cards pick up the frost accent. */
.icefishin-page .primary-button { color: var(--if-ink); background: linear-gradient(90deg, var(--if-frost), var(--if-frost-bright)); }
.icefishin-page .secondary-button:hover { border-color: var(--if-frost); }
.icefishin-page .side-card { border-color: var(--if-line); }
.icefishin-page .upgrade-row:hover:not(:disabled) { border-color: var(--if-line-strong); }

/* Tablet: session chips left, career chips right. */
@media (max-width: 980px) {
  .ice-hud-bar { grid-template-columns: 1fr 1fr; }
  .ice-hud-career { justify-self: end; }
}
/* Phone: compact chips; Streak and Pack step aside. */
@media (max-width: 720px) {
  .ice-hud-bar { top: 8px; left: 8px; right: 8px; gap: 6px; }
  .ice-hud .hud-chip { min-width: 0; padding: 4px 8px; }
  .ice-hud .hud-chip strong { font-size: .8rem; }
  .ice-hud .hud-chip:has(#hud-streak), .ice-hud .hud-chip:has(#hud-pack) { display: none; }
  .ice-flasher { top: 104px; }
}

/* In-game shops, inventory, landmark tags and XP-boost timer (shops-ui.js). Same frost/steel/brass tokens. */
.if-icon { width: 100%; height: 100%; display: block; }
.ice-landmark-tags { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.ice-landmark-tag { position: absolute; left: 0; top: 0; opacity: 0; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--if-line); background: var(--if-glass); color: var(--if-snow); font: 700 .7rem/1.3 system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
/* XP-boost timer: a small read-only badge under the career chips (top-right corner of the top band). */
.ice-buff { position: absolute; top: var(--hud-top-h, 140px); right: var(--band-side, 10px); z-index: 10; display: flex; align-items: center; gap: 5px; padding: 3px 8px; border-radius: 999px; border: 1px solid rgba(201, 168, 106, .5); background: var(--if-glass-strong); color: var(--if-snow); font: 700 .7rem/1 system-ui, sans-serif; pointer-events: none; }
.ice-buff[hidden] { display: none; }
.ice-buff .if-icon { width: 14px; height: 14px; color: var(--if-brass); }
.ice-buff b { color: var(--if-brass); font-variant-numeric: tabular-nums; }
/* Shared button base for the HUD dock row and the landmark prompt; the dock itself is laid out in "Infin8 HUD dock". */
.ice-dock-button { pointer-events: auto; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 10px; border-radius: 12px; border: 1px solid var(--if-line-strong); background: linear-gradient(180deg, rgba(28, 42, 50, .95), var(--if-glass-strong)); color: var(--if-snow); font: 800 .82rem/1 system-ui, sans-serif; letter-spacing: .03em; cursor: pointer; box-shadow: var(--if-shadow); touch-action: manipulation; }
.ice-dock-button .if-icon { width: 24px; height: 24px; color: var(--if-brass); }
.ice-dock-button kbd { padding: 2px 6px; border-radius: 5px; border: 1px solid var(--if-line-strong); color: var(--if-frost); font: 700 .7rem/1 system-ui, sans-serif; }
.ice-dock-button:hover, .ice-dock-button:focus-visible { outline: none; border-color: var(--if-frost-bright); }
.ice-dock-button[hidden] { display: none; }
.ice-panel { position: absolute; top: 12px; right: 12px; bottom: 12px; z-index: 20; width: min(440px, calc(100% - 24px)); display: flex; flex-direction: column; border-radius: var(--if-radius); border: 1px solid var(--if-line-strong); background: linear-gradient(180deg, rgba(14, 28, 37, .96), var(--if-glass-strong)); color: var(--if-snow); box-shadow: var(--if-shadow); overflow: hidden; }
.ice-panel[hidden] { display: none; }
.ice-panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--if-line); }
.ice-panel-head > div:first-child { flex: 1; min-width: 0; }
.ice-panel-head h2 { margin: 2px 0 0; font-size: 1.15rem; }
.ice-panel-wallet { display: flex; gap: 10px; color: var(--if-steel); font: 600 .8rem/1 system-ui, sans-serif; white-space: nowrap; }
.ice-panel-wallet b { color: var(--if-brass); }
.ice-panel-close { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px; border: 1px solid var(--if-line); background: transparent; color: var(--if-snow); font-size: 1rem; cursor: pointer; }
.ice-panel-close:focus-visible, .ice-panel-close:hover { outline: none; border-color: var(--if-frost); }
.ice-panel-body { flex: 1; overflow-y: auto; padding: 8px 12px 12px; overscroll-behavior: contain; }
.ice-panel-body h3 { margin: 12px 4px 6px; color: var(--if-frost); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.ice-panel-body h3 small { color: var(--if-steel); letter-spacing: .02em; text-transform: none; font-weight: 500; }
.ice-panel-lead, .ice-panel-fine { margin: 8px 4px; color: var(--if-steel); font-size: .84rem; line-height: 1.4; }
.ice-panel-fine { font-size: .74rem; }
.ice-panel-note { min-height: 1.2em; margin: 0; padding: 8px 16px 10px; border-top: 1px solid var(--if-line); color: var(--if-frost-bright); font-size: .8rem; }
.ice-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px; margin-bottom: 6px; border-radius: 10px; border: 1px solid rgba(160, 208, 228, .12); background: rgba(8, 16, 22, .55); }
.ice-item.is-locked { opacity: .6; }
.ice-item-icon { width: 40px; height: 40px; padding: 5px; border-radius: 8px; border: 1px solid rgba(160, 208, 228, .14); background: #0d171d; color: var(--if-brass); }
.ice-item-text { min-width: 0; }
.ice-item-text strong { display: block; font-size: .9rem; }
.ice-item-text strong em { color: var(--if-steel); font-style: normal; font-weight: 600; font-size: .78rem; margin-left: 4px; }
.ice-item-text small { display: block; margin-top: 2px; color: var(--if-steel); font-size: .76rem; line-height: 1.35; }
.ice-item-text small b { color: var(--if-snow); font-weight: 600; }
.ice-item-buy { min-width: 76px; min-height: 44px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--if-line-strong); background: rgba(20, 34, 42, .9); color: var(--if-snow); font: 800 .82rem/1 system-ui, sans-serif; cursor: pointer; font-variant-numeric: tabular-nums; }
.ice-item-buy.is-primary { border-color: var(--if-brass); color: #17120a; background: linear-gradient(180deg, #dcc08a, var(--if-brass)); }
.ice-item-buy:disabled { opacity: .45; cursor: not-allowed; }
.ice-item-buy:focus-visible, .ice-tabs button:focus-visible { outline: 2px solid var(--if-frost-bright); outline-offset: 2px; }
.ice-item-max, .ice-item-lock { color: var(--if-steel); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.ice-item-lock { color: var(--if-amber); }
.ice-tabs { display: flex; gap: 6px; margin: 4px 0 8px; }
.ice-tabs button { flex: 1; min-height: 40px; border-radius: 9px; border: 1px solid var(--if-line); background: transparent; color: var(--if-steel); font: 700 .8rem/1 system-ui, sans-serif; cursor: pointer; }
.ice-tabs button[aria-selected="true"] { color: var(--if-snow); border-color: var(--if-frost); background: rgba(159, 216, 238, .08); }
.ice-progress { height: 8px; margin: 4px 4px 10px; border-radius: 99px; background: rgba(160, 208, 228, .12); overflow: hidden; }
.ice-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--if-steel), var(--if-brass)); }
.ice-rack-bar { display: block; height: 5px; margin-top: 5px; border-radius: 99px; background: rgba(160, 208, 228, .12); overflow: hidden; }
.ice-rack-bar span { display: block; height: 100%; background: linear-gradient(90deg, #8a5a2b, var(--if-brass)); }
.ice-item.is-species .ice-item-icon { background: rgba(160, 208, 228, .06); }
.ice-start-stats { margin: 10px 0 14px; text-align: left; }
.ice-start-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ice-start-row div { padding: 7px 9px; border-radius: 9px; border: 1px solid var(--if-line); background: rgba(8, 16, 22, .6); }
.ice-start-row span, .ice-start-best span { display: block; color: var(--if-frost); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ice-start-row b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.ice-start-gear { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.ice-start-gear li { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 7px; border-radius: 8px; background: rgba(8, 16, 22, .45); color: var(--if-steel); font-size: .74rem; }
.ice-start-gear .if-icon { width: 20px; height: 20px; flex: 0 0 auto; color: var(--if-brass); }
.ice-start-gear span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ice-start-best { margin: 8px 0 0; color: var(--if-snow); font-size: .8rem; }
.ice-side-hint b { color: var(--if-brass); }
html[data-game-state="menu"] .ice-footer, html[data-game-state="menu"] .ice-buff { display: none; }
@media (max-width: 720px) {
  .ice-panel { position: fixed; inset: auto 0 0 0; top: auto; width: 100%; max-height: min(78vh, 560px); background: #0b161d; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .ice-start-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ice-start-gear { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px), (pointer: coarse) { .ice-dock-button kbd { display: none; } }
.ice-confirm { display: flex; gap: 8px; justify-content: flex-end; margin: 12px 4px; }
.ice-panel[data-kind="reset"] { bottom: auto; }

/* Fishing loop: reel-up / drill helpers beside the action button, flasher strike band state. */
.ice-controls .ice-aux { display:flex; flex-direction:column; gap:6px; align-self:flex-end; margin-bottom:39px; margin-left:auto; pointer-events:none; }
.ice-controls .ice-aux-button { min-width:84px; min-height:44px; padding:0 10px; border-radius:10px; font-size:.74rem; pointer-events:auto; }
.ice-controls .ice-aux-button[hidden] { display:none; }
.ice-flasher[data-in-zone="true"] p { color:#e8d9a8; }
/* 3D fish thumbnails in the bag (shops-ui.js fishIcon). */
.ice-item-icon .ice-fish-thumb{width:100%;height:100%;object-fit:contain;display:block}
.ice-item-icon .ice-fish-thumb.is-smoked{filter:sepia(.55) saturate(1.3) brightness(.85)}

/* Wildlife thief: warning banner with a direction arrow (relative to the camera) and the MINNOW throw button. */
.ice-controls .ice-minnow-button { background:linear-gradient(180deg,#3b6f84,#24495a); color:#eaf6fb; }
.ice-controls .ice-minnow-button[data-empty="true"] { opacity:.55; }
.ice-thief-alert { position:absolute; left:50%; top:-64px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:rgba(92,22,14,.88); color:#fff3e8; font-weight:700; font-size:.84rem; letter-spacing:.01em; box-shadow:0 6px 18px rgba(0,0,0,.35); pointer-events:none; white-space:nowrap; animation:iceThiefPulse .8s ease-in-out infinite alternate; }
.ice-thief-alert[hidden] { display:none; }
.ice-thief-alert[data-state="gone"] { background:rgba(24,74,52,.9); animation:none; }
.ice-thief-arrow { display:inline-block; font-size:1.2rem; transition:transform .12s linear; }
@keyframes iceThiefPulse { from { box-shadow:0 0 0 0 rgba(255,120,80,.55); } to { box-shadow:0 0 0 8px rgba(255,120,80,0); } }
@media (max-width:720px) { .ice-thief-alert { top:-54px; font-size:.74rem; padding:6px 11px; } }
@media (prefers-reduced-motion: reduce) { .ice-thief-alert { animation:none; } }

/* Snowball PvP: throw button, opt-out toggle and the "splat" screen flash. */
.ice-controls .ice-snowball-button { background:linear-gradient(180deg,#e9f3f8,#b9ccd6); color:#17313d; }
.ice-controls .ice-snowball-button[data-cooling="true"] { opacity:.5; }
/* Auto-target lock: a brass rim while a warden, thief or angler is locked in snowball range. */
.ice-controls .ice-snowball-button[data-locked] { outline:2px solid rgba(201,160,82,.92); outline-offset:1px; }
.icefishin-page .ice-controls .ice-snowball-button[data-locked] { --ctl-rim: linear-gradient(135deg, #ffe9b0, rgba(201, 160, 82, 0.95)); }
.ice-snow-opt { display:inline-flex; align-items:center; gap:6px; font-size:.8rem; color:var(--if-snow, #eaf6fb); }
.ice-splat-flash { position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.75), rgba(255,255,255,0) 60%); animation:iceSplat .7s ease-out forwards; }
@keyframes iceSplat { from { opacity:1; } to { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .ice-splat-flash { animation-duration:.2s; } }
/* Lake Rink panel (shops-ui 'rink'): hockey stats grid wraps on phones. */
.ice-panel .ice-rink-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); gap:6px; }
.hockey-hud { top:78px !important; max-width:calc(100% - 24px); white-space:normal !important; }
#ice-action[hidden] { display:none; }
@media (max-width:480px) { .hockey-hud { top:124px !important; font-size:13px !important; } }

/* Landscape phones do not enter the width-only phone rules above: the stage fills the short viewport. The thumb
   controls (stick, action cluster) are placed by "Phone / touch controls" at the end of this file. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  .icefishin-stage { min-height: min(100svh, 620px); height: min(100svh, 620px); }
  #game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .ice-thief-alert { max-width: 48vw; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; }
  .ice-hud-bar { top: max(8px, env(safe-area-inset-top)); left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); grid-template-columns: 1fr auto 1fr; gap: 6px; }
  .ice-hud-group { gap: 4px; }
  .ice-hud-career { justify-self: end; }
  .ice-hud .hud-chip { min-width: 0; padding: 4px 7px; }
  .ice-hud .hud-chip span { font-size: .52rem; }
  .ice-hud .hud-chip strong { font-size: .72rem; }
  .ice-hud .hud-chip:has(#hud-streak), .ice-hud .hud-chip:has(#hud-pack), .ice-hud .hud-chip:has(#hud-minnows) { display: none; }
  .ice-fight { top: 68px; bottom: auto; right: 12px; width: min(300px, 42vw); grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 8px 10px; }
  .ice-fight-shaft { min-height: 62px; }
  .ice-fight h2 { margin-bottom: .35rem; font-size: .9rem; }
  .ice-fight p { margin-top: .35rem; font-size: .72rem; }
  .ice-flasher { top: 68px; left: 12px; right: auto; bottom: auto; width: auto; padding: 4px; gap: 0; border-radius: 50%; }
  .ice-flasher svg { width: 62px; height: 62px; }
  .ice-flasher p { display: none; }
  .world-feed { top: auto; bottom: 12px; left: 50%; transform: translateX(-50%); max-width: 32%; }
  .ice-reveal { top: 50%; transform: translate(-50%, -50%); grid-template-columns: minmax(0, 110px) 1fr; width: min(420px, 58vw); gap: 10px; padding: 10px 12px; }
  .ice-reveal-sprite { max-width: 110px; }
  .ice-reveal h2 { font-size: 1rem; }
}

/* Fin companion (fin-companion.js, WP-51): HUD dock button, caption bubble over Fin's head, tiny settings menu.
   Fin's brand gradient (cyan #4de8ff to violet #9b6dff) marks everything that is his; surfaces reuse the lake glass. */
.fin-dock { position: absolute; right: 12px; bottom: 132px; z-index: 12; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.fin-dock-button .fin-mark, .fin-menu .fin-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: rgba(8, 16, 22, .6); font: 900 1.02rem/1 system-ui, sans-serif; color: #4de8ff; background-image: none; }
@supports (-webkit-background-clip: text) { .fin-dock-button .fin-mark, .fin-menu .fin-mark { background: linear-gradient(180deg, #4de8ff, #9b6dff); -webkit-background-clip: text; background-clip: text; color: transparent; } }
.fin-dock-button[data-state="off"] { opacity: .72; }
.fin-dock-button:focus-visible, .fin-talk-button:focus-visible, .fin-menu :is(button, input, select):focus-visible { outline: 2px solid #7ff0ff; outline-offset: 2px; }
.fin-talk-button { min-height: 48px; justify-content: center; border-color: rgba(155, 109, 255, .6); user-select: none; -webkit-user-select: none; touch-action: none; }
.fin-talk-button:active { background: linear-gradient(180deg, rgba(77, 232, 255, .35), rgba(155, 109, 255, .35)); }
.fin-talk-button[hidden] { display: none; }
html[data-game-state="menu"] .fin-dock { display: none; }

.fin-caption { position: absolute; left: 0; top: 0; z-index: 9; max-width: min(280px, calc(100% - 24px)); padding: 7px 12px; border-radius: 12px; border: 1px solid rgba(77, 232, 255, .45); background: linear-gradient(180deg, rgba(14, 28, 37, .94), rgba(8, 16, 22, .92)); box-shadow: var(--if-shadow); color: var(--if-snow); pointer-events: none; user-select: none; -webkit-user-select: none; transition: opacity .24s ease; will-change: transform; }
.fin-caption[hidden] { display: none; }
.fin-caption.is-out { opacity: 0; }
.fin-caption p { margin: 0; font: 650 .86rem/1.32 system-ui, sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fin-caption::after { content: ""; position: absolute; left: calc(var(--tail, 50%) - 7px); bottom: -7px; width: 12px; height: 12px; transform: rotate(45deg); border-right: 1px solid rgba(77, 232, 255, .45); border-bottom: 1px solid rgba(77, 232, 255, .45); background: rgba(8, 16, 22, .94); }
.fin-caption[data-kind="you"] { border-color: var(--if-line-strong); }
.fin-caption[data-kind="you"] p { color: var(--if-frost-bright); font-style: italic; font-weight: 600; }
.fin-caption[data-kind="you"]::after { border-color: var(--if-line-strong); }
.fin-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.fin-menu { position: absolute; right: 12px; bottom: calc(var(--status-floor, 8px) + var(--footer-h, 96px) + 10px); z-index: 21; width: min(300px, calc(100% - 24px)); max-height: calc(100% - var(--status-floor, 8px) - var(--footer-h, 96px) - 24px); overflow: auto; display: grid; gap: 8px; padding: 12px; border-radius: var(--if-radius); border: 1px solid rgba(77, 232, 255, .4); background: linear-gradient(180deg, rgba(14, 28, 37, .97), var(--if-glass-strong)); color: var(--if-snow); box-shadow: var(--if-shadow); font: 600 .84rem/1.3 system-ui, sans-serif; }
.fin-menu[hidden] { display: none; }
.fin-menu { box-sizing: border-box; grid-template-columns: minmax(0, 1fr); overflow-x: hidden; }
.fin-menu > *, .fin-menu fieldset, .fin-menu .fin-row span { min-width: 0; min-inline-size: 0; }
.fin-menu .fin-chat { flex-wrap: wrap; }
.fin-menu .fin-chat label { flex: 1 1 70px; }
.fin-menu .fin-keys { grid-template-columns: auto minmax(0, 1fr); }
.fin-menu :is(button, select) { max-width: 100%; min-height: 44px; }
.fin-menu .fin-volume input { width: 0; }
.fin-menu .fin-note, .fin-menu .fin-status { overflow-wrap: anywhere; }
.fin-menu-head { display: flex; align-items: center; gap: 8px; }
.fin-menu-head div { display: grid; flex: 1; }
.fin-menu-head strong { font-size: .98rem; }
.fin-menu-head span:not(.fin-mark) { color: var(--if-steel); font-size: .74rem; }
.fin-menu-close { min-width: 36px; min-height: 36px; border-radius: 9px; border: 1px solid var(--if-line); background: rgba(8, 16, 22, .6); color: var(--if-snow); font-size: 1.2rem; cursor: pointer; }
.fin-row { display: flex; align-items: center; gap: 9px; min-height: 36px; cursor: pointer; }
.fin-row span { flex: 1; }
.fin-row[hidden] { display: none; }
.fin-menu input[type="checkbox"], .fin-menu input[type="radio"] { width: 18px; height: 18px; accent-color: #4de8ff; }
.fin-menu kbd { padding: 2px 7px; border-radius: 6px; border: 1px solid var(--if-line-strong); color: var(--if-frost); font: 700 .72rem/1.2 system-ui, sans-serif; }
.fin-chat { display: flex; gap: 6px; margin: 0; padding: 6px 8px 8px; border: 1px solid var(--if-line); border-radius: 10px; }
.fin-chat legend { padding: 0 4px; color: var(--if-frost); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.fin-chat label { display: flex; align-items: center; gap: 5px; flex: 1; min-height: 36px; cursor: pointer; }
.fin-ask { display: flex; gap: 6px; }
.fin-ask input { flex: 1; min-width: 0; min-height: 38px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--if-line-strong); background: rgba(4, 10, 14, .7); color: var(--if-snow); font: 600 .84rem/1 system-ui, sans-serif; }
.fin-ask button, .fin-keys button { min-height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(77, 232, 255, .55); background: linear-gradient(180deg, rgba(77, 232, 255, .22), rgba(155, 109, 255, .22)); color: var(--if-snow); font: 800 .8rem/1 system-ui, sans-serif; cursor: pointer; }
.fin-keys { display: grid; grid-template-columns: auto 1fr auto 1fr; align-items: center; gap: 6px; color: var(--if-steel); font-size: .74rem; }
.fin-keys button { min-height: 36px; padding: 0 8px; }
.fin-status { margin: 0; color: var(--if-frost); font-size: .74rem; }
.fin-note { margin: 0; color: var(--if-steel); font-size: .7rem; font-weight: 500; line-height: 1.35; }
@media (max-width: 720px) {
  .fin-caption { max-width: min(220px, calc(100% - 16px)); }
  .fin-caption p { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) { .fin-caption { transition: none; } }
.fin-volume input[type="range"] { flex: 2; min-width: 0; accent-color: #c9a052; }
.fin-volume output { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.fin-voice-pick select { flex: 2; min-width: 0; max-width: 100%; padding: 4px 6px; border-radius: 6px; background: #10171b; color: inherit; border: 1px solid rgba(196,210,216,.3); }
.fin-voice-test { justify-self: start; padding: 6px 12px; border-radius: 6px; border: 1px solid rgba(196,210,216,.3); background: transparent; color: inherit; cursor: pointer; }
/* Leave lake: back to the landing card from inside the stage (works in fullscreen too). */
.ice-leave-button { position: absolute; left: 12px; bottom: 12px; z-index: 6; padding: 7px 12px; border-radius: 8px; border: 1px solid rgba(196,210,216,.35); background: rgba(10,16,19,.72); color: #e8eef0; font: 600 .82rem/1 inherit; cursor: pointer; }
.ice-leave-button:hover, .ice-leave-button:focus-visible { background: rgba(24,36,43,.92); outline: 2px solid #c9a052; outline-offset: 2px; }
.ice-leave-button[hidden] { display: none; }
/* Card area layout (Infin8 no-dead-space rule): cards wrap as flex items that grow to fill every row, so no row ends in
   an empty block. The long catch journal and the progression guide are full-width bands at the bottom, with their
   contents laid out in columns instead of one tall column that stretched the whole row. */
.ice-side-column { display: flex; flex-wrap: wrap; align-items: stretch; }
.ice-side-column > .side-card { flex: 1 1 220px; min-width: 0; }
.ice-side-column > .ice-band-card, .ice-side-column > #ice-species-journal { flex-basis: 100%; }
.ice-side-column > .ice-loop-card { order: 90; }
.ice-side-column > #ice-species-journal { order: 91; }
/* Equipment locker takes a double-width slot with its gear in two columns, so it no longer sets a tall row that
   leaves the neighbouring cards mostly empty. */
.ice-side-column > #ice-equipment-locker { flex: 2 1 460px; }
.ice-side-column > .side-card:has(#leaderboard-title) { flex: 1.5 1 300px; }
.ice-side-column > .side-card:has(#upgrade-title) { flex: 0.8 1 200px; }
#ice-equipment-locker .ice-equipment-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Species journal: full-width bottom band. 14 species fill exactly two rows of 7 on wide screens (no ragged tail);
   milestones stretch across the full width. */
#ice-species-journal .ice-journal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
#ice-species-journal .ice-milestone-list { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
@media (min-width: 1200px) { #ice-species-journal .ice-journal-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .ice-side-column > .side-card, .ice-side-column > #ice-equipment-locker,
  .ice-side-column > .side-card:has(#upgrade-title), .ice-side-column > .side-card:has(#leaderboard-title) { flex: 1 1 100%; }
  #ice-species-journal .ice-journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ice-loop-card ul { columns: 2 320px; column-gap: 28px; }
.ice-loop-card li { break-inside: avoid; }
.ice-side-column .ice-score-actions { max-width: 460px; }

/* ==========================================================================
   In-game HUD zones + fishing mini-games (flasher + reel fight).

   TOP BAND (while playing), one row inside the safe area:
     [ Leave lake + session chips ]   [ active mini-game only ]   [ career chips ]
   The mini-game ALWAYS sits at the very top, horizontally centred, in every layout (desktop, tablet, phone portrait,
   phone landscape, short landscape, fullscreen). It never moves down or to the middle: on short screens it scales
   down instead. The corner columns are measured (--corner-measured) so the centre column never overlaps them.
   BOTTOM BAND: stick / d-pad, action cluster, and the footer: hole status + the Infin8 HUD dock (one quick-action row:
     bag, snowmobile, sled, ride, Fin, chat, voice, settings, Control Panel). See "Infin8 HUD dock" at the end of this file.
   MIDDLE: the angler and the hole stay clear.

   Zone variables (measured live by shops-ui.js; fallbacks keep the layout sane before the first measure):
     --stage-w / --stage-h  stage size          --corner-measured  widest top-corner column
     --hud-top-h            bottom of the top band (HUD, Leave lake or the open mini-game) + 8px

   Requested exception to the restrained UI palette in ART-DIRECTION.md: purple / cyan / starfield glow on the two
   mini-game panels only. Both are pointer-events:none, so they never block the stick, action button or camera drag.
   Higher specificity (.icefishin-page .icefishin-stage …) overrides every earlier breakpoint rule for these elements.
   ========================================================================== */
.icefishin-page {
  --mg-violet: #a36bff;
  --mg-cyan: #3fd8ff;
  --mg-magenta: #ff4fc8;
  --mg-gold: #ffd36e;
  --mg-mint: #46f0b4;
  --band-top: max(10px, env(safe-area-inset-top));
  --band-side: max(10px, env(safe-area-inset-left), env(safe-area-inset-right));
  --band-gap: 10px;
  --corner-w: var(--corner-measured, 120px);
  /* centre column of the top band, in px of the stage */
  --center-w: calc(var(--stage-w, 960px) - 2 * (var(--band-side) + var(--corner-w) + var(--band-gap)));
  --mg-hint-w: clamp(96px, 14vw, 170px);
  /* Desktop / tablet: dial + hint side by side; dial from the stage height, capped by the centre column. */
  --mg-size: clamp(96px, min(calc(var(--stage-h, 560px) * .36), calc(var(--center-w) - var(--mg-hint-w) - 44px)), 260px);
  --mg-shaft: clamp(48px, calc(var(--stage-h, 560px) * .18), 110px);
  --mg-stars:
    radial-gradient(1px 1px at 9% 14%, rgba(255, 255, 255, .9) 50%, transparent 52%),
    radial-gradient(1px 1px at 27% 82%, rgba(255, 255, 255, .7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 46% 9%, rgba(214, 236, 255, .85) 50%, transparent 54%),
    radial-gradient(1px 1px at 71% 28%, rgba(255, 255, 255, .6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 88% 66%, rgba(255, 222, 252, .8) 50%, transparent 54%),
    radial-gradient(1px 1px at 63% 91%, rgba(255, 255, 255, .55) 50%, transparent 52%),
    radial-gradient(1px 1px at 15% 55%, rgba(205, 245, 255, .6) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 94% 12%, rgba(255, 255, 255, .75) 50%, transparent 54%);
  --mg-galaxy:
    radial-gradient(120% 90% at 18% 0%, rgba(163, 107, 255, .42), transparent 58%),
    radial-gradient(110% 90% at 100% 100%, rgba(63, 216, 255, .28), transparent 60%),
    radial-gradient(70% 60% at 90% 10%, rgba(255, 79, 200, .16), transparent 70%),
    linear-gradient(160deg, rgba(24, 12, 56, .92), rgba(6, 10, 32, .94));
}

/* ---- Top band: corners + centre (playing only; the menu keeps its own layout) ---- */
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud-bar {
  top: var(--band-top);
  left: var(--band-side);
  right: var(--band-side);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: start;
  gap: var(--band-gap);
}
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud-run {
  grid-column: 1; grid-row: 1; flex-direction: column; align-items: stretch;
  margin-top: 52px; /* stacked under Leave lake (44px + 8px) */
}
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud-career {
  grid-column: 3; grid-row: 1; justify-self: end; flex-direction: column; align-items: stretch;
}
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip { min-width: 72px; }

/* Leave lake: top-left corner, safe-area aware, always visible and tappable (also while a mini-game is open). */
.icefishin-page .icefishin-stage .ice-leave-button {
  top: var(--band-top);
  left: var(--band-side);
  bottom: auto;
  z-index: 15;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  max-width: 112px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: .8rem;
  line-height: 1.1;
}
.icefishin-page .icefishin-stage .ice-leave-button[hidden] { display: none; }

/* Messages that used to sit at a fixed top offset start under the top band instead. */
html[data-game-state="playing"] .icefishin-page .icefishin-stage .world-feed { top: var(--hud-top-h, 140px); }

/* ---- Mini-game panels: always top-centre ---- */
.icefishin-page .icefishin-stage :is(.ice-flasher, .ice-fight) {
  top: var(--band-top);
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  max-width: max(160px, var(--center-w));
  z-index: 13;
  border: 1px solid rgba(140, 170, 255, .42);
  background: var(--mg-stars), var(--mg-galaxy);
  box-shadow: 0 0 0 1px rgba(163, 107, 255, .22), 0 0 26px rgba(163, 107, 255, .38), 0 0 64px rgba(63, 216, 255, .16), 0 20px 44px rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  color: #eef3ff;
  pointer-events: none;
}
/* Dial left, hint right: a wide, short panel keeps the dial big while leaving the angler visible below. */
.icefishin-page .icefishin-stage .ice-flasher {
  display: flex;
  align-items: center;
  width: max-content;
  padding: 8px 14px 8px 8px;
  gap: 12px;
  border-radius: 24px;
}
.icefishin-page .icefishin-stage .ice-flasher svg {
  flex: 0 0 auto;
  width: var(--mg-size);
  height: var(--mg-size);
  filter: drop-shadow(0 0 10px rgba(63, 216, 255, .35)) drop-shadow(0 0 22px rgba(163, 107, 255, .3));
}
.icefishin-page .icefishin-stage .ice-flasher p {
  display: block;
  flex: 0 1 auto;
  width: var(--mg-hint-w);
  margin: 0;
  text-align: left;
  font-size: clamp(.74rem, 1.5vw, .92rem);
  font-weight: 800;
  letter-spacing: .02em;
  color: #e6ecff;
  text-shadow: 0 0 10px rgba(163, 107, 255, .7);
}
.icefishin-page .icefishin-stage .ice-flasher[data-in-zone="true"] { border-color: rgba(255, 211, 110, .6); }
.icefishin-page .icefishin-stage .ice-flasher[data-in-zone="true"] p { color: var(--mg-gold); text-shadow: 0 0 12px rgba(255, 211, 110, .55); }
.icefishin-page .icefishin-stage .ice-flasher[data-phase="nibble"] p { color: #c9b6ff; }
.icefishin-page .icefishin-stage .ice-flasher[data-phase="bite"] {
  border-color: var(--mg-magenta);
  box-shadow: 0 0 0 1px rgba(255, 79, 200, .5), 0 0 34px rgba(255, 79, 200, .55), 0 0 70px rgba(163, 107, 255, .3), 0 20px 44px rgba(0, 0, 0, .5);
  animation: mg-bite .5s ease-in-out infinite alternate;
}
.icefishin-page .icefishin-stage .ice-flasher[data-phase="bite"] p { color: #ffd2f2; text-shadow: 0 0 14px rgba(255, 79, 200, .9); }
@keyframes mg-bite { from { filter: brightness(1); } to { filter: brightness(1.18); } }

/* Reel fight: top-centre card, glowing tension track, mint "keep it here" band. */
.icefishin-page .icefishin-stage .ice-fight {
  width: min(430px, max(160px, var(--center-w)));
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 18px;
  border-radius: 22px;
}
.icefishin-page .icefishin-stage .ice-fight .eyebrow { color: var(--mg-cyan); letter-spacing: .16em; }
.icefishin-page .icefishin-stage .ice-fight h2 { margin: .15rem 0 .6rem; font-size: clamp(1rem, 2.4vw, 1.3rem); text-shadow: 0 0 14px rgba(163, 107, 255, .6); }
.icefishin-page .icefishin-stage .ice-fight p { font-size: clamp(.8rem, 1.6vw, .95rem); color: #e2e8ff; }
.icefishin-page .icefishin-stage .ice-fight-depth { color: #b9c4ff; }
.icefishin-page .icefishin-stage .ice-fight-shaft {
  width: 22px;
  min-height: var(--mg-shaft);
  border-radius: 11px;
  border: 1px solid rgba(140, 170, 255, .4);
  background: linear-gradient(180deg, #3fd8ff 0%, #4b3fb8 38%, #1a0f45 72%, #070418 100%);
  box-shadow: 0 0 14px rgba(63, 216, 255, .3), inset 0 0 8px rgba(0, 0, 0, .5);
}
.icefishin-page .icefishin-stage .ice-fight-fish {
  width: 12px;
  height: 26px;
  background: linear-gradient(180deg, #fff3c4, var(--mg-gold));
  box-shadow: 0 0 10px rgba(255, 211, 110, .85);
}
.icefishin-page .icefishin-stage .ice-fight-meter {
  height: 26px;
  border-radius: 13px;
  border: 1px solid rgba(140, 170, 255, .45);
  background: linear-gradient(90deg, #120b33 0%, #2a1a6b 45%, #4b2a9a 70%, #a8278f 88%, #ff3f8e 100%);
  box-shadow: 0 0 16px rgba(163, 107, 255, .35), inset 0 0 10px rgba(0, 0, 0, .55);
}
.icefishin-page .icefishin-stage .ice-fight-zone { background: rgba(70, 240, 180, .45); box-shadow: inset 0 0 0 1px rgba(170, 255, 222, .8), 0 0 14px rgba(70, 240, 180, .6); }
.icefishin-page .icefishin-stage .ice-fight-needle { width: 5px; margin-left: -2.5px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px rgba(63, 216, 255, .9); }
.icefishin-page .icefishin-stage .ice-fight-scale { color: #a9b4e8; }
.icefishin-page .icefishin-stage .ice-fight[data-state="good"] { border-color: rgba(70, 240, 180, .7); }
.icefishin-page .icefishin-stage .ice-fight[data-state="surge"] { border-color: var(--mg-gold); }
.icefishin-page .icefishin-stage .ice-fight[data-state="surge"] p { color: var(--mg-gold); }
.icefishin-page .icefishin-stage .ice-fight[data-state="danger"] { border-color: var(--mg-magenta); box-shadow: 0 0 0 1px rgba(255, 79, 200, .5), 0 0 34px rgba(255, 79, 200, .5), 0 20px 44px rgba(0, 0, 0, .5); }
.icefishin-page .icefishin-stage .ice-fight[data-state="danger"] p { color: #ffb3e6; }
@media (prefers-reduced-motion: reduce) { .icefishin-page .icefishin-stage .ice-flasher[data-phase="bite"] { animation: none; } }

/* ---- Phones / narrow windows (portrait-ish): compact corners, dial stacked over its hint, still top-centre ---- */
@media (max-width: 720px) {
  .icefishin-page {
    --band-top: max(8px, env(safe-area-inset-top));
    --band-side: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
    --band-gap: 6px;
    --corner-w: var(--corner-measured, 64px);
    /* stacked layout: the dial uses the whole centre column, and at most a third of the stage height */
    --mg-size: clamp(110px, min(calc(var(--center-w) - 18px), calc(var(--stage-h, 600px) * .34)), 240px);
    --mg-shaft: clamp(48px, calc(var(--stage-h, 600px) * .13), 90px);
  }
  .icefishin-page .icefishin-stage .ice-leave-button { width: 52px; max-width: 52px; padding: 2px 4px; font-size: .64rem; text-align: center; white-space: normal; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip { min-width: 52px; padding: 3px 6px; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip span { letter-spacing: .04em; }
  .icefishin-page .icefishin-stage .ice-flasher { flex-direction: column; padding: 8px 8px 7px; gap: 4px; border-radius: 20px; }
  .icefishin-page .icefishin-stage .ice-flasher p { width: var(--mg-size); text-align: center; font-size: .72rem; }
  .icefishin-page .icefishin-stage .ice-fight { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 10px 10px; border-radius: 18px; }
  .icefishin-page .icefishin-stage .ice-fight-shaft { width: 16px; }
  .icefishin-page .icefishin-stage .ice-fight .eyebrow { font-size: .58rem; letter-spacing: .1em; }
  .icefishin-page .icefishin-stage .ice-fight h2 { margin-bottom: .35rem; font-size: .92rem; }
  .icefishin-page .icefishin-stage .ice-fight p { margin-top: .35rem; font-size: .72rem; }
  .icefishin-page .icefishin-stage .ice-fight-meter { height: 20px; }
  .icefishin-page .icefishin-stage .ice-fight-scale { font-size: .56rem; }
}
/* ---- Short landscape (phones on their side, short windows): smaller dial beside its hint, still top-centre ---- */
@media (orientation: landscape) and (max-height: 620px) {
  .icefishin-page {
    --band-top: max(8px, env(safe-area-inset-top));
    --band-side: max(8px, env(safe-area-inset-left), env(safe-area-inset-right));
    --band-gap: 8px;
    --corner-w: var(--corner-measured, 64px);
    --mg-hint-w: clamp(90px, 18vw, 150px);
    --mg-size: clamp(76px, min(calc(var(--stage-h, 375px) * .38), calc(var(--center-w) - var(--mg-hint-w) - 40px)), 180px);
    --mg-shaft: clamp(40px, calc(var(--stage-h, 375px) * .14), 64px);
  }
  .icefishin-page .icefishin-stage .ice-leave-button { width: 52px; max-width: 52px; padding: 2px 4px; font-size: .64rem; text-align: center; white-space: normal; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip { min-width: 52px; padding: 3px 6px; }
  .icefishin-page .icefishin-stage .ice-flasher { flex-direction: row; padding: 6px 12px 6px 6px; gap: 8px; border-radius: 20px; }
  .icefishin-page .icefishin-stage .ice-flasher p { width: var(--mg-hint-w); text-align: left; font-size: .72rem; }
  .icefishin-page .icefishin-stage .ice-fight { width: min(400px, max(160px, var(--center-w))); grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 8px 12px; }
  .icefishin-page .icefishin-stage .ice-fight-shaft { width: 16px; }
  .icefishin-page .icefishin-stage .ice-fight h2 { margin-bottom: .3rem; font-size: .9rem; }
  .icefishin-page .icefishin-stage .ice-fight p { margin-top: .3rem; font-size: .72rem; }
  .icefishin-page .icefishin-stage .ice-fight-meter { height: 18px; }
}
/* Sled inventory view + Chip Truck set bonus (shops-ui.js). */
.ice-sled-card { margin: 8px 4px 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--if-line); background: rgba(255, 255, 255, .03); }
.ice-sled-head { display: flex; align-items: center; gap: 10px; }
.ice-sled-head .if-icon { width: 34px; height: 34px; color: var(--if-brass); flex: 0 0 auto; }
.ice-sled-head strong { display: block; font-size: 1rem; }
.ice-sled-head small { color: var(--if-steel); font-size: .74rem; }
.ice-sled-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ice-sled-slot { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--if-line-strong); background: rgba(159, 216, 238, .06); min-width: 0; }
.ice-sled-slot span { color: var(--if-frost); font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ice-sled-slot b { font-size: .86rem; overflow-wrap: anywhere; }
.ice-sled-slot small { color: var(--if-steel); font-size: .72rem; }
.ice-sled-slot.is-empty { border-style: dashed; opacity: .75; }
.ice-sled-hitch { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(143, 201, 164, .08); border: 1px solid rgba(143, 201, 164, .3); }
.ice-sled-hitch.is-parked { background: rgba(227, 168, 87, .1); border-color: rgba(227, 168, 87, .45); }
.ice-sled-hitch span { flex: 1; min-width: 0; color: var(--if-snow); font-size: .78rem; line-height: 1.35; }
.ice-set-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; border: 1px solid rgba(201, 168, 106, .6); color: var(--if-brass); font: 800 .62rem/1.5 system-ui, sans-serif; letter-spacing: .06em; vertical-align: middle; }
.ice-set-bonus { color: var(--if-brass); }
.ice-set-next { color: var(--if-steel); font-size: .7rem; }
.ice-set-rules { margin-top: 2px; }

/* ==========================================================================
   Infin8 Arcade Control Panel (staff-panel.js) — staff/owner only. Fixed overlay; mounts inside the fullscreen stage
   when the game is fullscreen. Safe-area aware, no horizontal page scroll, 44px+ touch targets.
   ========================================================================== */
.i8cp-entry {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 12px;
  border: 1px solid rgba(163, 107, 255, .6); background: linear-gradient(135deg, rgba(76, 40, 160, .85), rgba(16, 70, 110, .85));
  color: #f2f0ff; font: 800 .8rem/1 system-ui, sans-serif; letter-spacing: .04em; cursor: pointer;
  box-shadow: 0 0 16px rgba(163, 107, 255, .35);
}
.i8cp-entry img { width: 22px; height: 22px; border-radius: 6px; }
.i8cp-entry:hover, .i8cp-entry:focus-visible { outline: none; border-color: #3fd8ff; box-shadow: 0 0 20px rgba(63, 216, 255, .45); }
.i8cp-entry[hidden] { display: none; }
.i8cp-overlay {
  position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: rgba(4, 3, 16, .62); backdrop-filter: blur(4px); overflow: hidden;
  color: #eef1ff; font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.i8cp-overlay[hidden] { display: none; }
.i8cp {
  --cp-violet: #a36bff; --cp-cyan: #3fd8ff; --cp-magenta: #ff4fc8; --cp-line: rgba(140, 170, 255, .3);
  display: flex; flex-direction: column; width: min(940px, 100%); max-height: 100%; min-height: 0;
  border-radius: 20px; border: 1px solid rgba(140, 170, 255, .45); overflow: hidden;
  background:
    radial-gradient(1px 1px at 8% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 33% 70%, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 58% 18%, rgba(214,236,255,.85) 50%, transparent 54%), radial-gradient(1px 1px at 82% 44%, rgba(255,255,255,.6) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 92% 88%, rgba(255,222,252,.8) 50%, transparent 54%), radial-gradient(1px 1px at 18% 92%, rgba(255,255,255,.55) 50%, transparent 52%),
    radial-gradient(120% 80% at 0% 0%, rgba(163, 107, 255, .35), transparent 60%),
    radial-gradient(100% 80% at 100% 100%, rgba(63, 216, 255, .22), transparent 60%),
    linear-gradient(160deg, #150b38, #070a22 70%);
  box-shadow: 0 0 0 1px rgba(163, 107, 255, .25), 0 0 40px rgba(163, 107, 255, .35), 0 30px 80px rgba(0, 0, 0, .6);
}
.i8cp-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--cp-line); }
.i8cp-head img { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; filter: drop-shadow(0 0 10px rgba(163, 107, 255, .55)); }
.i8cp-head > div { flex: 1; min-width: 0; }
.i8cp-head h2 { margin: 0; font-size: clamp(1rem, 2.6vw, 1.35rem); background: linear-gradient(90deg, #d9c6ff, #7fe8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.i8cp-head small { display: block; color: #aab3e6; font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i8cp-close { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; border: 1px solid var(--cp-line); background: rgba(255, 255, 255, .04); color: #fff; font-size: 1.05rem; cursor: pointer; }
.i8cp-close:hover, .i8cp-close:focus-visible { outline: none; border-color: var(--cp-cyan); }
.i8cp-tabs { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--cp-line); flex: 0 0 auto; }
.i8cp-tabs button { flex: 0 0 auto; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, .04); color: #c9cff5; font-family: inherit; font-weight: 700; font-size: .82rem; line-height: 1; cursor: pointer; }
.i8cp-tabs button[aria-selected="true"] { border-color: rgba(163, 107, 255, .7); background: linear-gradient(135deg, rgba(163, 107, 255, .35), rgba(63, 216, 255, .18)); color: #fff; box-shadow: 0 0 14px rgba(163, 107, 255, .35); }
.i8cp-tabs button:focus-visible { outline: 2px solid var(--cp-cyan); outline-offset: 1px; }
.i8cp-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px; overscroll-behavior: contain; }
.i8cp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.i8cp-card { min-width: 0; padding: 12px; border-radius: 14px; border: 1px solid var(--cp-line); background: rgba(10, 8, 34, .55); }
.i8cp-card h3 { margin: 0 0 8px; color: var(--cp-cyan); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.i8cp-card p { margin: 6px 0; color: #aab3e6; font-size: .78rem; line-height: 1.4; }
.i8cp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.i8cp-row label { flex: 1 1 90px; min-width: 0; color: #d6dbff; font-size: .8rem; }
.i8cp input, .i8cp select, .i8cp textarea {
  min-height: 44px; min-width: 0; max-width: 100%; padding: 0 10px; border-radius: 10px; border: 1px solid var(--cp-line);
  background: rgba(4, 6, 24, .8); color: #fff; font-family: inherit; font-weight: 600; font-size: .9rem; line-height: 1.2;
}
.i8cp input[type="number"] { width: 110px; }
.i8cp select { flex: 1 1 120px; }
.i8cp textarea { width: 100%; min-height: 120px; padding: 8px 10px; font: 500 .74rem/1.35 ui-monospace, Consolas, monospace; resize: vertical; }
.i8cp input:focus-visible, .i8cp select:focus-visible, .i8cp textarea:focus-visible { outline: 2px solid var(--cp-cyan); outline-offset: 1px; }
.i8cp-btn { min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(163, 107, 255, .55); background: linear-gradient(135deg, rgba(110, 60, 220, .75), rgba(30, 90, 150, .75)); color: #fff; font-family: inherit; font-weight: 800; font-size: .8rem; line-height: 1; letter-spacing: .02em; cursor: pointer; }
.i8cp-btn:hover, .i8cp-btn:focus-visible { outline: none; border-color: var(--cp-cyan); box-shadow: 0 0 14px rgba(63, 216, 255, .4); }
.i8cp-btn.is-ghost { background: rgba(255, 255, 255, .05); border-color: var(--cp-line); }
.i8cp-btn.is-danger { background: linear-gradient(135deg, rgba(190, 40, 120, .8), rgba(120, 20, 80, .8)); border-color: rgba(255, 79, 200, .7); }
.i8cp-btn[disabled] { opacity: .45; cursor: not-allowed; }
.i8cp-toggle { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #d6dbff; font-size: .84rem; cursor: pointer; }
.i8cp-toggle input { width: 22px; min-height: 22px; height: 22px; accent-color: var(--cp-violet); }
.i8cp-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; }
.i8cp-stat div { padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.i8cp-stat span { display: block; color: #9aa6e0; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; }
.i8cp-stat b { font-size: .92rem; overflow-wrap: anywhere; }
.i8cp-status { margin: 0; padding: 8px 16px 10px; border-top: 1px solid var(--cp-line); color: #9feaff; font-size: .8rem; min-height: 1.3em; }
.i8cp-lock { margin: 0; padding: 8px 16px; background: rgba(255, 79, 200, .14); color: #ffc6ec; font-size: .8rem; border-bottom: 1px solid rgba(255, 79, 200, .35); }
.i8cp-lock[hidden] { display: none; }
@media (max-width: 720px), (pointer: coarse) {
  .i8cp-entry { width: 44px; padding: 0; justify-content: center; }
  .i8cp-entry span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .i8cp-entry img { width: 26px; height: 26px; }
}
@media (max-width: 560px) {
  .i8cp-overlay { place-items: end center; padding-left: 0; padding-right: 0; padding-bottom: 0; }
  .i8cp { border-radius: 18px 18px 0 0; max-height: calc(100dvh - max(12px, env(safe-area-inset-top))); padding-bottom: env(safe-area-inset-bottom); }
  .i8cp-head img { width: 40px; height: 40px; }
}
@media (orientation: landscape) and (max-height: 560px) {
  .i8cp { max-height: 100%; }
  .i8cp-head { padding: 6px 10px; }
  .i8cp-head img { width: 34px; height: 34px; }
  .i8cp-tabs { padding: 4px 10px; }
}
/* Infin8 landing theme
   ==========================================================================
   The IceFishin landing/start page on the shared Arcade ground: deep-space
   page, violet/cyan nebula wash, a quiet starfield, and the start card,
   buttons and on-screen controls painted with the game-shell tokens
   (--ctl-fill / --ctl-rim / --cyan / --purple) instead of flat ice-blue.
   Colours only: no geometry, sizes or positions of any control change here.
   The start card keeps the in-game gameplay capture (figure.overlay-shot).
   ========================================================================== */

/* Page ground. Site style.css loads after this file and repaints `body`, so
   the selector carries the page class to win on specificity. */
body:has(.icefishin-page) {
  background:
    radial-gradient(ellipse 70% 55% at 12% 4%, rgba(128, 65, 211, 0.34), transparent 70%),
    radial-gradient(ellipse 60% 50% at 88% 14%, rgba(43, 194, 228, 0.22), transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(96, 52, 196, 0.22), transparent 70%),
    linear-gradient(180deg, #070516 0%, #050711 55%, #04050d 100%);
  background-color: #050711;
}
/* Starfield: fixed, behind the page content (inside .game-page's stacking
   context), above the body nebula. Offset tiles never visibly repeat. */
.icefishin-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 22px 34px, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(1px 1px at 140px 88px, rgba(185, 248, 255, 0.75), transparent 60%),
    radial-gradient(1.5px 1.5px at 76px 160px, rgba(214, 170, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 198px 210px, rgba(255, 255, 255, 0.6), transparent 60%),
    radial-gradient(1px 1px at 58px 250px, rgba(160, 236, 255, 0.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 260px 40px, rgba(255, 255, 255, 0.7), transparent 60%);
  background-size: 280px 280px, 340px 300px, 310px 360px, 380px 330px, 260px 290px, 420px 400px;
  opacity: 0.55;
}
@media (prefers-reduced-transparency: reduce) { .icefishin-page::before { opacity: 0.25; } }

/* The stage ground shows before WebGL paints and behind the start overlay:
   deep space, not a pale sky gradient. */
.icefishin-stage {
  background:
    radial-gradient(circle at 18% 12%, rgba(128, 65, 211, 0.42), transparent 46%),
    radial-gradient(circle at 84% 22%, rgba(43, 194, 228, 0.28), transparent 44%),
    linear-gradient(180deg, #0a0820 0%, #050711 100%);
}

/* Start / menu overlay: a nebula backdrop over the lake, so the menu reads as
   Infin8 space rather than the 3D world's blue-grey sky. */
#start-overlay {
  background:
    radial-gradient(ellipse 60% 55% at 14% 8%, rgba(128, 65, 211, 0.46), transparent 70%),
    radial-gradient(ellipse 55% 50% at 90% 18%, rgba(43, 194, 228, 0.3), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 105%, rgba(96, 52, 196, 0.3), transparent 72%),
    linear-gradient(180deg, rgba(8, 6, 26, 0.93), rgba(4, 5, 14, 0.96));
}
#start-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 30px 40px, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(1px 1px at 150px 110px, rgba(185, 248, 255, 0.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 90px 190px, rgba(214, 170, 255, 0.75), transparent 60%),
    radial-gradient(1px 1px at 230px 60px, rgba(255, 255, 255, 0.55), transparent 60%);
  background-size: 260px 240px, 300px 280px, 340px 320px, 280px 260px;
  opacity: 0.6;
}
#start-overlay > .overlay-card { position: relative; }

/* Start card: the shell card with a violet-to-cyan rim and brand glow. */
.icefishin-page .ice-start-card {
  border: 1px solid transparent;
  background:
    linear-gradient(145deg, rgba(18, 20, 48, 0.95), rgba(8, 10, 26, 0.97)) padding-box,
    linear-gradient(135deg, rgba(182, 108, 255, 0.7), rgba(99, 230, 255, 0.55) 55%, rgba(182, 108, 255, 0.35)) border-box;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55), 0 0 60px rgba(128, 65, 211, 0.22), 0 0 34px rgba(43, 194, 228, 0.12);
}
.icefishin-page .ice-start-card .ice-logo { filter: drop-shadow(0 12px 30px rgba(122, 92, 255, 0.38)) drop-shadow(0 0 18px rgba(57, 215, 238, 0.18)); }
.icefishin-page .ice-start-card .eyebrow { color: var(--cyan); }
.icefishin-page .ice-start-card h1 { color: var(--text); }
.icefishin-page .ice-start-card p { color: var(--muted); }
.icefishin-page .ice-start-card .overlay-shot {
  border-color: rgba(119, 226, 255, 0.34);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(128, 65, 211, 0.26);
}
.icefishin-page .ice-start-card .control-key {
  border-color: rgba(182, 108, 255, 0.22);
  background: linear-gradient(160deg, rgba(128, 65, 211, 0.1), rgba(43, 194, 228, 0.05));
}
.icefishin-page .ice-start-card .control-key b { color: var(--cyan); }
.icefishin-page .ice-start-card .control-key span { color: var(--muted); }
.icefishin-page .ice-start-row div,
.icefishin-page .ice-start-gear li { border-color: rgba(182, 108, 255, 0.22); background: rgba(12, 12, 34, 0.6); }
.icefishin-page .ice-start-row span { color: var(--cyan); }

/* Buttons: back to the shell's Arcade cyan primary (the frost override made
   every primary a pale ice slab). */
.icefishin-page .primary-button {
  color: #061016;
  background: linear-gradient(90deg, var(--cyan), #b9f8ff);
  box-shadow: 0 8px 26px rgba(43, 194, 228, 0.28);
}
.icefishin-page .primary-button:hover:not(:disabled) { box-shadow: 0 10px 32px rgba(43, 194, 228, 0.42), 0 0 22px rgba(182, 108, 255, 0.3); }
.icefishin-page .secondary-button:hover { border-color: var(--cyan); }

/* On-screen controls inherit the shell control skin (colours only). */
.icefishin-page .ice-controls button {
  border: 1px solid transparent;
  background: var(--ctl-fill) padding-box, var(--ctl-rim) border-box;
  color: var(--ctl-text);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  box-shadow: var(--ctl-shadow), var(--ctl-inset);
}
.icefishin-page .ice-controls button:hover,
.icefishin-page .ice-controls button:focus-visible {
  border-color: transparent;
  background: var(--ctl-fill) padding-box, var(--ctl-rim-cyan) border-box;
}
.icefishin-page .ice-controls button:active,
.icefishin-page .ice-controls button.active {
  border-color: transparent;
  background: var(--ctl-fill-active) padding-box, var(--ctl-rim-cyan) border-box;
  color: #fff;
  box-shadow: var(--ctl-glow-active), var(--ctl-inset);
}
.icefishin-page .ice-controls .ice-move { color: #bff6ff; }
.icefishin-page .ice-controls .ice-action { --ctl-rim: var(--ctl-rim-cyan); }
.icefishin-page .ice-controls .ice-minnow-button { --ctl-rim: var(--ctl-rim-cyan); color: #bff6ff; }
.icefishin-page .ice-controls .ice-snowball-button { --ctl-rim: linear-gradient(135deg, #f4fbff, rgba(99, 230, 255, 0.85)); color: #f4fbff; }
/* Bite and fight keep their gameplay state colours: they are signals, not skin. */
.icefishin-page .ice-controls .ice-action[data-biting="true"] {
  border-color: var(--if-amber); color: #1a1006; text-shadow: none;
  background: linear-gradient(180deg, #f0c27d, var(--if-amber));
}
.icefishin-page .ice-controls .ice-action[data-fight="true"] {
  border-color: var(--if-brass); color: #17120a; text-shadow: none;
  background: linear-gradient(180deg, #dcc08a, var(--if-brass));
}
.icefishin-page .ice-stick {
  border: 1px solid transparent;
  background: radial-gradient(circle, rgba(24, 18, 54, 0.5) 0 55%, rgba(5, 8, 20, 0.78) 100%) padding-box, var(--ctl-rim) border-box;
  box-shadow: var(--ctl-shadow), var(--ctl-inset);
}
.icefishin-page .ice-stick-knob {
  border-color: rgba(185, 248, 255, 0.85);
  background: radial-gradient(circle at 38% 32%, rgba(185, 248, 255, 0.95), rgba(99, 230, 255, 0.7) 35%, rgba(110, 64, 210, 0.95) 100%);
  box-shadow: 0 0 18px rgba(99, 230, 255, 0.45);
}
.icefishin-page .ice-dock-button,
.icefishin-page .ice-leave-button {
  border-color: transparent;
  background: var(--ctl-fill) padding-box, var(--ctl-rim) border-box;
  color: var(--ctl-text);
}
.icefishin-page .ice-dock-button:active,
.icefishin-page .ice-leave-button:active {
  background: var(--ctl-fill-active) padding-box, var(--ctl-rim-cyan) border-box;
  box-shadow: var(--ctl-glow-active);
}
.icefishin-page .ice-leave-button:focus-visible { outline-color: var(--cyan); }

/* HUD chips: the shell's glass with a soft brand rim. */
.icefishin-page .ice-hud .hud-chip {
  border-color: transparent;
  background: var(--ctl-fill) padding-box, var(--ctl-rim-soft) border-box;
}
.icefishin-page .ice-hud .hud-chip span { color: #9fefff; }
/* end Infin8 landing theme */

/* ==========================================================================
   Infin8 HUD dock + bottom band.

   BOTTOM BAND, bottom-centre of the stage (#ice-footer in index.html):
     [ hole status ] [ dock: bag · snowmobile · sled · ride · Fin · chat · voice · settings · Control Panel ]
   The footer is one line when both fit and wraps to two (status over dock) when they do not. shops-ui.js measures
   it into --footer-h, and the movement / action controls sit above it (portrait, desktop) or beside it (phones on
   their side), so nothing in the band overlaps.

   The dock is ONE quick-action row of icon buttons, each one tap for its main action. Bag and Settings expand into
   the single panel (#ice-panel: fish, sled, vehicle, food, equipment, style, settings). shops-ui.js builds bag,
   snowmobile, sled, ride and settings; fin-companion.js, staff-panel.js and the World chat / voice clients mount
   their own buttons into the same row, so `order` below sets the layout. No backdrop-filter on the dock: it is
   costly on phones and would turn the dock into the containing block for fixed-position children.
   ========================================================================== */
.icefishin-page .icefishin-stage {
  --status-floor: max(8px, env(safe-area-inset-bottom));
  --dock-btn: 44px;
  --controls-bottom: calc(var(--status-floor) + var(--footer-h, 52px) + 10px);
}
.icefishin-page .icefishin-stage > .ice-footer {
  position: absolute; left: var(--band-side); right: var(--band-side); bottom: var(--status-floor); z-index: 12;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; pointer-events: none;
}
.icefishin-page .icefishin-stage .ice-footer > .ice-hud-status {
  flex: 0 1 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  max-width: 100%; min-width: 0; min-height: 44px; padding: 5px 12px; box-sizing: border-box; border-radius: 12px; pointer-events: none;
  border-color: transparent; background: var(--ctl-fill) padding-box, var(--ctl-rim-soft) border-box; backdrop-filter: none;
}
.icefishin-page .icefishin-stage .ice-footer > .ice-hud-status strong { width: 100%; text-align: center; font-size: .76rem; line-height: 1.2; }
.icefishin-page .icefishin-stage .ice-footer > .ice-hud-status span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .58rem; color: #9fefff; }

.icefishin-page .icefishin-stage .ice-dock {
  --wc-ok: var(--if-ok); --wc-ink: var(--if-ink); --wc-warn: var(--if-amber);
  flex: 0 1 auto; display: flex; align-items: center; gap: 3px; max-width: 100%; min-width: 0; padding: 3px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 16px;
  background: var(--ctl-fill) padding-box, var(--ctl-rim-soft) border-box;
  box-shadow: var(--ctl-shadow), var(--ctl-inset);
  overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none; pointer-events: auto; touch-action: pan-x;
}
.icefishin-page .icefishin-stage .ice-dock::-webkit-scrollbar { display: none; }
.icefishin-page .icefishin-stage .ice-dock-comms { display: contents; }
.icefishin-page .icefishin-stage .ice-dock :is(.ice-dock-button, .wc-dock-button, .i8cp-entry) {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0;
  width: var(--dock-btn); min-width: var(--dock-btn); height: var(--dock-btn); min-height: var(--dock-btn); padding: 0; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 12px;
  background: rgba(255, 255, 255, .05) padding-box, linear-gradient(135deg, rgba(182, 108, 255, .3), rgba(99, 230, 255, .3)) border-box;
  box-shadow: none; color: var(--ctl-text); font: 800 .7rem/1 system-ui, sans-serif; letter-spacing: 0; text-transform: none;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.icefishin-page .icefishin-stage .ice-dock [hidden] { display: none !important; }
.icefishin-page .icefishin-stage .ice-dock :is(.if-icon, .wc-dock-button svg) { width: 22px; height: 22px; flex: none; color: #bff6ff; }
.icefishin-page .icefishin-stage .ice-dock .fin-mark { width: 24px; height: 24px; font-size: 1.15rem; }
.icefishin-page .icefishin-stage .ice-dock .i8cp-entry img { width: 24px; height: 24px; border-radius: 6px; }
/* Icon-first: the text labels stay for assistive tech (every button also carries aria-label + title). */
.icefishin-page .icefishin-stage .ice-dock :is(.ice-dock-button > span:not(.fin-mark), .i8cp-entry > span, .wc-label) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Keyboard hints: a corner badge on mouse / keyboard layouts (hidden on touch by the kbd rule above). */
.icefishin-page .icefishin-stage .ice-dock kbd,
.icefishin-page .icefishin-stage .ice-dock :is(.wc-chat-toggle, .wv-toggle)::after {
  position: absolute; right: 1px; bottom: 1px; min-width: 13px; padding: 1px 2px; box-sizing: border-box; border: 0; border-radius: 5px;
  background: rgba(5, 8, 20, .92); color: #9fefff; font: 800 .56rem/1 system-ui, sans-serif; text-align: center; pointer-events: none;
}
@media (min-width: 721px) and (pointer: fine) {
  .icefishin-page .icefishin-stage .ice-dock .wc-chat-toggle::after { content: "T"; }
  .icefishin-page .icefishin-stage .ice-dock .wv-toggle::after { content: "V"; }
}
.icefishin-page .icefishin-stage .ice-dock .wc-badge { top: 1px; right: 1px; min-width: 15px; height: 15px; padding: 0 4px; font-size: .58rem; line-height: 15px; }
html[data-hockey] .icefishin-page .icefishin-stage .ice-dock .ice-bag { display: none; }
/* Row order. */
.icefishin-page .icefishin-stage .ice-dock .ice-bag { order: 1; }
.icefishin-page .icefishin-stage .ice-dock .ice-vehicle-toggle { order: 2; }
.icefishin-page .icefishin-stage .ice-dock .ice-sled-toggle { order: 3; }
.icefishin-page .icefishin-stage .ice-dock .ice-ride-toggle { order: 4; }
.icefishin-page .icefishin-stage .ice-dock .fin-dock-button { order: 5; }
.icefishin-page .icefishin-stage .ice-dock .fin-talk-button { order: 6; }
.icefishin-page .icefishin-stage .ice-dock .wc-chat-toggle { order: 7; }
.icefishin-page .icefishin-stage .ice-dock .wv-toggle { order: 8; }
.icefishin-page .icefishin-stage .ice-dock .ice-settings-toggle { order: 9; }
.icefishin-page .icefishin-stage .ice-dock .i8cp-entry { order: 10; }
/* States. Outlines sit inside the button because the row clips its overflow. */
.icefishin-page .icefishin-stage .ice-dock :is(.ice-dock-button, .wc-dock-button, .i8cp-entry):is(:hover, :focus-visible) {
  background: rgba(99, 230, 255, .12) padding-box, var(--ctl-rim-cyan) border-box;
}
.icefishin-page .icefishin-stage .ice-dock :is(.ice-dock-button, .wc-dock-button, .i8cp-entry):focus-visible { outline: 2px solid #7ff0ff; outline-offset: -2px; }
.icefishin-page .icefishin-stage .ice-dock .fin-dock-button[data-state="on"] { background: rgba(77, 232, 255, .1) padding-box, var(--ctl-rim-cyan) border-box; }
.icefishin-page .icefishin-stage .ice-dock .ice-sled-toggle[data-attached="false"] { background: rgba(227, 168, 87, .14) padding-box, linear-gradient(135deg, var(--if-amber), rgba(182, 108, 255, .6)) border-box; }
.icefishin-page .icefishin-stage .ice-dock .wv-toggle[data-voice="on"] { background: rgba(143, 201, 164, .14) padding-box, linear-gradient(135deg, var(--if-ok), rgba(99, 230, 255, .7)) border-box; }
.icefishin-page .icefishin-stage .ice-dock .wv-toggle[data-voice="on"] svg { color: var(--if-ok); }
.icefishin-page .icefishin-stage .ice-dock .wv-toggle[data-voice="live"] { background: linear-gradient(180deg, #b6e3c4, var(--if-ok)); }
.icefishin-page .icefishin-stage .ice-dock .wv-toggle[data-voice="live"] svg { color: var(--if-ink); }
.icefishin-page .icefishin-stage .ice-dock .i8cp-entry { background: linear-gradient(135deg, rgba(76, 40, 160, .85), rgba(16, 70, 110, .85)) padding-box, var(--ctl-rim-violet) border-box; }
.icefishin-page .icefishin-stage .ice-dock :is(.ice-dock-button, .wc-dock-button, .i8cp-entry):is(:active, [aria-expanded="true"], [data-mounted="true"], [data-riding="true"]) {
  background: var(--ctl-fill-active) padding-box, var(--ctl-rim-cyan) border-box; color: #fff;
}
/* Fin push-to-talk (touch, opt-in): a hold button, so it keeps touch-action none; mic glyph instead of its text. */
.icefishin-page .icefishin-stage .ice-dock .fin-talk-button { font-size: 0; touch-action: none; background: rgba(155, 109, 255, .2) padding-box, var(--ctl-rim-violet) border-box; }
.icefishin-page .icefishin-stage .ice-dock .fin-talk-button::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V22h2v-3.1A7 7 0 0 0 19 12z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15a3 3 0 0 0 3-3V6a3 3 0 0 0-6 0v6a3 3 0 0 0 3 3zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.9V22h2v-3.1A7 7 0 0 0 19 12z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Settings tab of the expanded panel (shops-ui.js settingsView): game-sound volume slider. */
.ice-setting { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0 0 6px; padding: 6px 12px; border-radius: 10px; border: 1px solid rgba(160, 208, 228, .12); background: rgba(8, 16, 22, .55); }
.ice-setting label { flex: 0 0 auto; font: 700 .86rem/1 system-ui, sans-serif; }
.ice-setting input[type="range"] { flex: 1; min-width: 0; height: 32px; margin: 0; accent-color: var(--cyan, #63e6ff); touch-action: pan-y; }
.ice-setting input[type="range"]:focus-visible { outline: 2px solid var(--if-frost-bright); outline-offset: 2px; }
.ice-setting output { flex: 0 0 auto; min-width: 3.4em; text-align: right; color: var(--if-frost-bright); font: 700 .82rem/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.ice-item-icon .fin-mark { display: grid; place-items: center; width: 100%; height: 100%; font: 900 1.2rem/1 system-ui, sans-serif; color: #4de8ff; }
.ice-item-icon img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; }
.ice-item-icon > svg:not(.if-icon) { display: block; width: 100%; height: 100%; }

/* Controls sit above the footer; d-pad and aux buttons keep 44px targets. */
.icefishin-page .icefishin-stage .ice-controls { bottom: var(--controls-bottom); }
.icefishin-page .icefishin-stage .ice-controls :is(.ice-move, .ice-aux-button) { min-width: 44px; min-height: 44px; }
.icefishin-page .icefishin-stage :is(.ice-interact, .wc-icon-button) { min-width: 44px; min-height: 44px; box-sizing: border-box; }
.icefishin-page .icefishin-stage .ice-dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); }
/* Landmark prompt (Tackle Shop, Chip Truck, Smoke Hut, rink): floats over the aux column so the row never shifts. */
.icefishin-page .icefishin-stage .ice-controls .ice-aux { position: relative; }
.icefishin-page .icefishin-stage .ice-controls .ice-interact {
  --ctl-rim: linear-gradient(135deg, var(--if-brass), rgba(99, 230, 255, .85));
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  justify-content: center; gap: 6px; padding: 0 12px 0 8px; font-size: .78rem; white-space: nowrap; pointer-events: auto;
}
.icefishin-page .icefishin-stage .ice-controls .ice-interact .if-icon { width: 22px; height: 22px; flex: none; color: var(--if-brass); }
.icefishin-page .icefishin-stage .ice-controls .ice-interact span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Fin menu and the chat / voice panels open above the footer instead of beside the old right-edge stack. */
.icefishin-page .icefishin-stage .fin-menu { right: var(--band-side); }
@media (min-width: 641px) {
  .icefishin-page .icefishin-stage .world-comms .wc-panel {
    top: auto; right: var(--band-side); bottom: calc(var(--status-floor) + var(--footer-h, 52px) + 10px);
    width: min(340px, calc(100% - 2 * var(--band-side)));
    max-height: max(260px, min(430px, calc(100% - var(--hud-top-h, 140px) - var(--footer-h, 52px) - var(--status-floor) - 20px)));
  }
}
@media (max-width: 640px) {
  .icefishin-page .icefishin-stage .world-comms .wc-panel { top: var(--hud-top-h, 120px); left: var(--band-side); right: var(--band-side); }
}

/* ---- Top band on phones: each corner is at most two tidy rows of chips (Leave lake over Score · Catch on the
   left; Level · Coins over Minnows on the right). While a mini-game holds the top centre on a narrow portrait
   screen the corners fall back to single columns so the dial keeps its room. ---- */
@media (max-width: 720px), (orientation: landscape) and (max-height: 620px) {
  html[data-game-state="playing"] .icefishin-page .icefishin-stage :is(.ice-hud-run, .ice-hud-career) { flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 4px; max-width: 168px; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud-career { justify-content: flex-end; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage :is(.ice-hud-run, .ice-hud-career) .hud-chip { flex: 1 1 auto; }
}
@media (max-width: 720px) {
  html[data-game-state="playing"] .icefishin-page .icefishin-stage[data-minigame] :is(.ice-hud-run, .ice-hud-career) { flex-direction: column; flex-wrap: nowrap; }
}

/* ---- Phone / touch controls: thumb stick bottom-left, action cluster bottom-right, footer between or below.
   The cluster is a fixed grid over the primary button, so contextual buttons appear in their own slot and nothing
   jumps when one shows or hides:
        [   landmark prompt    ]
        [ MINNOW   ] [ POKE    ]
        [ SNOWBALL ] [ DRILL   ]      SNOWBALL / REEL UP / PASS share a slot (never shown together)
        [  DROP LINE (primary) ]      SHOOT takes the primary slot during hockey
   ---- */
@media (max-width: 720px), (pointer: coarse) {
  .icefishin-page .icefishin-stage {
    --dock-btn: 40px;
    --controls-bottom: calc(var(--status-floor) + var(--footer-h, 96px) + 10px);
    --stick: clamp(132px, 37vw, 160px);
    --act-w: clamp(124px, 36vw, 156px); --act-h: 68px; --aux-row: 48px; --aux-main: 56px;
  }
  .icefishin-page .icefishin-stage .ice-footer > .ice-hud-status { flex-basis: 260px; min-height: 40px; padding: 4px 10px; }
  .icefishin-page .icefishin-stage .ice-dock { gap: 2px; padding: 2px; }
  .icefishin-page .icefishin-stage .ice-controls { left: 0; right: 0; width: auto; transform: none; display: block; height: 0; }
  .icefishin-page .icefishin-stage :is(.ice-dpad, .ice-stick) { position: absolute; left: var(--band-side); bottom: 0; }
  .icefishin-page .icefishin-stage .ice-stick { width: var(--stick); height: var(--stick); }
  .icefishin-page .icefishin-stage .ice-stick-knob { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .icefishin-page .icefishin-stage .ice-controls .ice-action {
    position: absolute; right: var(--band-side); bottom: 0; width: var(--act-w); min-width: 0; height: var(--act-h); min-height: 0;
    margin: 0; padding: 0 8px; border-radius: 18px; font-size: .86rem; line-height: 1.1;
  }
  .icefishin-page .icefishin-stage .ice-controls .ice-aux {
    position: absolute; right: var(--band-side); bottom: 0; width: var(--act-w); margin: 0;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 44px var(--aux-row) var(--aux-main) var(--act-h); gap: 6px;
    grid-template-areas: "go go" "minnow poke" "second drill" "main main";
  }
  .icefishin-page .icefishin-stage .ice-controls .ice-aux > button {
    width: 100%; min-width: 0; height: 100%; min-height: 0; padding: 0 4px; border-radius: 12px; font-size: .68rem; line-height: 1.1; white-space: normal;
  }
  .icefishin-page .icefishin-stage .ice-controls :is(#ice-snowball, #ice-reelup, [data-extra-action="pass"]) { grid-area: second; }
  .icefishin-page .icefishin-stage .ice-controls #ice-drill { grid-area: drill; }
  .icefishin-page .icefishin-stage .ice-controls #ice-minnow { grid-area: minnow; }
  .icefishin-page .icefishin-stage .ice-controls #ice-jump { grid-area: poke; }
  .icefishin-page .icefishin-stage .ice-controls [data-extra-action="poke"] { grid-area: poke; }
  .icefishin-page .icefishin-stage .ice-controls [data-extra-action="shoot"] { grid-area: main; border-radius: 18px; font-size: .86rem; }
  .icefishin-page .icefishin-stage .ice-controls .ice-interact { grid-area: go; position: static; transform: none; }
  .icefishin-page .icefishin-stage .ice-thief-alert { top: auto; bottom: calc(44px + var(--aux-row) + var(--aux-main) + var(--act-h) + 30px); }
  /* Voice push-to-talk: above the stick, clear of the action cluster. */
  .icefishin-page .icefishin-stage .world-comms .wv-ptt { left: var(--band-side); right: auto; bottom: calc(var(--controls-bottom) + var(--stick) + 12px); width: 64px; height: 64px; }
  .icefishin-page .icefishin-stage .fin-menu { left: var(--band-side); width: auto; }
}
/* Phones on their side: the stick and the cluster drop to the bottom corners and the footer sits between them. */
@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  .icefishin-page .icefishin-stage {
    --controls-bottom: var(--status-floor);
    --stick: clamp(120px, 34vh, 144px);
    --act-w: 132px; --act-h: 58px; --aux-row: 40px; --aux-main: 46px;
    --thumb-w: 160px;
  }
  .icefishin-page .icefishin-stage > .ice-footer { left: calc(var(--band-side) + var(--thumb-w)); right: calc(var(--band-side) + var(--thumb-w)); }
  .icefishin-page .icefishin-stage .ice-controls .ice-aux { grid-template-rows: 40px var(--aux-row) var(--aux-main) var(--act-h); }
  .icefishin-page .icefishin-stage .ice-thief-alert { bottom: calc(var(--footer-h, 96px) + 14px); }
  .icefishin-page .icefishin-stage .world-feed { bottom: auto; }
  .icefishin-page .icefishin-stage .world-comms .wc-panel { top: var(--band-top); bottom: var(--status-floor); max-height: none; }
}
/* ---- Snocross racing (race-ui.js): top-centre prompt, countdown, live readout, chooser / lobby / results ---- */
.ice-race { position: absolute; left: 50%; top: calc(var(--hud-top-h, 140px) + 4px); transform: translateX(-50%); z-index: 11; display: grid; justify-items: center; gap: 6px; width: max-content; max-width: min(calc(100% - 2 * var(--band-side, 10px)), 460px); pointer-events: none; }
.ice-race > [hidden] { display: none; }
.ice-race-hud { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 4px; border-radius: var(--if-radius); border: 1px solid var(--if-line); background: var(--if-glass); }
.ice-race-hud .hud-chip { min-width: 54px; padding: 4px 8px; border-radius: 9px; }
.ice-race-hud .hud-chip span { display: block; color: var(--if-frost); font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ice-race-hud .hud-chip strong { color: var(--if-snow); font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ice-race-count { min-width: 96px; padding: 6px 18px; border-radius: var(--if-radius); border: 1px solid var(--if-brass); background: var(--if-glass-strong); color: var(--if-brass); font: 900 2.4rem/1 system-ui, sans-serif; letter-spacing: .04em; text-align: center; font-variant-numeric: tabular-nums; box-shadow: var(--if-shadow); }
.ice-race-flash { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--if-line-strong); background: var(--if-glass-strong); color: var(--if-snow); font: 700 .8rem/1.25 system-ui, sans-serif; text-align: center; }
.ice-race-panel { pointer-events: auto; width: min(340px, calc(100vw - 28px)); padding: 12px 14px; border-radius: var(--if-radius); border: 1px solid var(--if-line-strong); background: linear-gradient(180deg, rgba(14, 28, 37, .96), var(--if-glass-strong)); color: var(--if-snow); box-shadow: var(--if-shadow); }
.ice-race-panel h2 { margin: 0 0 4px; font-size: 1.05rem; }
.ice-race-panel h2 em { margin-left: 6px; color: var(--if-frost); font-style: normal; font-size: .8rem; }
.ice-race-panel .ice-panel-lead, .ice-race-panel .ice-panel-fine { margin: 6px 0; }
.ice-race-panel .ice-panel-fine b { color: var(--if-snow); font-variant-numeric: tabular-nums; }
.ice-race-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ice-race-actions .ice-item-buy { flex: 1 1 auto; }
.ice-race-list { margin: 6px 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ice-race-list li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 6px 9px; border-radius: 9px; border: 1px solid var(--if-line); background: rgba(8, 16, 22, .6); font-size: .86rem; }
.ice-race-list li.is-me { border-color: var(--if-brass); }
.ice-race-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ice-race-list li b { font-variant-numeric: tabular-nums; }
.ice-race-list li small { grid-column: 1 / -1; color: var(--if-steel); font-size: .72rem; }
.ice-race-label { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; padding: 4px 9px; border-radius: 6px; border: 1px solid rgba(150, 170, 180, .55); background: rgba(18, 22, 27, .72); color: #e8eef2; font: 600 12px/1.2 system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.ice-race-label[hidden] { display: none; }
/* Career and landing surfaces inherit the Apps palette, including injected journal cards. */
.icefishin-page :is(.ice-side-column, .ice-career-card, .ice-equipment-entry, .ice-journal-entry, .inventory-row) {
  background: linear-gradient(145deg, rgba(49,215,235,.05), rgba(169,130,255,.06)), var(--if-glass-strong);
  border-color: rgba(49,215,235,.22);
  color: var(--if-snow);
}
.icefishin-page :is(.ice-equipment-sprite, .ice-item-icon) { color: var(--if-frost); background-color: #111624; }
.icefishin-page .ice-journal-entry.is-recorded { border-color: rgba(169,130,255,.48); }
.icefishin-page .ice-journal-entry strong { color: var(--if-snow); }
.icefishin-page .ice-journal-entry span { color: var(--muted, #929bb3); }
.icefishin-page .ice-journal-fish { display: block; width: 100%; height: 88px; object-fit: contain; margin-bottom: 8px; }
.icefishin-page .ice-inventory-fish { width: 72px; height: 48px; object-fit: contain; flex: 0 0 auto; }
/* Career rows size from their content area, including embedded browsers. Fish names keep a readable column. */
.icefishin-page .ice-side-column {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start;
}
.icefishin-page .ice-side-column > :is(.ice-band-card, #ice-species-journal, #ice-equipment-locker) { grid-column: 1 / -1; }
.icefishin-page .ice-side-column > .side-card { min-width: 0; height: auto; }
.icefishin-page #inventory-list { max-height: min(520px, 65vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.icefishin-page .inventory-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
.icefishin-page .inventory-row .ice-inventory-fish { grid-row: span 2; width: 64px; height: 46px; }
.icefishin-page .inventory-row > div { min-width: 0; }
.icefishin-page .inventory-row :is(strong, span) { overflow-wrap: normal; word-break: normal; }
.icefishin-page .inventory-row > b { grid-column: 2; font-size: .82rem; }
.icefishin-page .inventory-row:not(:has(img)) { grid-template-columns: minmax(0, 1fr); }
.icefishin-page .inventory-row:not(:has(img)) > b { grid-column: 1; }
.icefishin-page #ice-equipment-locker .ice-equipment-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.icefishin-page .ice-controls .ice-jump-button { --ctl-rim: var(--ctl-rim-cyan); color: var(--if-frost); }
/* Fullscreen mouse play keeps manual controls legible and anchored at the lower corners. */
@media (min-width: 900px) and (pointer: fine) {
  .icefishin-page .icefishin-stage:fullscreen { --dock-btn: 54px; --controls-bottom: calc(var(--status-floor) + var(--footer-h, 64px) + 18px); }
  .icefishin-page .icefishin-stage:fullscreen .ice-controls { left: 24px; right: 24px; width: auto; transform: none; justify-content: space-between; gap: 18px; }
  .icefishin-page .icefishin-stage:fullscreen .ice-dpad { grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 60px); gap: 6px; }
  .icefishin-page .icefishin-stage:fullscreen .ice-controls .ice-move { min-width: 64px; min-height: 60px; font-size: 1.3rem; }
  .icefishin-page .icefishin-stage:fullscreen .ice-controls .ice-aux { margin-bottom: 0; gap: 10px; }
  .icefishin-page .icefishin-stage:fullscreen .ice-controls .ice-aux-button { min-width: 116px; min-height: 54px; font-size: .88rem; }
  .icefishin-page .icefishin-stage:fullscreen .ice-controls .ice-action { min-width: 172px; min-height: 76px; margin-bottom: 0; font-size: 1rem; }
  .icefishin-page .icefishin-stage:fullscreen .ice-dock > :is(button, .ice-dock-button),
  .icefishin-page .icefishin-stage:fullscreen .ice-dock :is(.wc-chip, .wv-chip) { min-width: 54px; min-height: 54px; }
}
.icefishin-page #catch-sprite[data-model="3d"] { background-size: contain; background-position: center; background-repeat: no-repeat; }
.icefishin-page :is(.ice-item-buy.is-primary, .ice-panel-tab.is-active, .ice-interact) {
  background: linear-gradient(135deg, var(--if-frost), #b4f7ff); border-color: var(--if-frost); color: #08111c;
}
/* The lake feed shares the row under the top band: it steps down while the race readout is showing. */
html[data-game-state="playing"] .icefishin-page .icefishin-stage[data-race] .world-feed { top: calc(var(--hud-top-h, 140px) + 64px); }
@media (max-width: 720px), (orientation: landscape) and (max-height: 620px) {
  .ice-race-count { font-size: 1.8rem; padding: 4px 14px; }
  .ice-race-hud .hud-chip { min-width: 46px; padding: 3px 6px; }
  .ice-race-hud .hud-chip strong { font-size: .8rem; }
}

/* Compact lake radar stays above the action dock and opposite the flasher. */
.ice-map-panel{position:absolute;z-index:24;top:82px;right:110px;width:164px;max-height:calc(100% - 195px);overflow:auto;background:linear-gradient(145deg,#10142ceb,#1b1033e6);border:1px solid var(--if-frost,#31d7eb);border-radius:16px;padding:7px;color:#dffaff;box-shadow:0 0 18px #8b5cf633,0 5px 20px #0006;pointer-events:none}
.ice-map-panel[hidden]{display:none}html[data-ice-panel] .ice-map-panel{display:none}.ice-map-panel header{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;letter-spacing:.04em;color:var(--if-frost,#31d7eb)}.ice-map-panel header button{min-width:44px;min-height:44px;pointer-events:auto}.ice-map-panel[data-expanded="false"] header button{display:none}.ice-map-panel svg{display:block;width:100%;max-height:240px;filter:drop-shadow(0 0 3px #31d7eb33)}.ice-map-panel svg text{font:700 13px system-ui}.ice-map-panel[data-expanded="false"] :is(.ice-map-legend,.ice-map-roster){display:none}.ice-map-panel[data-expanded="true"]{width:min(280px,calc(100% - 24px));pointer-events:auto}.ice-map-legend{font-size:11px;line-height:1.5;color:#cebaf7}.ice-map-roster{padding-left:16px;font-size:12px;overflow-wrap:anywhere;max-height:65px;overflow:auto}.ice-map-toggle{order:8;min-width:48px;min-height:48px;font-size:24px}
@media(max-width:700px){.icefishin-page .icefishin-stage .ice-controls .ice-move{min-width:58px;min-height:58px;font-size:1.1rem}.ice-map-panel{top:112px;right:8px;width:112px;padding:5px;max-height:calc(100% - 205px)}.ice-map-panel header{font-size:10px}.ice-map-panel[data-expanded="true"]{width:min(220px,calc(100% - 24px))}.ice-map-panel svg text{font-size:15px}}
@media(max-height:500px){.ice-map-panel{top:112px;right:8px;width:100px;max-height:calc(100% - 160px)}.ice-map-panel[data-expanded="true"]{width:190px}.ice-map-panel svg{max-height:150px}}
.ice-race-board-prompt{position:absolute;right:0;bottom:58px;min-height:48px;padding:8px 14px}.ice-race-board-table{width:100%;font-size:14px;border-collapse:collapse}.ice-race-board-table th,.ice-race-board-table td{text-align:left;padding:10px 5px;border-bottom:1px solid #8ba3b433}.ice-race-board-table td:first-child{overflow-wrap:anywhere;max-width:180px}

/* Arcade profile touch preferences resize the actual hit areas, rather than scaling the whole lake HUD. */
.icefishin-page .icefishin-stage {
  container-type: inline-size;
  --ice-control-scale: clamp(.7, var(--touch-scale, 1), 1.4);
  --ice-control-opacity: clamp(.45, var(--touch-opacity, .92), 1);
}
.icefishin-page .icefishin-stage .ice-controls,
.icefishin-page .icefishin-stage .world-comms .wv-ptt { opacity: var(--ice-control-opacity); }
@media (min-width: 721px) and (pointer: fine) {
  .icefishin-page .icefishin-stage .ice-controls { width: min(calc(430px * var(--ice-control-scale)), calc(100% - 20px)); }
  .icefishin-page .icefishin-stage .ice-dpad { grid-template-columns: repeat(3, max(44px, calc(44px * var(--ice-control-scale)))); grid-template-rows: repeat(3, max(44px, calc(44px * var(--ice-control-scale)))); }
  .icefishin-page .icefishin-stage .ice-controls .ice-action { min-width: max(110px, calc(128px * var(--ice-control-scale))); min-height: max(44px, calc(58px * var(--ice-control-scale))); }
  .icefishin-page .icefishin-stage .ice-controls .ice-aux-button { min-width: max(64px, calc(84px * var(--ice-control-scale))); min-height: max(44px, calc(44px * var(--ice-control-scale))); }
  html[data-touch-handedness="left"] .icefishin-page .icefishin-stage .ice-controls { flex-direction: row-reverse; }
  html[data-touch-handedness="left"] .icefishin-page .icefishin-stage .ice-controls .ice-aux { margin-left: 0; margin-right: auto; }
  .icefishin-page .icefishin-stage .world-comms .wv-ptt { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--controls-bottom) + max(144px, calc(132px * var(--ice-control-scale))) + 12px); width: 44px; height: 44px; }
}
@media (min-width: 900px) and (pointer: fine) {
  .icefishin-page .icefishin-stage:fullscreen .ice-controls { width: auto; }
  .icefishin-page .icefishin-stage:fullscreen .ice-dpad { grid-template-columns: repeat(3, max(44px, calc(64px * var(--ice-control-scale)))); grid-template-rows: repeat(3, max(44px, calc(60px * var(--ice-control-scale)))); }
  .icefishin-page .icefishin-stage:fullscreen .ice-controls .ice-move { min-width: max(44px, calc(64px * var(--ice-control-scale))); min-height: max(44px, calc(60px * var(--ice-control-scale))); }
  .icefishin-page .icefishin-stage:fullscreen .ice-controls .ice-action { min-width: max(110px, calc(172px * var(--ice-control-scale))); min-height: max(44px, calc(76px * var(--ice-control-scale))); }
  .icefishin-page .icefishin-stage:fullscreen .ice-controls .ice-aux-button { min-width: max(64px, calc(116px * var(--ice-control-scale))); min-height: max(44px, calc(54px * var(--ice-control-scale))); }
  .icefishin-page .icefishin-stage:fullscreen .world-comms .wv-ptt { bottom: calc(var(--controls-bottom) + 12px); }
}
@media (max-width: 720px), (pointer: coarse) {
  .icefishin-page .icefishin-stage {
    /* A large saved preference fits the stage's two corners on narrow embedded browsers too. */
    --control-corner-max: calc(50cqw - var(--band-side) - 24px);
    --stick: min(calc(clamp(132px, 37cqw, 160px) * var(--ice-control-scale)), var(--control-corner-max));
    --act-w: min(calc(clamp(124px, 36cqw, 156px) * var(--ice-control-scale)), var(--control-corner-max));
    --act-h: clamp(48px, calc(68px * var(--ice-control-scale)), 80px);
    --aux-row: clamp(44px, calc(48px * var(--ice-control-scale)), 56px);
    --aux-main: clamp(48px, calc(56px * var(--ice-control-scale)), 64px);
  }
  .icefishin-page .icefishin-stage .ice-stick-knob { width: clamp(44px, calc(58px * var(--ice-control-scale)), 72px); height: clamp(44px, calc(58px * var(--ice-control-scale)), 72px); margin: 0; translate: -50% -50%; }
  .icefishin-page .icefishin-stage .ice-dpad { --pad-cell: max(44px, min(calc(58px * var(--ice-control-scale)), calc((var(--control-corner-max) - 8px) / 3))); grid-template-columns: repeat(3, var(--pad-cell)); grid-template-rows: repeat(3, var(--pad-cell)); }
  .icefishin-page .icefishin-stage .ice-controls .ice-move { min-width: 44px; min-height: 44px; }
  .icefishin-page .icefishin-stage .world-comms .wv-ptt { bottom: calc(var(--controls-bottom) + max(var(--stick), 140px) + 12px); }
  html[data-touch-handedness="left"] .icefishin-page .icefishin-stage :is(.ice-dpad, .ice-stick) { left: auto; right: var(--band-side); }
  html[data-touch-handedness="left"] .icefishin-page .icefishin-stage .ice-controls :is(.ice-action, .ice-aux) { left: var(--band-side); right: auto; }
  /* Keep voice between the swapped clusters, away from the radar above the right corner. */
  html[data-touch-handedness="left"] .icefishin-page .icefishin-stage .world-comms .wv-ptt { left: 50%; right: auto; transform: translateX(-50%); bottom: calc(var(--controls-bottom) + 12px); width: 44px; height: 44px; }
}
@container (max-width: 340px) {
  /* Three 44px manual pad cells still fit; voice moves above them when the center gap is narrower. */
  html[data-touch-handedness="left"] .icefishin-page .icefishin-stage .world-comms .wv-ptt { left: auto; right: var(--band-side); transform: none; bottom: calc(var(--controls-bottom) + max(var(--stick), 140px) + 12px); }
}
@media (pointer: coarse) and (orientation: landscape) and (max-height: 620px) {
  .icefishin-page .icefishin-stage {
    --stick: min(calc(clamp(120px, 34vh, 144px) * var(--ice-control-scale)), var(--control-corner-max), 144px);
    --act-w: min(calc(132px * var(--ice-control-scale)), var(--control-corner-max), 156px);
    /* Portrait growth cannot consume the shallow landscape HUD band. */
    --act-h: clamp(44px, calc(58px * var(--ice-control-scale)), 58px);
    --aux-row: 44px; --aux-main: clamp(44px, calc(46px * var(--ice-control-scale)), 46px);
    --thumb-w: max(160px, calc(var(--stick) + 16px));
  }
}
@media (min-width: 721px) and (max-height: 500px) {
  .ice-map-panel { top: 8px; right: calc(var(--band-side) + 180px); }
}

/* Gameplay HUD stays below interactive windows, including Fin and expanded radar. */
.icefishin-stage .ice-map-panel { z-index: 14; top: 8px; right: calc(var(--band-side, 8px) + 104px); width: 128px; max-height: none; padding: 0; border: 0; border-radius: 10px; background: transparent; box-shadow: none; overflow: visible; }
.icefishin-stage .ice-map-panel svg { width: 100%; height: auto; max-height: none; aspect-ratio: 1; filter: none; }
.icefishin-stage .ice-map-panel svg text { font: 700 10px system-ui; }
.icefishin-stage .ice-map-panel svg text[font-size] { font-size: 6.5px; }
.icefishin-stage .ice-map-panel[data-expanded="true"] { z-index: 28; }
.icefishin-stage .ice-map-panel :is(.ice-map-legend,.ice-map-roster) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.icefishin-stage :is(.ice-panel, .ice-race-panel) { z-index: 30; }
.icefishin-stage .ice-race { z-index: 30; }
.icefishin-stage .ice-interact { display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: .8rem; }
.icefishin-stage .ice-interact small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .65rem; }
.icefishin-page .icefishin-stage .ice-controls .ice-interact { width: 100%; min-height: 44px; border-radius: 10px; padding: 5px 8px; color: var(--if-frost); background: var(--ctl-fill) padding-box, var(--ctl-rim) border-box; }
.ice-livery-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,128px),1fr)); gap: 8px; }
.ice-livery-card { display: grid; gap: 6px; min-width: 0; padding: 8px; border: 1px solid var(--if-line); border-radius: 10px; background: rgba(9,18,28,.6); }
.ice-livery-card img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; border-radius: 6px; }
.ice-livery-card small { color: var(--if-steel); font-size: .72rem; }
.icefishin-page .icefishin-stage .fin-menu { position: fixed; z-index: 32; left: auto; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); width: min(320px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); }
.icefishin-stage:has(.fin-menu:not([hidden])) .ice-map-panel {
  visibility: hidden;
  pointer-events: none;
}

/* One compact stats surface per corner; the world stays open between them. */
.icefishin-page .icefishin-stage .ice-footer { padding: 4px; border: 1px solid var(--if-line-strong); border-radius: 12px; background: var(--ctl-fill); }
.icefishin-page .icefishin-stage .ice-footer :is(.ice-hud-status,.ice-dock) { border: 0; background: transparent; box-shadow: none; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage :is(.ice-hud-run,.ice-hud-career) { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; width: 136px; max-width: 136px; padding: 5px 8px; border: 1px solid var(--if-line-strong); border-radius: 10px; background: var(--ctl-fill); box-shadow: 0 3px 12px #0004; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip:has(:is(#hud-streak,#hud-pack,#hud-minnows)) { display: flex; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip + .hud-chip { border-top: 1px solid var(--if-line); }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip span { font-size: .55rem; letter-spacing: .04em; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip strong { font-size: .74rem; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud-run { margin-top: 0; display: grid; grid-template-columns: minmax(0,1fr) 52px; column-gap: 6px; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud-run .hud-chip { grid-column: 1 / -1; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud-run .hud-chip:first-child { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud-run .ice-leave-button { position: static; grid-column: 2; grid-row: 1; width: 52px; min-width: 44px; height: 44px; min-height: 44px; padding: 4px; margin: 0; font-size: .58rem; background: transparent; border: 1px solid var(--if-line); box-shadow: none; pointer-events: auto; }
.icefishin-page .icefishin-stage .ice-race { top: 8px; }
.icefishin-page .icefishin-stage :is(.ice-flasher,.ice-fight) { left: var(--band-side); right: auto; top: calc(var(--hud-top-h, 130px) + 8px); transform: none; max-width: min(240px, 32cqw); }
.icefishin-page .icefishin-stage .world-feed { left: var(--band-side); right: auto; transform: none; max-width: min(240px, 32cqw); }
.icefishin-page .icefishin-stage .ice-thief-alert { left: var(--band-side); top: auto; bottom: calc(100% + 8px); transform: none; max-width: min(240px, 32cqw); white-space: normal; }
.icefishin-page .icefishin-stage .ice-reveal { left: auto; right: var(--band-side); top: calc(var(--hud-top-h, 130px) + 8px); transform: none; width: min(240px, 32cqw); grid-template-columns: minmax(0,1fr); padding: 8px; }
.icefishin-page .icefishin-stage .ice-reveal-sprite { max-height: 72px; max-width: 100%; }
@media (min-width: 721px) and (pointer: fine) {
  .icefishin-page .icefishin-stage .ice-controls, .icefishin-page .icefishin-stage:fullscreen .ice-controls { left: var(--band-side); right: var(--band-side); width: auto; transform: none; justify-content: space-between; }
  .icefishin-page .icefishin-stage .world-comms .wv-ptt { left: var(--band-side); transform: none; }
}
@media (max-width: 720px), (pointer: coarse) {
  html[data-game-state="playing"] .icefishin-page .icefishin-stage :is(.ice-hud-run,.ice-hud-career) { width: 112px; max-width: 112px; padding: 4px 6px; }
  .icefishin-page .icefishin-stage { --stick: min(100px, var(--control-corner-max)); --act-w: max(94px, min(112px, calc(33cqw - 16px))); }
  .icefishin-page .icefishin-stage .ice-dpad { display: none; }
  .icefishin-page .icefishin-stage .ice-stick { display: block; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip { gap: 5px; padding: 3px 0; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip strong { font-size: .66rem; }
  .icefishin-page .icefishin-stage .ice-controls .ice-aux { grid-template-rows: 44px 44px var(--act-h); grid-template-areas: "go go" "second poke" "main main"; }
  .icefishin-page .icefishin-stage .ice-controls #ice-minnow { position: absolute; right: 0; bottom: calc(100% + 6px); width: 44px; height: 44px; }
  .icefishin-page .icefishin-stage :is(.ice-flasher,.ice-fight) { max-width: 112px; padding: 6px; }
  .icefishin-page .icefishin-stage .ice-flasher svg { width: 80px; height: 80px; }
  .icefishin-page .icefishin-stage .ice-flasher p { display: none; }
  .icefishin-page .icefishin-stage .ice-fight { grid-template-columns: minmax(0,1fr); }
  .icefishin-page .icefishin-stage .ice-fight-depth { display: none; }
  .icefishin-page .icefishin-stage .ice-fight :is(h2,p) { font-size: .65rem; }
  .icefishin-page .icefishin-stage .ice-reveal { width: 112px; }
  .icefishin-page .icefishin-stage .ice-reveal h2 { font-size: .74rem; }
  html[data-touch-handedness="left"] .icefishin-page .icefishin-stage .world-comms .wv-ptt { left: auto; right: var(--band-side); transform: none; }
}
@media (max-width: 600px) {
  .icefishin-page .icefishin-stage[data-ice-map-open="true"] { background: #0b101c; }
  .icefishin-page .icefishin-stage[data-ice-map-open="true"] :is(#game-canvas,.ice-controls,.ice-hud,.ice-hud-status,.ice-race,.world-feed) { visibility: hidden; }
}
/* Embedded lake width, rather than the surrounding browser, chooses its controls. */
@container (min-width: 901px) {
  .icefishin-page .icefishin-stage .ice-controls .ice-aux { flex: 0 0 116px; width: 116px; height: 118px; min-height: 118px; margin-bottom: 0; gap: 10px; }
  .icefishin-page .icefishin-stage .ice-controls .ice-aux > button:not(.ice-interact) { width: 116px; height: 54px; min-height: 54px; }
  .icefishin-page .icefishin-stage .ice-controls .ice-interact { left: 0; right: 0; bottom: calc(100% + 6px); transform: none; width: 116px; min-height: 62px; }
}
@container (max-width: 900px) {
  html[data-game-state="playing"] .icefishin-page .icefishin-stage :is(.ice-hud-run,.ice-hud-career) { width: 112px; max-width: 112px; padding: 4px 6px; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip { gap: 5px; padding: 3px 0; }
  html[data-game-state="playing"] .icefishin-page .icefishin-stage .ice-hud .hud-chip strong { font-size: .66rem; }
  .icefishin-page .icefishin-stage .ice-controls { --act-w: max(94px, min(112px, calc(33cqw - 16px))); --act-h: 60px; left: 0; right: 0; width: auto; transform: none; display: block; height: 0; }
  .icefishin-page .icefishin-stage .ice-dpad { display: none; }
  .icefishin-page .icefishin-stage .ice-stick { position: absolute; display: block; left: var(--band-side); bottom: 0; width: 100px; height: 100px; }
  .icefishin-page .icefishin-stage .ice-controls .ice-action { position: absolute; right: var(--band-side); bottom: 0; width: var(--act-w); min-width: 0; min-height: 44px; height: var(--act-h); margin: 0; padding: 0 4px; font-size: .76rem; }
  .icefishin-page .icefishin-stage .ice-controls .ice-aux { position: absolute; right: var(--band-side); bottom: 0; width: var(--act-w); margin: 0; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: 44px 44px var(--act-h); gap: 6px; grid-template-areas: "go go" "second poke" "main main"; }
  .icefishin-page .icefishin-stage .ice-controls .ice-aux > button { width: 100%; min-width: 0; min-height: 44px; height: 100%; padding: 0 4px; font-size: .66rem; }
  .icefishin-page .icefishin-stage .ice-controls .ice-interact { position: static; transform: none; grid-area: go; }
  .icefishin-page .icefishin-stage .ice-controls #ice-snowball { grid-area: second; }
  .icefishin-page .icefishin-stage .ice-controls #ice-jump { grid-area: poke; }
  .icefishin-page .icefishin-stage :is(.ice-flasher,.ice-fight,.ice-reveal) { max-width: max(94px, min(112px, calc(33cqw - 20px))); padding: 6px; }
  .icefishin-page .icefishin-stage .ice-flasher svg { width: 80px; height: 80px; }
  .icefishin-page .icefishin-stage .ice-flasher p { display: none; }
  .icefishin-page .icefishin-stage .ice-fight { grid-template-columns: minmax(0,1fr); }
  .icefishin-page .icefishin-stage .ice-fight-depth { display: none; }
  .icefishin-page .icefishin-stage .ice-fight :is(h2,p) { font-size: .65rem; }
}
@container (max-width: 900px) {
  .icefishin-page .icefishin-stage[data-ice-map-open="true"] :is(#game-canvas,.ice-controls,.ice-hud,.ice-hud-status,.ice-race,.world-feed) { visibility: hidden; }
}