:root {
      --bg:        #090909;
      --surface:   #111111;
      --surface-2: #181818;
      --surface-3: #222222;
      --border:    rgba(255,255,255,0.08);
      --border-2:  rgba(255,255,255,0.15);

      --white:     #efefef;
      --dim:       rgba(239,239,239,0.38);
      --ghost:     rgba(239,239,239,0.06);

      --red:       #df2f2f;
      --red-soft:  rgba(223,47,47,0.16);
      --red-glow:  rgba(223,47,47,0.5);

      --die-face:  #f3f3f1;
      --die-rim:   #c5c5c3;
      --pip:       #141414;
      --pip-red:   #df2f2f;

      --sidebar-w: 68px;   /* desktop sidebar width */

      --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
      --roll-ms:   640;
    }

    /* ============================================================
       RESET
       ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* Allow scrolling on mobile if content overflows — never clip it */
    html { height: 100%; -webkit-tap-highlight-color: transparent; }

    body {
      min-height: 100%;
      background: var(--bg);
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.028'/%3E%3C/svg%3E");
      color: var(--white);
      font-family: 'DM Mono', monospace;
      /* On desktop the whole app fits the viewport with no scroll.
         On mobile we let it scroll if needed (height: auto on .app). */
    }

    /* ============================================================
       APP SHELL  ── DESKTOP GRID
       [sidebar | topbar  ]
       [sidebar | stage   ]
       [sidebar | history ]
       ============================================================ */
    .app {
      display: grid;
      grid-template-columns: var(--sidebar-w) 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "side topbar"
        "side stage"
        "side history";
      height: 100vh;   /* full viewport on desktop */
      width:  100vw;
    }

    /* ============================================================
       SIDEBAR  (desktop only — hidden on mobile)
       ============================================================ */
    .sidebar {
      grid-area: side;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 28px 0 24px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      /* prevent sidebar content from leaking */
      overflow: hidden;
    }

    /* "DICE" rotated 90° so it reads upward */
    .sidebar__title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.8rem;
      letter-spacing: 0.15em;
      color: var(--white);
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      line-height: 1;
      user-select: none;
    }

    .sidebar__title span { color: var(--red); }

    /* Dice count picker — three stacked buttons */
    .sidebar__picker {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
    }

    .sidebar__picker-label {
      font-size: 0.5rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--dim);
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      margin-bottom: 4px;
    }

    .sidebar__version {
      font-size: 0.5rem;
      letter-spacing: 0.2em;
      color: var(--dim);
      text-transform: uppercase;
      writing-mode: vertical-rl;
      transform: rotate(180deg);
    }

    /* ============================================================
       PICKER BUTTONS  (shared by sidebar + mobile header)
       ============================================================ */
    .picker-btn {
      width: 38px;
      height: 38px;
      border-radius: 8px;
      border: 1px solid var(--border);
      background: transparent;
      color: var(--dim);
      font-family: 'DM Mono', monospace;
      font-size: 0.85rem;
      font-weight: 500;
      cursor: pointer;
      /* touch-action: manipulation stops the 300ms tap delay on iOS */
      touch-action: manipulation;
      transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.1s;
    }

    .picker-btn:hover        { background: var(--ghost); color: var(--white); border-color: var(--border-2); }
    .picker-btn.active       { background: var(--red); color: #fff; border-color: var(--red); }
    .picker-btn:active       { transform: scale(0.88); }

    /* ============================================================
       MOBILE HEADER
       Visible only on mobile — replaces the sidebar
       ============================================================ */
    .mobile-header {
      display: none; /* shown via media query below */
      grid-area: mobile-header;
      align-items: center;
      justify-content: space-between;
      padding: 14px 18px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
    }

    .mobile-header__title {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2rem;
      letter-spacing: 0.12em;
      line-height: 1;
    }

    .mobile-header__title span { color: var(--red); }

    .mobile-header__picker {
      display: flex;
      gap: 6px;
    }

    /* ============================================================
       TOP BAR — stats row
       ============================================================ */
    .topbar {
      grid-area: topbar;
      display: flex;
      align-items: stretch;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      /* Let it scroll horizontally on very small screens instead of
         squishing every cell to nothing */
      overflow-x: auto;
      scrollbar-width: none;
    }

    .topbar::-webkit-scrollbar { display: none; }

    .stat-cell {
      flex: 1;
      min-width: 64px;     /* never shrink below this — scroll instead */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
      border-right: 1px solid var(--border);
      transition: background 0.18s;
      white-space: nowrap;
    }

    .stat-cell:last-child { border-right: none; }
    .stat-cell:hover { background: var(--surface-2); }

    .stat-cell__value {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.4rem;
      line-height: 1;
      color: var(--white);
    }

    .stat-cell__label {
      font-size: 0.48rem;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--dim);
      margin-top: 3px;
    }

    /* ============================================================
       STAGE — center area: total + dice + controls
       ============================================================ */
    .stage {
      grid-area: stage;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 28px;
      padding: 20px 24px;
      position: relative;
      /* On very short screens (landscape phone) reduce gap */
      min-height: 0;
    }

    /* Faint red radial glow — purely atmospheric */
    .stage::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(223,47,47,0.05) 0%, transparent 70%);
      pointer-events: none;
    }

    /* ── Total ── */
    .total {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
    }

    .total__label {
      font-size: 0.58rem;
      letter-spacing: 0.4em;
      text-transform: uppercase;
      color: var(--dim);
    }

    .total__value {
      font-family: 'Bebas Neue', sans-serif;
      /* clamp: 3rem minimum so it's readable on 320px, 5.5rem max on desktop */
      font-size: clamp(3rem, 10vw, 5.5rem);
      line-height: 1;
      color: var(--white);
      opacity: 0;
      transform: scale(0.7);
      transition: opacity 0.3s ease, transform 0.35s var(--ease-back);
    }

    .total__value.visible { opacity: 1; transform: scale(1); }

    .total__value.jackpot {
      color: var(--red);
      animation: jackpot-pulse 0.85s ease-in-out infinite alternate;
    }

    @keyframes jackpot-pulse {
      from { text-shadow: 0 0 24px var(--red-glow); }
      to   { text-shadow: 0 0 64px var(--red-glow), 0 0 16px #ff5555; }
    }

    .total__tag {
      font-size: 0.55rem;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--red);
      min-height: 1em;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .total__tag.visible { opacity: 1; }

    /* ── Dice tray ── */
    .tray {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 20px;
      /* min-height prevents layout jump when count changes */
      min-height: 120px;
      width: 100%;
    }

    /* ── Individual die ──
       Size uses clamp so it scales gracefully from 320px phones
       all the way to 1440px monitors.
       320px phone → ~88px die
       390px phone → ~100px die
       desktop     → 120px die
    */
    .die {
      width:  clamp(82px, 22vw, 120px);
      height: clamp(82px, 22vw, 120px);
      border-radius: clamp(13px, 3.5vw, 20px);
      background: var(--die-face);
      cursor: pointer;
      user-select: none;
      touch-action: manipulation;   /* no delay on tap */
      position: relative;

      box-shadow:
        3px  3px  0   var(--die-rim),
        6px  6px  0   #aaa,
        0   16px 36px rgba(0,0,0,0.8),
        inset 0 1px 0 rgba(255,255,255,0.85);

      transition: transform 0.18s ease, box-shadow 0.18s ease;
      animation: die-enter 0.38s var(--ease-back) both;
    }

    /* Stagger each die's entrance animation */
    .die:nth-child(2) { animation-delay: 0.06s; }
    .die:nth-child(3) { animation-delay: 0.12s; }

    @keyframes die-enter {
      from { opacity: 0; transform: scale(0.65) translateY(-14px); }
      to   { opacity: 1; transform: scale(1)    translateY(0); }
    }

    /* Lift effect — desktop hover only */
    @media (hover: hover) {
      .die:hover {
        transform: translateY(-7px) rotate(-2deg);
        box-shadow:
          3px  3px  0   var(--die-rim),
          6px  6px  0   #aaa,
          0   28px 52px rgba(0,0,0,0.85),
          inset 0 1px 0 rgba(255,255,255,0.85);
      }
    }

    /* Tap feedback for mobile — scale down briefly */
    .die:active { transform: scale(0.94); }

    /* Roll shake animation */
    @keyframes roll-shake {
      0%   { transform: rotate(0deg)   scale(1); }
      10%  { transform: rotate(-24deg) scale(0.92); }
      26%  { transform: rotate(19deg)  scale(1.08); }
      42%  { transform: rotate(-14deg) scale(0.95); }
      58%  { transform: rotate(9deg)   scale(1.04); }
      72%  { transform: rotate(-5deg)  scale(0.98); }
      86%  { transform: rotate(2deg)   scale(1.01); }
      100% { transform: rotate(0deg)   scale(1); }
    }

    .die.rolling {
      animation: roll-shake calc(var(--roll-ms) * 1ms) ease;
      cursor: not-allowed;
      pointer-events: none;
    }

    /* Blur the pips so the value is unreadable mid-spin */
    .die.rolling .pip-grid { filter: blur(4px); opacity: 0.15; }

    /* ── Pip grid — 3×3 ── */
    .pip-grid {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows:    repeat(3, 1fr);
      /* padding scales with the die size using clamp */
      padding: clamp(11px, 3vw, 17px);
      gap: clamp(3px, 0.8vw, 6px);
      transition: filter 0.15s, opacity 0.15s;
    }

    .pip {
      border-radius: 50%;
      background: var(--pip);
      transform: scale(0);
      transition: transform 0.2s var(--ease-back);
    }

    .pip.pip--red { background: var(--pip-red); }
    .pip.visible  { transform: scale(1); }

    /* Named grid positions */
    .p-tl { grid-column: 1; grid-row: 1; }
    .p-tr { grid-column: 3; grid-row: 1; }
    .p-ml { grid-column: 1; grid-row: 2; }
    .p-mc { grid-column: 2; grid-row: 2; }
    .p-mr { grid-column: 3; grid-row: 2; }
    .p-bl { grid-column: 1; grid-row: 3; }
    .p-br { grid-column: 3; grid-row: 3; }

    /* ── Controls ── */
    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      justify-content: center;
    }

    .btn-roll {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.3rem;
      letter-spacing: 0.18em;
      color: #fff;
      background: var(--red);
      border: none;
      border-radius: 10px;
      /* width grows up to a comfortable tap target on all screen sizes */
      padding: 14px 0;
      width: clamp(160px, 45vw, 220px);
      cursor: pointer;
      touch-action: manipulation;
      position: relative;
      overflow: hidden;
      transition: transform 0.12s, box-shadow 0.12s;
      box-shadow: 0 4px 22px var(--red-soft), inset 0 1px 0 rgba(255,255,255,0.12);
    }

    /* Sheen sweep on desktop hover */
    .btn-roll::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
      transform: translateX(-110%);
      transition: transform 0.4s ease;
    }

    @media (hover: hover) {
      .btn-roll:hover::after { transform: translateX(110%); }
      .btn-roll:hover { transform: translateY(-3px); box-shadow: 0 10px 32px var(--red-soft); }
    }

    .btn-roll:active  { transform: scale(0.96); box-shadow: 0 2px 8px var(--red-soft); }
    .btn-roll:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

    .btn-reset {
      font-family: 'DM Mono', monospace;
      font-size: 0.65rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--dim);
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 14px 22px;
      cursor: pointer;
      touch-action: manipulation;
      transition: color 0.18s, border-color 0.18s, transform 0.1s;
    }

    .btn-reset:hover  { color: var(--white); border-color: var(--border-2); }
    .btn-reset:active { transform: scale(0.94); }

    /* ============================================================
       KEYBOARD HINTS — only shown on devices that have a keyboard
       ============================================================ */
    .kbd-hint {
      position: absolute;
      bottom: 16px;
      right: 20px;
      display: flex;
      gap: 12px;
      font-size: 0.52rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--dim);
    }

    .kbd-hint span { display: flex; align-items: center; gap: 4px; }

    kbd {
      font-family: 'DM Mono', monospace;
      font-size: 0.58rem;
      background: var(--surface-3);
      border: 1px solid var(--border-2);
      border-radius: 4px;
      padding: 1px 5px;
      color: var(--white);
    }

    /* Hide keyboard hints on touchscreen devices */
    @media (hover: none) {
      .kbd-hint { display: none; }
    }

    /* ============================================================
       HISTORY — pinned at the bottom
       ============================================================ */
    .history {
      grid-area: history;
      background: var(--surface);
      border-top: 1px solid var(--border);
      padding: 12px 20px 16px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .history__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .history__label {
      font-size: 0.52rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--dim);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* Animated green dot = live indicator */
    .history__label::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #3ddc84;
      animation: live-pulse 1.6s ease-in-out infinite;
      flex-shrink: 0;
    }

    @keyframes live-pulse {
      0%,100% { opacity: 1; }
      50%      { opacity: 0.3; }
    }

    .history__clear {
      font-family: 'DM Mono', monospace;
      font-size: 0.52rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--dim);
      background: none;
      border: none;
      cursor: pointer;
      touch-action: manipulation;
      padding: 4px 0;   /* larger tap area */
      transition: color 0.15s;
    }

    .history__clear:hover { color: var(--red); }

    /* Horizontally scrolling badge row */
    .history__strip {
      display: flex;
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
      /* Safe area padding for iPhones with home bar */
      padding-bottom: env(safe-area-inset-bottom, 4px);
    }

    .history__strip::-webkit-scrollbar { display: none; }

    .badge {
      flex-shrink: 0;
      min-width: 32px;
      height: 30px;
      padding: 0 10px;
      border-radius: 6px;
      border: 1px solid var(--border);
      background: var(--surface-3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--dim);
      animation: badge-in 0.28s var(--ease-back) both;
    }

    @keyframes badge-in {
      from { opacity: 0; transform: scale(0.5) translateY(4px); }
      to   { opacity: 1; transform: scale(1)   translateY(0); }
    }

    .badge.badge--latest { border-color: var(--red); background: var(--red-soft); color: var(--red); }
    .badge.badge--max    { border-color: rgba(223,47,47,0.5); color: var(--white); }

    /* ============================================================
       TOAST — notification for errors and events
       Centered horizontally, positioned above the history strip.
       Works on both mobile and desktop.
       ============================================================ */
    .toast {
      position: fixed;
      /* On desktop, offset left by half the sidebar so it's centered
         in the main content. On mobile the sidebar-w is 0. */
      left: calc(var(--sidebar-w) / 2 + 50%);
      bottom: 90px;
      transform: translateX(-50%) translateY(10px);
      background: var(--surface-3);
      border: 1px solid var(--border-2);
      border-left: 3px solid var(--red);
      border-radius: 8px;
      padding: 11px 18px;
      font-size: 0.72rem;
      color: var(--white);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s ease;
      z-index: 999;
      white-space: nowrap;
      /* Never overflow the screen on very small phones */
      max-width: calc(100vw - 32px);
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ============================================================
       MOBILE BREAKPOINT  ≤ 600px
       Grid becomes single column, sidebar hides, mobile header shows.
       ============================================================ */
    @media (max-width: 600px) {
      :root { --sidebar-w: 0px; } /* toast re-centers correctly */

      .app {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto 1fr auto;
        grid-template-areas:
          "mobile-header"
          "topbar"
          "stage"
          "."         /* spacer so stage can flex-grow */
          "history";
        height: auto;       /* let page grow taller if needed */
        min-height: 100vh;  /* at least fill the screen */
        width: 100%;
      }

      /* Stage fills remaining space on mobile too */
      .app .stage { flex: 1; min-height: 320px; gap: 20px; padding: 16px 16px 48px; }

      .sidebar      { display: none; }
      .mobile-header{ display: flex; }

      /* Dice count picker buttons slightly larger — easier to tap */
      .mobile-header .picker-btn { width: 40px; height: 40px; font-size: 0.9rem; }

      /* Topbar: let all 5 cells scroll rather than cramming */
      .topbar { overflow-x: auto; }
      .stat-cell { min-width: 58px; padding: 10px 6px; }
      .stat-cell__value { font-size: 1.2rem; }
      .stat-cell__label { font-size: 0.42rem; }

      /* Make Roll button full-width on mobile */
      .controls { flex-direction: column; gap: 8px; }
      .btn-roll  { width: 100%; max-width: 340px; font-size: 1.4rem; padding: 16px 0; }
      .btn-reset { width: 100%; max-width: 340px; text-align: center; padding: 14px 0; }

      /* Toast sits lower since there's no sidebar offset */
      .toast { bottom: 80px; }
    }

    /* ============================================================
       LANDSCAPE PHONES  (short + wide)
       Tighten vertical spacing so everything still fits without scrolling.
       ============================================================ */
    @media (max-height: 500px) and (orientation: landscape) {
      .stage { gap: 12px; padding: 10px 16px 10px; }
      .total__value { font-size: clamp(2.2rem, 6vw, 3.5rem); }
      .die { width: clamp(64px, 14vw, 90px); height: clamp(64px, 14vw, 90px); }
      .controls { gap: 8px; }
      .btn-roll  { padding: 10px 0; font-size: 1.1rem; }
      .btn-reset { padding: 10px 18px; }
      .history { padding: 8px 16px 10px; }
    }

    /* ============================================================
       TABLET  601px – 900px
       Keep sidebar but let content breathe a bit more.
       ============================================================ */
    @media (min-width: 601px) and (max-width: 900px) {
      .die { width: clamp(90px, 18vw, 110px); height: clamp(90px, 18vw, 110px); }
      .stage { gap: 24px; }
    }