@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DotGothic16&family=Noto+Sans+JP:wght@500;700;900&family=Oswald:wght@500;700&family=Zen+Dots&display=swap");

:root {
      --target-pct: 50%;
      --target-left: 50%;
      --green: #149628;
      --green-dark: #0a4a10;
      --blue: #f8e81c;
      --blue-dark: #7d6800;
      --cream: #fff5b8;
      --red: #f12920;
      --black: #050505;
      --panel-shadow: rgba(0, 0, 0, .38);
      --crm-primary: #ffcc00;
      --crm-accent: #00f2ff;
      --crm-bg-start: #050510;
      --crm-bg-end: #1a1a3a;
      --crm-text: #ffffff;
      --crm-sub-text: #666666;
      --crm-font-main: 'Zen Dots', sans-serif;
      --crm-font-sub: 'DotGothic16', sans-serif;
      --primary: #00f2ff;
    }

    html {
      min-height: 100%;
      background:
        linear-gradient(90deg, #0c6b1a 0 50%, #c9a818 50% 100%) !important;
    }

    :where(#main-body, #main-body *) {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    #main-body {
      width: 100%;
      max-width: 100%;
      min-height: var(--k11t-main-height, 100vh);
      height: 100vh;
      height: 100dvh;
      height: 100lvh;
      height: var(--k11t-main-height, 100lvh);
      min-height: max(var(--k11t-main-height, 100vh), 100vh, 100dvh, 100lvh);
      height: max(var(--k11t-main-height, 100vh), 100vh, 100dvh, 100lvh);
      overflow: hidden;
      background:
        linear-gradient(90deg, #0c6b1a 0 50%, #c9a818 50% 100%);
      color: #fff;
      font-family: 'Oswald', 'Noto Sans JP', sans-serif;
      user-select: none;
      -webkit-user-select: none;
      position: relative;
      z-index: 1;
      isolation: isolate;
      overscroll-behavior: none;
    }

    html:has(#main-body) {
      background:
        linear-gradient(90deg, #0c6b1a 0 50%, #c9a818 50% 100%) !important;
    }

    body:not(#main-body):has(#main-body) {
      background:
        linear-gradient(90deg, #0c6b1a 0 50%, #c9a818 50% 100%) !important;
      overflow-x: hidden;
    }

    body:not(#main-body):has(#main-body) > main {
      background:
        linear-gradient(90deg, #0c6b1a 0 50%, #c9a818 50% 100%) !important;
      min-height: auto !important;
    }

    body:not(#main-body) #main-body {
      min-height: var(--k11t-main-height, calc(100vh - 66px));
      min-height: calc(100dvh - 66px);
      min-height: calc(100lvh - 66px);
      min-height: var(--k11t-main-height, calc(100lvh - 66px));
      height: var(--k11t-main-height, calc(100vh - 66px));
      height: calc(100dvh - 66px);
      height: calc(100lvh - 66px);
      height: var(--k11t-main-height, calc(100lvh - 66px));
    }

    body:not(#main-body) #main-body .viewport {
      min-height: 100%;
      height: 100%;
    }

    body:not(#main-body) #main-body .cabinet {
      width: min(100%, calc((100dvh - 66px) * 375 / 667));
      height: min(100%, calc(100vw * 667 / 375));
    }

    turbo-frame#footer,
    turbo-frame#detail_footer,
    body > footer {
      display: none !important;
    }

    #main-body::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 6px);
      pointer-events: none;
      opacity: .75;
    }

    .viewport {
      width: 100%;
      max-width: 100%;
      min-height: 100vh;
      height: 100vh;
      height: 100dvh;
      display: grid;
      place-items: center;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .game-start-screen {
      --start-progress: 0%;
      position: absolute;
      inset: 0;
      z-index: 9000;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #050505;
      cursor: pointer;
      transition: opacity .3s ease, visibility .3s ease;
    }

    .game-start-screen::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 32%, rgba(255, 241, 60, .22), transparent 32%),
        radial-gradient(circle at 35% 42%, rgba(241, 41, 32, .16), transparent 22%),
        linear-gradient(90deg, rgba(5, 108, 25, .82) 0 50%, rgba(204, 178, 18, .82) 50% 100%);
      filter: saturate(1.12);
    }

    .game-start-screen::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(0,0,0,.5) 100%);
      mix-blend-mode: screen;
      opacity: .35;
      pointer-events: none;
    }

    .game-start-screen.hidden {
      opacity: 0;
      pointer-events: none;
      visibility: hidden;
    }

    .game-start-content {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: clamp(14px, 2.35vh, 22px);
      width: min(88vw, 342px);
      min-height: min(92vh, 680px);
      position: relative;
      z-index: 1;
    }

    .game-start-logo {
      width: min(72vw, 300px);
      height: auto;
      max-height: 17vh;
      object-fit: contain;
      filter: drop-shadow(0 8px 0 rgba(0,0,0,.34)) drop-shadow(0 18px 30px rgba(0,0,0,.56));
    }

    .game-start-dice {
      width: 38px;
      height: 38px;
      border-radius: 9px;
      background:
        radial-gradient(circle at 26% 22%, rgba(255,255,255,.55), transparent 13%),
        linear-gradient(135deg, #ff6255, #d60d0d 54%, #7e0000);
      box-shadow: inset -6px -7px 0 rgba(0,0,0,.2), 0 9px 16px rgba(0,0,0,.38);
      position: relative;
      rotate: -12deg;
    }

    .game-start-dice span {
      position: absolute;
      width: 6.5px;
      height: 6.5px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 0 rgba(0,0,0,.2);
    }

    .game-start-dice span:nth-child(1) { left: 10px; top: 8px; }
    .game-start-dice span:nth-child(2) { right: 9px; top: 10px; }
    .game-start-dice span:nth-child(3) { left: 16px; top: 16.5px; }
    .game-start-dice span:nth-child(4) { left: 9px; bottom: 8px; }
    .game-start-dice span:nth-child(5) { right: 8px; bottom: 8px; }

    .game-start-guide {
      width: min(82vw, 304px);
      margin-top: clamp(2px, .6vh, 7px);
      padding: 9px 12px 10px;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 10px;
      background: rgba(0,0,0,.22);
      color: #fff8c9;
      font: 900 clamp(13px, 3.55vw, 16px)/1.25 'Noto Sans JP', 'Oswald', sans-serif;
      text-align: center;
      text-shadow: 0 3px 0 rgba(0,0,0,.45), 0 0 18px rgba(255,204,0,.42);
      box-shadow: 0 8px 20px rgba(0,0,0,.22);
    }

    .game-start-guide span {
      display: block;
      white-space: nowrap;
    }

    .game-start-slider {
      width: min(80vw, 312px);
      height: 74px;
      position: relative;
      margin: clamp(2px, .55vh, 8px) 0 0;
    }

    .game-start-slider::before {
      content: "";
      position: absolute;
      left: 48px;
      right: 48px;
      top: 25px;
      height: 30px;
      background:
        repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 2px), rgba(255,245,184,.95) calc(12.5% - 2px) 12.5%);
      opacity: .92;
      filter: drop-shadow(0 2px 0 rgba(0,0,0,.28));
    }

    .game-start-slider-bubble {
      position: absolute;
      left: 50%;
      top: 0;
      transform: translateX(-50%);
      min-width: 50px;
      padding: 2px 8px 4px;
      border-radius: 8px;
      background: #fff;
      color: #111;
      font: 900 25px/.94 'Oswald', sans-serif;
      box-shadow: 0 4px 0 rgba(0,0,0,.35);
      z-index: 5;
    }

    .game-start-slider-track {
      position: absolute;
      left: 28px;
      right: 28px;
      top: 37px;
      height: 25px;
      border: 4px solid rgba(255,255,255,.96);
      border-radius: 999px;
      background: #080808;
      overflow: hidden;
      box-shadow: inset 0 4px 8px rgba(0,0,0,.62), 0 5px 0 rgba(0,0,0,.32);
    }

    .game-start-slider-fill-green,
    .game-start-slider-fill-blue {
      position: absolute;
      top: 0;
      height: 100%;
    }

    .game-start-slider-fill-green {
      left: 0;
      width: 50%;
      background: linear-gradient(180deg, #5fd273, #149628 52%, #0a5e15);
    }

    .game-start-slider-fill-blue {
      right: 0;
      width: 50%;
      background: linear-gradient(180deg, #fff66b, #f8e81c 52%, #a07f00);
    }

    .game-start-slider-thumb {
      position: absolute;
      left: 50%;
      top: 50px;
      width: 38px;
      height: 46px;
      transform: translate(-50%, -50%);
      z-index: 6;
      border-radius: 17px 17px 14px 14px;
      border: 4px solid rgba(255,255,255,.8);
      background: linear-gradient(135deg, #fff, #d2d2d2 43%, #777);
      box-shadow: inset -7px -8px 0 rgba(0,0,0,.2), 0 5px 0 rgba(0,0,0,.38);
    }

    .game-start-scale {
      position: absolute;
      top: 42px;
      color: #fff;
      font: 900 17px/1 'Oswald', sans-serif;
      text-shadow: 0 3px 0 rgba(0,0,0,.45);
      z-index: 4;
    }

    .game-start-scale-left { left: 8px; }
    .game-start-scale-right { right: 8px; }

    .game-start-loading {
      margin-top: clamp(2px, .55vh, 7px);
      font: 700 12px/1 'Zen Dots', 'Oswald', sans-serif;
      color: #ffcc00;
      letter-spacing: 2px;
      text-shadow: 0 0 14px rgba(255, 204, 0, .5), 0 2px 0 rgba(0,0,0,.5);
    }

    .game-start-screen.is-ready .game-start-loading {
      color: #fff46b;
    }

    .game-start-bar {
      width: min(58vw, 224px);
      height: 12px;
      padding: 0;
      border: 2px solid rgba(255,255,255,.88);
      border-radius: 999px;
      background: rgba(0,0,0,.68);
      overflow: hidden;
      box-shadow: 0 0 18px rgba(255, 204, 0, .24);
    }

    .game-start-bar-fill {
      display: block;
      width: var(--start-progress);
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #29d54c, #fff46b 56%, #ffb400);
      box-shadow: 0 0 12px rgba(255, 244, 107, .72);
      transition: width .28s ease;
    }

    .game-start-button {
      margin-top: clamp(4px, .9vh, 10px);
      min-height: 38px;
      border: 0;
      background: transparent;
      color: #fff;
      font: 900 24px/1 'Zen Dots', 'Oswald', sans-serif;
      letter-spacing: 0;
      text-shadow: 0 0 18px rgba(255,255,255,.85), 0 0 32px rgba(255,204,0,.5), 0 3px 0 rgba(0,0,0,.45);
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease, transform .12s ease;
      touch-action: manipulation;
    }

    .game-start-screen.is-ready .game-start-button {
      opacity: 1;
      pointer-events: auto;
      animation: startTapBreath 2.8s ease-in-out infinite;
    }

    .game-start-button:disabled {
      cursor: wait;
    }

    .game-start-button:active {
      transform: scale(.97);
    }

    @keyframes startTapBreath {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.055);
      }
    }

    @media (max-height: 700px) {
      .game-start-content {
        gap: 12px;
        min-height: 88vh;
      }

      .game-start-logo {
        width: min(62vw, 258px);
        max-height: 13.5vh;
      }

      .game-start-dice {
        width: 34px;
        height: 34px;
      }

      .game-start-guide {
        padding: 7px 10px 8px;
        font-size: 13px;
      }

      .game-start-slider {
        height: 64px;
        width: min(78vw, 292px);
      }

      .game-start-slider-bubble {
        min-width: 46px;
        font-size: 22px;
      }

      .game-start-slider-track {
        top: 34px;
        height: 22px;
      }

      .game-start-slider-thumb {
        top: 46px;
        width: 34px;
        height: 41px;
      }

      .game-start-loading {
        font-size: 11px;
      }

      .game-start-button {
        font-size: 21px;
      }
    }

    #main-body #loading-overlay,
    #main-body #error-overlay {
      position: absolute;
    }

    .cabinet {
      width: min(100%, calc(100dvh * 375 / 667));
      height: min(100dvh, calc(100vw * 667 / 375));
      aspect-ratio: 375 / 667;
      container-type: size;
      position: relative;
      overflow: hidden;
      background: #000;
      box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 50px rgba(0,0,0,.45);
    }

    .top-bar {
      height: 5.4cqh;
      background: #050505;
      display: grid;
      grid-template-columns: 12cqw 1fr 12cqw;
      align-items: center;
      padding: 0 3.2cqw;
      font-weight: 900;
      font-size: 3.6cqw;
      letter-spacing: .02em;
      text-shadow: 0 .25cqh 0 rgba(0,0,0,.4);
      position: relative;
      z-index: 5;
    }

    .hamburger {
      width: 5.6cqw;
      display: grid;
      gap: .65cqh;
    }

    .hamburger span {
      height: .55cqh;
      background: #fff;
      border-radius: 99px;
    }

    .balance-top { text-align: center; }
    .sound-icon { justify-self: end; font-size: 4.8cqw; }

    .playfield {
      height: 100cqh;   /* was 94.6cqh — top-bar removed, expand to full cabinet */
      position: relative;
      padding: 1.2cqh 9cqw 0;
      overflow: hidden;
      background: #f8e81c;
    }

    .playfield::before {
      content: "";
      position: absolute;
      inset: 0;
      /* SVG turbulence noise — creates a real random grain like canvas/sand */
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 320px 320px;
      background-repeat: repeat;
      opacity: .42;            /* lower = subtler */
      mix-blend-mode: multiply;/* darkens the underlying color where noise is */
      pointer-events: none;
      z-index: 1;
    }

    /* Slightly tone down the base colors so the grain doesn't fight a too-bright base */
    .pf-green { fill: #128823; }
    .pf-blue  { fill: #ecdb12; }
    .playfield { background: #ecdb12; }

    .playfield::after {
      display: none;
    }

    .playfield-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      z-index: 0;
      pointer-events: none;
    }

    .playfield-canvas path {
      transition: d .22s cubic-bezier(.18,.9,.2,1);
    }

    .pf-green { fill: #128823; }
    .pf-blue { fill: #ecdb12; }

    .pf-divider {
      fill: none;
      stroke: #fff5b8;
      stroke-width: 2.25px;
      stroke-linecap: round;
      stroke-linejoin: round;
      vector-effect: non-scaling-stroke;
    }

    .board-border {
      position: absolute;
      inset: .6cqh 1.1cqw .9cqh;
      border: .9cqw solid rgba(255,255,255,.24);
      box-shadow: inset 0 0 0 .4cqw rgba(255,255,255,.12);
      pointer-events: none;
      z-index: 4;
    }

    .section-line {
      height: .35cqh;
      background: var(--cream);
      box-shadow: 0 .2cqh 0 rgba(0,0,0,.18);
      position: relative;
      z-index: 3;
    }

    .top-logo-row {
      height: 7.4cqh;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 5;
      padding-top: .75cqh;
    }

    .top-logo-img {
      width: 86cqw;
      height: auto;
      display: block;
      transform: translateX(calc(3.2cqw - 10px));
      filter: drop-shadow(.35cqw .5cqh 0 rgba(0,0,0,.32));
      pointer-events: none;
    }

    .logo-row {
      height: 13.2cqh;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 3;
    }

    .logo-mark {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7.5cqw;                /* was 2.2cqw — spread out left/right images */
      transform: translateY(.2cqh);
      filter: drop-shadow(.4cqw .65cqh 0 rgba(0,0,0,.25));
      position: relative;
    }

    /* VS badge near the bottom-right of the dice */
    .logo-vs {
      position: absolute;
      left: 55%;
      top: 62%;
      font: 900 5.4cqw/1 'Bebas Neue', 'Oswald', sans-serif;
      color: #fff;
      background: rgba(8,8,8,.92);
      border: .5cqw solid #000;
      border-radius: 1.1cqw;
      padding: .35cqh 1.5cqw .5cqh;
      letter-spacing: .06em;
      text-shadow: 0 .2cqh 0 rgba(0,0,0,.6);
      box-shadow: 0 .5cqh 0 rgba(0,0,0,.45), inset 0 .2cqh 0 rgba(255,255,255,.18);
      z-index: 5;
      transform: rotate(-6deg);
    }

    /* === Character emotion overlay system === */
    .char-slot {
      position: relative;
      display: inline-block;
    }

    .char-slot img.logo-takenoko,
    .char-slot img.logo-kinoko {
      display: block;
    }

    .emote {
      position: absolute;
      pointer-events: none;
      filter: drop-shadow(.25cqw .35cqh 0 rgba(0,0,0,.32));
      opacity: 0;
      transition: opacity .12s ease, transform .12s ease;
    }

    .emote-anger {
      width: 7.8cqw;
      top: -1.7cqh;
      right: -1.2cqw;
      transform: rotate(7deg) scale(.86);
    }

    .kino .emote-anger {
      right: auto;
      left: -1.2cqw;
      transform: rotate(-7deg) scale(.88);
    }

    .emote-sweat {
      display: block;
      width: 5.8cqw;
      top: .15cqh;
      right: -1.7cqw;
      transform: rotate(-16deg) scale(.78);
      transform-origin: 35% 30%;
    }

    .kino .emote-sweat {
      right: auto;
      left: -1.7cqw;
      transform: scaleX(-1) rotate(-16deg) scale(.78);
      transform-origin: 65% 30%;
    }

    .emote-joy {
      position: absolute;
      top: -3.05cqh;
      left: 50%;
      width: 8.4cqw;
      height: 3.2cqh;
      transform: translateX(-50%) rotate(-8deg) scale(.88);
      font: 900 4.7cqw/1 'Bebas Neue', sans-serif;
      text-align: center;
      color: #ffe300;
      text-shadow:
        -.2cqw -.2cqh 0 rgba(0,0,0,.85),
         .2cqw -.2cqh 0 rgba(0,0,0,.85),
        -.2cqw  .2cqh 0 rgba(0,0,0,.85),
         .2cqw  .2cqh 0 rgba(0,0,0,.85);
      opacity: 0;
      transition: opacity .12s ease, transform .12s ease;
      letter-spacing: -.05em;
      pointer-events: none;
      filter: none;
    }

    .emote-joy::before,
    .emote-joy::after {
      position: absolute;
      content: "";
      color: inherit;
      text-shadow: inherit;
      top: .45cqh;
      line-height: 1;
    }

    .emote-joy::before {
      left: 0;
      transform: rotate(-12deg) scale(.76);
    }

    .emote-joy::after {
      right: 0;
      transform: rotate(12deg) scale(.82);
    }

    .char-slot[data-mood="tense"] .emote-anger {
      opacity: 1;
      animation: emoteAngerPulseTaken 1.05s ease-in-out infinite;
    }

    .kino[data-mood="tense"] .emote-anger {
      animation-name: emoteAngerPulseKino;
    }

    .char-slot[data-mood^="joy"] .emote-joy {
      opacity: 1;
      animation: emoteJoyBob 1.55s ease-in-out infinite;
    }

    .char-slot[data-mood="joy-1"] .emote-joy {
      transform: translateX(-50%) rotate(-8deg) scale(.88);
    }

    .char-slot[data-mood="joy-2"] .emote-joy {
      transform: translateX(-50%) rotate(-8deg) scale(1);
    }

    .char-slot[data-mood="joy-2"] .emote-joy::after {
      content: "♪";
    }

    .char-slot[data-mood="joy-3"] .emote-joy {
      transform: translateX(-50%) rotate(-8deg) scale(1.04);
    }

    .char-slot[data-mood="joy-3"] .emote-joy::before,
    .char-slot[data-mood="joy-3"] .emote-joy::after {
      content: "♪";
    }

    .char-slot[data-mood^="sweat"] .emote-sweat {
      opacity: 1;
      animation: emoteSweatBurstTaken 1.05s cubic-bezier(.2,.7,.15,1) infinite;
    }

    .kino[data-mood^="sweat"] .emote-sweat {
      animation-name: emoteSweatBurstKino;
    }

    .char-slot[data-mood="sweat-1"] .emote-sweat {
      --sweat-scale: .7;
      animation-duration: 1.25s;
    }

    .char-slot[data-mood="sweat-2"] .emote-sweat {
      --sweat-scale: .9;
      animation-duration: 1.05s;
    }

    .char-slot[data-mood="sweat-3"] .emote-sweat {
      --sweat-scale: 1.08;
      animation-duration: .82s;
    }

    .char-slot::before,
    .char-slot::after {
      content: "";
      position: absolute;
      width: 1.25cqw;
      height: 1.9cqh;
      border-radius: 60% 60% 65% 65%;
      background: linear-gradient(135deg, #e9ffff, #35bdf4 70%);
      opacity: 0;
      pointer-events: none;
      filter: drop-shadow(.18cqw .22cqh 0 rgba(0,0,0,.28));
      z-index: 4;
    }

    .char-slot::before {
      top: .15cqh;
      right: -1.1cqw;
    }

    .char-slot::after {
      top: 1.55cqh;
      right: .15cqw;
      transform: scale(.75);
    }

    .kino::before {
      right: auto;
      left: -1.1cqw;
    }

    .kino::after {
      right: auto;
      left: .15cqw;
    }

    .char-slot[data-mood="sweat-2"]::before,
    .char-slot[data-mood="sweat-3"]::before {
      animation: cssSweatBurstTaken 1.05s .08s cubic-bezier(.2,.7,.15,1) infinite;
    }

    .char-slot[data-mood="sweat-3"]::after {
      animation: cssSweatBurstTaken .82s .18s cubic-bezier(.2,.7,.15,1) infinite;
    }

    .kino[data-mood="sweat-2"]::before,
    .kino[data-mood="sweat-3"]::before {
      animation-name: cssSweatBurstKino;
    }

    .kino[data-mood="sweat-3"]::after {
      animation-name: cssSweatBurstKino;
    }

    @keyframes emoteJoyBob {
      0%, 100% { margin-top: 0; }
      50%      { margin-top: -.45cqh; }
    }

    @keyframes emoteSweatBurstTaken {
      0%   { opacity: 0; transform: translate(0, 0) rotate(-18deg) scale(.45); }
      12%  { opacity: 1; transform: translate(.55cqw, -.35cqh) rotate(-14deg) scale(var(--sweat-scale, .9)); }
      72%  { opacity: .95; transform: translate(1.8cqw, .75cqh) rotate(-4deg) scale(var(--sweat-scale, .9)); }
      100% { opacity: 0; transform: translate(2.4cqw, 1.35cqh) rotate(8deg) scale(.18); }
    }

    @keyframes emoteSweatBurstKino {
      0%   { opacity: 0; transform: translate(0, 0) scaleX(-1) rotate(-18deg) scale(.45); }
      12%  { opacity: 1; transform: translate(-.55cqw, -.35cqh) scaleX(-1) rotate(-14deg) scale(var(--sweat-scale, .9)); }
      72%  { opacity: .95; transform: translate(-1.8cqw, .75cqh) scaleX(-1) rotate(-4deg) scale(var(--sweat-scale, .9)); }
      100% { opacity: 0; transform: translate(-2.4cqw, 1.35cqh) scaleX(-1) rotate(8deg) scale(.18); }
    }

    @keyframes cssSweatBurstTaken {
      0%   { opacity: 0; transform: translate(0, 0) rotate(-16deg) scale(.35); }
      15%  { opacity: .9; transform: translate(.4cqw, -.25cqh) rotate(-8deg) scale(.9); }
      100% { opacity: 0; transform: translate(2.1cqw, 1.2cqh) rotate(10deg) scale(.2); }
    }

    @keyframes cssSweatBurstKino {
      0%   { opacity: 0; transform: translate(0, 0) rotate(16deg) scale(.35); }
      15%  { opacity: .9; transform: translate(-.4cqw, -.25cqh) rotate(8deg) scale(.9); }
      100% { opacity: 0; transform: translate(-2.1cqw, 1.2cqh) rotate(-10deg) scale(.2); }
    }

    @keyframes emoteAngerPulseTaken {
      0%, 100% { transform: rotate(7deg) scale(.92); }
      50%      { transform: rotate(12deg) scale(1.05); }
    }

    @keyframes emoteAngerPulseKino {
      0%, 100% { transform: rotate(-7deg) scale(.92); }
      50%      { transform: rotate(-12deg) scale(1.05); }
    }

    .logo-100, .logo-dice {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 15.6cqw;
      line-height: .8;
      letter-spacing: .02em;
      color: #fff;
      text-shadow: .55cqw .65cqh 0 rgba(0,0,0,.25);
    }

    .logo-left { position: relative; }

    .logo-bit {
      position: absolute;
      left: 1.2cqw;
      bottom: -1.15cqh;
      padding: .1cqh 2.4cqw .25cqh;
      font: 900 3.3cqw/1 'Oswald', sans-serif;
      letter-spacing: .28em;
      color: #1a4a0d;
      background: linear-gradient(#fff7a1, #dca320);
      border: .45cqw solid rgba(93,74,0,.45);
      text-shadow: none;
      box-shadow: 0 .35cqh 0 rgba(0,0,0,.25);
    }

    .logo-die {
      width: 16.8cqw;
      aspect-ratio: 1;
      border-radius: 3.3cqw;
      position: relative;
      margin-inline: .2cqw;
      z-index: 2;
      transform: rotate(16deg) translateY(-.8cqh);
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 15%),
        linear-gradient(135deg, #ff6255, #d60d0d 52%, #7e0000);
      box-shadow: inset -2.2cqw -2.3cqh 0 rgba(0,0,0,.2), 0 1.1cqh 0 rgba(0,0,0,.22);
    }

    .logo-die span {
      position: absolute;
      width: 15%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: white;
      box-shadow: 0 .15cqh 0 rgba(0,0,0,.2);
    }

    .logo-die span:nth-child(1) { left: 22%; top: 18%; }
    .logo-die span:nth-child(2) { left: 58%; top: 24%; }
    .logo-die span:nth-child(3) { left: 38%; top: 43%; }
    .logo-die span:nth-child(4) { left: 20%; top: 64%; }
    .logo-die span:nth-child(5) { left: 62%; top: 62%; }

    /* === Image-based logo (takenoko / kinoko) === */
    .logo-takenoko, .logo-kinoko {
      width: 12.8cqw;          /* was 16cqw — scaled to 0.8x */
      height: auto;
      image-rendering: pixelated;
      image-rendering: -moz-crisp-edges;
      filter: drop-shadow(.45cqw .7cqh 0 rgba(0,0,0,.3));
      transform: translateY(.4cqh);
    }
    .logo-takenoko { transform: translateY(.4cqh) rotate(-4deg); }
    .logo-kinoko   { transform: translateY(.4cqh) rotate(4deg); }

    /* === Outline-text utility for visibility on yellow ===
       Apply via 4-direction text-shadow to simulate stroke;
       falls back gracefully on browsers without -webkit-text-stroke. */
    .outline-text,
    .balance-top,
    .bet-size-title,
    .bet-size-value,
    .payout-label,
    .payout-value,
    .side-title,
    .bet-title,
    .bet-type,
    .bet-number,
    .chance-label,
    .bet-chance,
    .scale-label,
    .mode {
      paint-order: stroke fill;
      -webkit-text-stroke: .35cqw rgba(0,0,0,.85);
      text-stroke: .35cqw rgba(0,0,0,.85);
    }

    .bet-size-area {
      height: 10.3cqh;
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: 1fr auto 1fr auto;
      align-items: center;
      column-gap: 4.8cqw;
      padding: 0 2cqw;
    }

    .bet-size-title {
      position: absolute;
      top: .6cqh;
      left: 0;
      right: 0;
      text-align: center;
      color: var(--cream);
      font-weight: 900;
      font-size: 3.4cqw;
      text-shadow: .3cqw .35cqh 0 rgba(0,0,0,.3);
    }

    .bet-size-btn {
      border: 0;
      background: transparent;
      color: rgba(255,255,255,.88);
      font: 900 8.8cqw/1 'Oswald', sans-serif;
      text-shadow: .35cqw .55cqh 0 rgba(0,0,0,.28);
      cursor: pointer;
    }

    .bet-size-btn:disabled {
      opacity: .32;
      cursor: not-allowed;
      filter: grayscale(.35);
    }

    .bet-size-value {
      grid-column: 2;
      align-self: end;
      padding-bottom: 1.3cqh;
      font: 900 9.2cqw/.9 'Oswald', 'Noto Sans JP', sans-serif;
      text-shadow: .45cqw .55cqh 0 rgba(0,0,0,.3);
      white-space: nowrap;
      transform: translateY(-.8cqh);
    }

    .payout-row {
      height: 13.7cqh;
      position: relative;
      z-index: 3;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 8.5cqw;
      align-items: start;
      padding-top: .9cqh;
    }

    .side-head {
      text-align: center;
      position: relative;
      min-width: 0;
    }

    .side-title {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 1.4cqw;
      font-family: 'Noto Sans JP', 'Bebas Neue', sans-serif;
      font-weight: 900;
      font-size: 10.4cqw;
      line-height: .8;
      letter-spacing: -.08em;
      text-shadow: .35cqw .45cqh 0 rgba(0,0,0,.25);
      white-space: nowrap;
    }

    .side-title::before, .side-title::after {
      content: "";
      width: 9.5cqw;
      height: .35cqh;
      background: var(--cream);
      box-shadow: 0 .2cqh 0 rgba(0,0,0,.2);
    }

    .green .side-title { color: #7fc488; }
    .blue .side-title { color: #fff352; }

    .payout-label {
      margin-top: .15cqh;
      color: var(--cream);
      font-weight: 900;
      font-size: 3.6cqw;
      text-shadow: .3cqw .35cqh 0 rgba(0,0,0,.28);
    }

    .payout-value {
      margin-top: .35cqh;
      font: 900 8.9cqw/.88 'Oswald', sans-serif;
      text-shadow: .4cqw .5cqh 0 rgba(0,0,0,.28);
      white-space: nowrap;
    }

    /* Small "GP" suffix — about 1/3 the parent number's size */
    .unit-gp {
      font-size: .35em;
      letter-spacing: .04em;
      margin-left: .22em;
      vertical-align: .1em;
      opacity: .9;
    }

    .slider-area {
      height: 15.2cqh;
      position: relative;
      z-index: 3;
      padding-top: .5cqh;
      transform: translateY(-3.4cqh);
    }

    .slider-area > * {
      position: relative;
      z-index: 1;
    }

    .value-bubble {
      position: absolute;
      left: var(--target-left);
      top: .2cqh;
      transform: translateX(-50%);
      z-index: 8;
      padding: .45cqh 2.3cqw .6cqh;
      border-radius: 1.5cqw;
      background: #fff;
      color: #111;
      font: 900 6.2cqw/.9 'Oswald', sans-serif;
      box-shadow: 0 .5cqh 0 rgba(0,0,0,.35);
      cursor: grab;
    }

    .value-bubble::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -1.45cqh;
      transform: translateX(-50%);
      border-left: 2.6cqw solid transparent;
      border-right: 2.6cqw solid transparent;
      border-top: 1.7cqh solid #fff;
    }

    .tick-row {
      position: absolute;
      left: 2cqw;
      right: 2cqw;
      top: 5.2cqh;
      height: 10cqh;
      pointer-events: none;
      z-index: 2;
    }

    .tick {
      position: absolute;
      width: .75cqw;
      height: 2.5cqh;
      background: var(--cream);
      border-radius: 99px;
      box-shadow: 0 7.6cqh 0 var(--cream), 0 .22cqh 0 rgba(0,0,0,.25), 0 7.85cqh 0 rgba(0,0,0,.25);
    }

    .range-track {
      position: absolute;
      left: 0;
      right: 0;
      top: 8.7cqh;
      height: 4.4cqh;
      border: 1.35cqw solid rgba(255,255,255,.95);
      border-radius: 99px;
      background: #070707;
      box-shadow: inset 0 .7cqh 1cqh rgba(0,0,0,.8), 0 .65cqh 0 rgba(0,0,0,.35);
      overflow: hidden;
      cursor: default;
      touch-action: none;
      z-index: 2;
    }

    .range-track::before {
      content: "";
      position: absolute;
      inset: -1.65cqw;
      border-radius: inherit;
      border: 1.3cqw solid rgba(255,255,220,.38);
      box-shadow: 0 0 1.6cqw rgba(255,255,220,.24);
      opacity: .4;
      pointer-events: none;
      z-index: -1;
    }

    .fill-green, .fill-blue {
      position: absolute;
      top: 0;
      height: 100%;
      transition: width .2s cubic-bezier(.2,.9,.2,1), background .2s ease;
      overflow: hidden;
      clip-path: inset(0);
    }

    .fill-green {
      left: 0;
      width: var(--target-pct);
      background: linear-gradient(180deg, #5fd273 0%, #149628 48%, #0a5e15 100%);
    }

    .fill-blue {
      right: 0;
      width: calc(100% - var(--target-pct));
      background: linear-gradient(180deg, #fff66b 0%, #f8e81c 48%, #a07f00 100%);
    }

    .fill-green::after, .fill-blue::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.04) 48%, rgba(0,0,0,.2));
      opacity: .46;
      pointer-events: none;
    }

    .fill-green.lost, .fill-blue.lost {
      background: linear-gradient(180deg, #ff7064 0%, #f21d17 52%, #a00000 100%);
    }

    .slider-thumb {
      position: absolute;
      left: var(--target-left);
      top: 11.2cqh;
      width: 9.4cqw;
      height: 7.4cqh;
      transform: translate(-50%, -50%);
      z-index: 7;
      border-radius: 5cqw 5cqw 4cqw 4cqw;
      border: 1.1cqw solid rgba(255,255,255,.75);
      background: linear-gradient(135deg, #fff, #d2d2d2 42%, #777);
      box-shadow: inset -1.4cqw -1.2cqh 0 rgba(0,0,0,.2), 0 .75cqh 0 rgba(0,0,0,.38);
      transition: left .2s cubic-bezier(.2,.9,.2,1), opacity .16s ease, transform .16s ease;
      cursor: grab;
      touch-action: none;
    }

    .slider-area.dragging .fill-green,
    .slider-area.dragging .fill-blue,
    .playfield.dragging .playfield-canvas path,
    .slider-thumb.dragging {
      transition: none;
    }

    .slider-thumb.dragging {
      cursor: grabbing;
      transform: translate(-50%, -50%) scale(1.04);
    }

    .slider-area.dragging .value-bubble {
      cursor: grabbing;
    }

    .scale-label {
      position: absolute;
      top: 10.1cqh;
      color: #fff;
      font-weight: 900;
      font-size: 4.1cqw;
      text-shadow: .3cqw .35cqh 0 rgba(0,0,0,.35);
      z-index: 2;
    }

    .scale-left { left: -3.8cqw; }
    .scale-right { right: -3.8cqw; }

    .roll-chip {
      position: absolute;
      left: var(--roll-left, 50%);
      top: calc(8.7cqh + 2.2cqh);
      width: 10.8cqw;
      aspect-ratio: 1;
      z-index: 9;
      transform: translate(-50%, calc(-50% - 4cqh)) scale(.9);
      opacity: 0;
      border-radius: 2.1cqw;
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 15%),
        linear-gradient(135deg, #ff6255, #d60d0d 52%, #7e0000);
      box-shadow: inset -1.4cqw -1.45cqh 0 rgba(0,0,0,.2), 0 .75cqh 0 rgba(0,0,0,.28);
      pointer-events: none;
      rotate: -10deg;
    }

    .roll-chip::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      z-index: 1;
      pointer-events: none;
    }

    .roll-chip.show {
      opacity: 1;
      transform: translate(-50%, calc(-50% - .55cqh)) scale(1);
    }

    .roll-chip.rolling {
      opacity: 1;
      transform: translate(-50%, calc(-50% - .55cqh)) scale(1);
      transition: none;
    }

    .roll-chip span {
      position: absolute;
      width: 15%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 .12cqh 0 rgba(0,0,0,.2);
    }

    .roll-chip span:nth-child(1) { left: 22%; top: 18%; }
    .roll-chip span:nth-child(2) { left: 58%; top: 24%; }
    .roll-chip span:nth-child(3) { left: 38%; top: 43%; }
    .roll-chip span:nth-child(4) { left: 20%; top: 64%; }
    .roll-chip span:nth-child(5) { left: 62%; top: 62%; }

    .roll-chip-value {
      position: absolute;
      left: 50%;
      top: 52%;
      transform: translate(-50%, -50%) rotate(10deg);
      z-index: 2;
      min-width: 7.1cqw;
      padding: .25cqh .6cqw .35cqh;
      border-radius: 1.1cqw;
      background: rgba(255,255,255,.94);
      color: #111;
      font: 900 3.8cqw/.9 'Oswald', sans-serif;
      text-align: center;
      box-shadow: 0 .28cqh 0 rgba(0,0,0,.32), inset 0 .18cqh 0 rgba(255,255,255,.8);
      text-shadow: none;
    }

    .roll-chip.win {
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 15%),
        linear-gradient(135deg, #ff6255, #d60d0d 52%, #7e0000);
    }

    .roll-chip.lose {
      background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.45), transparent 15%),
        linear-gradient(135deg, #ff6255, #d60d0d 52%, #7e0000);
    }

    .bet-row {
      height: 20.8cqh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8.5cqw;
      margin: 2.7cqh -5.6cqw 0;
      position: relative;
      z-index: 3;
      align-items: start;
      padding-top: 1.8cqh;
    }

    .bet-column {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }

    .bet-card {
      width: 100%;
      height: 13.4cqh;
      position: relative;
      border: .8cqw solid rgba(0,0,0,.45);
      border-radius: 3.1cqw;
      padding: 1.35cqh 1.4cqw .9cqh;
      text-align: center;
      box-shadow:
        inset 0 0 4cqw rgba(255,255,255,.15),
        0 .85cqh 0 rgba(0,0,0,.35),
        0 0 .7cqw rgba(255,255,220,.14);
      cursor: pointer;
      overflow: visible;
      transition: background .2s ease, filter .2s ease, opacity .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .bet-green { background: linear-gradient(180deg, rgba(95,210,115,.72), rgba(10,107,26,.86)); }
    .bet-blue { background: linear-gradient(180deg, rgba(255,235,30,.72), rgba(120,95,0,.88)); }

    /* BET button character images removed — text is centered for balance */
    .bet-card::before {
      content: none;
    }

    .bet-green { color: #149628; }
    .bet-blue { color: #c9a818; }

    .bet-card:disabled {
      cursor: default;
    }

    .rolling .range-track,
    .rolling .bet-card,
    .result .range-track,
    .result .bet-card {
      animation: none;
    }

    .rolling .range-track::before,
    .rolling .bet-card::before,
    .result .range-track::before,
    .result .bet-card::before {
      animation: none;
      opacity: 0;
    }

    .rolling.betting-under .bet-blue,
    .rolling.betting-over .bet-green {
      opacity: .34;
      filter: grayscale(1) brightness(.68);
      box-shadow: inset 0 0 3cqw rgba(0,0,0,.25), 0 .55cqh 0 rgba(0,0,0,.22);
    }

    .rolling.betting-under .bet-green,
    .rolling.betting-over .bet-blue {
      border-color: rgba(255,45,35,.92);
      background: linear-gradient(180deg, rgba(255,88,76,.92), rgba(168,8,0,.94));
      box-shadow:
        inset 0 0 4.2cqw rgba(255,255,255,.18),
        0 .85cqh 0 rgba(0,0,0,.36),
        0 0 2.4cqw rgba(255,28,18,.45);
      filter: saturate(1.15) brightness(1.03);
    }

    .rolling.betting-under .bet-green::after,
    .rolling.betting-over .bet-blue::after {
      content: "BET中";
      position: absolute;
      right: 1.3cqw;
      top: .85cqh;
      padding: .35cqh 1.25cqw .45cqh;
      border-radius: 99px;
      background: rgba(0,0,0,.48);
      color: #fff;
      font: 900 2.5cqw/1 'Noto Sans JP', sans-serif;
      text-shadow: none;
      letter-spacing: -.04em;
    }

    .bet-title {
      display: block;
      font-family: 'Bebas Neue', 'Noto Sans JP', sans-serif;
      font-weight: 900;
      font-size: 6cqw;             /* was 7cqw — fit inside the button border */
      line-height: .84;
      letter-spacing: -.05em;
      color: #fff;
      text-align: center;
      text-shadow: .3cqw .4cqh 0 rgba(0,0,0,.3);
      white-space: nowrap;
      padding: 0 .8cqw;            /* small breathing room from the border */
    }

    .bet-title strong {
      color: currentColor;
      letter-spacing: -.06em;
      margin-left: .4cqw;
    }

    /* Number large + caption below, both centered */
    .bet-number {
      margin: 1.2cqh 0 0 0;
      color: #fff;
      font: 900 6.4cqw/.95 'Oswald', sans-serif;
      letter-spacing: -.01em;
      text-align: center;
      text-shadow: .3cqw .35cqh 0 rgba(0,0,0,.32);
    }

    .bet-type {
      margin: .45cqh 0 0 0;
      color: var(--cream);
      font: 900 3cqw/1 'Noto Sans JP', sans-serif;
      letter-spacing: -.02em;
      text-align: center;
      text-shadow: .22cqw .28cqh 0 rgba(0,0,0,.3);
      white-space: nowrap;
    }

    .chance-panel {
      margin-top: 1.15cqh;
      color: #fff;
      text-align: center;
      font-weight: 900;
      text-shadow: .24cqw .3cqh 0 rgba(0,0,0,.28);
    }

    .chance-label {
      color: var(--cream);
      font-size: 3.7cqw;
      line-height: 1;
    }

    .bet-chance-row {
      margin-top: .2cqh;
      text-align: center;
    }

    .bet-chance {
      color: #fff;
      font-size: 4.1cqw;
      font-weight: 900;
      line-height: .95;
      text-shadow: .2cqw .25cqh 0 rgba(0,0,0,.25);
    }

    .bet-card.win, .side-head.win {
      filter: brightness(1.12) saturate(1.15);
    }

    .bet-card.lose {
      background: linear-gradient(180deg, rgba(255,65,55,.9), rgba(160,0,0,.92));
    }

    .side-head.lose .side-title { color: #ff342a; }

    .result .side-head {
      min-height: 12.8cqh;
      border: .8cqw solid rgba(0,0,0,.56);
      border-radius: 3.2cqw;
      padding: 1.2cqh 1.2cqw .9cqh;
      box-shadow: inset 0 0 3.4cqw rgba(255,255,255,.12), 0 .7cqh 0 rgba(0,0,0,.3);
    }

    .result .side-head.green.win {
      background: linear-gradient(180deg, rgba(95,210,115,.82), rgba(20,150,40,.9));
    }

    .result .side-head.blue.win {
      background: linear-gradient(180deg, rgba(255,235,40,.82), rgba(120,95,0,.9));
    }

    .result .side-head.lose {
      background: linear-gradient(180deg, rgba(255,66,56,.94), rgba(167,0,0,.92));
    }

    .result .side-title {
      display: flex;
      gap: .9cqw;
      font-family: 'Noto Sans JP', sans-serif;
      font-size: 6.7cqw;
      line-height: 1.05;
      letter-spacing: -.04em;
      color: rgba(0,0,0,.58);
      text-shadow: none;
      white-space: nowrap;
    }

    .result .side-title::before,
    .result .side-title::after {
      display: none;
    }

    .result .bet-title {
      font-size: 8cqw;
    }

    .bottom-area {
      height: 6.5cqh;
      margin-top: 3cqh;          /* clear the chance % text above */
      position: relative;
      z-index: 3;
      display: flex;
      align-items: stretch;
    }

    .history-dock { display: none; }   /* legacy */

    /* === Result history strip === */
    .result-history {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      gap: .8cqw;
      padding: .8cqh 2cqw;
      margin: 0 -9cqw;          /* extend to playfield edges */
      overflow: hidden;
      background: rgba(0,0,0,.42);
      border-top: .25cqh solid rgba(255,255,255,.18);
    }
    .result-history-empty {
      color: rgba(255,255,255,.45);
      font: 900 2.6cqw/1 'Oswald', 'Noto Sans JP', sans-serif;
      letter-spacing: .04em;
    }

    /* === Stats toggle (▲ button) === */
    .stats-toggle {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 11cqw;
      height: 100%;
      display: grid;
      place-items: center;
      background: rgba(0,0,0,.62);
      color: #b9b9b9;
      font: 900 4cqw/1 'Bebas Neue', sans-serif;
      border: 0;
      border-left: .25cqh solid rgba(255,255,255,.12);
      cursor: pointer;
      z-index: 6;
      transition: background .15s, color .15s;
    }
    .stats-toggle:hover { background: rgba(0,0,0,.85); color: #fff; }

    /* === Slide-up stats panel === */
    .stats-panel {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 68%;
      background: #0c0c0c;
      color: #ccc;
      z-index: 30;
      transform: translateY(100%);
      transition: transform .35s cubic-bezier(.2,.8,.25,1);
      box-shadow: 0 -.6cqh 1.6cqw rgba(0,0,0,.55);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      pointer-events: none;
    }
    .stats-panel.open {
      transform: translateY(0);
      pointer-events: auto;
    }

    .stats-header {
      flex: 0 0 auto;
      height: 5.2cqh;
      padding: 0 4cqw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #181818;
      border-bottom: .25cqh solid rgba(255,255,255,.1);
    }
    .stats-title {
      color: #ddd;
      font: 900 4cqw/1 'Noto Sans JP', sans-serif;
      letter-spacing: .04em;
    }
    .stats-close {
      width: 8cqw; height: 60%;
      display: grid; place-items: center;
      background: rgba(255,255,255,.1);
      color: #fff;
      border: 0;
      border-radius: 1cqw;
      font: 900 4cqw/1 'Bebas Neue', sans-serif;
      cursor: pointer;
    }
    .stats-close:hover { background: rgba(255,255,255,.2); }

    .stats-body {
      flex: 1;
      padding: 1.1cqh 2.4cqw 1.3cqh;
      display: flex;
      flex-direction: column;
      gap: 1.1cqh;
      overflow-y: auto;
    }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .6cqh 4cqw;
      padding: .9cqh 1.6cqw;
      background: #1a1a1a;
      border-radius: 1.5cqw;
      border: .15cqh solid rgba(255,255,255,.08);
    }
    .stats-cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font: 900 3.2cqw/1.2 'Oswald', 'Noto Sans JP', sans-serif;
    }
    .stats-cell .lbl { color: #888; }
    .stats-cell .lbl.kino { color: #5fd273; }
    .stats-cell .lbl.take { color: #fff352; }
    .stats-cell .lbl.miss { color: #ff5b50; }
    .stats-cell .val { color: #fff; }

    /* === Histogram === */
    .stats-chart {
      position: relative;
      flex: 1;
      min-height: 0;
      padding: .8cqh 3.4cqw 3.4cqh 7cqw;
      background: #1a1a1a;
      border-radius: 1.5cqw;
      border: .15cqh solid rgba(255,255,255,.08);
    }
    .chart-yaxis {
      position: absolute;
      left: .8cqw; top: .8cqh; bottom: 3.4cqh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      color: #888;
      font: 900 2.4cqw/1 'Oswald', sans-serif;
      writing-mode: vertical-rl;
    }
    .chart-yaxis .ymax {
      writing-mode: horizontal-tb;
      color: #ccc;
    }
    .chart-area {
      position: relative;
      height: calc(100% - 4cqh);
      display: flex;
      align-items: flex-end;
      gap: .35cqw;
      border-bottom: .2cqh solid rgba(255,255,255,.25);
    }
    .hist-bar {
      flex: 1;
      min-height: 0;
      transition: height .25s ease;
      border-radius: .3cqw .3cqw 0 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
    }
    .hist-bar.zero { background: transparent; }
    .hist-seg {
      width: 100%;
      transition: height .25s ease;
    }
    .hist-seg.seg-kino {
      background: linear-gradient(180deg, #5fd273, #128823);
    }
    .hist-seg.seg-taken {
      background: linear-gradient(180deg, #fff66b, #ecdb12);
    }
    .chart-xaxis {
      position: absolute;
      left: 7cqw; right: 3.4cqw; bottom: 1.35cqh;
      display: flex;
      justify-content: space-between;
      color: #888;
      font: 900 2.2cqw/1 'Oswald', sans-serif;
    }
    .chart-xlabel {
      position: absolute;
      bottom: .15cqh; left: 0; right: 0;
      text-align: center;
      color: #ccc;
      font: 900 2.4cqw/1 'Oswald', sans-serif;
      letter-spacing: .1em;
    }

    .result-chip {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: .4cqw;
      padding: .35cqh .9cqw .35cqh .55cqw;
      border-radius: 1.4cqw;
      border: .25cqw solid;
      background: rgba(0,0,0,.4);
      animation: chipFadeIn .35s cubic-bezier(.18,1.2,.4,1);
    }

    .result-chip[data-side="kino"] {
      background: linear-gradient(180deg, rgba(95,210,115,.5), rgba(20,80,30,.7));
      border-color: #5fd273;
    }

    .result-chip[data-side="taken"] {
      background: linear-gradient(180deg, rgba(255,235,80,.55), rgba(120,90,0,.75));
      border-color: #fff66b;
    }

    .result-chip img {
      width: 4cqw;
      height: 4cqw;
      object-fit: contain;
      object-position: bottom;
      image-rendering: pixelated;
      filter: drop-shadow(0 .15cqh 0 rgba(0,0,0,.4));
    }

    .result-chip .num {
      color: #fff;
      font: 900 2.6cqw/1 'Oswald', sans-serif;
      letter-spacing: -.02em;
      text-shadow: 0 .15cqh 0 rgba(0,0,0,.5);
      -webkit-text-stroke: .18cqw rgba(0,0,0,.7);
      paint-order: stroke fill;
    }

    @keyframes chipFadeIn {
      from { transform: translateY(-.6cqh) scale(.85); opacity: 0; }
      to   { transform: translateY(0) scale(1); opacity: 1; }
    }

    .rolling .slider-thumb { opacity: 0; transform: translate(-50%, -42%) scale(.82); }
    .rolling .side-head, .rolling .bet-card { filter: brightness(.9); }
    .rolling .value-bubble { opacity: 0; }
    .result .value-bubble { opacity: .38; }
    .result .roll-chip { z-index: 10; }

    .result .slider-thumb { opacity: 0; }

    .result-modal {
      position: absolute;
      inset: 0;
      z-index: 30;
      display: grid;
      place-items: center;
      padding: 0 8cqw;
      background: rgba(0,0,0,.46);
      opacity: 0;
      pointer-events: none;
      transition: opacity .16s ease;
    }

    .result-modal.show {
      opacity: 1;
      pointer-events: auto;
    }

    .result-modal-card {
      width: 100%;
      border-radius: 4.5cqw;
      border: .9cqw solid rgba(255,255,255,.72);
      min-height: 28cqh;
      padding: 2.5cqh 4.2cqw 2.3cqh;
      text-align: center;
      box-shadow: 0 1.1cqh 0 rgba(0,0,0,.42), inset 0 0 5cqw rgba(255,255,255,.16);
      transform: translateY(1.4cqh) scale(.94);
      transition: transform .18s cubic-bezier(.18,1.25,.32,1);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .result-modal.show .result-modal-card {
      transform: translateY(0) scale(1);
    }

    .result-modal.win .result-modal-card {
      background: linear-gradient(180deg, rgba(55,205,70,.96), rgba(11,104,24,.98));
    }

    .result-modal.lose .result-modal-card {
      background: linear-gradient(180deg, rgba(255,72,58,.97), rgba(135,0,0,.98));
    }

    .result-modal-title {
      font: 900 11cqw/.92 'Noto Sans JP', 'Oswald', sans-serif;
      letter-spacing: -.08em;
      text-shadow: .45cqw .55cqh 0 rgba(0,0,0,.3);
    }

    .result-modal-sub {
      margin-top: .7cqh;
      color: var(--cream);
      font: 900 3.8cqw/1.15 'Noto Sans JP', sans-serif;
      text-shadow: .25cqw .3cqh 0 rgba(0,0,0,.35);
    }

    .result-modal-amount {
      margin-top: .55cqh;
      font: 900 8.6cqw/.95 'Oswald', sans-serif;
      text-shadow: .38cqw .45cqh 0 rgba(0,0,0,.32);
    }

    .result-modal-actions {
      width: 100%;
      margin-top: 1.25cqh;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.4cqw;
    }

    .result-modal-action {
      min-height: 4.2cqh;
      display: grid;
      place-items: center;
      border: .35cqw solid rgba(255,255,255,.72);
      border-radius: 99px;
      padding: .75cqh 1.3cqw .85cqh;
      background: rgba(0,0,0,.28);
      color: #fff;
      font: 900 3.15cqw/1.05 'Noto Sans JP', sans-serif;
      box-shadow: 0 .45cqh 0 rgba(0,0,0,.32);
      cursor: pointer;
      min-width: 0;
      white-space: nowrap;
    }

    .result-modal-action.has-hint {
      min-height: 5.6cqh;
      white-space: normal;
      row-gap: .3cqh;
      line-height: 1;
    }

    .result-action-hint {
      display: block;
      color: rgba(255,255,255,.9);
      font: 800 2.05cqw/1.15 'Noto Sans JP', sans-serif;
      text-shadow: .18cqw .2cqh 0 rgba(0,0,0,.3);
    }

    .result-modal-action.primary {
      background: rgba(255,255,255,.22);
      border-color: rgba(255,255,255,.9);
    }

    .result-modal-action[hidden] {
      display: none;
    }

    #result-ok {
      grid-column: 1 / -1;
      justify-self: center;
      min-width: 30cqw;
      padding-left: 5cqw;
      padding-right: 5cqw;
    }

    .crm-overlay {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 10000;
      background: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(8px);
      opacity: 0;
      transition: opacity 0.3s;
    }

    .crm-overlay.open {
      display: flex;
      opacity: 1;
    }

    .crm-box {
      width: 85%;
      max-width: 360px;
      max-height: 95vh;
      overflow: visible;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 14px 10px 12px;
      border: 2px solid var(--crm-primary);
      border-radius: 16px;
      background: linear-gradient(135deg, var(--crm-bg-start) 0%, var(--crm-bg-end) 100%);
      box-shadow: 0 0 40px rgba(255, 204, 0, 0.15);
      transform: scale(0.9);
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .crm-overlay.open .crm-box {
      transform: scale(1);
    }

    .crm-header {
      width: 100%;
      margin-bottom: 8px;
      text-align: center;
    }

    .crm-title {
      color: var(--crm-primary);
      font: 700 1.4rem/1.2 var(--crm-font-sub);
      letter-spacing: 1px;
      text-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
    }

    .crm-title-line {
      width: 60px;
      height: 2px;
      margin: 6px auto 0;
      background: var(--crm-primary);
      box-shadow: 0 0 5px var(--crm-primary);
    }

    .crm-card-area {
      position: relative;
      margin-bottom: 8px;
      perspective: 1000px;
    }

    .crm-card-frame {
      position: relative;
      width: min(150px, 40vw);
      aspect-ratio: 5 / 7;
      height: auto;
      border-radius: 12px;
    }

    .crm-card-placeholder {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      border: 2px dashed var(--crm-primary);
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.4);
      background-image: linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 75%, transparent 75%, transparent);
      background-size: 12px 12px;
      color: var(--crm-primary);
      box-shadow: 0 0 20px rgba(255, 204, 0, 0.2), inset 0 0 10px rgba(255, 204, 0, 0.1);
    }

    .crm-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .crm-card-icon {
      margin-bottom: 10px;
      font: 700 3rem/1 var(--crm-font-main);
      opacity: 0.8;
    }

    .crm-card-text {
      font: 700 .8rem/1 var(--crm-font-main);
      letter-spacing: 2px;
    }

    .crm-card-name {
      width: 100%;
      margin: 5px 0 0;
      color: #fff;
      font: 700 1.1rem/1.25 var(--crm-font-sub);
      letter-spacing: 1px;
      text-align: center;
      text-shadow: 0 0 5px var(--crm-primary);
      overflow-wrap: anywhere;
    }

    .crm-card-glow {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      width: 160%;
      height: 160%;
      background: radial-gradient(circle, var(--crm-primary) 0%, transparent 60%);
      opacity: 0.4;
      transform: translate(-50%, -50%);
      animation: crmRotateGlow 8s infinite linear, crmPulseGlow 3s infinite ease-in-out;
    }

    @keyframes crmRotateGlow {
      from { transform: translate(-50%, -50%) rotate(0deg); }
      to { transform: translate(-50%, -50%) rotate(360deg); }
    }

    @keyframes crmPulseGlow {
      0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
      50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
    }

    .crm-score-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 3px 0 10px;
    }

    .crm-label {
      margin-bottom: 2px;
      color: var(--crm-sub-text);
      font: 700 .7rem/1 var(--crm-font-main);
      letter-spacing: 3px;
    }

    .crm-value {
      color: var(--crm-text);
      font: 700 1.5rem/1 var(--crm-font-main);
      text-shadow: 0 0 15px var(--crm-primary);
    }

    .crm-actions {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 7px;
      align-items: center;
    }

    .crm-btn-primary {
      order: 1;
      flex: 0 0 100%;
      width: 100%;
      min-height: 40px;
      padding: 10px 12px;
      border: 0;
      border-radius: 8px;
      background: var(--crm-primary);
      color: #000;
      font: 700 1.1rem/1.2 var(--crm-font-sub);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      cursor: pointer;
      overflow: hidden;
      position: relative;
      transition: transform 0.1s, box-shadow 0.1s;
    }

    .crm-btn-primary::after {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
      transform: rotate(45deg) translate(-100%, 0);
      animation: crmBtnShine 3s infinite;
    }

    @keyframes crmBtnShine {
      0%, 80% { transform: rotate(45deg) translate(-100%, 0); }
      100% { transform: rotate(45deg) translate(100%, 0); }
    }

    .crm-btn-primary:active {
      transform: scale(0.98);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }

    .crm-btn-redemption {
      order: 3;
      flex: 1 1 calc(50% - 4px);
      min-width: 0;
      min-height: 38px;
      padding: 9px 10px;
      border: 2px solid var(--crm-accent);
      border-radius: 8px;
      background: rgba(0, 242, 255, 0.15);
      color: var(--crm-accent);
      font: 700 1rem/1.2 var(--crm-font-sub);
      box-shadow: 0 0 10px rgba(0, 242, 255, 0.3);
      cursor: pointer;
      overflow: hidden;
      transition: .2s;
    }

    .crm-btn-replay {
      order: 2;
      flex: 1 1 calc(50% - 4px);
      min-width: 0;
      min-height: 38px;
      padding: 9px 10px;
      border: 2px solid #ff69b4;
      border-radius: 8px;
      background: rgba(255, 105, 180, 0.12);
      color: #ffb3d9;
      font: 700 1rem/1.2 var(--crm-font-sub);
      box-shadow: 0 0 10px rgba(255, 105, 180, 0.22);
      cursor: pointer;
      transition: .2s;
    }

    .crm-btn-replay:hover {
      background: #ff69b4;
      color: #12071c;
      box-shadow: 0 0 18px rgba(255, 105, 180, 0.5);
    }

    .crm-btn-redemption:hover {
      background: var(--crm-accent);
      color: #000;
      box-shadow: 0 0 20px var(--crm-accent);
    }

    .crm-btn-secondary {
      order: 4;
      width: 100%;
      margin-top: 5px;
      min-height: 28px;
      padding: 4px 5px;
      border: 0;
      background: transparent;
      color: var(--crm-sub-text);
      font: 700 .9rem/1.2 var(--crm-font-sub);
      text-decoration: underline;
      opacity: .7;
      cursor: pointer;
      transition: opacity .2s;
    }

    .crm-btn-secondary:hover {
      color: var(--crm-text);
      opacity: 1;
    }

    .redeem-overlay {
      z-index: 20000;
    }

    .redeem-copy {
      margin: 20px 0;
      color: #aaa;
      font: 700 1rem/1.45 var(--crm-font-sub);
      text-align: center;
    }

    .bonus-overlay {
      position: fixed;
      inset: 0;
      z-index: 30000;
      display: none;
      justify-content: center;
      align-items: center;
      background: rgba(5, 5, 16, 0.8);
      backdrop-filter: blur(4px);
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .bonus-overlay.open {
      display: flex;
      opacity: 1;
    }

    .bonus-panel {
      position: relative;
      width: 85%;
      max-width: 400px;
      min-height: 210px;
      padding: 26px 24px 22px;
      border: 3px solid #ffb100;
      border-radius: 24px;
      background: linear-gradient(160deg, #fff5c7 0%, #ffe289 40%, #ffc644 100%);
      box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35), inset 0 0 25px rgba(255, 255, 255, 0.35);
      color: #a45d00;
      font-family: var(--crm-font-main);
      text-align: center;
      transform: scale(0.95);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .bonus-panel::before {
      content: "";
      position: absolute;
      inset: 6px;
      border-radius: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0));
      pointer-events: none;
    }

    .bonus-title {
      margin-bottom: 14px;
      color: #c05c00;
      font-size: 1.3rem;
      line-height: 1.2;
      letter-spacing: 1px;
      text-shadow: 0 2px 8px rgba(255, 255, 255, 0.6);
    }

    .bonus-body {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 16px;
      margin-bottom: 12px;
    }

    .bonus-coin {
      position: relative;
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #fff1b3, #ffbb33 60%, #cc8400 100%);
      box-shadow: inset 0 0 15px rgba(255, 255, 255, 0.4), 0 6px 18px rgba(204, 132, 0, 0.6);
    }

    .bonus-coin-inner {
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(255, 255, 255, 0.5);
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #ffe8a0, #ffbf3d);
      color: #8b4b00;
      font-size: 1.2rem;
      font-weight: bold;
    }

    .bonus-amount {
      color: #d05600;
      font-size: 2.5rem;
      text-shadow: 0 4px 10px rgba(255, 255, 255, 0.7);
    }

    .bonus-close-btn {
      min-width: 120px;
      min-height: 44px;
      padding: 12px 24px;
      border: 0;
      border-radius: 24px;
      background: linear-gradient(180deg, #ffb931, #ff8a00);
      color: #3e1d00;
      font-family: var(--crm-font-main);
      font-size: 1rem;
      line-height: 1;
      box-shadow: 0 6px 18px rgba(255, 138, 0, 0.45);
      cursor: pointer;
      transition: transform 0.15s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .bonus-close-btn:active {
      transform: scale(0.97);
    }

    @media (max-aspect-ratio: 375/667) {
      .cabinet { width: 100%; height: calc(100vw * 667 / 375); }
      body:not(#main-body) #main-body .cabinet {
        width: 100%;
        height: min(100%, calc(100vw * 667 / 375));
      }
    }

    @media (max-height: 700px) {
      #main-body {
        min-height: calc(var(--k11t-main-height, 100vh) + 96px);
        height: calc(var(--k11t-main-height, 100vh) + 96px);
      }

      body:not(#main-body) #main-body {
        min-height: calc(var(--k11t-main-height, calc(100dvh - 66px)) + 96px);
        height: calc(var(--k11t-main-height, calc(100dvh - 66px)) + 96px);
      }
    }