/* ---------- look: Apple ---------- */
/* Layout: iOS grouped content on the system background; glass only on the floating layer (bar buttons, bottom action, sheets, toast) */
:root[data-look="apple"] {
  --a-bg: #f2f2f7;
  --a-card: #ffffff;
  --a-label: #000000;
  --a-label-2: #6c6c70;
  --a-label-3: #8e8e93;
  --a-sep: rgba(60, 60, 67, .29);
  --a-fill: rgba(120, 120, 128, .16);
  --a-fill-2: rgba(118, 118, 128, .12);
  --a-tint: #0066cc;
  --a-tint-text: #0066cc;
  --a-tint-bg: rgba(0, 102, 204, .08);
  --a-worm: #ff2d55;
  --a-worm-bg: rgba(255, 45, 85, .1);
  --a-red: #d70015;
  --a-red-text: #d70015;
  --a-green-text: #1f7a35;
  --a-switch-on: #34c759;
  --a-seg-on: #ffffff;
  --a-tile: #ffffff;
  --a-tile-under: #d8d8de;
  --a-tile-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06);
  --a-die: #ffffff;
  --a-pip: #1c1c1e;
  --a-on-pc: #ffffff;
  --a-glass: rgba(255, 255, 255, .72);
  --a-sheet: rgba(242, 242, 247, .96);
  --a-glass-edge: rgba(255, 255, 255, .7);
  --a-glass-shadow: 0 8px 28px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .08);
  --a-blur: blur(24px) saturate(1.4);
  --a-font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --a-rounded: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --worm: var(--a-worm);
  --tile-ink: #1c1c1e;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="apple"]:not([data-theme="light"]):not([data-appearance="light"]) {
    --a-bg: #000000;
    --a-card: #1c1c1e;
    --a-label: #ffffff;
    --a-label-2: #aeaeb2;
    --a-label-3: #8e8e93;
    --a-sep: rgba(84, 84, 88, .65);
    --a-fill: rgba(120, 120, 128, .32);
    --a-fill-2: rgba(118, 118, 128, .24);
    --a-tint: #0a6fe0;
    --a-tint-text: #4da3ff;
    --a-tint-bg: rgba(77, 163, 255, .14);
    --a-worm: #ff375f;
    --a-worm-bg: rgba(255, 55, 95, .16);
    --a-red-text: #ff6961;
    --a-green-text: #30d158;
    --a-switch-on: #30d158;
    --a-seg-on: #636366;
    --a-tile: #2c2c2e;
    --a-tile-under: #48484a;
    --a-tile-shadow: 0 0 0 .5px rgba(255, 255, 255, .08);
    --a-die: #e5e5ea;
    --a-glass: rgba(44, 44, 46, .66);
    --a-sheet: rgba(28, 28, 30, .96);
    --a-glass-edge: rgba(255, 255, 255, .14);
    --a-glass-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .1);
    color-scheme: dark;
  }
}
:root[data-look="apple"][data-theme="dark"]:not([data-appearance="light"]),
:root[data-look="apple"][data-appearance="dark"] {
  --a-bg: #000000;
  --a-card: #1c1c1e;
  --a-label: #ffffff;
  --a-label-2: #aeaeb2;
  --a-label-3: #8e8e93;
  --a-sep: rgba(84, 84, 88, .65);
  --a-fill: rgba(120, 120, 128, .32);
  --a-fill-2: rgba(118, 118, 128, .24);
  --a-tint: #0a6fe0;
  --a-tint-text: #4da3ff;
  --a-tint-bg: rgba(77, 163, 255, .14);
  --a-worm: #ff375f;
  --a-worm-bg: rgba(255, 55, 95, .16);
  --a-red-text: #ff6961;
  --a-green-text: #30d158;
  --a-switch-on: #30d158;
  --a-seg-on: #636366;
  --a-tile: #2c2c2e;
  --a-tile-under: #48484a;
  --a-tile-shadow: 0 0 0 .5px rgba(255, 255, 255, .08);
  --a-die: #e5e5ea;
  --a-glass: rgba(44, 44, 46, .66);
  --a-sheet: rgba(28, 28, 30, .96);
  --a-glass-edge: rgba(255, 255, 255, .14);
  --a-glass-shadow: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .1);
  color-scheme: dark;
}
@media (prefers-reduced-transparency: reduce) {
  :root[data-look="apple"] { --a-glass: var(--a-card) !important; --a-sheet: var(--a-card) !important; --a-blur: none !important; }
}
@media (prefers-contrast: more) {
  :root[data-look="apple"] { --a-sep: var(--a-label-3) !important; --a-fill-2: var(--a-fill) !important; }
}

