/* Out on the Ice: the artifact.
   A found object, not AppZoo: a 1986 bait-shop electronic game, a molded charcoal case with an orange title, an LED clock, a flasher dial and a paper lake chart.
   Its one nod to the Zoo is its title, set in Ultra. It carries one thing it never explains: "SER. 0347" on the case.
   Scope: every selector sits under [data-artifact="out-on-the-ice"], so nothing reaches the cabinet around it.
   Colour literals live only in the palette blocks below (decisions/028). */

[data-artifact="out-on-the-ice"] {
  --oi-case: #2a2d31;           /* molded charcoal plastic */
  --oi-case-d: #1a1c1f;
  --oi-bezel: #0d0f11;
  --oi-title: #ff8a2b;          /* the orange title */
  --oi-led: #ff5a36;            /* LED digits */
  --oi-paper: #efe6d0;          /* the paper lake chart */
  --oi-ink: #1f2a30;
  --oi-muted: #4a5a62;
  --oi-rule: #9aa6a8;
  --oi-link: #8a3d00;
  --oi-on-case: #e8eaec;
  --oi-focus: #0b5d57;
  --oi-shadow: 0 1px 0 rgb(0 0 0 / .3), 0 12px 26px -16px rgb(0 0 0 / .7);
  --oi-sky: #7fb2d4; --oi-ice: #dfeaf1; /* the screen: sky over white ice */
  --oi-amber: #ffb020; --oi-led-bg: #07090a; --oi-orange-ink: #1b1006; --oi-stamp: #9b2b1f; --oi-water: #cfe0e6; --oi-grass: #3f6b3a;
  --oi-wait: #4a5459; --oi-still: #8d6a4c; --oi-silk: #c9d3d7; --oi-art-top: #2c6c80; --oi-art-bot: #0a2430;
}
:root[data-theme="dark"] [data-artifact="out-on-the-ice"] {
  --oi-paper: #1b2226; --oi-ink: #e6edf0; --oi-muted: #b4c2c8; --oi-rule: #3d4b52; --oi-link: #ffb066; --oi-focus: #4fd1c0;
  --oi-case: #1d2023; --oi-case-d: #101214; --oi-shadow: 0 1px 0 rgb(0 0 0 / .6), 0 12px 26px -14px rgb(0 0 0 / .95); --oi-sky: #0c1a33; --oi-ice: #2a3a52; --oi-water: #26414a; --oi-grass: #7fb86f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) [data-artifact="out-on-the-ice"] {
    --oi-paper: #1b2226; --oi-ink: #e6edf0; --oi-muted: #b4c2c8; --oi-rule: #3d4b52; --oi-link: #ffb066; --oi-focus: #4fd1c0;
    --oi-case: #1d2023; --oi-case-d: #101214; --oi-shadow: 0 1px 0 rgb(0 0 0 / .6), 0 12px 26px -14px rgb(0 0 0 / .95); --oi-sky: #0c1a33; --oi-ice: #2a3a52; --oi-water: #26414a; --oi-grass: #7fb86f;
  }
}

[data-artifact="out-on-the-ice"] {
  --oi-face: "Archivo Narrow", "Arial Narrow", system-ui, sans-serif;
  --oi-mono: "Share Tech Mono", ui-monospace, "Courier New", monospace;
  --oi-display: "Ultra", "Rye", Georgia, serif; /* the nod: a heavy slab title */

  box-sizing: border-box;
  max-width: 62rem;
  margin: 0 auto var(--space-12);
  padding: var(--space-4);
  background: var(--oi-paper);
  color: var(--oi-ink);
  font: 400 1.0625rem/1.55 var(--oi-face);
  border: 2px solid var(--oi-rule);
}
[data-artifact="out-on-the-ice"] *, [data-artifact="out-on-the-ice"] *::before, [data-artifact="out-on-the-ice"] *::after { box-sizing: border-box; }
@media (min-width: 48rem) {
  [data-artifact="out-on-the-ice"] { padding: var(--space-8); }
}

