:root {
      --font: "Space Grotesk", "Noto Sans KR", system-ui, sans-serif;
      --danger-bg: #fef2f2;
      --danger: #c2410c;
    }
    * { box-sizing: border-box; }
    [hidden] { display: none !important; }
    html, body { margin: 0; min-height: 100%; }
    body {
      font-family: var(--font);
      color: var(--ink);
      background:
        radial-gradient(circle at 8% 0%, rgba(255, 92, 57, 0.24), transparent 24%),
        radial-gradient(circle at 92% 10%, rgba(0, 169, 143, 0.18), transparent 24%),
        radial-gradient(circle at 60% 100%, rgba(255, 213, 74, 0.2), transparent 28%),
        linear-gradient(180deg, #fff9e8 0%, var(--bg) 40%, #fffdf6 100%);
      -webkit-font-smoothing: antialiased;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.18) 1px, transparent 1px);
      background-size: 34px 34px;
      opacity: .18;
      pointer-events: none;
    }
    .site-footer {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 28px 16px 40px;
      font-size: 13px;
      color: rgba(25, 21, 54, .48);
    }
    .site-footer a {
      color: inherit;
      margin: 0 8px;
      text-decoration: none;
    }
    .site-footer a:hover { color: var(--ink); }
    .page {
      position: relative;
      max-width: 1180px;
      margin: 0 auto;
      padding: 28px 20px 88px;
      display: grid;
      gap: 22px;
    }
    .hero {
      display: grid;
      grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
      gap: 14px;
      align-items: stretch;
    }
    .hero-copy,
    .hero-aside,
    .panel {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
    }
    .hero-copy {
      padding: 22px 24px 18px;
      background: linear-gradient(145deg, rgba(255,255,255,.98) 0%, rgba(255,245,200,.95) 50%, rgba(255,226,186,.96) 100%);
      border: 1px solid rgba(255, 92, 57, 0.16);
    }
    .hero-copy::after {
      content: "";
      position: absolute;
      right: -46px;
      bottom: -58px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(239, 108, 45, 0.14) 0%, rgba(239, 108, 45, 0) 72%);
      pointer-events: none;
    }
    .hero-flag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 13px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.78);
      color: #57413a;
      font-size: .76rem;
      font-weight: 700;
      letter-spacing: .03em;
    }
    .hero-title {
      margin: 12px 0 0;
      font-family: var(--font-head);
      font-size: clamp(2.2rem, 5vw, 3.55rem);
      line-height: .92;
      letter-spacing: -.03em;
      max-width: 8ch;
    }
    .hero-aside {
      padding: 18px;
      background: linear-gradient(180deg, #312e81 0%, #1f1747 50%, #17112f 100%);
      color: #fff;
      border: 1px solid rgba(255,255,255,.08);
      display: grid;
      gap: 10px;
    }
    .hero-aside-head {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      justify-content: space-between;
    }
    .hero-aside-head h2 {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1rem;
      letter-spacing: -.02em;
    }
    .hero-aside-head p {
      display: none;
    }
    .sound-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(255,255,255,.08);
      border-radius: 999px;
      padding: 10px 14px;
      font: inherit;
      font-size: .82rem;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: border-color .18s, background .18s, transform .18s;
      white-space: nowrap;
    }
    .sound-btn:hover {
      border-color: rgba(255,255,255,.38);
      background: rgba(255,255,255,.12);
      transform: translateY(-1px);
    }
    .sound-btn.is-off { opacity: .82; }
    .sound-btn.is-blocked {
      outline: 2px dashed #ff3d8d;
      outline-offset: 2px;
    }
    .sound-btn-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      color: #fff;
      line-height: 1;
    }
    .sound-btn-icon svg {
      display: block;
      width: 21px;
      height: 21px;
      stroke: currentColor;
      font-size: 1rem;
      line-height: 1;
    }
    .mode-board {
      display: grid;
      gap: 9px;
    }
    .mode-tab {
      width: 100%;
      text-align: left;
      font: inherit;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.05);
      border-radius: 20px;
      padding: 12px 14px;
      color: #fff;
      cursor: pointer;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 14px;
      align-items: center;
      transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
      text-decoration: none;
      box-sizing: border-box;
    }
    a.mode-tab:visited { color: #fff; }
    a.mode-tab.is-on:visited { color: #301405; }
    .mode-tab:hover {
      transform: translateY(-1px);
      border-color: rgba(245, 184, 61, 0.52);
    }
    .mode-tab.is-on {
      color: #301405;
      border-color: transparent;
      background: linear-gradient(135deg, rgba(239,108,45,.96) 0%, rgba(245,184,61,.94) 100%);
      box-shadow: 0 18px 40px rgba(239, 108, 45, 0.28);
    }
    .mode-icon {
      width: 42px;
      height: 42px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: rgba(255,255,255,.1);
      color: inherit;
    }
    .mode-tab.is-on .mode-icon {
      background: rgba(255,255,255,.5);
    }
    .mode-copy {
      display: grid;
      gap: 5px;
      min-width: 0;
    }
    .mode-name {
      display: block;
      font-family: var(--font-head);
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -.02em;
    }
    .mode-note {
      display: block;
      font-size: .72rem;
      line-height: 1.28;
      color: rgba(255,255,255,.72);
    }
    .mode-tab.is-on .mode-note {
      color: rgba(48,20,5,.76);
    }
    .mode-meta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      font-size: .76rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .mode-tab.is-on .mode-meta {
      background: rgba(255,255,255,.5);
    }
    .panel {
      padding: 20px;
      background: var(--surface);
      border: 1px solid var(--line);
      backdrop-filter: blur(14px);
    }
    .panel-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 14px;
    }
    .panel-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255, 92, 57, 0.12);
      color: var(--brand-deep);
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .05em;
      text-transform: uppercase;
    }
    .panel-title {
      margin: 8px 0 6px;
      font-family: var(--font-head);
      font-size: clamp(1.7rem, 3vw, 2.15rem);
      line-height: .95;
      letter-spacing: -.02em;
    }
    .panel-desc {
      display: none;
    }
    .metric-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    .metric {
      min-width: 92px;
      padding: 8px 10px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffffff 0%, #fff5d8 100%);
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .metric-value {
      font-size: 1rem;
      font-weight: 700;
      line-height: 1;
      letter-spacing: -.05em;
    }
    .metric-label {
      font-size: .7rem;
      color: #6b5d53;
      line-height: 1;
      white-space: nowrap;
    }
    .game-layout {
      display: grid;
      align-items: start;
      gap: 18px;
    }
    .game-layout--ladder {
      grid-template-columns: minmax(0, 1.12fr) minmax(265px, .78fr);
    }
    .game-layout--roulette {
      grid-template-columns: minmax(0, 1fr) minmax(320px, .84fr);
    }
    .game-layout--dice {
      grid-template-columns: minmax(0, 1fr);
    }
    .stack-col {
      display: grid;
      gap: 14px;
    }
    .card-block,
    .guide-card,
    .spotlight-card,
    .dice-spotlight {
      border-radius: 22px;
      padding: 18px;
    }
    .card-block {
      background: linear-gradient(180deg, #fffdfa 0%, #fff6dc 100%);
      border: 1px solid var(--line);
    }
    .block-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
    }
    .block-title {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.16rem;
      line-height: 1;
      letter-spacing: -.01em;
    }
    .block-copy {
      display: none;
    }
    .preset-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .mini-btn {
      font: inherit;
      font-size: .78rem;
      font-weight: 700;
      color: var(--ink);
      border: 1px solid var(--line);
      background: var(--surface-soft);
      border-radius: 999px;
      padding: 8px 12px;
      cursor: pointer;
      transition: transform .18s, border-color .18s, background .18s;
    }
    .mini-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(239, 108, 45, 0.34);
      background: #fff;
    }
    .mini-btn--ghost {
      padding: 7px 10px;
      font-size: .72rem;
      background: rgba(255,255,255,.88);
    }
    .mini-btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none;
    }
    .field-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .field-head-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .save-flash {
      display: inline-block;
      margin-left: 6px;
      font-size: .72rem;
      font-weight: 700;
      color: var(--ok);
      opacity: 0;
      transform: translateY(1px);
      transition: opacity .22s, transform .22s;
    }
    .save-flash.is-visible { opacity: 1; transform: translateY(0); }
    .ladder-inputs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    label {
      display: block;
      margin-bottom: 8px;
      font-size: .78rem;
      font-weight: 700;
      color: #4b5563;
      letter-spacing: .03em;
    }
    .field-head label {
      margin-bottom: 0;
    }
    textarea,
    select {
      width: 100%;
      color: var(--ink);
      font: inherit;
      font-size: .94rem;
      border: 1.5px solid var(--line-strong);
      border-radius: 16px;
      padding: 14px 16px;
      background: #fffdfa;
      transition: border-color .16s, box-shadow .16s, background .16s;
    }
    textarea {
      resize: vertical;
      min-height: 160px;
      line-height: 1.65;
    }
    textarea:focus,
    select:focus {
      outline: none;
      border-color: var(--brand);
      background: #fff;
      box-shadow: 0 0 0 4px rgba(239, 108, 45, 0.14);
    }
    .ladder-hint,
    .dice-hint {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.55;
    }
    .ladder-actions,
    .roulette-left-btns,
    .dice-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .ladder-actions {
      margin-top: 18px;
    }
    .ladder-actions .btn {
      font-size: .9rem;
      font-weight: 700;
      min-height: 46px;
      padding: 11px 16px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font: inherit;
      font-size: .9rem;
      font-weight: 700;
      color: var(--ink);
      border: 1.5px solid var(--line);
      background: #fff;
      border-radius: 16px;
      padding: 11px 18px;
      cursor: pointer;
      box-shadow: 0 8px 18px rgba(31,41,55,.04);
      transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
    }
    .btn:hover:not(:disabled) {
      transform: translateY(-1px);
      border-color: rgba(239, 108, 45, 0.42);
      box-shadow: 0 14px 24px rgba(31,41,55,.08);
    }
    .btn:active:not(:disabled) { transform: translateY(0); }
    .btn:disabled {
      opacity: .45;
      cursor: not-allowed;
      box-shadow: none;
    }
    .btn-primary {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, var(--brand) 0%, #ff9b54 100%);
    }
    .btn-primary:hover:not(:disabled) {
      background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
    }
    .btn-ok {
      color: #fff;
      border-color: transparent;
      background: linear-gradient(135deg, var(--ok) 0%, #18b56f 100%);
    }
    .btn-wide {
      width: 100%;
    }
    .btn-stack {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 3px;
      min-height: 64px;
      text-align: left;
    }
    .btn-main {
      display: block;
      width: 100%;
      font-size: .96rem;
      line-height: 1.2;
    }
    .btn-sub {
      display: block;
      width: 100%;
      font-size: .74rem;
      font-weight: 600;
      line-height: 1.4;
      opacity: .82;
    }
    .ladder-err {
      margin-bottom: 18px;
      padding: 14px 16px;
      border-radius: 18px;
      background: var(--danger-bg);
      border: 1px solid rgba(194, 65, 12, 0.22);
      color: var(--danger);
      font-size: .9rem;
      line-height: 1.56;
    }
    .ladder-stage {
      min-height: 360px;
      overflow: auto;
      padding: 12px;
      border-radius: 20px;
      border: 1px dashed rgba(107, 114, 128, 0.28);
      background: linear-gradient(180deg, #fff 0%, #fff8ee 100%);
    }
    .ladder-stage:empty {
      display: grid;
      place-items: center;
    }
    .ladder-stage:empty::before {
      content: attr(data-empty);
      max-width: 20rem;
      padding: 24px;
      text-align: center;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.62;
    }
    .ladder-stage canvas {
      display: block;
      max-width: 100%;
      margin: 0 auto;
    }
    .ladder-result {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      margin-top: 16px;
    }
    .ladder-result-item {
      background: linear-gradient(180deg, #fff 0%, #fff7ec 100%);
      border: 1.5px solid var(--brand-soft);
      border-radius: 18px;
      padding: 12px 14px;
      text-align: center;
      font-size: .86rem;
      box-shadow: 0 8px 16px rgba(31,41,55,.04);
    }
    .ladder-result-item .lri-name {
      margin-bottom: 5px;
      font-weight: 700;
    }
    .ladder-result-item .lri-result { font-weight: 600; }
    .guide-card {
      background: linear-gradient(180deg, #fff6bc 0%, #fffdf2 100%);
      border: 1px solid rgba(255, 92, 57, 0.18);
      display: grid;
      gap: 10px;
    }
    .guide-title {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.08rem;
      letter-spacing: -.01em;
    }
    .guide-copy {
      display: none;
    }
    .quick-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .quick-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.84);
      border: 1px solid rgba(255, 92, 57, 0.12);
      color: #4a3b43;
      font-size: .78rem;
      font-weight: 700;
    }
    .guide-note {
      display: none;
    }
    .r-parts-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 190px;
      gap: 12px;
      align-items: start;
    }
    .r-parts-row textarea {
      min-height: 160px;
    }
    .r-parts-controls {
      display: grid;
      gap: 10px;
    }
    .r-dupe-select-wrap {
      position: relative;
    }
    .dice-rule-row .r-dupe-select-wrap {
      flex: 1;
      max-width: 230px;
    }
    .r-dupe-select {
      width: 100%;
      min-height: 48px;
      padding-right: 42px;
      appearance: none;
      cursor: pointer;
    }
    .r-dupe-select-caret {
      position: absolute;
      top: 50%;
      right: 14px;
      display: grid;
      width: 20px;
      height: 20px;
      place-items: center;
      color: var(--ink);
      pointer-events: none;
      transform: translateY(-50%);
    }
    .r-dupe-select-caret svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .r-dupe-select:disabled {
      opacity: .45;
      cursor: default;
    }
    .r-session-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 10px;
    }
    .r-session-item {
      min-height: 82px;
      padding: 12px 14px;
      border-radius: 18px;
      border: 1.5px solid var(--brand-soft);
      background: linear-gradient(180deg, #fff 0%, #fff7ec 100%);
      text-align: center;
      display: grid;
      align-content: center;
      gap: 4px;
    }
    .r-session-item .rsi-name {
      font-weight: 700;
      color: var(--brand-deep);
    }
    .r-session-item .rsi-result { font-weight: 600; }
    .r-session-item.pending { opacity: .42; }
    .spotlight-card {
      background: linear-gradient(180deg, #7c3aed 0%, #4426a8 54%, #22104c 100%);
      border: 1px solid rgba(255,255,255,.08);
      color: #fff;
      box-shadow: 0 24px 60px rgba(88, 28, 135, .26);
      display: grid;
      gap: 12px;
      align-content: start;
    }
    .spotlight-card .block-title {
      color: #fff;
    }
    .spotlight-card .block-copy {
      color: rgba(255,255,255,.72);
      max-width: none;
    }
    .roulette-cta-group,
    .ladder-cta-group {
      display: grid;
      gap: 8px;
    }
    .ladder-cta-group {
      margin-top: 14px;
    }
    .wheel-wrap {
      position: relative;
      width: min(100%, 310px);
      aspect-ratio: 1 / 1;
      margin: 0 auto;
      flex-shrink: 0;
    }
    .wheel-wrap canvas {
      display: block;
      width: 100%;
      height: 100%;
    }
    .wheel-pointer {
      position: absolute;
      top: -6px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 11px solid transparent;
      border-right: 11px solid transparent;
      border-top: 26px solid #fff4cf;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.28));
    }
    @keyframes popIn {
      0% { transform: scale(.6); opacity: 0; }
      70% { transform: scale(1.08); }
      100% { transform: scale(1); opacity: 1; }
    }
    .roulette-result {
      min-height: 60px;
      padding: 12px 16px;
      border-radius: 18px;
      border: 1px solid rgba(255, 213, 74, 0.56);
      background: rgba(255,255,255,.08);
      color: #fff7d8;
      text-align: center;
      display: grid;
      place-items: center;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.55;
      animation: popIn .32s cubic-bezier(.34,1.56,.64,1);
    }
    .spotlight-pills {
      display: none;
    }
    .dice-panel { text-align: left; }
    .dice-spotlight {
      background: linear-gradient(160deg, #fff9d6 0%, #ffffff 100%);
      border: 1px solid var(--line);
      display: grid;
      gap: 18px;
    }
    .count-btns {
      display: inline-flex;
      gap: 8px;
      padding: 6px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--surface-soft);
    }
    .count-btn {
      font: inherit;
      font-size: .84rem;
      font-weight: 700;
      color: var(--muted);
      background: transparent;
      border: 0;
      border-radius: 999px;
      padding: 9px 18px;
      cursor: pointer;
      transition: background .18s, color .18s, box-shadow .18s;
    }
    .count-btn.is-on {
      color: var(--ink);
      background: #fff;
      box-shadow: 0 6px 18px rgba(31,41,55,.08);
    }
    .dice-stage {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 18px;
      min-height: 190px;
      padding: 16px;
      border-radius: 20px;
      border: 1px dashed rgba(239, 108, 45, 0.18);
      background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, rgba(255,247,238,.9) 100%);
    }
    .die {
      width: 124px;
      height: 124px;
      padding: 20px;
      background: linear-gradient(180deg, #fff 0%, #fff4e8 100%);
      border: 2px solid rgba(107,114,128,.18);
      border-radius: 24px;
      box-shadow: 0 16px 28px rgba(31,41,55,.12), inset 0 1px 2px rgba(255,255,255,.85);
      display: grid;
      grid-template-areas:
        "a . b"
        "c d e"
        "f . g";
      transition: transform .08s;
    }
    .die.rolling { animation: diceShake .08s infinite alternate; }
    @keyframes diceShake {
      from { transform: rotate(-4deg) scale(.97); }
      to { transform: rotate(4deg) scale(1.03); }
    }
    .dot {
      width: 14px;
      height: 14px;
      background: #203047;
      border-radius: 50%;
      align-self: center;
      justify-self: center;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
    }
    .dice-sum {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 52px;
      padding: 10px 16px;
      border-radius: 16px;
      background: var(--brand-soft);
      color: var(--brand-deep);
      font-size: 1.04rem;
      font-weight: 700;
    }
    .dice-hint {
      margin: 0;
      font-size: .86rem;
    }
    @media (max-width: 1024px) {
      .hero,
      .game-layout--ladder,
      .game-layout--roulette,
      .game-layout--dice {
        grid-template-columns: 1fr;
      }
      .guide-card {
        position: static;
      }
    }
    @media (max-width: 760px) {
      .page {
        padding: 22px 16px 72px;
      }
      .hero-copy,
      .hero-aside,
      .panel,
      .card-block,
      .guide-card,
      .spotlight-card,
      .dice-spotlight {
        padding: 16px;
      }
      .panel-top,
      .block-head,
      .hero-aside-head {
        flex-direction: column;
      }
      .metric-row {
        justify-content: flex-start;
      }
      .mode-tab {
        grid-template-columns: auto minmax(0, 1fr);
      }
      .mode-meta {
        grid-column: 2;
        justify-self: start;
      }
      .ladder-inputs,
      .r-parts-row {
        grid-template-columns: 1fr;
      }
      .ladder-actions .btn,
      .roulette-left-btns .btn,
      .dice-actions .btn {
        flex: 1 1 160px;
      }
    }
    @media (max-width: 520px) {
      .hero-title {
        max-width: none;
        font-size: 2.15rem;
      }
      .mode-meta {
        grid-column: 1 / -1;
      }
      .wheel-wrap {
        width: min(100%, 270px);
      }
      .dice-stage {
        gap: 14px;
        min-height: 160px;
      }
      .die {
        width: 98px;
        height: 98px;
        padding: 15px;
      }
      .dot {
        width: 10px;
        height: 10px;
      }
    }

    /* Party play mode */
    :root {
      --font-head: "Jua", "Baloo 2", "Noto Sans KR", sans-serif;
      --bg: #47dbff;
      --surface: #fffdf6;
      --surface-strong: #ffffff;
      --surface-soft: #fff7a8;
      --ink: #191536;
      --muted: #625d78;
      --line: #191536;
      --line-strong: #191536;
      --brand: #ff3d8d;
      --brand-deep: #d91c69;
      --brand-soft: rgba(255, 61, 141, .18);
      --accent: #00cfa7;
      --gold: #ffe600;
      --ok: #10b981;
      --party-pink: #ff3d8d;
      --party-blue: #36d8ff;
      --party-yellow: #ffe600;
      --party-lime: #a8f43d;
      --party-orange: #ff7a1a;
      --party-purple: #6c3cff;
      --shadow: 8px 8px 0 var(--ink);
      --radius-xl: 26px;
      --radius-lg: 22px;
      --radius-md: 16px;
    }
    body {
      background:
        radial-gradient(circle at 10% 18%, rgba(255, 230, 0, .98) 0 9%, transparent 9.2%),
        radial-gradient(circle at 91% 8%, rgba(255, 61, 141, .92) 0 10%, transparent 10.2%),
        radial-gradient(circle at 80% 88%, rgba(168, 244, 61, .95) 0 12%, transparent 12.2%),
        linear-gradient(135deg, #3dd9ff 0%, #99eeff 45%, #ff8fc0 100%);
      background-attachment: fixed;
    }
    body::before {
      background-image: radial-gradient(rgba(25, 21, 54, .22) 1.6px, transparent 1.6px);
      background-size: 22px 22px;
      opacity: .3;
    }
    body > .uz-nav {
      position: relative;
      z-index: 20;
      background: rgba(255,255,255,.96);
      border-bottom: 3px solid var(--ink);
      box-shadow: 0 5px 0 rgba(25,21,54,.2);
    }
    .page {
      max-width: 1360px;
      padding: 26px 24px 96px;
      gap: 26px;
    }
    .hero {
      grid-template-columns: minmax(230px, .42fr) minmax(0, 1.58fr);
      gap: 0;
      border: 3px solid var(--ink);
      border-radius: 28px;
      box-shadow: var(--shadow);
      overflow: hidden;
      animation: stageDrop .5s cubic-bezier(.2,.8,.2,1) both;
    }
    .hero-copy,
    .hero-aside,
    .panel {
      overflow: hidden;
      border-radius: 0;
      box-shadow: none;
    }
    .hero-copy {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 205px;
      padding: 25px 28px;
      background: var(--party-yellow);
      border: 0;
      border-right: 3px solid var(--ink);
    }
    .hero-copy::before,
    .hero-copy::after {
      content: "";
      position: absolute;
      width: 76px;
      height: 76px;
      background: var(--party-pink);
      border: 3px solid var(--ink);
      transform: rotate(18deg);
      opacity: 1;
    }
    .hero-copy::before { top: -47px; right: 22px; }
    .hero-copy::after { right: -50px; bottom: -34px; border-radius: 50%; }
    .hero-flag {
      position: relative;
      z-index: 1;
      width: max-content;
      padding: 7px 11px;
      background: var(--ink);
      color: #fff;
      border: 0;
      border-radius: 8px;
      font-size: .72rem;
      transform: rotate(-2deg);
    }
    .hero-title {
      position: relative;
      z-index: 1;
      margin-top: 17px;
      max-width: 7ch;
      font-size: clamp(2.35rem, 4vw, 4rem);
      line-height: .98;
      font-weight: 400;
      letter-spacing: -.02em;
      text-shadow: 2px 2px 0 rgba(255,255,255,.76);
    }
    .hero-aside {
      min-width: 0;
      padding: 18px 20px 20px;
      background:
        radial-gradient(circle at 92% 12%, rgba(255,255,255,.14) 0 8%, transparent 8.3%),
        linear-gradient(145deg, #4020a8 0%, #211052 100%);
      color: #fff;
      border: 0;
      gap: 14px;
    }
    .hero-aside-head {
      align-items: center;
    }
    .hero-aside-head h2 {
      font-size: clamp(1.3rem, 1.7vw, 1.48rem);
      letter-spacing: .02em;
    }
    .sound-btn {
      width: 44px;
      height: 44px;
      min-height: 44px;
      padding: 0;
      justify-content: center;
      border: 2px solid #fff;
      background: rgba(255,255,255,.12);
      box-shadow: 3px 3px 0 rgba(0,0,0,.25);
      border-radius: 50%;
    }
    .sound-btn-label {
      display: none;
    }
    .sound-btn-icon {
      width: auto;
      height: auto;
      font-size: 1.05rem;
    }
    .mode-board {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 13px;
    }
    .mode-tab {
      min-height: 120px;
      padding: 14px;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 12px;
      color: var(--ink);
      border: 3px solid var(--ink);
      border-radius: 18px;
      box-shadow: 4px 4px 0 var(--ink);
      transform: translateY(0) rotate(0);
    }
    .mode-tab[data-mode="ladder"] { background: var(--party-pink); }
    .mode-tab[data-mode="roulette"] { background: var(--party-blue); }
    .mode-tab[data-mode="dice"] { background: var(--party-lime); }
    .mode-tab:hover {
      border-color: var(--ink);
      transform: translateY(-4px) rotate(-1deg);
      box-shadow: 5px 8px 0 var(--ink);
    }
    .mode-tab.is-on {
      color: var(--ink);
      border-color: var(--ink);
      outline: 3px solid #fff;
      outline-offset: -7px;
      transform: translateY(-6px) rotate(-2.4deg);
      box-shadow: 6px 9px 0 var(--ink);
      animation: cartridgePop .32s cubic-bezier(.2,.9,.2,1.4);
    }
    .mode-tab[data-mode="roulette"].is-on { transform: translateY(-6px) rotate(2.4deg); }
    .mode-icon,
    .mode-tab.is-on .mode-icon {
      width: 52px;
      height: 52px;
      border: 2px solid var(--ink);
      border-radius: 14px;
      background: rgba(255,255,255,.82);
    }
    .mode-icon svg { width: 29px; height: 29px; stroke-width: 2; }
    .mode-name {
      font-family: var(--font-head);
      font-size: clamp(1.3rem, 1.55vw, 1.48rem);
      font-weight: 400;
      line-height: 1;
    }
    .mode-note,
    .mode-tab.is-on .mode-note {
      color: rgba(25,21,54,.76);
      font-size: .78rem;
      font-weight: 700;
      line-height: 1.2;
    }
    .mode-meta,
    .mode-tab.is-on .mode-meta {
      grid-column: 1 / -1;
      justify-self: start;
      min-height: 27px;
      padding: 5px 9px;
      background: var(--ink);
      color: #fff;
      border-radius: 7px;
      font-size: .73rem;
    }
    .panel {
      padding: 24px;
      border: 3px solid var(--ink);
      border-radius: 30px;
      box-shadow: var(--shadow);
      backdrop-filter: none;
      animation: panelEnter .42s cubic-bezier(.2,.8,.2,1) both;
    }
    #panelLadder {
      background:
        linear-gradient(135deg, rgba(255,255,255,.36) 25%, transparent 25%) 0 0 / 28px 28px,
        #ff8fbd;
    }
    #panelRoulette {
      background:
        radial-gradient(circle, rgba(255,255,255,.55) 2px, transparent 2.5px) 0 0 / 24px 24px,
        #46dcff;
    }
    #panelDice {
      overflow: visible;
      background:
        repeating-linear-gradient(-45deg, rgba(255,255,255,.35) 0 12px, transparent 12px 24px),
        var(--party-yellow);
    }
    .panel-top {
      align-items: center;
      margin-bottom: 20px;
    }
    .panel-eyebrow {
      padding: 6px 10px;
      background: var(--ink);
      color: #fff;
      border-radius: 7px;
      transform: rotate(-2deg);
    }
    .panel-title {
      margin: 10px 0 0;
      font-size: clamp(2.4rem, 5vw, 4.4rem);
      font-weight: 400;
      line-height: .98;
      letter-spacing: -.01em;
      text-shadow: 2px 2px 0 #fff;
    }
    .metric-row { gap: 10px; }
    .metric {
      min-width: 104px;
      padding: 9px 13px;
      background: #fff;
      border: 2px solid var(--ink);
      border-radius: 12px;
      box-shadow: 3px 3px 0 var(--ink);
    }
    .metric-value { font-size: 1.25rem; }
    .metric-label { color: var(--ink); font-weight: 700; }
    .game-layout { gap: 20px; }
    .game-layout--ladder {
      grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr);
      align-items: start;
    }
    .game-layout--ladder > .stack-col { display: contents; }
    .game-layout--ladder > .stack-col > .card-block:first-child { grid-column: 1; }
    .game-layout--ladder > .stack-col > .card-block:nth-child(2) { grid-column: 2; }
    .game-layout--ladder > .guide-card { display: none; }
    .game-layout--roulette {
      grid-template-columns: minmax(420px, 1.05fr) minmax(360px, .95fr);
      align-items: start;
    }
    .game-layout--roulette > .spotlight-card {
      grid-column: 1;
      grid-row: 1;
    }
    .game-layout--roulette > .stack-col {
      grid-column: 2;
      grid-row: 1;
    }
    .card-block,
    .guide-card,
    .spotlight-card,
    .dice-spotlight {
      border: 3px solid var(--ink);
      border-radius: 22px;
      box-shadow: 5px 5px 0 var(--ink);
    }
    .card-block {
      padding: 18px;
      background: #fffdf7;
    }
    .block-title {
      font-size: 1.35rem;
      font-weight: 400;
      letter-spacing: 0;
    }
    .mini-btn {
      color: var(--ink);
      border: 2px solid var(--ink);
      background: var(--party-yellow);
      border-radius: 9px;
      box-shadow: 2px 2px 0 var(--ink);
    }
    .mini-btn:hover {
      border-color: var(--ink);
      background: var(--party-lime);
      transform: translate(-1px,-1px);
      box-shadow: 3px 3px 0 var(--ink);
    }
    .mini-btn--ghost { background: #fff; }
    label { color: var(--ink); }
    textarea,
    select {
      color: var(--ink);
      border: 2px solid var(--ink);
      border-radius: 13px;
      background: #fff;
      box-shadow: inset 0 -4px 0 rgba(25,21,54,.06);
    }
    textarea:focus,
    select:focus {
      border-color: var(--ink);
      box-shadow: 0 0 0 4px var(--party-yellow), inset 0 -4px 0 rgba(25,21,54,.06);
    }
    .ladder-inputs { gap: 10px; }
    .game-layout--ladder textarea { min-height: 140px; }
    .ladder-hint { display: none; }
    .btn {
      min-height: 46px;
      color: var(--ink);
      border: 2px solid var(--ink);
      border-radius: 12px;
      background: #fff;
      box-shadow: 3px 4px 0 var(--ink);
    }
    .btn:hover:not(:disabled) {
      border-color: var(--ink);
      transform: translate(-1px,-2px);
      box-shadow: 5px 6px 0 var(--ink);
    }
    .btn:active:not(:disabled) {
      transform: translate(2px,2px);
      box-shadow: 1px 1px 0 var(--ink);
    }
    .btn-primary,
    .btn-primary:hover:not(:disabled) {
      color: var(--ink);
      border-color: var(--ink);
      background: var(--party-yellow);
    }
    .btn-ok {
      color: var(--ink);
      border-color: var(--ink);
      background: var(--party-lime);
    }
    .btn:disabled {
      color: rgba(25,21,54,.5);
      border-color: rgba(25,21,54,.42);
      background: rgba(255,255,255,.62);
      box-shadow: none;
    }
    .ladder-err {
      border: 2px solid var(--ink);
      background: #fff;
      color: #c11259;
      box-shadow: 3px 3px 0 var(--ink);
    }
    .ladder-stage {
      min-height: 590px;
      padding: 16px;
      border: 3px solid var(--ink);
      border-radius: 16px;
      background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.52) 0 2px, transparent 2.5px),
        radial-gradient(circle at 84% 78%, rgba(255,230,0,.46) 0 3px, transparent 3.5px),
        linear-gradient(145deg, #5ae1ff 0%, #2fa9ea 48%, #6171e5 100%);
      background-size: 24px 24px, 36px 36px, auto;
      box-shadow: inset 0 0 0 5px rgba(25,21,54,.15), 4px 4px 0 var(--ink);
    }
    .ladder-stage canvas { filter: drop-shadow(0 9px 0 rgba(25,21,54,.18)); }
    .ladder-stage:empty::before {
      color: var(--ink);
      font-weight: 700;
      background: var(--party-yellow);
      border: 2px solid var(--ink);
      border-radius: 14px;
      box-shadow: 4px 4px 0 var(--ink);
      transform: rotate(-1deg);
    }
    .result-board {
      margin-top: 14px;
      padding: 13px;
      border: 2px solid var(--ink);
      border-radius: 16px;
      background: rgba(255,255,255,.88);
      box-shadow: 3px 3px 0 var(--ink);
    }
    .result-board-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 10px;
    }
    .result-board-title {
      margin: 0;
      font-family: var(--font-head);
      font-size: 1.05rem;
      font-weight: 400;
    }
    .result-board-progress {
      padding: 5px 8px;
      border: 1.5px solid var(--ink);
      border-radius: 999px;
      background: var(--party-yellow);
      color: var(--ink);
      font-size: .72rem;
      font-weight: 700;
      white-space: nowrap;
    }
    .result-grid,
    .ladder-result,
    .r-session-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
      gap: 9px;
    }
    .result-board .ladder-result { margin-top: 0; }
    .result-card,
    .ladder-result-item,
    .r-session-item {
      min-height: 102px;
      color: var(--ink);
      border: 2px solid var(--ink) !important;
      background: var(--party-yellow);
      border-radius: 12px;
      box-shadow: 2px 3px 0 var(--ink);
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 7px;
      padding: 12px 13px;
      text-align: center;
    }
    .result-card:nth-child(3n+2),
    .r-session-item:nth-child(3n+2),
    .ladder-result-item:nth-child(3n+2) { background: #bdff64; }
    .result-card:nth-child(3n),
    .r-session-item:nth-child(3n),
    .ladder-result-item:nth-child(3n) { background: #7de8ff; }
    .result-card-name,
    .ladder-result-item .lri-name,
    .r-session-item .rsi-name {
      margin: 0;
      min-width: 0;
      max-width: 100%;
      color: var(--ink) !important;
      font-weight: 700;
      font-size: clamp(1rem, 1.4vw, 1.18rem);
      line-height: 1.15;
      letter-spacing: -.035em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .result-card-outcome,
    .ladder-result-item .lri-result,
    .r-session-item .rsi-result {
      min-width: 0;
      max-width: 100%;
      font-weight: 700;
      font-size: clamp(1.1rem, 1.75vw, 1.38rem);
      line-height: 1.12;
      letter-spacing: -.04em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .result-card-text--condensed {
      letter-spacing: -.06em;
    }
    /* 연속 모드 결과처럼 긴 텍스트는 자르지 않고 여러 줄로 표시 */
    .result-card-outcome--multi {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      word-break: keep-all;
      overflow-wrap: anywhere;
      font-size: clamp(.92rem, 1.4vw, 1.12rem);
      line-height: 1.3;
    }
    /* 사다리 결과보드는 긴 이름/결과도 ... 없이 전부 보여 준다 */
    .result-board .ladder-result-item .result-card-name,
    .result-board .ladder-result-item .lri-name,
    .result-board .ladder-result-item .result-card-outcome,
    .result-board .ladder-result-item .lri-result {
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      word-break: keep-all;
      overflow-wrap: anywhere;
      line-height: 1.3;
    }
    .result-card.pending {
      opacity: .58;
      filter: saturate(.68);
    }
    .result-board--roulette {
      background: rgba(255,255,255,.96);
    }
    .result-board--roulette .result-board-title { color: var(--ink); }
    .roulette-left textarea { min-height: 170px; }
    .r-parts-row { grid-template-columns: minmax(0, 1fr) 180px; }
    .r-parts-row textarea { min-height: 132px; }
    .spotlight-card {
      position: sticky;
      top: 18px;
      min-height: 680px;
      padding: 22px;
      background:
        radial-gradient(circle at 50% 48%, rgba(255,230,0,.36) 0 28%, transparent 28.5%),
        linear-gradient(155deg, #ff3d8d 0%, #ff6d3d 52%, #6c3cff 100%);
      color: #fff;
      box-shadow: 7px 7px 0 var(--ink);
      align-content: center;
    }
    .play-sticker {
      position: absolute;
      top: 16px;
      right: -8px;
      padding: 7px 14px;
      color: var(--ink);
      background: var(--party-yellow);
      border: 2px solid var(--ink);
      box-shadow: 3px 3px 0 var(--ink);
      font-family: var(--font-head);
      font-size: 1rem;
      transform: rotate(7deg);
    }
    .wheel-wrap {
      width: min(100%, 520px);
      height: auto;
      aspect-ratio: 1 / 1;
      padding: 16px;
      box-sizing: border-box;
      border: 3px solid #2b1552;
      border-radius: 50%;
      background:
        linear-gradient(180deg, #54287f 0%, #36155b 58%, #261041 100%);
      box-shadow:
        0 10px 22px rgba(25,21,54,.26),
        inset 0 1px 0 rgba(255,255,255,.08);
      transform: rotate(-1deg);
      isolation: isolate;
      cursor: grab;
      touch-action: none;
      user-select: none;
      align-self: center;
      justify-self: center;
    }
    .wheel-wrap.is-dragging {
      cursor: grabbing;
      transform: rotate(-1deg) scale(1.018);
      box-shadow:
        0 12px 26px rgba(25,21,54,.3),
        inset 0 1px 0 rgba(255,255,255,.12);
    }
    .wheel-wrap canvas {
      position: relative;
      z-index: 1;
      aspect-ratio: 1 / 1;
      height: auto;
      border-radius: 50%;
      display: block;
      transform: translateZ(0);
      backface-visibility: hidden;
    }
    .wheel-motion {
      position: relative;
      width: 100%;
      height: auto;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      overflow: hidden;
      clip-path: circle(50% at 50% 50%);
      contain: paint;
      isolation: isolate;
      transform: translateZ(0);
      backface-visibility: hidden;
      will-change: transform;
    }
    .wheel-wrap.is-spinning .wheel-motion {
      animation: rouletteWheelRattle .34s cubic-bezier(.36,.02,.54,1) infinite alternate;
    }
    .wheel-wrap.is-winning .wheel-motion {
      animation: rouletteWheelSettle .58s cubic-bezier(.18,.88,.32,1.25) 2;
    }
    @keyframes rouletteWheelRattle {
      0% { transform: translate(-2px, 1px) rotate(-1.5deg) scale(.992); }
      35% { transform: translate(2px, -2px) rotate(1.25deg) scale(1.008); }
      68% { transform: translate(-1px, 2px) rotate(-.85deg) scale(.996); }
      100% { transform: translate(2px, 0) rotate(.9deg) scale(1.005); }
    }
    @keyframes rouletteWheelSettle {
      0% { transform: translate(3px, -2px) rotate(2deg) scale(1.02); }
      48% { transform: translate(-2px, 1px) rotate(-1.15deg) scale(.992); }
      100% { transform: translate(0) rotate(0) scale(1); }
    }
    @keyframes rouletteWheelRattleReduced {
      from { transform: translate(-1px, 0) rotate(-.45deg); }
      to { transform: translate(1px, 0) rotate(.45deg); }
    }
    @keyframes rouletteWheelSettleReduced {
      0% { transform: translate(1px, -1px) rotate(.55deg); }
      100% { transform: translate(0) rotate(0); }
    }
    @keyframes roulettePointerTickReduced {
      0%, 100% { transform: translateX(-50%) rotate(0); }
      50% { transform: translateX(-50%) translateY(1px) rotate(-3deg); }
    }
    @keyframes roulettePointerSettleReduced {
      0% { transform: translateX(-50%) rotate(-4deg); }
      100% { transform: translateX(-50%) rotate(0); }
    }
    .wheel-lights {
      position: absolute;
      z-index: 2;
      inset: 0;
      border-radius: 50%;
      overflow: visible;
      isolation: isolate;
      pointer-events: none;
    }
    .wheel-lights::before {
      content: '';
      position: absolute;
      z-index: 0;
      inset: 5px;
      border: 15px solid #28104d;
      border-radius: 50%;
      box-shadow: inset 0 0 0 2px rgba(136,86,145,.78), 0 0 0 1px rgba(255,237,149,.56);
    }
    .wheel-light {
      position: absolute;
      z-index: 2;
      width: 17px;
      height: 17px;
      border: 0;
      border-radius: 50%;
      background: #aa6500;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.32),
        0 0 10px 3px rgba(255,190,0,.42);
      transform: translate(-50%, -50%);
      opacity: .36;
      filter: brightness(.78);
      will-change: transform, opacity, filter, box-shadow;
      animation: rouletteBulbIdle 1.4s linear infinite;
      animation-delay: calc(var(--i) * -.07s);
    }
    .wheel-wrap.is-spinning .wheel-light {
      animation: rouletteBulbSpin .9s linear infinite;
      animation-delay: calc(var(--i) * -.045s);
    }
    .wheel-wrap.is-winning .wheel-light {
      animation: rouletteBulbWin .35s steps(2, end) 6;
      animation-delay: 0s;
    }
    @keyframes rouletteBulbIdle {
      0%, 100% { background: #935600; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 6px 2px rgba(255,190,0,.3); transform: translate(-50%, -50%) scale(.78); opacity: .52; filter: brightness(.86); }
      42%, 58% { background: #fff9bb; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 24px 10px rgba(255,224,0,.98); transform: translate(-50%, -50%) scale(1.3); opacity: 1; filter: brightness(1.3); }
    }
    @keyframes rouletteBulbSpin {
      0%, 100% { background: #754500; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 5px 2px rgba(255,190,0,.24); transform: translate(-50%, -50%) scale(.7); opacity: .38; filter: brightness(.78); }
      5%, 13% { background: #fffde1; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 0 29px 13px rgba(255,224,0,1); transform: translate(-50%, -50%) scale(1.48); opacity: 1; filter: brightness(1.42); }
    }
    @keyframes rouletteBulbWin {
      0%, 100% { background: #9a6200; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 0 7px 3px rgba(255,190,0,.32); transform: translate(-50%, -50%) scale(.75); opacity: .42; filter: brightness(.82); }
      50% { background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.98), 0 0 34px 16px rgba(255,224,0,1); transform: translate(-50%, -50%) scale(1.42); opacity: 1; filter: brightness(1.45); }
    }
    @keyframes rouletteBulbReduced {
      0%, 100% { background: #a66b00; box-shadow: inset 0 1px 0 rgba(255,255,255,.14); opacity: .42; filter: brightness(.82); }
      50% { background: #fff4a3; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 0 10px 4px rgba(255,224,0,.7); opacity: .95; filter: brightness(1.18); }
    }
    .wheel-pointer {
      top: -19px;
      width: 46px;
      height: 53px;
      border: 0;
      background: var(--ink);
      clip-path: polygon(8% 0, 92% 0, 58% 94%, 50% 100%, 42% 94%);
      filter: drop-shadow(0 4px 0 rgba(25,21,54,.78)) drop-shadow(0 8px 9px rgba(25,21,54,.38));
      z-index: 4;
      transform-origin: 50% 0;
      will-change: transform;
    }
    .wheel-pointer::before {
      content: '';
      position: absolute;
      inset: 4px 4px 6px;
      background: linear-gradient(122deg, #fffde1 0%, #ffe600 24%, #ffc400 53%, #e68100 100%);
      clip-path: polygon(8% 0, 92% 0, 58% 94%, 50% 100%, 42% 94%);
    }
    .wheel-pointer::after {
      content: '';
      position: absolute;
      top: 7px;
      left: 11px;
      width: 9px;
      height: 28px;
      background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0));
      clip-path: polygon(28% 0, 100% 0, 61% 100%, 0 100%);
      opacity: .74;
    }
    .wheel-wrap.is-spinning .wheel-pointer {
      animation: roulettePointerTick .16s steps(2, end) infinite;
    }
    .wheel-wrap.is-winning .wheel-pointer {
      animation: roulettePointerSettle .66s cubic-bezier(.18,.88,.32,1.18) 2;
    }
    @keyframes roulettePointerTick {
      0%, 100% { transform: translateX(-50%) rotate(0deg) scaleY(1); }
      38% { transform: translateX(-50%) translateY(2px) rotate(-8deg) scaleY(.91); }
      72% { transform: translateX(-50%) translateY(1px) rotate(4deg) scaleY(.97); }
    }
    @keyframes roulettePointerSettle {
      0% { transform: translateX(-50%) translateY(2px) rotate(-10deg) scaleY(.9); }
      44% { transform: translateX(-50%) rotate(6deg) scaleY(1.04); }
      72% { transform: translateX(-50%) translateY(1px) rotate(-3deg); }
      100% { transform: translateX(-50%) rotate(0); }
    }
    .roulette-cta-group,
    .ladder-cta-group {
      margin-top: 16px;
    }
    .roulette-cta-group .btn,
    .ladder-cta-group .btn {
      min-height: 80px;
      font-family: var(--font-head);
      font-size: 1.38rem;
      background: var(--party-yellow);
    }
    .roulette-cta-group .btn .btn-main,
    .ladder-cta-group .btn .btn-main {
      font-size: clamp(1.58rem, 2.45vw, 1.98rem);
      line-height: 1.08;
      letter-spacing: -.035em;
    }
    .roulette-cta-group .btn .btn-sub,
    .ladder-cta-group .btn .btn-sub {
      margin-top: 3px;
      font-size: .82rem;
      font-weight: 800;
    }
    .roulette-cta-group .btn.is-aiming {
      color: #fff;
      background: linear-gradient(135deg, #6c3cff 0%, #ff3d8d 100%);
      box-shadow: 0 0 0 3px rgba(255,255,255,.64), 5px 5px 0 var(--ink);
      transform: translateY(-2px) rotate(-.7deg);
    }
    .ladder-cta-group .ladder-path-toggle {
      min-height: 48px;
      font-family: var(--font);
      font-size: .95rem;
      font-weight: 800;
      background: #fff;
    }
    .ladder-cta-group .ladder-path-toggle[aria-pressed="false"] {
      background: var(--party-lime);
    }
    .roulette-result {
      border: 2px solid var(--ink);
      background: #fff;
      color: var(--ink);
      box-shadow: 4px 4px 0 var(--ink);
      font-size: 1.12rem;
    }
    .game-layout--dice {
      grid-template-columns: minmax(0, 1fr) minmax(280px, .68fr);
      overflow: visible;
    }
    .game-layout--dice > .dice-spotlight { grid-column: 1; overflow: visible; }
    .game-layout--dice > .stack-col { grid-column: 2; }
    .dice-setup { align-self: start; }
    .dice-rule-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin: 14px 0;
      padding: 9px 10px;
      border: 2px solid var(--ink);
      border-radius: 12px;
      background: #fff3b0;
      box-shadow: 2px 2px 0 var(--ink);
    }
    .dice-rule-label {
      color: var(--ink);
      font-family: var(--font-head);
      font-size: .9rem;
      font-weight: 800;
      white-space: nowrap;
    }
    .dice-rule-options {
      display: flex;
      justify-content: flex-end;
      gap: 6px;
      flex-wrap: wrap;
    }
    .dice-rule-btn {
      min-height: 32px;
      padding: 6px 9px;
      color: var(--ink);
      border: 2px solid var(--ink);
      border-radius: 9px;
      background: rgba(255,255,255,.8);
      font: 800 .72rem var(--font-head);
      cursor: pointer;
      transition: transform .16s, background .16s, box-shadow .16s;
    }
    .dice-rule-btn:hover:not(:disabled) { transform: translateY(-1px); }
    .dice-rule-btn.is-on {
      background: var(--party-pink);
      box-shadow: 2px 2px 0 var(--ink);
    }
    .dice-rule-btn:disabled { opacity: .48; cursor: not-allowed; }
    .dice-participants { min-height: 132px; }
    .dice-session-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 9px;
      margin-top: 14px;
    }
    .dice-session-actions .btn:first-child { background: var(--party-pink); }
    .dice-result-board {
      position: relative;
      margin-top: 0;
      overflow: hidden;
    }
    .dice-result-board .result-board-head,
    .dice-result-board .result-grid { position: relative; z-index: 1; }
    .dice-result-card.dice-winner {
      background: var(--party-yellow) !important;
      outline: 3px solid #fff;
      outline-offset: -7px;
      transform: rotate(-1.5deg) scale(1.03);
    }
    .dice-result-card.dice-tie {
      background: var(--party-blue) !important;
      transform: rotate(.9deg) scale(1.02);
    }
    .dice-winner-badge {
      display: inline-flex;
      padding: 3px 7px;
      border: 1.5px solid var(--ink);
      background: var(--party-pink);
      color: var(--ink);
      font-size: .68rem;
      font-weight: 900;
      line-height: 1;
      transform: rotate(4deg);
    }
    .dice-spotlight {
      position: relative;
      min-height: 730px;
      padding: 28px;
      overflow: visible;
      background:
        radial-gradient(circle at 20% 20%, rgba(255,61,141,.28) 0 8%, transparent 8.3%),
        radial-gradient(circle at 83% 76%, rgba(168,244,61,.28) 0 10%, transparent 10.3%),
        #28146b;
      color: #fff;
      box-shadow: 7px 7px 0 var(--ink);
      align-content: center;
    }
    .count-btns {
      justify-self: center;
      border: 2px solid var(--ink);
      background: var(--party-blue);
      box-shadow: 3px 3px 0 #000;
    }
    .count-btn { color: var(--ink); }
    .count-btn.is-on {
      color: var(--ink);
      background: var(--party-yellow);
      box-shadow: 0 0 0 2px var(--ink);
    }
    .dice-stage {
      position: relative;
      display: block;
      min-height: 480px;
      margin-bottom: 18px;
      padding: 0 32px 28px;
      overflow: visible;
      perspective: 800px;
      cursor: grab;
      touch-action: none;
      user-select: none;
      background: transparent;
      border: 0;
      box-shadow: none;
    }
    .dice-stage::before {
      content: '';
      position: absolute;
      z-index: 0;
      left: 46px;
      right: 46px;
      bottom: -2px;
      height: 34px;
      border-radius: 50%;
      background: radial-gradient(ellipse at center,
        rgba(7,4,24,.74) 0 34%,
        rgba(7,4,24,.48) 52%,
        rgba(7,4,24,0) 78%);
      filter: blur(7px);
      transform: scaleY(.78);
      pointer-events: none;
    }
    .dice-stage-core {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 32px;
      right: 32px;
      bottom: 28px;
      /* 배경 창만 둥글게 자르고, 형제인 3D 트레이는 밖으로 돌출시킨다. */
      overflow: hidden;
      border: 0;
      border-radius: 24px;
      background: transparent;
      box-shadow: none;
      pointer-events: none;
    }
    .dice-stage.is-throw-aiming { cursor: grabbing; }
    .dice-motion-canvas {
      position: absolute;
      z-index: 0;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .dice-physics-canvas {
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }
    .dice-victory-paper {
      position: absolute;
      z-index: 3;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .24s ease;
    }
    .dice-victory-paper.is-visible { opacity: 1; }
    .dice-victory-paper i {
      position: absolute;
      left: var(--paper-x);
      top: var(--paper-y);
      width: var(--paper-w);
      height: var(--paper-h);
      border: 1.5px solid rgba(25,21,54,.7);
      border-radius: 2px;
      background: var(--paper-c);
      box-shadow: 2px 2px 0 rgba(25,21,54,.25);
      transform: rotate(var(--paper-r));
      animation: diceVictoryPaper 1.5s ease-in-out var(--paper-d) infinite alternate;
    }
    .dice-result-paper {
      position: absolute;
      z-index: 2;
      inset: 0;
      pointer-events: none;
      opacity: 0;
      transition: opacity .24s ease;
    }
    .dice-result-paper.is-visible { opacity: 1; }
    .dice-result-paper i {
      position: absolute;
      left: var(--paper-x);
      top: var(--paper-y);
      width: 9px;
      height: 7px;
      border: 1px solid rgba(25,21,54,.5);
      border-radius: 1px;
      background: var(--paper-c);
      box-shadow: 1px 1px 0 rgba(25,21,54,.16);
      transform: rotate(var(--paper-r));
      animation: diceVictoryPaper 1.8s ease-in-out var(--paper-d) infinite alternate;
    }
    @keyframes diceVictoryPaper {
      from { transform: translateY(0) rotate(var(--paper-r)); }
      to { transform: translateY(-9px) rotate(calc(var(--paper-r) + 18deg)); }
    }
    /* CSS 주사위는 WebGL 실패 시에만 표시 — 로드 전 큰 큐브 플래시 방지 */
    .dice-stage .cube-scene { visibility: hidden; }
    .dice-stage.is-css-fallback .cube-scene { visibility: visible; }
    .dice-stage-loading {
      position: absolute;
      z-index: 5;
      inset: 32px 32px 28px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      border-radius: 22px;
      background: rgba(17, 10, 40, .42);
      color: #fff;
      font-size: .95rem;
      font-weight: 800;
      letter-spacing: -.01em;
      text-align: center;
      pointer-events: none;
      transition: opacity .28s ease;
    }
    .dice-stage-loading[hidden] { display: none !important; }
    .dice-stage-loading.is-done {
      opacity: 0;
      pointer-events: none;
    }
    .dice-stage-loading-spin {
      width: 28px;
      height: 28px;
      border: 3px solid rgba(255,255,255,.28);
      border-top-color: #ffe600;
      border-radius: 50%;
      animation: diceLoadSpin .7s linear infinite;
    }
    .dice-stage-loading.is-fallback .dice-stage-loading-spin { display: none; }
    .dice-stage-loading-text[hidden] { display: none !important; }
    @keyframes diceLoadSpin {
      to { transform: rotate(360deg); }
    }
    .cube-scene {
      --cube-size: 154px;
      --cube-half: 77px;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      width: var(--cube-size);
      height: var(--cube-size);
      perspective: 760px;
      isolation: isolate;
      transform-origin: center;
      transition: transform .52s cubic-bezier(.2,.88,.25,1.16);
    }
    .cube-scene.is-rolling { transition: none; }
    .cube-scene::after {
      content: '';
      position: absolute;
      z-index: -1;
      right: 12px;
      bottom: -22px;
      left: 12px;
      height: 24px;
      border-radius: 50%;
      background: rgba(25,21,54,.45);
      filter: blur(7px);
      transform: scaleX(.9);
    }
    .cube-scene.is-rolling::after { animation: diceShadow .34s ease-in-out infinite alternate; }
    .dice-cube {
      width: var(--cube-size);
      height: var(--cube-size);
      position: relative;
      transform-style: preserve-3d;
      transition: transform .52s cubic-bezier(.2,.88,.25,1.16);
    }
    .dice-cube.face-1 { transform: rotateX(-12deg) rotateY(14deg); }
    .dice-cube.face-2 { transform: rotateX(-100deg) rotateY(8deg); }
    .dice-cube.face-3 { transform: rotateX(-8deg) rotateY(-76deg); }
    .dice-cube.face-4 { transform: rotateX(-8deg) rotateY(104deg); }
    .dice-cube.face-5 { transform: rotateX(80deg) rotateY(8deg); }
    .dice-cube.face-6 { transform: rotateX(-10deg) rotateY(194deg); }
    .dice-cube.rolling { will-change: transform; }
    .cube-face {
      display: grid;
      grid-template-areas:
        "a . b"
        "c d e"
        "f . g";
      position: absolute;
      inset: 0;
      box-sizing: border-box;
      padding: 22px;
      border: 3px solid var(--ink);
      border-radius: 20px;
      background: linear-gradient(145deg, #fff 0%, #fff4d6 100%);
      box-shadow: inset 8px 8px 16px rgba(255,255,255,.84), inset -10px -10px 18px rgba(25,21,54,.08);
      backface-visibility: hidden;
    }
    .cube-face--front { transform: translateZ(var(--cube-half)); }
    .cube-face--back { transform: rotateY(180deg) translateZ(var(--cube-half)); background: linear-gradient(145deg, #f6efff 0%, #e4dbff 100%); }
    .cube-face--right { transform: rotateY(90deg) translateZ(var(--cube-half)); background: linear-gradient(145deg, #fff9e6 0%, #ffd8ec 100%); }
    .cube-face--left { transform: rotateY(-90deg) translateZ(var(--cube-half)); background: linear-gradient(145deg, #e9fbff 0%, #c5f3ff 100%); }
    .cube-face--top { transform: rotateX(90deg) translateZ(var(--cube-half)); background: linear-gradient(145deg, #fff 0%, #fff7ba 100%); }
    .cube-face--bottom { transform: rotateX(-90deg) translateZ(var(--cube-half)); background: linear-gradient(145deg, #f5efff 0%, #e4d9ff 100%); }
    .pip {
      width: 17px;
      height: 17px;
      align-self: center;
      justify-self: center;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: var(--party-pink);
      box-shadow: inset 2px 2px 0 rgba(255,255,255,.5), 1px 1px 0 rgba(25,21,54,.16);
    }
    @keyframes diceTumble {
      from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(.88); }
      50% { transform: rotateX(420deg) rotateY(540deg) rotateZ(95deg) scale(1.06); }
      to { transform: rotateX(810deg) rotateY(1080deg) rotateZ(180deg) scale(.93); }
    }
    @keyframes diceShadow {
      from { opacity: .45; transform: scaleX(.8); }
      to { opacity: .85; transform: scaleX(1.15); }
    }
    .dice-actions { justify-content: center; }
    .dice-actions .btn {
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      gap: 3px;
      min-width: min(100%, 380px);
      min-height: 82px;
      font-family: var(--font-head);
      font-size: 1.35rem;
      text-align: left;
      background: var(--party-pink);
    }
    .dice-actions .btn .btn-main {
      font-size: clamp(1.55rem, 2.5vw, 2rem);
      letter-spacing: -.035em;
    }
    .dice-actions .btn .btn-sub {
      margin-top: 3px;
      font-size: .82rem;
      font-weight: 800;
    }
    .dice-sum {
      justify-self: center;
      min-width: 170px;
      color: var(--ink);
      background: var(--party-yellow);
      border: 2px solid var(--ink);
      box-shadow: 3px 3px 0 #000;
      font-size: 1.25rem;
    }
    .dice-hint { color: rgba(255,255,255,.75); text-align: center; }
    .confetti-piece {
      position: fixed;
      z-index: 1400;
      left: var(--x);
      top: var(--y);
      width: 11px;
      height: 19px;
      background: var(--c);
      border: 1px solid rgba(25,21,54,.55);
      pointer-events: none;
      animation: confettiBurst .9s cubic-bezier(.1,.7,.2,1) forwards;
      animation-delay: var(--d);
      transform: translate(-50%,-50%) rotate(var(--r));
    }
    .confetti-piece--paper {
      width: var(--paper-w, 12px);
      height: var(--paper-h, 8px);
      border-radius: 1px;
      border-color: rgba(25,21,54,.3);
      box-shadow: 1px 2px 0 rgba(25,21,54,.2);
      animation: paperConfettiBurst 2.9s cubic-bezier(.18,.55,.28,1) var(--d) forwards;
      z-index: 2000;
    }
    .confetti-piece--shower {
      width: var(--paper-w, 13px);
      height: var(--paper-h, 9px);
      border-radius: 2px;
      border-color: rgba(25,21,54,.38);
      box-shadow: 1px 2px 0 rgba(25,21,54,.22);
      animation: confettiShower 6.8s linear var(--d) forwards;
      z-index: 2100;
    }
    @keyframes stageDrop {
      from { opacity: 0; transform: translateY(-18px) rotate(-.6deg); }
      to { opacity: 1; transform: translateY(0) rotate(0); }
    }
    @keyframes cartridgePop {
      0% { transform: translateY(0) scale(.94); }
      65% { transform: translateY(-8px) scale(1.03) rotate(-1deg); }
    }
    @keyframes panelEnter {
      from { opacity: 0; transform: translateY(20px) scale(.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes confettiBurst {
      0% { opacity: 0; transform: translate(-50%,-50%) scale(.2) rotate(0); }
      12% { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(680deg); }
    }
    @keyframes paperConfettiBurst {
      0% { opacity: 0; transform: translate(-50%,-50%) scale(.15) rotate(var(--r)); }
      12% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(var(--r)); }
      76% { opacity: 1; }
      100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(calc(var(--r) + 900deg)); }
    }
    @keyframes confettiShower {
      0% { opacity: 0; transform: translate(-50%, -36px) rotate(var(--r)) scale(.55); }
      10% { opacity: 1; transform: translate(-50%, -8px) rotate(calc(var(--r) + 80deg)) scale(1); }
      31% { opacity: 1; transform: translate(calc(-50% + var(--sway-a)), var(--drop-a)) rotate(calc(var(--r) + 260deg)) scale(.98); }
      60% { opacity: 1; transform: translate(calc(-50% + var(--sway-b)), var(--drop-b)) rotate(calc(var(--r) + 480deg)) scale(1); }
      83% { opacity: 1; transform: translate(calc(-50% + var(--sway-c)), var(--drop-c)) rotate(calc(var(--r) + 650deg)) scale(.94); }
      100% { opacity: 0; transform: translate(calc(-50% + var(--sway)), var(--drop)) rotate(calc(var(--r) + 790deg)) scale(.88); }
    }
    @media (max-width: 1080px) {
      .hero { grid-template-columns: 1fr; }
      .hero-copy {
        min-height: 150px;
        border-right: 0;
        border-bottom: 3px solid var(--ink);
      }
      .hero-title { max-width: none; }
      .game-layout--ladder,
      .game-layout--roulette,
      .game-layout--dice { grid-template-columns: 1fr; }
      .game-layout--ladder > .stack-col > .card-block:first-child,
      .game-layout--ladder > .stack-col > .card-block:nth-child(2),
      .game-layout--roulette > .spotlight-card,
      .game-layout--roulette > .stack-col,
      .game-layout--dice > .dice-spotlight,
      .game-layout--dice > .stack-col {
        grid-column: 1;
        grid-row: auto;
      }
      .game-layout--roulette > .spotlight-card { order: -1; }
      .spotlight-card { position: relative; top: auto; min-height: 520px; }
      .ladder-stage { min-height: 510px; }
      .dice-setup { order: -1; }
    }
    @media (max-width: 760px) {
      body > .uz-nav {
        min-height: 58px;
        padding: 10px 14px;
      }
      .uz-nav-links > a:not(.is-active) { display: none !important; }
      .uz-nav-links > a:not(.is-active)::after { content: none; }
      .uz-nav-links > a.is-active::after { display: none; }
      .uz-nav-lang { margin-left: 5px; }
      .page { padding: 18px 12px 70px; gap: 19px; }
      .hero,
      .panel { border-radius: 22px; box-shadow: 5px 5px 0 var(--ink); }
      .hero-copy { min-height: 130px; padding: 20px; }
      .hero-title { font-size: 2.45rem; }
      .hero-aside { padding: 14px; }
      .hero-aside-head { flex-direction: row; }
      .mode-board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .mode-tab {
        min-height: 110px;
        padding: 10px 8px;
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 7px;
      }
      .mode-icon { width: 44px; height: 44px; }
      .mode-note,
      .mode-meta { display: none; }
      .mode-name { font-size: 1.06rem; }
      .panel { min-height: auto; padding: 16px; }
      .panel-top { flex-direction: row; align-items: flex-end; }
      .panel-title { font-size: 2.7rem; }
      .metric-row { justify-content: flex-end; }
      .metric { min-width: 0; padding: 7px 9px; }
      .metric-label { display: none; }
      .card-block,
      .spotlight-card,
      .dice-spotlight { padding: 15px; }
      .ladder-inputs { grid-template-columns: 1fr 1fr; }
      .game-layout--ladder textarea { min-height: 150px; }
      .ladder-actions .btn { flex: 1 1 132px; }
      .spotlight-card { min-height: 520px; }
      .wheel-wrap { width: min(100%, 420px); }
      .dice-spotlight { min-height: 600px; }
      .dice-stage { min-height: 350px; }
      .cube-scene { --cube-size: 118px; --cube-half: 59px; }
      .cube-face { padding: 18px; border-radius: 17px; }
      .pip { width: 14px; height: 14px; }
    }
    @media (max-width: 480px) {
      .sound-btn-label { display: none; }
      .sound-btn { width: 42px; justify-content: center; padding: 8px; }
      .hero-title { font-size: 2.15rem; }
      .mode-tab { min-height: 98px; }
      .mode-name { font-size: .96rem; }
      .panel-top { align-items: center; }
      .panel-title { font-size: 2.25rem; }
      .panel-eyebrow { display: none; }
      .ladder-inputs { grid-template-columns: 1fr; }
      .game-layout--ladder textarea { min-height: 150px; }
      .ladder-stage { min-height: 440px; }
      .r-parts-row { grid-template-columns: 1fr; }
      .spotlight-card { min-height: 420px; }
      .dice-stage { min-height: 270px; gap: 10px; }
      .cube-scene { --cube-size: 96px; --cube-half: 48px; }
      .cube-face { padding: 14px; border-radius: 14px; border-width: 2px; }
      .pip { width: 11px; height: 11px; border-width: 1.5px; }
    }
    /* Games hub */
    body[data-game="hub"] .hero-copy {
      min-height: 240px;
    }
    .hub-lead {
      position: relative;
      z-index: 1;
      margin: 14px 0 0;
      max-width: 22rem;
      font-size: .95rem;
      font-weight: 700;
      line-height: 1.45;
      color: rgba(25, 21, 54, .78);
    }
    .hub-picks,
    .hub-usecases {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 16px;
      animation: stageDrop .55s cubic-bezier(.2,.8,.2,1) .08s both;
    }
    .hub-usecases {
      animation-delay: .14s;
      padding: 20px 22px;
      border: 3px solid var(--ink);
      border-radius: 24px;
      background: #fff;
      box-shadow: 5px 5px 0 var(--ink);
    }
    .hub-section-head {
      display: grid;
      gap: 4px;
    }
    .hub-section-title {
      margin: 0;
      font-family: var(--font-head);
      font-size: clamp(1.45rem, 3vw, 1.9rem);
      letter-spacing: -.02em;
      line-height: 1.05;
    }
    .hub-section-desc {
      margin: 0;
      font-size: .9rem;
      font-weight: 700;
      color: var(--muted);
      line-height: 1.4;
    }
    .hub-grid {
      display: grid;
      gap: 14px;
    }
    @media (min-width: 760px) {
      .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    .hub-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 210px;
      padding: 22px 20px;
      border: 3px solid var(--ink);
      border-radius: 24px;
      text-decoration: none;
      color: var(--ink);
      box-shadow: 5px 5px 0 var(--ink);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .hub-card:hover,
    .hub-card:focus-visible {
      transform: translateY(-5px) rotate(-.6deg);
      box-shadow: 8px 10px 0 var(--ink);
      outline: none;
    }
    .hub-card--ladder { background: var(--party-pink); }
    .hub-card--wheel { background: var(--party-blue); }
    .hub-card--dice { background: var(--party-lime); }
    .hub-card-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border: 3px solid var(--ink);
      border-radius: 16px;
      background: #fff;
      box-shadow: 3px 3px 0 var(--ink);
      transition: transform .22s ease;
    }
    .hub-card:hover .hub-card-icon,
    .hub-card:focus-visible .hub-card-icon {
      transform: rotate(-8deg) scale(1.06);
    }
    .hub-card-title {
      font-family: var(--font-head);
      font-size: 1.55rem;
      letter-spacing: -.03em;
      line-height: 1.05;
    }
    .hub-card-desc {
      margin: 0;
      font-size: .92rem;
      font-weight: 700;
      line-height: 1.45;
      opacity: .88;
    }
    .hub-card-cta {
      margin-top: auto;
      font-family: var(--font-head);
      font-size: 1rem;
      letter-spacing: -.01em;
    }
    .hub-use-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 10px;
    }
    @media (min-width: 760px) {
      .hub-use-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    }
    .hub-use-list li {
      padding: 14px 16px;
      border: 3px solid var(--ink);
      border-radius: 16px;
      background: var(--party-yellow);
      font-weight: 800;
      font-size: .95rem;
      line-height: 1.35;
      box-shadow: 3px 3px 0 var(--ink);
      animation: hubUsePop .45s cubic-bezier(.2,.8,.2,1) both;
    }
    .hub-use-list li:nth-child(2) {
      background: #fff;
      animation-delay: .06s;
    }
    .hub-use-list li:nth-child(3) {
      background: var(--party-orange);
      color: #fff;
      animation-delay: .12s;
    }
    .hub-note {
      margin: 4px 0 0;
      font-size: .88rem;
      font-weight: 700;
      color: rgba(25, 21, 54, .72);
      line-height: 1.5;
    }
    @keyframes hubUsePop {
      from { opacity: 0; transform: translateY(10px) scale(.98); }
      to { opacity: 1; transform: none; }
    }
    @media (max-width: 760px) {
      body[data-game="hub"] .hero-copy {
        border-right: 0;
        border-bottom: 3px solid var(--ink);
        min-height: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero,
      .panel,
      .mode-tab.is-on,
      .hub-picks,
      .hub-usecases,
      .hub-use-list li,
      .confetti-piece,
      .dice-victory-paper i,
      .dice-result-paper i,
      .cube-scene.is-rolling::after { animation: none !important; }
      .hub-card:hover,
      .hub-card:focus-visible,
      .hub-card:hover .hub-card-icon,
      .hub-card:focus-visible .hub-card-icon {
        transform: none;
      }
      .wheel-wrap.is-spinning .wheel-motion {
        animation: rouletteWheelRattleReduced .7s ease-in-out infinite alternate !important;
      }
      .wheel-wrap.is-winning .wheel-motion {
        animation: rouletteWheelSettleReduced .5s ease-out 2 !important;
      }
      .wheel-wrap.is-spinning .wheel-pointer {
        animation: roulettePointerTickReduced .42s ease-in-out infinite !important;
      }
      .wheel-wrap.is-winning .wheel-pointer {
        animation: roulettePointerSettleReduced .56s ease-out 1 !important;
      }
      .confetti-piece.confetti-piece--paper {
        animation: paperConfettiBurst 2.7s ease-out var(--d) forwards !important;
      }
      .confetti-piece.confetti-piece--shower {
        animation: confettiShower 5.4s linear var(--d) forwards !important;
      }
      .wheel-light {
        animation: rouletteBulbReduced 1.8s ease-in-out infinite !important;
        animation-delay: calc(var(--i) * -.09s) !important;
      }
    }