/* Katten: evening violet, wool-pink accent, amber highlights, paw prints on the background and the best boxes */
:root[data-look="cats"] {
  --bg: #16121f;
  --surface: #221c31;
  --surface-2: #2c2540;
  --line: #4a4062;
  --accent: #ff7a9a;
  --accent-deep: #c24a6c;
  --on-accent: #16121f;
  --focus: #ffc04d;
  --text: #f4eefb;
  --muted: #b6abcb;
  --bust: #b8334f;
  --danger-text: #ff9ab0;
  --glow: rgba(255, 192, 77, .13);
  --scrim: rgba(10, 7, 16, .62);
  --paper: #f6ead2;
  --paper-line: #dcc9a6;
  --ink: #352544;
  --ink-muted: #6a5874;
  --hint-ink: #a3305a;
  --hint-line: #d27a98;
  --got: #24664a;
  --total-bg: #352544;
  --total-ink: #f6ead2;
  --die: #f6ead2;
  --die-shade: #dccaa6;
  --pip: #352544;
  --tray: #1d1729;
  --tray-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='white' fill-opacity='.055'%3E%3Cg transform='translate(16 18) rotate(-18)'%3E%3Cellipse cx='0' cy='4.5' rx='5' ry='4'/%3E%3Ccircle cx='-5.6' cy='-2' r='2'/%3E%3Ccircle cx='-2' cy='-5.6' r='2'/%3E%3Ccircle cx='2' cy='-5.6' r='2'/%3E%3Ccircle cx='5.6' cy='-2' r='2'/%3E%3C/g%3E%3Cg transform='translate(48 50) rotate(16)'%3E%3Cellipse cx='0' cy='4.5' rx='5' ry='4'/%3E%3Ccircle cx='-5.6' cy='-2' r='2'/%3E%3Ccircle cx='-2' cy='-5.6' r='2'/%3E%3Ccircle cx='2' cy='-5.6' r='2'/%3E%3Ccircle cx='5.6' cy='-2' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --mark: #352544;
}
[data-look="cats"] body {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='white' fill-opacity='.045'%3E%3Cg transform='translate(16 18) rotate(-18)'%3E%3Cellipse cx='0' cy='4.5' rx='5' ry='4'/%3E%3Ccircle cx='-5.6' cy='-2' r='2'/%3E%3Ccircle cx='-2' cy='-5.6' r='2'/%3E%3Ccircle cx='2' cy='-5.6' r='2'/%3E%3Ccircle cx='5.6' cy='-2' r='2'/%3E%3C/g%3E%3Cg transform='translate(48 50) rotate(16)'%3E%3Cellipse cx='0' cy='4.5' rx='5' ry='4'/%3E%3Ccircle cx='-5.6' cy='-2' r='2'/%3E%3Ccircle cx='-2' cy='-5.6' r='2'/%3E%3Ccircle cx='2' cy='-5.6' r='2'/%3E%3Ccircle cx='5.6' cy='-2' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    var(--bg);
}
[data-look="cats"] body { isolation: isolate; }
[data-look="cats"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(130% 55% at 50% 105%, rgba(255, 192, 77, .18), transparent 62%),
    radial-gradient(90% 40% at 50% -5%, rgba(255, 122, 154, .14), transparent 60%);
  transform: scale(1.07);
  will-change: transform, filter;
  animation: cats-ambient 40s ease-in-out infinite alternate;
}
@keyframes cats-ambient {
  from { transform: translate3d(-3%, 1.5%, 0) scale(1.07); filter: hue-rotate(-8deg); }
  to { transform: translate3d(3%, -1.5%, 0) scale(1.1); filter: hue-rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-look="cats"] body::before { animation: none; will-change: auto; }
}
[data-look="cats"] .ysec-head h2::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 6px; vertical-align: -1px; background: var(--hint-line); -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat; }
:root[data-look="cats"] { --paw-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='15.6' rx='5.4' ry='4.4'/%3E%3Ccircle cx='5.4' cy='9.6' r='2.2'/%3E%3Ccircle cx='9.4' cy='5.6' r='2.3'/%3E%3Ccircle cx='14.6' cy='5.6' r='2.3'/%3E%3Ccircle cx='18.6' cy='9.6' r='2.2'/%3E%3C/svg%3E"); }

/* Apple: iOS grouped lists, system colours, follows light and dark */
:root[data-look="apple"] {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --surface-2: rgba(118, 118, 128, .12);
  --line: rgba(60, 60, 67, .29);
  --accent: #0066cc;
  --accent-text: #0066cc;
  --accent-deep: transparent;
  --on-accent: #ffffff;
  --focus: #0066cc;
  --text: #000000;
  --muted: #6c6c70;
  --bust: #d70015;
  --on-bust: #ffffff;
  --danger-text: #d70015;
  --glow: transparent;
  --scrim: rgba(0, 0, 0, .3);
  --shadow: rgba(0, 0, 0, .14);
  --paper: #ffffff;
  --paper-line: rgba(60, 60, 67, .2);
  --ink: #000000;
  --ink-muted: #6c6c70;
  --hint-ink: #0066cc;
  --hint-line: rgba(0, 102, 204, .45);
  --got: #1f7a35;
  --total-bg: #ffffff;
  --total-ink: #000000;
  --die: #ffffff;
  --die-shade: #e5e5ea;
  --pip: #1c1c1e;
  --tray: rgba(249, 249, 249, .94);
  --tray-pattern: none;
  --mark: #1c1c1e;
  --display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;
  --rounded: ui-rounded, 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="apple"]:not([data-theme="light"]):not([data-appearance="light"]) {
    --bg: #000000;
    --surface: #1c1c1e;
    --surface-2: rgba(118, 118, 128, .24);
    --line: rgba(84, 84, 88, .65);
    --accent: #0a6fe0;
    --accent-text: #4da3ff;
    --focus: #4da3ff;
    --text: #ffffff;
    --muted: #aeaeb2;
    --bust: #d70015;
    --danger-text: #ff6961;
    --shadow: rgba(0, 0, 0, .6);
    --paper: #1c1c1e;
    --paper-line: rgba(84, 84, 88, .6);
    --ink: #ffffff;
    --ink-muted: #aeaeb2;
    --hint-ink: #4da3ff;
    --hint-line: rgba(77, 163, 255, .5);
    --got: #30d158;
    --total-bg: #1c1c1e;
    --total-ink: #ffffff;
    --die: #f2f2f7;
    --die-shade: #c7c7cc;
    --pip: #1c1c1e;
    --tray: rgba(28, 28, 30, .94);
    --mark: #ffffff;
    color-scheme: dark;
  }
}
:root[data-look="apple"][data-theme="dark"]:not([data-appearance="light"]),
:root[data-look="apple"][data-appearance="dark"] {
  --bg: #000000;
  --surface: #1c1c1e;
  --surface-2: rgba(118, 118, 128, .24);
  --line: rgba(84, 84, 88, .65);
  --accent: #0a6fe0;
  --accent-text: #4da3ff;
  --focus: #4da3ff;
  --text: #ffffff;
  --muted: #aeaeb2;
  --bust: #d70015;
  --danger-text: #ff6961;
  --shadow: rgba(0, 0, 0, .6);
  --paper: #1c1c1e;
  --paper-line: rgba(84, 84, 88, .6);
  --ink: #ffffff;
  --ink-muted: #aeaeb2;
  --hint-ink: #4da3ff;
  --hint-line: rgba(77, 163, 255, .5);
  --got: #30d158;
  --total-bg: #1c1c1e;
  --total-ink: #ffffff;
  --die: #f2f2f7;
  --die-shade: #c7c7cc;
  --pip: #1c1c1e;
  --tray: rgba(28, 28, 30, .94);
  --mark: #ffffff;
  color-scheme: dark;
}
[data-look="apple"] body { font-size: 17px; -webkit-font-smoothing: antialiased; }
[data-look="apple"] .eyebrow, [data-look="apple"] .label { font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; }
[data-look="apple"] .btn { border-radius: 999px; font-weight: 600; }
[data-look="apple"] .btn.primary { box-shadow: none; }
[data-look="apple"] .btn.big { font-family: var(--body); font-weight: 600; font-size: 17px; min-height: 54px; }
[data-look="apple"] .btn.ghost { border: 0; background: var(--surface-2); color: var(--accent-text); }
[data-look="apple"] .btn.text { color: var(--accent-text); font-weight: 400; }
[data-look="apple"] .icon-btn { border: 0; border-radius: 50%; color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .06); }
[data-look="apple"] .segmented { background: var(--surface-2); border-radius: 999px; }
[data-look="apple"] .segmented button { border-radius: 999px; color: var(--text); font-weight: 500; }
[data-look="apple"] .segmented button[aria-checked="true"] { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 3px 8px rgba(0, 0, 0, .12); }
[data-look="apple"] .stepper { background: var(--surface-2); border-radius: 999px; }
[data-look="apple"] .stepper button { background: none; border-radius: 999px; color: var(--accent-text); font-weight: 500; }
[data-look="apple"] .stepper output { font-family: var(--rounded); font-weight: 600; font-size: 20px; }
[data-look="apple"] .avatar { color: #ffffff; font-weight: 600; }
[data-look="apple"] .avatar-btn::after { box-shadow: 0 0 0 2px var(--surface); }
[data-look="apple"] .picker-head { font-family: var(--body); font-weight: 600; font-size: 17px; }
[data-look="apple"] .back-link { color: var(--accent-text); font-weight: 400; }
[data-look="apple"] .hero h1 { font-weight: 700; font-size: 34px; letter-spacing: -.02em; }
[data-look="apple"] .box { border-radius: 22px; }
[data-look="apple"] .box h2 { font-weight: 600; }
[data-look="apple"] .choice { border: 0; background: var(--surface-2); }
[data-look="apple"] .choice[aria-checked="true"] { background: color-mix(in srgb, var(--accent-text) 14%, transparent); box-shadow: inset 0 0 0 2px var(--accent-text); }
[data-look="apple"] .names input { border: 0; background: var(--surface-2); font-weight: 400; }
[data-look="apple"] .turn-name { font-family: var(--display); font-weight: 700; font-size: 28px; color: var(--text); letter-spacing: -.01em; }
[data-look="apple"] .strip-item { border: 0; box-shadow: 0 0 0 .5px var(--line); }
[data-look="apple"] .strip-item.on { box-shadow: inset 0 0 0 2px var(--accent-text); }
[data-look="apple"] .strip-total { font-family: var(--rounded); font-weight: 600; }
[data-look="apple"] .note { border-radius: 14px; }
[data-look="apple"] .dock { border-radius: 28px; box-shadow: 0 8px 30px var(--shadow), 0 0 0 .5px var(--line); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
[data-look="apple"] .die { box-shadow: 0 1px 3px rgba(0, 0, 0, .22), 0 0 0 .5px rgba(0, 0, 0, .1); }
[data-look="apple"] .die.held { box-shadow: 0 0 0 3px var(--accent-text), 0 6px 12px rgba(0, 0, 0, .2); }
[data-look="apple"] .die.held::after { background: var(--accent); color: #ffffff; font-weight: 600; }
[data-look="apple"] .ycard { background: none; box-shadow: none; padding: 0; gap: 4px; }
[data-look="apple"] .ysec-head { padding: 14px 16px 6px; }
[data-look="apple"] .ysec-head h2 { font-family: var(--body); font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-muted); }
[data-look="apple"] .progress { font-weight: 400; }
[data-look="apple"] .bar { height: 4px; background: var(--surface-2); }
[data-look="apple"] .bar i { background: var(--accent-text); }
[data-look="apple"] .ysec-body { background: var(--surface); border-radius: 12px; overflow: hidden; }
[data-look="apple"] .slot, [data-look="apple"] .sum-row { min-height: 48px; padding: 4px 12px 4px 16px; border-bottom: 0; background-image: linear-gradient(var(--paper-line), var(--paper-line)); background-size: calc(100% - 16px) .5px; background-position: right bottom; background-repeat: no-repeat; }
[data-look="apple"] .ysec-body > :last-child { background-image: none; }
[data-look="apple"] .slot:active { background-color: var(--surface-2); }
[data-look="apple"] .slot-name { font-weight: 400; font-size: 17px; }
[data-look="apple"] .slot-sub { font-size: 13px; font-weight: 400; }
[data-look="apple"] .mini-die { border-width: 1.2px; border-color: var(--ink-muted); border-radius: 6px; }
[data-look="apple"] .mini-die i.on { background: var(--ink-muted); }
[data-look="apple"] .val { font-family: var(--rounded); font-weight: 600; font-size: 19px; border-radius: 999px; }
[data-look="apple"] .val.empty { border: 0; }
[data-look="apple"] .val.empty::before { content: "+"; font-family: var(--body); font-weight: 300; font-size: 24px; color: var(--accent-text); }
[data-look="apple"] .read-only .val.empty::before { content: none; }
[data-look="apple"] .val.pot { border: 0; background: color-mix(in srgb, var(--accent-text) 12%, transparent); font-size: 17px; }
[data-look="apple"] .slot.best .val.pot { background: var(--accent); color: #ffffff; animation: none; }
[data-look="apple"] .sum-row { font-weight: 400; }
[data-look="apple"] .sum-row.sub { font-weight: 600; }
[data-look="apple"] .ytotal { margin-top: 18px; border-radius: 12px; padding: 12px 16px; }
[data-look="apple"] .ytotal span { font-size: 17px; letter-spacing: 0; text-transform: none; font-weight: 600; }
[data-look="apple"] .ytotal strong { font-family: var(--rounded); font-weight: 700; font-size: 30px; }
[data-look="apple"] .end-hero h1 { font-weight: 700; font-size: 34px; color: var(--text); }
[data-look="apple"] .rank li.first { box-shadow: inset 0 0 0 2px var(--accent-text); }
[data-look="apple"] .rank .total, [data-look="apple"] .rank .place { font-family: var(--rounded); font-weight: 700; }
[data-look="apple"] .sheet { border-radius: 30px 30px 0 0; }
[data-look="apple"] .sheet-head h3, [data-look="apple"] .modal h3 { font-family: var(--body); font-weight: 700; font-size: 20px; }
[data-look="apple"] .point-btn { border: 0; font-family: var(--rounded); font-weight: 600; font-size: 20px; border-radius: 14px; }
[data-look="apple"] .menu-item { font-weight: 400; font-size: 17px; }
[data-look="apple"] .menu-item.home { color: var(--accent-text); }
[data-look="apple"] .toggle-row { font-weight: 600; }
[data-look="apple"] .switch { width: 51px; height: 31px; background: rgba(120, 120, 128, .32); }
[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: #34c759; }
[data-look="apple"] .bonus-btn { border: 0; border-radius: 10px; background: color-mix(in srgb, var(--accent-text) 12%, transparent); color: var(--accent-text); font-weight: 600; }
[data-look="apple"] .modal { border-radius: 26px; text-align: center; }
[data-look="apple"] .rules b { color: var(--text); }
[data-look="apple"] .toast { background: var(--surface); color: var(--text); border-radius: 24px; }
@media (orientation: landscape) and (min-width: 640px) {
  [data-look="apple"] .ytotal { margin-top: 6px; }
}