[data-artifact="out-on-the-ice"] :where(p) { margin: 0 0 var(--space-3); max-width: 68ch; }
[data-artifact="out-on-the-ice"] h2 { margin: var(--space-8) 0 var(--space-3); font: 700 1.5rem/1.2 var(--oi-face); letter-spacing: .06em; text-transform: uppercase; color: var(--oi-ink); padding-bottom: var(--space-1); border-bottom: 2px solid var(--oi-rule); }
[data-artifact="out-on-the-ice"] h3 { font: 700 1.125rem/1.3 var(--oi-face); letter-spacing: .03em; }
[data-artifact="out-on-the-ice"] :where(ul, ol) { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
[data-artifact="out-on-the-ice"] :where(li) { margin-bottom: var(--space-1); }
[data-artifact="out-on-the-ice"] a { color: var(--oi-link); text-underline-offset: 3px; }
[data-artifact="out-on-the-ice"] :focus-visible { outline: 3px solid var(--oi-focus); outline-offset: 2px; }
[data-artifact="out-on-the-ice"] .oi-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The case: charcoal plastic, a bezel round the screen, the title and the clock on the top edge. */
[data-artifact="out-on-the-ice"] .oi-case {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  color: var(--oi-on-case);
  background: linear-gradient(160deg, var(--oi-case), var(--oi-case-d));
  border: 2px solid var(--oi-bezel);
  border-radius: 14px;
  box-shadow: var(--oi-shadow);
}
[data-artifact="out-on-the-ice"] .oi-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-1) var(--space-3); }
[data-artifact="out-on-the-ice"] .oi-title { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; font: 400 clamp(1.75rem, 7vw, 2.75rem)/1.05 var(--oi-display); letter-spacing: .01em; text-transform: none; color: var(--oi-title); }
[data-artifact="out-on-the-ice"] .oi-ser { margin: 0; font: 400 .8125rem/1 var(--oi-mono); letter-spacing: .2em; color: var(--oi-on-case); opacity: .8; }
[data-artifact="out-on-the-ice"] .oi-clock { justify-self: end; margin: 0; padding: var(--space-1) var(--space-3); font: 400 1.25rem/1 var(--oi-mono); letter-spacing: .08em; color: var(--oi-led); background: var(--oi-bezel); border-radius: 4px; }
[data-artifact="out-on-the-ice"] .oi-clock span { margin-left: var(--space-2); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }

/* The body: the screen on the left, the flasher dial and the paper lake chart on the right. Phones stack them. */
[data-artifact="out-on-the-ice"] .oi-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
[data-artifact="out-on-the-ice"] .oi-side { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
[data-artifact="out-on-the-ice"] [hidden] { display: none !important; }
@media (min-width: 48rem) {
  [data-artifact="out-on-the-ice"] .oi-live .oi-body { grid-template-columns: minmax(0, 1fr) 15.5rem; }
}
@media (max-width: 47.99rem) {
  /* On a phone the main button sits right under the screen; the flasher and the chart follow it. */
  [data-artifact="out-on-the-ice"] .oi-live .oi-body { display: contents; }
  [data-artifact="out-on-the-ice"] .oi-live .oi-screen { order: 1; }
  [data-artifact="out-on-the-ice"] .oi-live .oi-controls { order: 2; }
  [data-artifact="out-on-the-ice"] .oi-live .oi-row { order: 3; }
  [data-artifact="out-on-the-ice"] .oi-live .oi-side { order: 4; }
}
@media (min-width: 30rem) and (max-width: 47.99rem) {
  [data-artifact="out-on-the-ice"] .oi-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 29.99rem) {
  [data-artifact="out-on-the-ice"] .oi-flasher-box { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; }
  [data-artifact="out-on-the-ice"] .oi-readouts { grid-template-columns: minmax(0, 1fr); }
}

/* The screen: the scene's frame, a drawn lake under the intro card. Before the script runs it is the sky over the ice with the intro card on it. */
[data-artifact="out-on-the-ice"] .oi-screen {
  position: relative;
  min-height: clamp(14rem, 42svh, 26rem);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: linear-gradient(180deg, var(--oi-sky) 0 46%, var(--oi-ice) 46% 100%);
  border: 6px solid var(--oi-bezel);
  border-radius: 8px;
}
[data-artifact="out-on-the-ice"] .oi-live .oi-screen { min-height: 0; padding: 0; display: block; align-self: start; }
[data-artifact="out-on-the-ice"] .oi-scene { display: block; width: 100%; aspect-ratio: 4 / 3; touch-action: manipulation; cursor: pointer; }
[data-artifact="out-on-the-ice"] .oi-flasher { display: block; width: 100%; aspect-ratio: 1; }
[data-artifact="out-on-the-ice"] .oi-overlay { display: grid; place-items: center; }
[data-artifact="out-on-the-ice"] .oi-live .oi-overlay { position: absolute; inset: 0; z-index: 2; padding: var(--space-2); overflow: auto; background: color-mix(in srgb, var(--oi-bezel) 72%, transparent); }
/* The catch card and the day's tally are modals over the whole window, so they fit a phone as well as the screen does. */
[data-artifact="out-on-the-ice"] .oi-live .oi-overlay-modal { position: fixed; z-index: 50; padding: var(--space-3); }
[data-artifact="out-on-the-ice"] .oi-intro, [data-artifact="out-on-the-ice"] .oi-dialog { max-width: 30rem; width: 100%; max-height: 100%; overflow: auto; padding: var(--space-4); color: var(--oi-ink); background: var(--oi-paper); border: 2px solid var(--oi-bezel); border-radius: 6px; box-shadow: var(--oi-shadow); }
[data-artifact="out-on-the-ice"] .oi-intro h3, [data-artifact="out-on-the-ice"] .oi-dialog h3 { margin: 0 0 var(--space-2); font: 400 1.5rem/1.1 var(--oi-display); text-wrap: balance; }
[data-artifact="out-on-the-ice"] .oi-intro p:last-child, [data-artifact="out-on-the-ice"] .oi-dialog p:last-child { margin-bottom: 0; }
[data-artifact="out-on-the-ice"] .oi-go { width: 100%; margin-top: var(--space-3); }
[data-artifact="out-on-the-ice"] .oi-tally { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-1) var(--space-3); margin: var(--space-2) 0; padding: 0; list-style: none; }
[data-artifact="out-on-the-ice"] .oi-period { margin-left: var(--space-2); font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase; }
[data-artifact="out-on-the-ice"] .oi-status { margin: 0; padding: var(--space-1) var(--space-3); max-width: none; flex: 1 1 18rem; min-height: 2.9em; font: 400 1rem/1.4 var(--oi-mono); color: var(--oi-amber); background: var(--oi-led-bg); border-radius: 4px; }