[data-look="apple"] body { background: var(--a-bg); color: var(--a-label); font-family: var(--a-font); font-size: 17px; -webkit-font-smoothing: antialiased; }
[data-look="apple"] button:focus-visible, [data-look="apple"] input:focus-visible { outline-color: var(--a-tint-text); }
[data-look="apple"] #app { gap: 22px; }
[data-look="apple"] .eyebrow { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--a-label-2); }
[data-look="apple"] .muted, [data-look="apple"] .foot { color: var(--a-label-2); }

/* navigation bar: content blurs and fades under it (scroll edge effect) */
[data-look="apple"] .topbar { background: none; padding-block: 10px 6px; }
[data-look="apple"] .topbar::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: -14px;
  left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
  background: color-mix(in srgb, var(--a-bg) 80%, transparent);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur);
  mask-image: linear-gradient(#000 72%, transparent); -webkit-mask-image: linear-gradient(#000 72%, transparent);
}
[data-look="apple"] .turn-name { font-family: var(--a-font); font-weight: 700; font-size: 32px; letter-spacing: -.015em; color: var(--a-label); }
[data-look="apple"] .turn-avatar { display: inline-grid; width: 32px; height: 32px; font-size: 15px; margin-right: 10px; vertical-align: 4px; }
[data-look="apple"] .icon-btn {
  width: 44px; height: 44px; border-radius: 50%; color: var(--a-label);
  border: .5px solid var(--a-glass-edge); background: var(--a-glass); box-shadow: var(--a-glass-shadow);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur);
}
[data-look="apple"] .icon-btn svg { width: 20px; height: 20px; }

/* sections */
[data-look="apple"] .sec-head { margin-bottom: 8px; padding-inline: 4px; }
[data-look="apple"] .sec-head h2 { font-family: var(--a-font); font-weight: 700; font-size: 22px; letter-spacing: -.01em; }
[data-look="apple"] .sec-head span { font-size: 13px; color: var(--a-label-2); }
[data-look="apple"] .grill { background: none; box-shadow: none; padding: 0; border-radius: 0; }
[data-look="apple"] .grill .sec-head { padding-inline: 4px; }
[data-look="apple"] .grill-grid { gap: 10px 6px; }
[data-look="apple"] .panel { background: var(--a-card); border-radius: 22px; padding: 16px; }
[data-look="apple"] .panel.bare { background: none; padding: 0; }

/* tiles */
[data-look="apple"] .tile { background: var(--a-tile); color: var(--a-label); border-radius: 10px; box-shadow: var(--a-tile-shadow); }
[data-look="apple"] .t-num {
  margin: 6cqi 6cqi 0; padding: 16cqi 0 4cqi; border-radius: 0;
  background: none; color: var(--a-label);
  font-family: var(--a-rounded); font-weight: 700; font-size: 42cqi; letter-spacing: -.03em;
}
[data-look="apple"] .tile.can {
  animation: none; outline: 3px solid var(--a-tint-text); outline-offset: 2px;
  transform: translateY(-3px); box-shadow: var(--a-tile-shadow), 0 8px 18px rgba(0, 0, 0, .18);
}
[data-look="apple"] .tile.dim { opacity: .35; }
[data-look="apple"] .tile.depth2 { box-shadow: var(--a-tile-shadow), 3px -3px 0 -1px var(--a-tile-under); }
[data-look="apple"] .tile.depth3 { box-shadow: var(--a-tile-shadow), 3px -3px 0 -1px var(--a-tile-under), 6px -6px 0 -2px var(--a-tile-under); }
[data-look="apple"] .slot { border: 0; border-radius: 10px; background: var(--a-fill-2); }
[data-look="apple"] .slot span { font-family: var(--a-rounded); font-weight: 600; color: var(--a-label-3); opacity: 1; }
[data-look="apple"] .slot i { color: var(--a-on-pc); font-weight: 600; }
[data-look="apple"] .slot.flipped { background: var(--a-fill); }
[data-look="apple"] .slot.flipped span { opacity: .55; }