/* The flasher dial and the chart. */
[data-artifact="out-on-the-ice"] .oi-flasher-box { display: grid; gap: var(--space-2); padding: var(--space-2); background: var(--oi-bezel); border-radius: 12px; }
[data-artifact="out-on-the-ice"] .oi-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
[data-artifact="out-on-the-ice"] .oi-readout { padding: 2px var(--space-2); background: var(--oi-led-bg); border-radius: 4px; box-shadow: inset 0 0 0 1px var(--oi-bezel); }
[data-artifact="out-on-the-ice"] .oi-readout span { display: block; font: 700 .6875rem/1.4 var(--oi-face); letter-spacing: .14em; text-transform: uppercase; color: var(--oi-silk); }
[data-artifact="out-on-the-ice"] .oi-readout b { font: 400 1.25rem/1.1 var(--oi-mono); color: var(--oi-amber); font-variant-numeric: tabular-nums; }
[data-artifact="out-on-the-ice"] .oi-chart { padding: var(--space-2) var(--space-2) var(--space-1); color: var(--oi-ink); background: var(--oi-paper); border-radius: 6px; }
[data-artifact="out-on-the-ice"] .oi-chart h3 { margin: 0; font: 700 .8125rem/1.4 var(--oi-face); letter-spacing: .16em; text-transform: uppercase; }
[data-artifact="out-on-the-ice"] .oi-chart svg { display: block; width: 100%; height: auto; }
[data-artifact="out-on-the-ice"] .oi-chart p { margin: 2px 0 0; font-size: .8125rem; color: var(--oi-muted); }
[data-artifact="out-on-the-ice"] .oi-lake { fill: var(--oi-water); stroke: var(--oi-ink); stroke-width: 1.6; }
[data-artifact="out-on-the-ice"] .oi-contour { fill: none; stroke: var(--oi-link); }
[data-artifact="out-on-the-ice"] .oi-c1 { stroke-width: 1.3; } [data-artifact="out-on-the-ice"] .oi-c2 { stroke-width: 1.6; } [data-artifact="out-on-the-ice"] .oi-c3 { stroke-width: 2; }
[data-artifact="out-on-the-ice"] .oi-depth-nums { font-size: 8px; fill: var(--oi-link); }
[data-artifact="out-on-the-ice"] .oi-reeds { fill: none; stroke: var(--oi-grass); stroke-width: 1.2; }
[data-artifact="out-on-the-ice"] .oi-spot { cursor: pointer; outline: none; }
[data-artifact="out-on-the-ice"] .oi-spot text { font: 600 10px var(--oi-face); fill: var(--oi-ink); }
[data-artifact="out-on-the-ice"] .oi-spot-ring { fill: var(--oi-paper); stroke: var(--oi-ink); stroke-width: 1.6; }
[data-artifact="out-on-the-ice"] .oi-spot.on .oi-spot-ring { fill: var(--oi-title); }
[data-artifact="out-on-the-ice"] .oi-spot-focus { fill: none; stroke: none; }
[data-artifact="out-on-the-ice"] .oi-spot:focus-visible .oi-spot-focus { stroke: var(--oi-focus); stroke-width: 3; }

/* The controls: lure depth, the one main button, the status line and the toggles. */
[data-artifact="out-on-the-ice"] .oi-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); align-items: stretch; }
@media (min-width: 40rem) { [data-artifact="out-on-the-ice"] .oi-controls { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
[data-artifact="out-on-the-ice"] .oi-depth { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--oi-bezel); border-radius: 10px; }
[data-artifact="out-on-the-ice"] .oi-depth button { min-height: 2.75rem; padding: var(--space-2) 4px; font: 600 .9375rem/1.1 var(--oi-face); letter-spacing: .04em; color: var(--oi-silk); background: var(--oi-case); border: 0; border-radius: 7px; cursor: pointer; }
[data-artifact="out-on-the-ice"] .oi-depth button[aria-pressed="true"] { color: var(--oi-orange-ink); background: var(--oi-amber); }
[data-artifact="out-on-the-ice"] .oi-act { min-height: 3.5rem; font-size: 1.375rem; letter-spacing: .1em; border-radius: 12px; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
[data-artifact="out-on-the-ice"] .oi-act.down { transform: translateY(2px); }
[data-artifact="out-on-the-ice"] .oi-act.oi-bite { background: var(--oi-amber); animation: oi-pulse .35s steps(2) infinite; }
[data-artifact="out-on-the-ice"] .oi-act.oi-still { color: var(--oi-on-case); background: var(--oi-still); }
[data-artifact="out-on-the-ice"] .oi-act.oi-wait { color: var(--oi-on-case); background: var(--oi-wait); }
@keyframes oi-pulse { 50% { filter: brightness(1.2); } }
[data-artifact="out-on-the-ice"] .oi-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
[data-artifact="out-on-the-ice"] .oi-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-weight: 600; }
[data-artifact="out-on-the-ice"] .oi-small { min-height: 2.75rem; padding: var(--space-1) var(--space-3); font: 600 .9375rem/1 var(--oi-face); letter-spacing: .06em; color: var(--oi-silk); background: var(--oi-bezel); border: 1px solid var(--oi-rule); border-radius: 6px; cursor: pointer; }
[data-artifact="out-on-the-ice"] .oi-flag { color: var(--oi-orange-ink); background: var(--oi-title); border-color: var(--oi-title); font-weight: 700; animation: oi-pulse .5s steps(2) infinite; }
[data-artifact="out-on-the-ice"] .oi-check { display: inline-flex; gap: var(--space-2); align-items: center; min-height: 2.75rem; cursor: pointer; }
[data-artifact="out-on-the-ice"] .oi-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--oi-title); }

/* Buttons: the case's own keys. */
[data-artifact="out-on-the-ice"] .oi-btn {
  min-height: 2.75rem; min-width: 2.75rem; padding: var(--space-1) var(--space-4);
  font: 700 1rem/1.2 var(--oi-face); letter-spacing: .08em; text-transform: uppercase;
  color: var(--oi-orange-ink); background: var(--oi-title); border: 2px solid var(--oi-bezel); border-radius: 6px; cursor: pointer;
}
[data-artifact="out-on-the-ice"] .oi-btn:disabled { opacity: .5; cursor: not-allowed; }

/* The catch card. */
[data-artifact="out-on-the-ice"] .oi-catch { max-width: 32.5rem; padding: 0; }
[data-artifact="out-on-the-ice"] .oi-catch-art { position: relative; aspect-ratio: 2.3 / 1; overflow: hidden; background: linear-gradient(180deg, var(--oi-art-top), var(--oi-art-bot)); }
[data-artifact="out-on-the-ice"] .oi-catch-art img, [data-artifact="out-on-the-ice"] .oi-catch-art canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-artifact="out-on-the-ice"] .oi-stamp { position: absolute; right: 10px; top: 10px; padding: 2px 7px; font: 700 .8125rem/1.3 var(--oi-face); letter-spacing: .12em; text-transform: uppercase; color: var(--oi-stamp); background: var(--oi-paper); border: 2px solid var(--oi-stamp); transform: rotate(4deg); }
[data-artifact="out-on-the-ice"] .oi-catch-text { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4) var(--space-4); }
[data-artifact="out-on-the-ice"] .oi-catch-text h3 { margin: 0; }
[data-artifact="out-on-the-ice"] .oi-catch-size { margin: 0; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oi-muted); }
[data-artifact="out-on-the-ice"] .oi-catch-msg { margin: 0; font-style: italic; font-size: 1.1875rem; }
[data-artifact="out-on-the-ice"] .oi-catch-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font-size: .875rem; color: var(--oi-muted); }
[data-artifact="out-on-the-ice"] .oi-catch-meta div { display: flex; gap: var(--space-1); }
[data-artifact="out-on-the-ice"] .oi-catch-meta dt { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
[data-artifact="out-on-the-ice"] .oi-catch-meta dd { margin: 0; }
[data-artifact="out-on-the-ice"] .oi-fact { margin: 0; font-size: 1rem; line-height: 1.4; }
@media (min-width: 48rem) {
  [data-artifact="out-on-the-ice"] .oi-catch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); max-width: 52rem; }
  [data-artifact="out-on-the-ice"] .oi-catch-art img, [data-artifact="out-on-the-ice"] .oi-catch-art canvas { position: absolute; inset: 0; }
  [data-artifact="out-on-the-ice"] .oi-catch-art { aspect-ratio: auto; min-height: 14rem; }
}