/* buttons */
[data-look="apple"] .btn { border-radius: 999px; min-height: 50px; font-family: var(--a-font); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
[data-look="apple"] .btn:active { transform: scale(.97); opacity: .85; }
[data-look="apple"] .btn.big { min-height: 54px; font-family: var(--a-font); font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
[data-look="apple"] .btn.primary { background: var(--a-tint); color: #ffffff; box-shadow: none; }
[data-look="apple"] .btn.bust { background: var(--a-red); color: #ffffff; flex-direction: row; }
[data-look="apple"] .btn.bust small { display: none; }
[data-look="apple"] .btn.bust.urge { animation: none; }
[data-look="apple"] .btn.ghost { background: var(--a-fill-2); border: 0; color: var(--a-tint-text); }
[data-look="apple"] .btn.text { color: var(--a-tint-text); font-weight: 400; }

/* bottom action: floats in thumb reach, content fades beneath it */
[data-look="apple"] .turn-actions {
  position: fixed; z-index: 8; left: 50%; translate: -50% 0;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  width: min(calc(100% - 2 * max(16px, env(safe-area-inset-left, 0px))), 528px);
  display: grid; gap: 8px;
}
[data-look="apple"] .turn-actions:empty { display: none; }
[data-look="apple"] .turn-actions::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; width: 100vw; translate: -50% 0;
  bottom: calc(-14px - env(safe-area-inset-bottom, 0px)); height: calc(120px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(transparent, color-mix(in srgb, var(--a-bg) 88%, transparent) 60%);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  mask-image: linear-gradient(transparent, #000 55%); -webkit-mask-image: linear-gradient(transparent, #000 55%);
}
[data-look="apple"] .turn-actions .btn.primary, [data-look="apple"] .turn-actions .btn.bust { box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
[data-look="apple"] .turn-actions .btn.ghost {
  background: var(--a-glass); border: .5px solid var(--a-glass-edge); box-shadow: var(--a-glass-shadow);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur);
}
[data-look="apple"] body:has(.turn-actions:not(:empty)) .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* turn panel */
[data-look="apple"] .helper-head label { font-weight: 600; }
[data-look="apple"] .h-row input { border: 0; border-radius: 12px; background: var(--a-fill-2); color: var(--a-label); font-family: var(--a-rounded); font-weight: 600; }
[data-look="apple"] .h-row input::placeholder { font-family: var(--a-font); font-weight: 400; color: var(--a-label-3); }
[data-look="apple"] .chip { border: 0; border-radius: 999px; background: var(--a-fill-2); color: var(--a-label-2); font-weight: 600; }
[data-look="apple"] .chip.on { background: var(--a-worm-bg); color: var(--a-label); }
[data-look="apple"] .chip.square { border-radius: 50%; }
[data-look="apple"] .status { font-size: 15px; color: var(--a-label-2); }
[data-look="apple"] .status.good { color: var(--a-green-text); }
[data-look="apple"] .status.bad { color: var(--a-red-text); }
[data-look="apple"] .stat strong { font-family: var(--a-rounded); font-weight: 700; font-size: 36px; }
[data-look="apple"] .worm-flag { border: 0; background: var(--a-fill-2); color: var(--a-label-2); font-weight: 600; }
[data-look="apple"] .worm-flag.yes { background: var(--a-worm-bg); color: var(--a-label); }
[data-look="apple"] .tray { border-radius: 16px; background: var(--a-fill-2); box-shadow: none; }
[data-look="apple"] .tray-empty { color: var(--a-label-2); }
[data-look="apple"] .die { border-radius: 24%; background: var(--a-die); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .08); }
[data-look="apple"] .die i.on { background: var(--a-pip); }
[data-look="apple"] .die.ghost { border: 0; background: var(--a-fill-2); box-shadow: none; }
[data-look="apple"] .die.hot { box-shadow: 0 0 0 3px var(--a-tint-text); }
[data-look="apple"] .bust-banner { border: 0; background: color-mix(in srgb, var(--a-red) 10%, transparent); color: var(--a-label); }
[data-look="apple"] .bust-banner strong { font-family: var(--a-font); font-weight: 700; font-size: 22px; color: var(--a-red-text); }

/* players: one inset grouped list */
[data-look="apple"] .player-list { gap: 0; background: var(--a-card); border-radius: 22px; overflow: hidden; }
[data-look="apple"] .prow { position: relative; border: 0; border-radius: 0; background: none; padding: 8px 16px 8px 10px; }
[data-look="apple"] .prow + .prow::before { content: ""; position: absolute; top: 0; left: 64px; right: 0; border-top: .5px solid var(--a-sep); }
[data-look="apple"] .prow.current { background: var(--a-tint-bg); }
[data-look="apple"] .avatar { color: var(--a-on-pc); font-family: var(--a-font); font-weight: 600; }
[data-look="apple"] .p-name { font-weight: 600; }
[data-look="apple"] .p-meta { font-size: 15px; color: var(--a-label-2); }
[data-look="apple"] .p-meta b { color: var(--a-tint-text); font-weight: 600; }
[data-look="apple"] .p-worms { font-family: var(--a-rounded); font-weight: 700; font-size: 20px; }

/* setup */
[data-look="apple"] .setup { gap: 22px; padding-top: 24px; }
[data-look="apple"] .hero-tiles .tile { rotate: none; translate: none; width: 46px; }
[data-look="apple"] .hero h1 { font-family: var(--a-font); font-weight: 700; font-size: 34px; letter-spacing: -.02em; color: var(--a-label); }
[data-look="apple"] .hero h1 em { color: inherit; }
[data-look="apple"] .hero p { color: var(--a-label-2); }
[data-look="apple"] .card { background: var(--a-card); border-radius: 22px; padding: 12px 16px; gap: 8px; }
[data-look="apple"] .field-row h2 { font-weight: 600; font-size: 17px; }
[data-look="apple"] .stepper { background: var(--a-fill-2); border-radius: 999px; }
[data-look="apple"] .stepper button { background: none; border-radius: 999px; color: var(--a-tint-text); font-weight: 500; }
[data-look="apple"] .stepper output { font-family: var(--a-rounded); font-weight: 600; font-size: 20px; }
[data-look="apple"] .names { gap: 0; }
[data-look="apple"] .names li { position: relative; padding-block: 4px; }
[data-look="apple"] .names li + li::before { content: ""; position: absolute; top: 0; left: 44px; right: 0; border-top: .5px solid var(--a-sep); }
[data-look="apple"] .names input { border: 0; background: none; padding: 0 4px; font-weight: 400; color: var(--a-label); }
[data-look="apple"] .names input::placeholder { color: var(--a-label-3); }
[data-look="apple"] .card > .btn.ghost {
  justify-content: flex-start; min-height: 44px; padding: 0 4px; border-radius: 0;
  background: none; color: var(--a-tint-text); font-weight: 400; border-top: .5px solid var(--a-sep);
}
[data-look="apple"] .settings-group { gap: 0; background: var(--a-card); border-radius: 22px; overflow: hidden; }
[data-look="apple"] .settings-group > .card { position: relative; border-radius: 0; background: none; padding: 12px 16px; }
[data-look="apple"] .settings-group > .card + .card::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--a-sep); }
[data-look="apple"] .toggle-card strong { font-weight: 400; font-size: 17px; }
[data-look="apple"] .toggle-card .muted { font-size: 13px; }
[data-look="apple"] .switch { width: 51px; height: 31px; background: var(--a-fill); }
[data-look="apple"] .switch::after { top: 2px; left: 2px; width: 27px; height: 27px; background: #ffffff; box-shadow: 0 3px 8px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .16); }
[data-look="apple"] [aria-checked="true"] .switch { background: var(--a-switch-on); }
[data-look="apple"] .segmented { background: var(--a-fill-2); border-radius: 999px; }
[data-look="apple"] .segmented button { border-radius: 999px; color: var(--a-label); font-weight: 500; }
[data-look="apple"] .segmented button[aria-checked="true"] { background: var(--a-seg-on); color: var(--a-label); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04); }

/* end */
[data-look="apple"] .end-hero h1 { font-family: var(--a-font); font-weight: 700; font-size: 34px; letter-spacing: -.02em; color: var(--a-label); }
[data-look="apple"] .end-hero p { color: var(--a-label-2); }
[data-look="apple"] .rank { gap: 0; background: var(--a-card); border-radius: 22px; overflow: hidden; }
[data-look="apple"] .rank li { position: relative; border: 0; border-radius: 0; background: none; padding: 10px 16px 10px 12px; }
[data-look="apple"] .rank li + li::before { content: ""; position: absolute; top: 0; left: 88px; right: 0; border-top: .5px solid var(--a-sep); }
[data-look="apple"] .rank li.first { border: 0; background: none; }
[data-look="apple"] .rank .place { font-family: var(--a-rounded); font-weight: 600; color: var(--a-label-3); }
[data-look="apple"] .rank li.first .place { color: var(--a-tint-text); }
[data-look="apple"] .rank .who span:last-child { color: var(--a-label-2); }

/* sheets and toast: the floating glass layer */
[data-look="apple"] .backdrop { background: rgba(0, 0, 0, .25); }
[data-look="apple"] .sheet {
  width: min(calc(100% - 16px), 560px);
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  max-height: calc(88% - env(safe-area-inset-bottom, 0px));
  padding-bottom: 20px; border-radius: 34px;
  background: var(--a-sheet); border: .5px solid var(--a-glass-edge);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
}
[data-look="apple"] .grabber { width: 36px; background-color: var(--a-label-3); opacity: .5; }
[data-look="apple"] .sheet-head h3 { font-family: var(--a-font); font-weight: 700; font-size: 22px; }
[data-look="apple"] .close-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--a-fill); color: var(--a-label-2); }
[data-look="apple"] .menu-list { gap: 0; background: var(--a-card); border-radius: 22px; overflow: hidden; }
[data-look="apple"] .menu-item { position: relative; min-height: 52px; border-radius: 0; background: none; font-weight: 400; font-size: 17px; }
[data-look="apple"] .menu-item + .menu-item::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: .5px solid var(--a-sep); }
[data-look="apple"] .menu-item.home { color: var(--a-tint-text); }
[data-look="apple"] .modal-backdrop { background: rgba(0, 0, 0, .3); }
[data-look="apple"] .modal {
  border-radius: 28px; background: var(--a-sheet); border: .5px solid var(--a-glass-edge);
  backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur); text-align: center;
}
[data-look="apple"] .modal h3 { font-family: var(--a-font); font-weight: 600; font-size: 18px; }
[data-look="apple"] .modal p { color: var(--a-label-2); font-size: 15px; }
[data-look="apple"] .back-link { color: var(--a-tint-text); font-weight: 400; }
[data-look="apple"] .menu-item.danger { color: var(--a-red-text); }
[data-look="apple"] .menu-item.danger.confirm { background: var(--a-red); color: #ffffff; }
[data-look="apple"] .stack-tiles figcaption { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--a-tint-text); }
[data-look="apple"] .rules { color: var(--a-label); }
[data-look="apple"] .rules li::marker { font-family: var(--a-rounded); color: var(--a-label-2); }
[data-look="apple"] .rules b { color: var(--a-label); }
[data-look="apple"] .worm-table { color: var(--a-label-2); }
[data-look="apple"] .toast {
  border-radius: 24px; padding: 12px 20px; font-weight: 500;
  background: var(--a-glass); color: var(--a-label); border: .5px solid var(--a-glass-edge);
  box-shadow: var(--a-glass-shadow); backdrop-filter: var(--a-blur); -webkit-backdrop-filter: var(--a-blur);
}