/* The field book, below the game. */
[data-artifact="out-on-the-ice"] .oi-book { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
[data-artifact="out-on-the-ice"] .oi-book-head { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline; justify-content: space-between; }
[data-artifact="out-on-the-ice"] .oi-book-head h2 { margin: 0; }
[data-artifact="out-on-the-ice"] .oi-book-head p { margin: 0; color: var(--oi-muted); }
[data-artifact="out-on-the-ice"] .oi-shelf h3 { margin: 0 0 var(--space-2); font: 700 .8125rem/1.4 var(--oi-face); letter-spacing: .16em; text-transform: uppercase; color: var(--oi-muted); }
[data-artifact="out-on-the-ice"] .oi-entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: var(--space-2); }
[data-artifact="out-on-the-ice"] .oi-entry { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 var(--space-2); align-items: center; min-height: 2.75rem; padding: 6px 7px; text-align: left; font: inherit; color: inherit; background: transparent; border: 1px solid var(--oi-rule); border-radius: 4px; cursor: pointer; }
[data-artifact="out-on-the-ice"] .oi-entry canvas { width: 44px; height: 30px; grid-row: span 2; }
[data-artifact="out-on-the-ice"] .oi-entry b { font-size: .9375rem; line-height: 1.05; min-width: 0; }
[data-artifact="out-on-the-ice"] .oi-entry small { font-size: .8125rem; color: var(--oi-muted); }
[data-artifact="out-on-the-ice"] .oi-entry.locked b { color: var(--oi-muted); }
[data-artifact="out-on-the-ice"] .oi-entry[aria-expanded="true"] { border-color: var(--oi-ink); border-width: 2px; }
[data-artifact="out-on-the-ice"] .oi-entry small.oi-closed { justify-self: start; padding: 0 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oi-stamp); border: 1.5px solid var(--oi-stamp); border-radius: 2px; transform: rotate(-4deg); }
[data-artifact="out-on-the-ice"] .oi-detail { display: grid; gap: var(--space-1); max-width: 68ch; padding-top: var(--space-3); border-top: 2px solid var(--oi-ink); }
[data-artifact="out-on-the-ice"] .oi-detail h4 { margin: 0; font-size: 1.25rem; }
[data-artifact="out-on-the-ice"] .oi-detail p { margin: 0; max-width: none; }

/* The lake chart and the fish cards. */
[data-artifact="out-on-the-ice"] .oi-table { width: 100%; border-collapse: collapse; background: var(--oi-paper); border-top: 2px solid var(--oi-ink); border-bottom: 2px solid var(--oi-ink); }
[data-artifact="out-on-the-ice"] .oi-table th, [data-artifact="out-on-the-ice"] .oi-table td { padding: var(--space-2) var(--space-3); text-align: left; border-bottom: 1px solid var(--oi-rule); }
[data-artifact="out-on-the-ice"] .oi-fish { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
[data-artifact="out-on-the-ice"] .oi-fish-item { margin: 0; }
[data-artifact="out-on-the-ice"] .oi-card { height: 100%; padding: var(--space-3); border: 1px solid var(--oi-rule); border-radius: 6px; }
[data-artifact="out-on-the-ice"] .oi-fish-img { display: block; width: 100%; height: auto; border-radius: 4px; }
[data-artifact="out-on-the-ice"] .oi-card-name { margin: var(--space-2) 0 var(--space-1); }
[data-artifact="out-on-the-ice"] .oi-card-text { font: var(--type-small, 400 .9375rem/1.45 var(--oi-face)); max-width: none; }
[data-artifact="out-on-the-ice"] .oi-note { color: var(--oi-muted); }

@media (prefers-reduced-motion: reduce) {
  [data-artifact="out-on-the-ice"] .oi-btn { transition: none; }
  [data-artifact="out-on-the-ice"] .oi-act.oi-bite, [data-artifact="out-on-the-ice"] .oi-flag { animation: none; }
}