/* Game root. Standalone: <html class="cp-standalone"><body class="cp-standalone"><div id="coinpusher" class="cp cp-fullscreen">.
   Embedded in another page: give the wrapper element class "cp" and a size (e.g. width:100%; aspect-ratio:16/10).
   Every rule below is scoped under .cp; positions are relative to the root and sizes use container-query units,
   so the game stays inside its box and never touches the host page's styles. */
.cp {
  position: relative; display: block; width: 100%; overflow: hidden; container-type: size;
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; font-size: 14px; line-height: 1.4;
  color: var(--text); background: var(--bg); text-align: left;
}
.cp.cp-fullscreen { position: fixed; inset: 0; width: auto; }
/* touch devices: "manipulation" keeps scrolling/pinch but removes the double-tap-to-zoom delay and gesture (rapid
   taps on the drop button no longer zoom the page); no text selection / callout menu on long presses */
.cp, .cp * { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.cp input, .cp textarea { -webkit-user-select: text; user-select: text; }
.cp:not(.cp-fullscreen) { aspect-ratio: 16 / 10; min-height: 480px; }
.cp * { box-sizing: border-box; }

.cp {
  /* pastel theme: white translucent panels, soft pink borders, purple-grey text */
  --bg: #fff4f8;
  --panel: rgba(255, 255, 255, 0.85);
  --panel-border: rgba(255, 140, 200, 0.75);
  --gold: #f59e0b;
  --gold-dim: #e0b03a;
  --text: #6b2f55;
  --muted: #b3809c;
  --accent: #ff4fae;
  --danger: #ff5f8f;
  --ok: #3cc98a;
  font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

.cp * { box-sizing: border-box; }
html.cp-standalone, body.cp-standalone { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
.cp #app { position: absolute; inset: 0; }
.cp #app canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.cp .hidden { display: none !important; }

.cp .panel {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(255, 120, 190, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------- HUD ---------- */
.cp #hud { top: 16px; left: 16px; padding: 14px 18px; min-width: 250px; user-select: none; }
.cp #hud .title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.cp .logo {
  font-weight: 900; letter-spacing: 0.08em; font-size: 20px;
  background: linear-gradient(180deg, #ffb347, #ff5fb0 60%, #ff2f9e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cp .logo-sub { font-size: 11px; letter-spacing: 0.3em; color: var(--gold); font-weight: 700; }
.cp .dot { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: #f0c8da; box-shadow: 0 0 8px #f0c8da; transition: all 0.3s; }
.cp .dot.on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.cp .dot.off { background: var(--danger); box-shadow: 0 0 10px var(--danger); }

.cp .mode {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 10px;
}
.cp .mode.free { background: rgba(60, 201, 138, 0.14); color: var(--ok); border: 1px solid rgba(60, 201, 138, 0.5); }
.cp .mode.play { background: rgba(255, 190, 90, 0.2); color: var(--gold); border: 1px solid rgba(255, 190, 90, 0.6); animation: pulse 1.6s ease-in-out infinite; }
.cp .mode.spectate { background: rgba(255, 79, 174, 0.12); color: var(--accent); border: 1px solid rgba(255, 79, 174, 0.5); }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 rgba(255, 212, 90, 0); } 50% { box-shadow: 0 0 14px rgba(255, 212, 90, 0.55); } }

.cp #hud .row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; line-height: 1.75; }
.cp #hud .row.small { font-size: 12px; color: var(--muted); }
.cp #hud .k { color: var(--muted); }
.cp #hud .v { font-weight: 700; }
.cp #hud .v.num { font-variant-numeric: tabular-nums; color: var(--gold); }
.cp #hud .row.small .v.num { color: var(--text); }
.cp .v.bump { animation: bump 0.35s ease-out; }
.cp .lamps { display: inline-flex; gap: 5px; align-items: center; }
.cp .lamps i { width: 12px; height: 12px; border-radius: 50%; background: #ffe1ec; border: 1px solid #ffb8d0; display: inline-block; transition: all 0.25s; }
.cp .lamps i.on { background: #2f7cff; box-shadow: 0 0 10px #2f7cff, 0 0 20px rgba(47, 124, 255, 0.55); border-color: #8ab4ff; }
.cp .lamps.full i.on { animation: lampblink 0.5s ease-in-out infinite alternate; }
@keyframes lampblink { from { filter: brightness(0.7); } to { filter: brightness(1.4); } }
.cp #slot.spin { color: var(--accent); animation: pulse 0.8s ease-in-out infinite; }
.cp #banner.jp { background: linear-gradient(180deg, #fff8c7, #ffd045 35%, #ff3b5c 70%, #ff6ad5 100%); -webkit-background-clip: text; background-clip: text; }
@keyframes bump { 0% { transform: scale(1.45); color: #ff5fb0; } 100% { transform: scale(1); } }

/* ---------- controls ---------- */
.cp #controls { left: 50%; bottom: 18px; transform: translateX(-50%); padding: 12px 16px; max-width: calc(100cqw - 24px); }
.cp .ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cp .hint { font-size: 11px; color: var(--muted); width: 100%; text-align: center; }

.cp button {
  font: inherit; font-weight: 700; color: var(--text); border: 1px solid #ffc2dc;
  background: linear-gradient(180deg, #ffffff, #ffe6f0); border-radius: 12px; padding: 10px 16px; cursor: pointer;
  transition: transform 0.08s, filter 0.2s, box-shadow 0.2s; user-select: none; -webkit-tap-highlight-color: transparent;
}
.cp button:hover { filter: brightness(1.15); }
.cp button:active { transform: translateY(1px) scale(0.98); }
.cp button:disabled { opacity: 0.45; cursor: not-allowed; }
.cp button.soft-disabled { opacity: 0.45; cursor: not-allowed; }
.cp button.primary {
  background: linear-gradient(180deg, #fff1b0, #ffcf5a 60%, #ffb347); color: #7a4b00; border-color: #ffe6a8;
  box-shadow: 0 6px 18px rgba(255, 190, 80, 0.4);
}
.cp button.primary.big { padding: 14px 28px; font-size: 18px; position: relative; }
/* KP rate: a small separate line hanging centred under the drop button (the panel gets extra bottom padding for it) */
.cp button.primary.big .rate { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.02em; pointer-events: none; }
.cp #controls.has-rate { padding-bottom: 26px; }
.cp #controls.has-rate .ctl { row-gap: 24px; } /* if the row wraps (medium widths) the next row clears the rate line */
.cp button.danger { background: linear-gradient(180deg, #ffe0e9, #ffc2d3); border-color: #ffb3c6; color: #c8355e; }
.cp button.icon { width: 52px; height: 52px; font-size: 20px; padding: 0; }
/* AUTO insert pill: sits on the top edge of the drop button (the play row is the positioning context) */
.cp #ctl-play { position: relative; }
.cp #btn-auto {
  position: absolute; left: 50%; top: -13px; transform: translateX(-50%); z-index: 2;
  padding: 2px 10px; font-size: 11px; font-weight: 900; letter-spacing: 0.12em; border-radius: 999px; line-height: 1.4;
  background: linear-gradient(180deg, #ffffff, #f3e4ee); color: var(--muted); border: 1px solid #ffc2dc; box-shadow: 0 2px 8px rgba(255, 120, 190, 0.25);
}
.cp #btn-auto.on { background: linear-gradient(180deg, #d9ffe9, #3cc98a 70%, #2aa870); color: #fff; border-color: #2aa870; box-shadow: 0 0 12px rgba(60, 201, 138, 0.8); animation: pulse 1.2s ease-in-out infinite; }
.cp #controls.playing { padding-top: 20px; }
.cp button.icon.held { filter: brightness(1.5); box-shadow: 0 0 14px var(--accent); }
.cp input[type="text"] {
  font: inherit; padding: 10px 12px; border-radius: 12px; border: 1px solid #ffc2dc;
  background: rgba(255, 255, 255, 0.85); color: var(--text); width: 160px; outline: none;
}
.cp input[type="text"]:focus { border-color: var(--gold); }
.cp .spectate-badge { font-weight: 800; color: var(--accent); font-size: 16px; letter-spacing: 0.05em; }

/* ---------- log ---------- */
.cp #log { position: absolute; right: 16px; top: 16px; width: 260px; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.cp .cp-toast {
  display: block; opacity: 1;
  background: var(--panel); border: 1px solid rgba(255, 170, 210, 0.4); border-left: 3px solid var(--accent); box-shadow: 0 6px 18px rgba(255, 150, 200, 0.2);
  padding: 8px 12px; border-radius: 10px; font-size: 13px; animation: slidein 0.25s ease-out; backdrop-filter: blur(8px);
}
.cp .cp-toast.win { border-left-color: var(--gold); }
.cp .cp-toast.lose { border-left-color: #cfc6e0; color: var(--muted); }
.cp .cp-toast.start { border-left-color: var(--ok); }
.cp .cp-toast.end { border-left-color: var(--danger); }
.cp .cp-toast.jackpot { border-left-color: #ff7ad9; font-weight: 800; }
.cp .cp-toast.cp-fade { opacity: 0; transition: opacity 0.6s; }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- banner ---------- */
.cp #banner {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%); text-align: center; pointer-events: none;
  font-size: clamp(36px, 8cqw, 96px); font-weight: 900; letter-spacing: 0.1em;
  background: linear-gradient(180deg, #fff8c7, #ffd045 45%, #ff6ad5 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 24px rgba(255, 200, 80, 0.8));
  animation: bannerin 2.8s ease-out forwards;
  white-space: nowrap; /* big centre banner ("BALL GET!", "REACH!!"...): no wrapping inside a word, fitText shrinks it instead */
}
.cp #banner small { display: block; font-size: 0.3em; letter-spacing: 0.3em; color: #c2185b; -webkit-text-fill-color: #c2185b; }
@keyframes bannerin {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  12% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
  20% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- roulette overlay ---------- */
/* big centre telops: never break inside a word - the font is shrunk to fit instead (fitText in roulette.js) */
.cp .rl-intro .txt, .cp .rl-intro .txt small, .cp #rarecoin .rc-title, .cp #rarecoin .rc-effect, .cp #rarecoin .rc-effect small,
.cp #rlresult .total, .cp #rlresult .total small, .cp #rlball, .cp #rlball small, .cp #rlball span, .cp #freecounter .fc-title, .cp #freecounter .fc-source { white-space: nowrap; }
.cp #roulette {
  position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: radial-gradient(ellipse at center, rgba(255, 245, 210, 0.35), rgba(255, 220, 236, 0.85)); pointer-events: none;
  animation: rlfade 0.4s ease-out;
}
@keyframes rlfade { from { opacity: 0; } to { opacity: 1; } }
.cp .rl-title {
  font-size: clamp(28px, 6cqw, 64px); font-weight: 900; letter-spacing: 0.35em;
  background: linear-gradient(180deg, #fff8c7, #ffd045 50%, #b8811a); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 200, 80, 0.6)); animation: pulse 1s ease-in-out infinite;
}
.cp .rl-wheel-wrap { position: relative; width: min(70cqmin, 560px); height: min(70cqmin, 560px); }
.cp .rl-canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7)); }
.cp .rl-pointer {
  position: absolute; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0; z-index: 2;
  border-left: 18px solid transparent; border-right: 18px solid transparent; border-top: 44px solid #ff3b5c;
  filter: drop-shadow(0 0 10px #ff3b5c);
}
.cp .rl-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14%; height: 14%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff3b0, #d9a520 60%, #8a5e10); display: grid; place-items: center;
  font-size: 2.2em; color: #5a2a00; box-shadow: 0 0 20px rgba(255, 200, 80, 0.6);
}
.cp .rl-result {
  min-height: 1.4em; font-size: clamp(30px, 7cqw, 80px); font-weight: 900; letter-spacing: 0.08em; color: #ff5fb0; opacity: 0;
  text-shadow: 0 0 20px #fff, 0 3px 4px rgba(120, 80, 160, 0.4); transition: opacity 0.3s;
}
.cp .rl-result.show { opacity: 1; animation: bump 0.5s ease-out; }
.cp .rl-result.jp {
  background: linear-gradient(180deg, #fff8c7, #ffd045 35%, #ff3b5c 70%, #ff6ad5 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 200, 80, 0.9)); animation: bump 0.6s ease-out, pulse 0.8s ease-in-out infinite;
}
.cp #roulette.rl-done .rl-title { animation: none; }
.cp #free.spin { color: var(--gold); animation: pulse 0.6s ease-in-out infinite; }
/* roulette intro: white flash, spinning rays, "CHANCE!!" burst, confetti */
.cp .rl-flashlayer { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cp #roulette.rl-start .rl-flashlayer { animation: rlFlash 0.7s ease-out forwards; }
@keyframes rlFlash { 0% { opacity: 0.95; } 100% { opacity: 0; } }
.cp .rl-rays {
  position: absolute; left: 50%; top: 50%; width: 200cqmax; height: 200cqmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 90, 0.16) 0 9deg, transparent 9deg 18deg);
  animation: rlRays 8s linear infinite; pointer-events: none;
}
@keyframes rlRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.cp .rl-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.cp .rl-intro { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.cp #roulette.rl-start .rl-intro { opacity: 1; }
.cp .rl-intro .txt {
  font-size: clamp(48px, 13cqw, 150px); font-weight: 900; letter-spacing: 0.08em; text-align: center; line-height: 1;
  background: linear-gradient(180deg, #fff8c7, #ffd045 45%, #ff3b5c 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(255, 200, 80, 0.9)); animation: rlIntro 1.5s ease-out forwards;
}
.cp .rl-intro .txt small { display: block; font-size: 0.32em; letter-spacing: 0.4em; -webkit-text-fill-color: #c2185b; color: #c2185b; }
.cp #roulette.rl-super .rl-intro .txt { background: linear-gradient(180deg, #fff8c7, #ff6ad5 45%, #ff3fb8 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 40px rgba(255, 106, 213, 0.95)); }
.cp #roulette.rl-super .rl-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 106, 213, 0.2) 0 9deg, transparent 9deg 18deg); animation-duration: 4s; }
/* the kuruun win: gold rays spinning fast behind the title, the flash layer pulsing softly */
.cp #roulette.rl-celebrate .rl-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 215, 90, 0.32) 0 9deg, rgba(255, 120, 200, 0.12) 9deg 18deg); animation-duration: 2.2s; }
.cp #roulette.rl-celebrate .rl-flashlayer { animation: rlGoldPulse 1.1s ease-in-out infinite; background: #fff4c0; }
@keyframes rlGoldPulse { 0%, 100% { opacity: 0; } 50% { opacity: 0.22; } }
@keyframes rlIntro {
  0% { transform: scale(0.2) rotate(-12deg); opacity: 0; }
  18% { transform: scale(1.35) rotate(3deg); opacity: 1; }
  32% { transform: scale(1) rotate(0); }
  75% { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.8); }
}
.cp .rl-wheel-wrap { transition: opacity 0.35s, transform 0.35s; }
.cp #roulette.rl-start .rl-wheel-wrap { opacity: 0; transform: scale(0.5); }
.cp .confetti { position: absolute; top: -24px; width: 10px; height: 18px; border-radius: 2px; opacity: 0.95; pointer-events: none; animation: confettiFall linear forwards; }
@keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(115cqh) rotate(900deg); } }

/* ---------- free coin counter ---------- */
/* transparent strip across the top of the screen so the coin shower itself stays visible */
.cp #freecounter {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 6; pointer-events: none; text-align: center;
  padding: 0 24px; min-width: 320px; background: none; border: 0; animation: rlfade 0.3s ease-out;
}
.cp #freecounter .fc-title { font-size: clamp(24px, 3.4cqw, 40px); font-weight: 900; letter-spacing: 0.3em; color: #ff2f9e; paint-order: stroke fill; -webkit-text-stroke: 8px #fff; text-shadow: 0 0 16px #fff, 0 4px 8px rgba(120, 40, 90, 0.35); margin-top: -4px; }
.cp #freecounter .fc-source { font-size: 14px; font-weight: 800; color: #c2185b; letter-spacing: 0.1em; paint-order: stroke fill; -webkit-text-stroke: 4px #fff; text-shadow: 0 0 8px #fff; margin-top: 2px; }
.cp #freecounter .fc-num { font-size: clamp(64px, 11cqw, 128px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; font-family: Impact, "Arial Black", "Segoe UI", sans-serif; letter-spacing: 0.02em;
  background: linear-gradient(180deg, #fff6b0, #ffc400 50%, #ff8a00); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 4px 0 #ff2f9e) drop-shadow(0 8px 10px rgba(120, 40, 90, 0.45)); }
.cp #freecounter .fc-num small { font-size: 0.55em; color: #ff2f9e; -webkit-text-fill-color: #ff2f9e; margin: 0 10px; }
.cp #freecounter .fc-num .total { font-size: 0.62em; color: #ff2f9e; -webkit-text-fill-color: #ff2f9e; }
.cp #freecounter .fc-label { font-size: 12px; color: var(--gold); letter-spacing: 0.3em; text-shadow: 0 0 10px #fff, 0 1px 2px #fff; animation: pulse 0.7s ease-in-out infinite; }
.cp #freecounter.done .fc-title { color: var(--ok); }
.cp #freecounter.paused .fc-title { color: #c2185b; font-size: clamp(16px, 2.2cqw, 24px); letter-spacing: 0.1em; animation: pulse 1s ease-in-out infinite; }
.cp #freecounter.paused .fc-num { filter: grayscale(0.6) opacity(0.75) drop-shadow(0 0 2px #fff); }

/* ---------- ball announcement ---------- */
.cp #rlball {
  position: absolute; left: 50%; top: 24%; transform: translate(-50%, -50%); z-index: 7; pointer-events: none; text-align: center;
  font-weight: 900; color: #ff2f9e; paint-order: stroke fill; -webkit-text-stroke: 10px #fff;
  text-shadow: 0 0 18px #fff, 0 6px 10px rgba(120, 40, 90, 0.35); animation: ballpop 1.3s cubic-bezier(0.2, 1.4, 0.4, 1) forwards;
}
.cp #rlball small { display: block; font-size: clamp(14px, 2cqw, 22px); letter-spacing: 0.3em; color: #c2185b; -webkit-text-stroke: 5px #fff; }
.cp #rlball span { display: block; font-size: clamp(40px, 7cqw, 84px); line-height: 1.05; letter-spacing: 0.05em; }
.cp #rlball span b { font-size: 1.4em; color: #ff8a00; }
@keyframes ballpop { 0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; } 15% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1); } }

/* ---------- roulette result card ---------- */
.cp #rlresult {
  position: absolute; left: 50%; top: 19%; transform: translateX(-50%); z-index: 7; pointer-events: none; text-align: center;
  padding: 14px 26px 16px; border-radius: 22px; min-width: 320px; max-width: min(92cqw, 720px);
  background: rgba(255, 255, 255, 0.9); border: 3px solid #ff8fc8; box-shadow: 0 14px 40px rgba(255, 100, 180, 0.35);
  animation: rlcard 0.5s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.cp #rlresult.jp { border-color: #ff2fa8; box-shadow: 0 0 40px rgba(255, 47, 168, 0.6); }
.cp #rlresult .head { font-size: 13px; font-weight: 900; letter-spacing: 0.35em; color: #c2185b; }
.cp #rlresult .chips { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 8px; }
.cp #rlresult .chip {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 76px; padding: 6px 12px; border-radius: 14px;
  font-size: 26px; font-weight: 900; line-height: 1.1; color: #fff; background: #ff8fc8; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  animation: chipin 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) backwards;
}
.cp #rlresult .chip small { font-size: 11px; font-weight: 700; letter-spacing: 0.15em; opacity: 0.9; }
.cp #rlresult .chip.win { background: linear-gradient(180deg, #ffd93f, #ff9f1c); color: #5a2a00; }
.cp #rlresult .chip.jp { background: linear-gradient(180deg, #ff5fc8, #ff1f9e); color: #fff; animation: chipin 0.45s cubic-bezier(0.2, 1.5, 0.4, 1) backwards, pulse 0.8s ease-in-out infinite; }
.cp #rlresult .chip.miss { background: #eadff0; color: #a08cb0; }
.cp #rlresult .chip:nth-child(2) { animation-delay: 0.08s; } .cp #rlresult .chip:nth-child(3) { animation-delay: 0.16s; }
.cp #rlresult .chip:nth-child(4) { animation-delay: 0.24s; } .cp #rlresult .chip:nth-child(5) { animation-delay: 0.32s; }
.cp #rlresult .total { font-size: clamp(22px, 3.6cqw, 34px); font-weight: 900; color: #e86a00; }
.cp #rlresult .total b { font-size: 1.45em; color: #ff2f9e; }
.cp #rlresult .total small { display: block; font-size: 12px; letter-spacing: 0.25em; color: #c2185b; }
.cp #rlresult .total.jp { color: #ff1f9e; animation: pulse 0.8s ease-in-out infinite; }
.cp #rlresult .total.miss { color: #a08cb0; }
@keyframes rlcard { 0% { transform: translateX(-50%) scale(0.4); opacity: 0; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } }
@keyframes chipin { 0% { transform: scale(0.2) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.cp .flabel.big { font-size: 40px; color: #ff5fb0; text-shadow: 0 0 18px #fff, 0 0 4px #fff, 0 3px 3px rgba(120, 80, 160, 0.4); }

/* ---------- cheat panel ---------- */
.cp #cheats { left: 12px; top: 52px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; z-index: 6; border-color: #ff5fb0; max-height: calc(100cqh - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #ff9fd0 transparent; } /* the list is longer than the screen: it scrolls */
.cp #cheats button { flex-shrink: 0; }
.cp #cheats .ch-title { font-size: 12px; font-weight: 900; letter-spacing: 0.15em; color: #ff2f9e; margin-bottom: 2px; cursor: pointer; }
.cp #cheats.collapsed button { display: none; }
.cp #cheats.collapsed .ch-title { margin-bottom: 0; }
.cp #cheats button { padding: 6px 10px; font-size: 12px; text-align: left; }

/* ---------- idle countdown ---------- */
.cp #idle {
  position: absolute; right: 14px; bottom: 12px; z-index: 5; pointer-events: none; font-size: 12px; font-weight: 700;
  color: var(--muted); background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 140, 200, 0.5); border-radius: 999px;
  padding: 4px 12px; letter-spacing: 0.05em;
}
.cp #idle b { color: var(--text); font-variant-numeric: tabular-nums; }
.cp #idle.busy b { color: var(--ok); }
.cp #idle.soon { color: var(--danger); border-color: var(--danger); animation: pulse 0.8s ease-in-out infinite; }
.cp #idle.soon b { color: var(--danger); }

/* ---------- floating labels ---------- */
.cp #labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cp .flabel {
  position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 22px; color: var(--gold);
  text-shadow: 0 0 10px #fff, 0 0 3px #fff, 0 2px 2px rgba(120, 80, 160, 0.4); animation: floatup 1.3s ease-out forwards;
  white-space: nowrap; /* floating labels ("RAINBOW STAR", "×2 🔵 3/5") stay on one line even near the edge */
}
.cp .flabel.lose { color: #b3809c; font-size: 15px; text-shadow: 0 1px 2px #fff; }
@keyframes floatup { 0% { opacity: 0; margin-top: 10px; } 15% { opacity: 1; } 100% { opacity: 0; margin-top: -70px; } }

/* ---------- poster close-up (a tap on a wall poster) ---------- */
.cp .poster-viewer { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; background: rgba(60, 20, 45, 0.55); opacity: 0; transition: opacity 0.25s; cursor: pointer; }
.cp .poster-viewer.on { opacity: 1; }
.cp .pv-box { display: flex; flex-direction: column; align-items: center; gap: 8px; max-height: 90%; transform: scale(0.85); transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.cp .poster-viewer.on .pv-box { transform: scale(1); }
.cp .poster-viewer img { max-width: min(86vw, 560px); max-height: 80vh; width: auto; height: auto; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.cp .pv-credit { font-size: 12px; color: #fff; opacity: 0.85; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); letter-spacing: 0.5px; }
.cp .pv-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #ff2f9e; font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); }

/* ---------- the kuruun's PUSH!! button (right of the screen, theatre only): a cute glossy red candy button on a
   pastel pink plate with a white scalloped rim, little hearts and stars, a soft yellow twinkle behind it and a
   bouncing heart above - in the room's pink / yellow palette ---------- */
.cp .push-btn { position: absolute; right: 22px; top: 50%; width: 200px; height: 250px; margin-top: -125px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 9; opacity: 0; transform: translateX(80px) scale(0.6); transition: opacity 0.35s, transform 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); -webkit-tap-highlight-color: transparent; font-family: "Segoe UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif; }
.cp .push-btn.on { opacity: 1; transform: none; }
.cp .push-btn.out { opacity: 0; transform: translateX(80px) scale(0.7); }
.cp .push-btn:focus { outline: none; }
/* a soft pale-yellow twinkle behind everything */
.cp .push-btn .pb-burst { position: absolute; left: 50%; top: 58%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 241, 168, 0.75) 0deg 14deg, rgba(255, 241, 168, 0) 14deg 30deg); -webkit-mask: radial-gradient(circle, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0) 70%); mask: radial-gradient(circle, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0) 70%); animation: pb-spin 9s linear infinite; }
@keyframes pb-spin { to { transform: rotate(360deg); } }
/* the pastel pink plate, white scalloped border, hearts and stars in the corners */
.cp .push-btn .pb-plate { position: absolute; left: 10px; right: 10px; top: 62px; bottom: 6px; border-radius: 30px; background: linear-gradient(160deg, #ffe4f1, #ffc3df); border: 5px solid #ffffff; box-shadow: 0 10px 22px rgba(255, 120, 180, 0.35), 0 0 0 3px #ffb0d4, inset 0 2px 0 rgba(255, 255, 255, 0.9); }
.cp .push-btn .pb-plate::before { content: ''; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; border-radius: 28px; background: radial-gradient(circle at 50% 50%, #ffffff 0 4px, transparent 5px) 0 0 / 14px 14px repeat-x, radial-gradient(circle at 50% 50%, #ffffff 0 4px, transparent 5px) 0 100% / 14px 14px repeat-x; background-repeat: repeat-x; pointer-events: none; opacity: 0.9; }
.cp .push-btn .pb-plate i { position: absolute; font-style: normal; font-size: 16px; line-height: 1; color: #ff6fb8; text-shadow: 0 1px 0 #fff; }
.cp .push-btn .pb-plate i:nth-child(2), .cp .push-btn .pb-plate i:nth-child(3) { color: #ffd35a; }
.cp .push-btn .pb-plate i:nth-child(1) { left: 10px; top: 8px; } .cp .push-btn .pb-plate i:nth-child(2) { right: 10px; top: 8px; }
.cp .push-btn .pb-plate i:nth-child(3) { left: 10px; bottom: 8px; } .cp .push-btn .pb-plate i:nth-child(4) { right: 10px; bottom: 8px; }
/* the white ring the button sits in (soft, like a frilly cushion) */
.cp .push-btn .pb-ring { position: absolute; left: 24px; right: 24px; top: 96px; height: 106px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #ffffff, #ffe9f4 70%, #ffd0e6); box-shadow: 0 6px 12px rgba(255, 120, 180, 0.3), inset 0 -6px 12px rgba(255, 150, 200, 0.35); }
.cp .push-btn .pb-ring::after { content: ''; position: absolute; left: 16px; right: 16px; top: 16px; bottom: 16px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #7a1636, #4a0a20); box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.5); }
/* the candy-red dome: glossy, with a big soft highlight, sinking when pressed */
.cp .push-btn .pb-cap { position: absolute; left: 42px; right: 42px; top: 50px; height: 114px; overflow: visible; border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 42% 24%, #ffd6d6 0%, #ff8080 20%, #ff3b4a 50%, #c4162a 100%); box-shadow: 0 20px 0 #a8122a, 0 22px 0 4px #ffffff, 0 30px 18px rgba(200, 40, 90, 0.35), inset 0 -14px 26px rgba(120, 0, 30, 0.3), inset 0 10px 14px rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; transition: transform 0.07s, box-shadow 0.07s; animation: pb-glow 0.8s ease-in-out infinite alternate; }
.cp .push-btn .pb-cap::before { content: ''; position: absolute; left: 20%; top: 11%; width: 42%; height: 24%; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); transform: rotate(-12deg); }
.cp .push-btn .pb-cap::after { content: ''; position: absolute; right: 18%; top: 22%; width: 10%; height: 10%; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
@keyframes pb-glow { from { filter: drop-shadow(0 0 4px rgba(255, 90, 120, 0.4)) brightness(1); } to { filter: drop-shadow(0 0 18px rgba(255, 110, 150, 0.95)) brightness(1.1); } }
.cp .push-btn .pb-cap b { color: #ffffff; font-weight: 900; font-size: 27px; letter-spacing: 0.5px; white-space: nowrap; line-height: 1; transform: rotate(-6deg) translateY(4px); text-shadow: -2px -2px 0 #e0335a, 2px -2px 0 #e0335a, -2px 2px 0 #e0335a, 2px 2px 0 #e0335a, 0 4px 0 #a8122a, 0 0 12px rgba(255, 255, 255, 0.6); animation: pb-text 0.4s ease-in-out infinite alternate; }
@keyframes pb-text { from { transform: rotate(-6deg) translateY(4px) scale(1); } to { transform: rotate(-6deg) translateY(4px) scale(1.1); } }
.cp .push-btn.down .pb-cap { animation: pb-press 0.22s cubic-bezier(0.3, 0, 0.4, 1) 1, pb-glow 0.8s ease-in-out infinite alternate; }
@keyframes pb-press { 0% { transform: translateY(0); } 35% { transform: translateY(16px); box-shadow: 0 4px 0 #a8122a, 0 6px 0 4px #ffffff, 0 10px 10px rgba(200, 40, 90, 0.3), inset 0 -8px 18px rgba(120, 0, 30, 0.3), inset 0 6px 10px rgba(255, 255, 255, 0.35); background: radial-gradient(ellipse at 42% 24%, #ffe6e6 0%, #ffa0a0 20%, #ff5f6c 50%, #d92a40 100%); } 60% { transform: translateY(14px); } 100% { transform: translateY(0); } }
/* the bouncing heart above */
.cp .push-btn .pb-arrow { position: absolute; left: 50%; top: -4px; margin-left: -18px; width: 36px; font-size: 34px; line-height: 1; color: #ff6fb8; text-shadow: -2px 0 0 #fff, 2px 0 0 #fff, 0 -2px 0 #fff, 0 3px 0 #fff, 0 0 12px rgba(255, 111, 184, 0.7); animation: pb-bounce 0.5s ease-in-out infinite alternate; }
@keyframes pb-bounce { from { transform: translateY(-4px) scale(1); } to { transform: translateY(8px) scale(1.15); } }
@media (max-width: 640px) { .cp .push-btn { right: 8px; width: 130px; height: 165px; margin-top: -82px; } .cp .push-btn .pb-burst { width: 200px; height: 200px; margin: -100px 0 0 -100px; } .cp .push-btn .pb-plate { top: 42px; border-radius: 20px; border-width: 4px; } .cp .push-btn .pb-plate i { font-size: 11px; } .cp .push-btn .pb-ring { left: 16px; right: 16px; top: 64px; height: 70px; } .cp .push-btn .pb-cap { left: 28px; right: 28px; top: 34px; height: 76px; box-shadow: 0 13px 0 #a8122a, 0 15px 0 3px #ffffff, 0 20px 12px rgba(200, 40, 90, 0.35), inset 0 -9px 16px rgba(120, 0, 30, 0.3), inset 0 6px 9px rgba(255, 255, 255, 0.4); } .cp .push-btn .pb-cap b { font-size: 17px; } .cp .push-btn.down .pb-cap { animation: pb-press-s 0.22s cubic-bezier(0.3, 0, 0.4, 1) 1, pb-glow 0.8s ease-in-out infinite alternate; } @keyframes pb-press-s { 0% { transform: translateY(0); } 35% { transform: translateY(10px); } 60% { transform: translateY(9px); } 100% { transform: translateY(0); } } .cp .push-btn .pb-arrow { font-size: 24px; margin-left: -12px; } }

/* ---------- candy coin unwrapping (centre of the screen) ---------- */
.cp .candy-reveal { position: absolute; left: 50%; top: 40%; z-index: 9; pointer-events: none; text-align: center; opacity: 0; transform: translate(-50%, -50%) scale(0.5); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 1.5, 0.4, 1); filter: drop-shadow(0 10px 22px rgba(120, 40, 90, 0.25)); }
.cp .candy-reveal.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cp .candy-reveal.out { opacity: 0; transform: translate(-50%, -60%) scale(1.08); }
.cp .cr-candy { position: relative; width: calc(var(--bw) + 180px); height: 130px; margin: 0 auto; animation: cr-wobble 0.9s ease-in-out 0.1s 1; }
@keyframes cr-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
.cp .cr-body { position: absolute; left: 90px; top: 22px; width: var(--bw); height: 86px; }
.cp .cr-half { position: absolute; top: 0; width: 51%; height: 100%; background: repeating-linear-gradient(105deg, var(--film) 0 20px, rgba(255, 255, 255, 0.92) 20px 29px); box-shadow: inset 0 -14px 22px rgba(0, 0, 0, 0.14), inset 0 12px 16px rgba(255, 255, 255, 0.55); transition: transform 0.85s cubic-bezier(0.45, 0, 0.3, 1), opacity 0.85s; }
.cp .cr-hl { left: 0; border-radius: 43px 0 0 43px; }
.cp .cr-hr { right: 0; border-radius: 0 43px 43px 0; }
.cp .candy-reveal.open .cr-hl { transform: translateX(-170px) translateY(-30px) rotate(-28deg); opacity: 0; }
.cp .candy-reveal.open .cr-hr { transform: translateX(170px) translateY(-30px) rotate(28deg); opacity: 0; }
.cp .cr-fan { position: absolute; top: 30px; width: 92px; height: 70px; background: linear-gradient(90deg, var(--film), rgba(255, 255, 255, 0.85) 45%, var(--film)); clip-path: polygon(100% 50%, 0 0, 16% 26%, 0 50%, 16% 74%, 0 100%); transition: transform 0.85s cubic-bezier(0.45, 0, 0.3, 1), opacity 0.85s; transform-origin: 100% 50%; }
.cp .cr-l { left: 0; }
.cp .cr-r { right: 0; transform: scaleX(-1); }
.cp .candy-reveal.open .cr-l { transform: translateX(-200px) rotate(-560deg) scale(0.6); opacity: 0; }
.cp .candy-reveal.open .cr-r { transform: scaleX(-1) translateX(-200px) rotate(560deg) scale(0.6); opacity: 0; }
.cp .cr-coins { position: absolute; left: 96px; top: 34px; width: var(--bw); height: 62px; }
.cp .cr-coins i { position: absolute; top: 0; width: 26px; height: 62px; border-radius: 50%; background: radial-gradient(ellipse at 40% 30%, #fff3b0, #f5c542 50%, #c98f12); box-shadow: 5px 0 0 #a8720c, inset 0 0 0 3px rgba(255, 255, 255, 0.35); opacity: 0; transform: scale(0.3); }
.cp .candy-reveal.open .cr-coins i { animation: cr-pop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
@keyframes cr-pop { to { opacity: 1; transform: scale(1); } }
.cp .cr-count { display: inline-block; margin-top: 8px; padding: 6px 26px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 6px 18px rgba(120, 40, 90, 0.2); font-weight: 900; font-size: 50px; line-height: 1; color: var(--ink); opacity: 0; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s; font-variant-numeric: tabular-nums; }
.cp .cr-count small { font-size: 22px; margin-left: 4px; }
.cp .candy-reveal.counting .cr-count { opacity: 1; transform: none; }
.cp .candy-reveal.done .cr-count { color: #ff2f9e; animation: cr-bounce 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes cr-bounce { 0% { transform: scale(1); } 50% { transform: scale(1.35); } 100% { transform: scale(1.1); } }
/* acorn mode: the wrapper holds acorns (brown nut with a dark cap) instead of coin edges */
.cp .candy-reveal.acorn .cr-coins i { width: 36px; height: 50px; top: 6px; border-radius: 50% 50% 48% 48% / 42% 42% 58% 58%; background: radial-gradient(ellipse at 40% 40%, #d8a064, #b27a3e 50%, #7a4d22); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.15); }
.cp .candy-reveal.acorn .cr-coins i::before { content: ''; position: absolute; left: -3px; right: -3px; top: -4px; height: 20px; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(ellipse at 40% 30%, #7a5230, #5b3a1e 60%, #3e2814); }
.cp .candy-reveal.acorn .cr-coins i::after { content: ''; position: absolute; left: 16px; top: -12px; width: 4px; height: 12px; border-radius: 2px; background: #3e2814; transform: rotate(12deg); }
.cp .candy-reveal.acorn.grand .cr-coins i { background: radial-gradient(ellipse at 40% 40%, #ffd9a0, #d59a5c 50%, #8a5a2a); box-shadow: 0 0 14px rgba(255, 212, 90, 0.9), inset 0 -6px 10px rgba(0, 0, 0, 0.15); }

/* the grand version (100+ coins): larger, a spinning golden glow behind it, gold count that pulses once the count passes 100 */
.cp .candy-reveal.grand.on { transform: translate(-50%, -50%) scale(1.25); }
.cp .candy-reveal.grand::before { content: ''; position: absolute; left: 50%; top: 40%; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255, 212, 90, 0) 0deg, rgba(255, 212, 90, 0.55) 20deg, rgba(255, 212, 90, 0) 40deg, rgba(255, 106, 213, 0.45) 60deg, rgba(255, 212, 90, 0) 80deg, rgba(255, 212, 90, 0.55) 100deg, rgba(255, 212, 90, 0) 120deg, rgba(88, 213, 255, 0.4) 140deg, rgba(255, 212, 90, 0) 160deg, rgba(255, 212, 90, 0.55) 180deg, rgba(255, 212, 90, 0) 200deg, rgba(255, 106, 213, 0.45) 220deg, rgba(255, 212, 90, 0) 240deg, rgba(255, 212, 90, 0.55) 260deg, rgba(255, 212, 90, 0) 280deg, rgba(88, 213, 255, 0.4) 300deg, rgba(255, 212, 90, 0) 320deg, rgba(255, 212, 90, 0.55) 340deg, rgba(255, 212, 90, 0) 360deg); filter: blur(6px); opacity: 0; transition: opacity 0.6s; animation: cr-spin 5s linear infinite; z-index: -1; }
.cp .candy-reveal.grand.open::before { opacity: 1; }
@keyframes cr-spin { to { transform: rotate(360deg); } }
.cp .candy-reveal.grand .cr-coins i { background: radial-gradient(ellipse at 40% 30%, #fffbe0, #ffd45a 45%, #d19a17); box-shadow: 5px 0 0 #a8720c, 0 0 14px rgba(255, 212, 90, 0.9), inset 0 0 0 3px rgba(255, 255, 255, 0.45); }
.cp .candy-reveal.grand.over .cr-count { color: #b8860b; background: linear-gradient(180deg, #fff9dc, #ffe9a0); box-shadow: 0 0 0 4px rgba(255, 212, 90, 0.6), 0 8px 26px rgba(184, 134, 11, 0.35); animation: cr-pulse 0.45s ease-in-out infinite alternate; }
@keyframes cr-pulse { from { transform: scale(1); } to { transform: scale(1.12); } }
.cp .candy-reveal.grand.done .cr-count { color: #ff2f9e; animation: cr-bounce 0.6s cubic-bezier(0.2, 1.6, 0.4, 1), cr-pulse 0.5s ease-in-out 0.6s infinite alternate; }
@media (max-width: 640px) { .cp .candy-reveal { transform: translate(-50%, -50%) scale(0.35); } .cp .candy-reveal.on { transform: translate(-50%, -50%) scale(0.7); } .cp .candy-reveal.grand.on { transform: translate(-50%, -50%) scale(0.8); } }

/* ---------- overlay ---------- */
.cp .overlay { position: absolute; inset: 0; background: rgba(255, 240, 246, 0.9); display: grid; place-items: center; z-index: 10; transition: opacity 0.4s; }
.cp .overlay.hidden-soft { opacity: 0; pointer-events: none; }
.cp .overlay-box { text-align: center; color: var(--muted); font-size: 15px; }
.cp .overlay-box small { display: block; margin: 6px 0 14px; font-size: 12px; opacity: 0.75; }
.cp .overlay-box button { padding: 10px 24px; border: 0; border-radius: 999px; background: #ff5fb0; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 0 4px 14px rgba(255, 95, 176, 0.35); }
.cp .overlay-box button:hover { background: #ff3fa0; }
.cp .spinner { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto 14px; border: 4px solid rgba(255, 150, 200, 0.25); border-top-color: #ff5fb0; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- viewers (top-left) / balance (bottom-left) / slot queue bubble ---------- */
.cp #viewers-pill { top: 12px; left: 12px; padding: 6px 12px; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; user-select: none; }
.cp #btn-mute { position: absolute; top: 50px; left: 12px; width: 36px; height: 36px; padding: 0; border: 2px solid #ffc3df; border-radius: 50%; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px rgba(255, 120, 180, 0.25); font-size: 17px; line-height: 32px; text-align: center; cursor: pointer; z-index: 5; }
.cp #btn-mute:hover { background: #fff; border-color: #ff9fd0; }
.cp #btn-mute.muted { opacity: 0.7; }
.cp #btn-quality { position: absolute; top: 50px; left: 56px; height: 36px; padding: 0 12px; border: 2px solid #ffc3df; border-radius: 999px; background: rgba(255, 255, 255, 0.92); box-shadow: 0 4px 14px rgba(255, 120, 180, 0.25); font-size: 12px; font-weight: 800; color: var(--text); line-height: 32px; cursor: pointer; z-index: 5; white-space: nowrap; }
.cp #btn-quality:hover { background: #fff; border-color: #ff9fd0; }
.cp #btn-quality.low { color: var(--muted); background: rgba(240, 232, 240, 0.92); }
.cp #viewers-pill .k { color: var(--muted); }
.cp #viewers-pill b { color: var(--text); font-variant-numeric: tabular-nums; font-size: 15px; }
.cp #viewers-pill .dot { margin-left: 0; }
/* --bal-scale (set by main.js) shrinks the whole pill when the name / balance would make it too wide */
.cp #balance { --bal-scale: 1; left: 12px; bottom: 12px; padding: 8px 14px; display: flex; align-items: center; gap: calc(10px * var(--bal-scale)); font-size: calc(13px * var(--bal-scale)); user-select: none; white-space: nowrap; }
.cp #balance .who { font-weight: 800; color: #ff2f9e; max-width: 16em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp #balance .k { color: var(--muted); font-weight: 700; }
.cp #balance .k:empty { display: none; }
.cp #balance b { font-size: calc(20px * var(--bal-scale)); color: var(--gold); font-variant-numeric: tabular-nums; }
.cp #balance b .unit { font-size: 0.6em; font-weight: 800; color: var(--muted); margin-left: 0.3em; letter-spacing: 0.05em; }
.cp #slotqueue {
  position: absolute; transform: translate(-25%, -115%); pointer-events: none; z-index: 5;
  background: #fff; color: #ff2f9e; border: 2px solid #ff5fb0; border-radius: 14px; padding: 2px 10px;
  font-size: 14px; font-weight: 900; white-space: nowrap; box-shadow: 0 4px 12px rgba(255, 100, 180, 0.35); animation: rlfade 0.25s ease-out;
}
.cp #slotqueue b { font-size: 20px; margin-left: 2px; }
.cp #slotqueue::after { content: ''; position: absolute; left: 14px; bottom: -8px; border: 6px solid transparent; border-top-color: #ff5fb0; border-bottom: 0; }

/* ---------- rare coin reveal ---------- */
.cp #rarecoin { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 8; pointer-events: none; text-align: center; animation: rcfade 0.3s ease-out; }
.cp #rarecoin .rc-coin {
  width: clamp(120px, 22cqw, 220px); height: clamp(120px, 22cqw, 220px); margin: 0 auto 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd6ee, #ff8fd0 55%, #e0479f 100%); border: 6px solid #fff;
  box-shadow: 0 0 40px rgba(255, 120, 200, 0.9), 0 0 120px rgba(255, 200, 240, 0.8);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: clamp(60px, 11cqw, 120px);
  animation: rcflip 1.1s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
.cp #rarecoin .rc-title { font-size: clamp(22px, 4.5cqw, 44px); font-weight: 900; color: #ff2f9e; letter-spacing: 0.08em; text-shadow: 0 2px 0 #fff, 0 0 18px rgba(255, 120, 200, 0.8); opacity: 0; }
.cp #rarecoin.open .rc-title { animation: rcpop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.cp #rarecoin .rc-effect { margin-top: 6px; display: inline-block; padding: 8px 22px; border-radius: 999px; background: #fff; border: 3px solid #ff8fc8; color: #c2185b; font-size: clamp(18px, 3.6cqw, 34px); font-weight: 900; box-shadow: 0 10px 30px rgba(255, 100, 180, 0.4); opacity: 0; }
.cp #rarecoin.open .rc-effect { animation: rcpop 0.4s 0.25s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.cp #rarecoin .rc-effect small { display: block; font-size: 0.55em; color: #a55; font-weight: 700; }
@keyframes rcflip { 0% { transform: rotateY(0) scale(0.4); opacity: 0; } 20% { opacity: 1; transform: rotateY(360deg) scale(1); } 60% { transform: rotateY(1080deg) scale(1); filter: brightness(1); } 75% { transform: rotateY(1080deg) scale(1.35); filter: brightness(1.8); } 100% { transform: rotateY(1080deg) scale(1.1); filter: brightness(1.05); } }
@keyframes rcpop { 0% { transform: scale(0.3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes rcfade { from { opacity: 0; } to { opacity: 1; } }
/* slot reach: the window frame blinks */
.cp #banner.reach { background: linear-gradient(180deg, #fff, #ff3b5c 50%, #ff6ad5 100%); -webkit-background-clip: text; background-clip: text; }


.cp #rarecoin .rc-coin.blue { background: radial-gradient(circle at 35% 30%, #d6efff, #5fb8ff 55%, #1d5fb0 100%); box-shadow: 0 0 40px rgba(95, 184, 255, 0.9), 0 0 120px rgba(160, 210, 255, 0.8); }
.cp #rarecoin .rc-coin.rainbow { background: conic-gradient(#ff5f5f, #ffd45a, #5fff8f, #5fb0ff, #d45fff, #ff5f5f); box-shadow: 0 0 50px rgba(255, 255, 255, 0.95), 0 0 140px rgba(255, 200, 255, 0.9); }

/* ---------- blackout ---------- */
.cp #blackout { position: absolute; inset: 0; background: #000; z-index: 9; pointer-events: none; opacity: 0; }
.cp #blackout.on { opacity: 1; transition: opacity 0.08s; }
.cp #blackout.off { opacity: 0; transition: opacity 0.6s; }

/* ---------- small screens (smartphones) ----------
   the container is the game box itself, so this also applies when the game is embedded in a narrow page.
   layout: top row = viewers (left) + balance (right); one full-width control bar at the bottom with the idle
   countdown and the toasts stacked above it (the bar height is published by main.js as --cp-ctl-h) */
@container (max-width: 640px) {
  .cp #viewers-pill { top: 8px; left: 8px; padding: 5px 10px; font-size: 12px; gap: 5px; }
  .cp #btn-mute { top: 42px; left: 8px; width: 32px; height: 32px; line-height: 32px; font-size: 15px; }
  .cp #btn-quality { top: 42px; left: 46px; height: 32px; line-height: 28px; padding: 0 10px; font-size: 11px; }
  .cp #viewers-pill b { font-size: 14px; }
  .cp #balance { left: auto; right: 8px; top: 8px; bottom: auto; padding: 5px 10px; font-size: calc(12px * var(--bal-scale)); gap: calc(6px * var(--bal-scale)); }
  .cp #balance .who { max-width: 12em; }
  .cp #balance b { font-size: calc(16px * var(--bal-scale)); }
  .cp button.primary.big .rate { font-size: 10px; bottom: -14px; }
  .cp #controls.has-rate { padding-bottom: 22px; }
  /* toasts sit above the idle pill at the bottom right, so the top stays free for the free-coin counter */
  .cp #log { top: auto; bottom: calc(var(--cp-ctl-h, 64px) + 44px); right: 8px; width: min(64cqw, 240px); gap: 4px; }
  .cp .cp-toast { font-size: 11px; padding: 6px 9px; }
  .cp #log .cp-toast:nth-child(n + 4) { display: none; }
  .cp #controls { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; padding: 8px 10px; border-radius: 16px; }
  .cp .ctl { gap: 8px; }
  .cp .hint { display: none; }
  .cp #ctl-play { display: grid; grid-template-columns: 48px 1fr 48px auto; align-items: stretch; }
  .cp button { padding: 9px 12px; }
  .cp button.icon { width: 48px; height: 48px; font-size: 18px; }
  .cp button.primary.big { padding: 10px 8px; font-size: 16px; width: 100%; min-height: 48px; }
  .cp #btn-stop { padding: 6px 10px; font-size: 12px; }
  .cp .spectate-badge { font-size: 14px; }
  .cp #idle { right: 8px; bottom: calc(var(--cp-ctl-h, 64px) + 14px); font-size: 11px; padding: 3px 10px; }
  .cp #freecounter { top: 44px; min-width: 0; padding: 0 8px; }
  .cp #freecounter .fc-num { font-size: clamp(44px, 15cqw, 128px); }
  .cp #freecounter .fc-title { font-size: clamp(16px, 5.5cqw, 40px); letter-spacing: 0.2em; -webkit-text-stroke: 6px #fff; }
  .cp #freecounter .fc-source { font-size: 12px; }
  .cp #rlresult { min-width: 0; width: 92cqw; padding: 10px 12px 12px; }
  .cp #rlresult .chip { min-width: 60px; font-size: 20px; padding: 4px 8px; }
  .cp #cheats { top: 44px; left: 8px; width: 148px; padding: 6px 8px; gap: 4px; max-height: calc(100cqh - var(--cp-ctl-h, 64px) - 70px); overflow-y: auto; }
  .cp #cheats button { padding: 4px 8px; font-size: 11px; }
}
/* short boxes (phone landscape, or a small embed): tighter chrome so the table stays visible */
@container (max-height: 480px) {
  .cp #controls { bottom: 6px; padding: 6px 10px; }
  .cp button.primary.big { padding: 8px 16px; font-size: 14px; min-height: 40px; }
  .cp button.icon { width: 40px; height: 40px; font-size: 16px; }
  .cp #btn-stop { padding: 6px 10px; font-size: 12px; }
  .cp .hint { display: none; }
  .cp #cheats { max-height: calc(100cqh - 100px); overflow-y: auto; padding: 6px 8px; gap: 3px; }
  .cp #cheats button { padding: 3px 8px; font-size: 11px; }
  .cp #log .cp-toast:nth-child(n + 4) { display: none; }
}

/* ---------- chinchirorin (spmode "chinchiro") ---------- */
.cp.chin #controls, .cp.chin #freecounter, .cp.chin #slotqueue, .cp.chin #labels, .cp.chin #banner, .cp.chin #balance { display: none !important; }
.cp.chin #idle { bottom: 12px; right: 12px; z-index: 9; } /* (the idle countdown shows in the tatami room too: bottom right, the balance is bottom left) */
.cp .chin-bal { position: absolute; bottom: 12px; left: 12px; z-index: 2; padding: 6px 14px; border-radius: 999px; background: rgba(20, 10, 4, 0.72); border: 1px solid rgba(240, 190, 110, 0.6); color: #f6e2b8; font-size: 14px; }
.cp .chin-bal b { font-size: 20px; color: #ffd878; margin: 0 4px; font-variant-numeric: tabular-nums; }
/* narrow: the bets / the throw button sit above the balance (bottom left) and the idle countdown (bottom right).
   (.chin-ui in the selector: the plain .chin-bottom rule further down used to win and put them on top of each other) */
@container (max-width: 900px) { .cp .chin-ui .chin-bottom { margin-bottom: 60px; } }
@container (max-width: 640px) {
  .cp .chin-ui .chin-bottom { margin-bottom: 52px; gap: 8px; }
  .cp .chin-bal { bottom: 10px; left: 10px; padding: 4px 11px; font-size: 12px; }
  .cp .chin-bal b { font-size: 16px; }
  .cp.chin #idle { bottom: 10px; right: 10px; font-size: 11px; padding: 4px 10px; }
  .cp .chin-ui .chin-bets { gap: 6px; padding: 0 8px; }
  .cp .chin-ui .chin-bet { min-width: 62px; padding: 7px 8px; }
  .cp .chin-ui .chin-bet b { font-size: 15px; }
  .cp .chin-ui .chin-btn { padding: 10px 24px; font-size: 16px; }
  .cp .chin-ui .chin-msg { font-size: 13px; }
  .cp .chin-roles { min-height: 2.6em; }
  .cp.chin #log { top: 8px; bottom: auto; right: 8px; } /* (the toasts go to the free top right: at the bottom they covered the bets) */
}
.cp .chin-roles { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 3em; }
.cp .chin-drole, .cp .chin-prole { font-size: clamp(16px, 3cqw, 24px); font-weight: 800; color: #fff4dc; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9); }
.cp .chin-drole.good, .cp .chin-prole.good { color: #ffcf7a; }
.cp .chin-drole.bad, .cp .chin-prole.bad { color: #ff9a8a; }
.cp .chin-res { margin-top: 10px; text-align: center; color: #fff4dc; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9); font-size: clamp(14px, 2.4cqw, 18px); }
.cp .chin-res b { display: block; font-size: clamp(26px, 5.5cqw, 46px); font-weight: 900; }
.cp .chin-res.win b { color: #ffd84a; }
.cp .chin-res.lose b { color: #ff8a8a; }
.cp .chin-res small { display: block; margin-top: 4px; color: #ffb0b0; font-size: 14px; }
.cp .chin-res.pop { animation: chin-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
.cp .chin-bottom { margin-top: 10px; margin-bottom: 5%; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.cp .chin-msg { color: #f6e2b8; font-size: 15px; text-shadow: 0 2px 6px #000; text-align: center; padding: 0 12px; }
.cp .chin-bets { pointer-events: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; padding: 0 12px; }
.cp .chin-bet { min-width: 74px; padding: 8px 12px; border-radius: 12px; border: 2px solid #b98a3e; background: linear-gradient(#fff3d0, #eed08a); color: #3a2210; font-family: inherit; font-size: 13px; cursor: pointer; box-shadow: 0 3px 0 #7a4a1e; }
.cp .chin-bet b { font-size: 17px; margin-left: 3px; }
.cp .chin-bet:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 #7a4a1e; }
.cp .chin-bet:disabled { filter: grayscale(0.8) brightness(0.7); cursor: default; }
.cp .chin-bottom .chin-btn { margin-bottom: 0; }
.cp .chin-black { position: absolute; inset: 0; z-index: 8; background: #000; opacity: 0; transition: opacity 1.4s ease-in; pointer-events: none; display: flex; align-items: center; justify-content: center; color: #c8c0b0; font-size: clamp(18px, 3.4cqw, 28px); letter-spacing: 0.1em; }
.cp .chin-black.on { opacity: 1; }
/* the dark after a bust: the one who went broke waits for help, the others can help (see chinHelpUI) */
.cp .chin-helpmsg { position: absolute; left: 0; right: 0; bottom: 9%; z-index: 2; text-align: center; color: #d8d0c0; font-size: clamp(16px, 3.2cqw, 26px); letter-spacing: 0.12em; opacity: 0; transition: opacity 1s ease; }
.cp .chin-black.help-me .chin-helpmsg { opacity: 1; transition-delay: 1.6s; }
.cp .chin-helpbtn { position: absolute; left: 50%; bottom: 8%; z-index: 2; transform: translateX(-50%); pointer-events: none; opacity: 0; transition: opacity 0.8s ease; padding: 14px 34px; font-family: inherit; font-size: clamp(17px, 3cqw, 24px); font-weight: 800; letter-spacing: 0.08em; color: #3a2210; background: linear-gradient(#ffe9b8, #f0bf6a); border: 3px solid #7a4a1e; border-radius: 14px; box-shadow: 0 5px 0 #7a4a1e, 0 0 30px rgba(255, 200, 120, 0.35); cursor: pointer; }
.cp .chin-black.help-them .chin-helpbtn { pointer-events: auto; opacity: 1; transition-delay: 1.6s; }
.cp .chin-helpbtn:active:not(:disabled) { transform: translateX(-50%) translateY(4px); box-shadow: 0 1px 0 #7a4a1e; }
.cp .chin-helpbtn:disabled { filter: grayscale(0.6) brightness(0.8); cursor: default; }
/* "ノーカン！ノーカン！": the others' 2-second chance when the dealer threw 四五六賽 (a bar runs out under it) */
.cp .chin-nocount { position: absolute; left: 50%; top: 40%; z-index: 9; display: none; pointer-events: auto; padding: 16px 30px 20px; font-family: inherit; font-size: clamp(22px, 4.6cqw, 38px); font-weight: 900; letter-spacing: 0.06em; color: #fff; text-shadow: 0 2px 0 #6a0a04; background: linear-gradient(#ff5a44, #b3160c); border: 3px solid #fff0c0; border-radius: 16px; box-shadow: 0 6px 0 #6a0a04, 0 0 34px rgba(255, 80, 40, 0.7); cursor: pointer; transform: translate(-50%, -50%); }
.cp .chin-nocount.on { display: block; animation: chin-nocount-shake 0.14s linear infinite; }
.cp .chin-nocount::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 7px; height: 4px; border-radius: 2px; background: #fff0c0; transform-origin: left center; }
.cp .chin-nocount.on::after { animation: chin-nocount-timer var(--ms, 2000ms) linear forwards; }
@keyframes chin-nocount-shake { 0%, 100% { transform: translate(-50%, -50%) rotate(-2deg); } 50% { transform: translate(-50%, -50%) rotate(2deg) scale(1.04); } }
@keyframes chin-nocount-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* the T-bone steak in the dark (now and then, see chinbust; painted by steak.js): a sizzling iron plate seen from low
   down - the top-down painting laid back in 3D - with the oil spitting up off it (a flat layer in front) and steam
   rising, in a warm pool of light; it fades in once the screen is black */
.cp .chin-steak { position: relative; width: min(96%, 112vh, 820px); aspect-ratio: 4 / 3; opacity: 0; transform: scale(0.9) translateY(12px); transition: opacity 1.4s ease 1.3s, transform 3s ease-out 1.3s; }
.cp .chin-steak::before { content: ''; position: absolute; inset: -10% -14%; background: radial-gradient(ellipse 50% 42% at 50% 58%, rgba(255, 170, 90, 0.22), rgba(255, 140, 60, 0.06) 55%, transparent 72%); pointer-events: none; }
.cp .chin-steak .stk-plate { position: absolute; left: 2%; top: -10%; width: 96%; aspect-ratio: 1; transform: perspective(1600px) rotateX(54deg); transform-origin: 50% 50%; }
.cp .chin-steak .stk-fx { position: absolute; inset: 0; width: 100%; height: 100%; animation: stk-sizzle 0.9s steps(3) infinite; }
.cp .chin-steak .stk-steam { position: absolute; left: 18%; top: -4%; width: 64%; height: auto; overflow: visible; pointer-events: none; }
.cp .chin-black.steak .chin-steak { opacity: 1; transform: none; }
.cp .chin-black:not(.steak) .chin-steak { transition: none; }
.cp .chin-steak .stk-steam path { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: stk-steam 3.4s ease-in-out infinite; }
.cp .chin-steak .stk-steam path:nth-child(2) { animation-delay: 0.9s; animation-duration: 4s; }
.cp .chin-steak .stk-steam path:nth-child(3) { animation-delay: 1.7s; }
.cp .chin-steak .stk-steam path:nth-child(4) { animation-delay: 2.4s; animation-duration: 3s; }
.cp .chin-steak .stk-steam path:nth-child(5) { animation-delay: 0.4s; animation-duration: 3.7s; }
.cp .chin-steak .stk-steam path:nth-child(6) { animation-delay: 1.3s; animation-duration: 3.2s; }
.cp .chin-steak .stk-steam path:nth-child(7) { animation-delay: 2.9s; animation-duration: 3.6s; }
@keyframes stk-steam { 0% { opacity: 0; transform: translateY(30px) scaleX(0.8); } 35% { opacity: 0.4; } 70% { opacity: 0.2; } 100% { opacity: 0; transform: translateY(-46px) scaleX(1.35); } }
@keyframes stk-sizzle { 0% { opacity: 1; transform: none; } 50% { opacity: 0.7; transform: translateY(-3px); } 100% { opacity: 1; transform: none; } } /* (the spits flicker as they pop) */

.cp .chin-ui { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: none; flex-direction: column; align-items: center; font-family: "Yu Mincho", "Hiragino Mincho ProN", serif; }
.cp .chin-ui.on { display: flex; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 35%, rgba(8,4,2,0.55) 75%, rgba(4,2,1,0.85) 100%); } /* a dark vignette: the lantern's pool of light in a dim room */
.cp .chin-role { margin-top: auto; margin-bottom: 8px; min-height: 1.4em; font-size: clamp(20px, 4cqw, 34px); font-weight: 900; color: #fff4dc; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8); }
.cp .chin-role.pin { color: #ffd84a; font-size: clamp(34px, 8cqw, 72px); text-shadow: 0 0 24px #ff9a2a, 0 3px 0 #7a3a00; }
.cp .chin-role.good, .cp .chin-role.zoro { color: #ffcf7a; }
.cp .chin-role.bad { color: #ff8a8a; }
.cp .chin-role.none { color: #bdb3a0; }
.cp .chin-role.pop { animation: chin-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes chin-pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.cp .chin-count { color: #d9c6a0; font-size: 14px; margin-bottom: 10px; }
.cp .chin-btn { pointer-events: auto; margin-bottom: 7%; padding: 14px 34px; font-size: clamp(16px, 2.6cqw, 22px); font-weight: 800; font-family: inherit; color: #3a2210; background: linear-gradient(#ffe9b8, #f0bf6a); border: 3px solid #7a4a1e; border-radius: 14px; box-shadow: 0 5px 0 #7a4a1e, 0 8px 20px rgba(0, 0, 0, 0.5); cursor: pointer; }
.cp .chin-btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 #7a4a1e; }
.cp .chin-btn:disabled { filter: grayscale(0.6) brightness(0.8); cursor: default; }
.cp .chin-wait { color: #f6e2b8; font-size: 15px; margin-bottom: 7%; text-shadow: 0 2px 6px #000; }
.cp .chin-flash { position: absolute; inset: 0; z-index: 20; background: #000; opacity: 1; pointer-events: none; transition: opacity 1s ease-in 0.3s; }
.cp .chin-flash.go { opacity: 0; }

/* ---------- the acorn-mode sum check (see main.js quizUI): a card in the middle over a dimmed game ---------- */
.cp .quiz { position: absolute; inset: 0; z-index: 35; display: none; align-items: center; justify-content: center; background: rgba(40, 18, 40, 0.45); backdrop-filter: blur(2px); pointer-events: auto; }
.cp .quiz.on { display: flex; }
.cp .quiz-card { width: min(88%, 380px); box-sizing: border-box; padding: 18px 18px 14px; border-radius: 20px; background: linear-gradient(180deg, #ffffff, #fff2f8); border: 2px solid #ffc2dc; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); text-align: center; color: #5a3a50; }
.cp .quiz.shake .quiz-card { animation: quiz-shake 0.4s ease; }
.cp .quiz-title { font-size: 18px; font-weight: 900; letter-spacing: 0.04em; }
.cp .quiz-sub { margin-top: 2px; font-size: 12px; color: #9a7a90; }
.cp .quiz-q { margin: 12px 0 10px; font-size: clamp(34px, 9cqw, 48px); font-weight: 900; color: #d4458a; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.cp .quiz-form { display: flex; gap: 8px; }
.cp .quiz-in { flex: 1; min-width: 0; box-sizing: border-box; padding: 8px 10px; font-size: 26px; font-weight: 800; text-align: center; color: #5a3a50; border: 2px solid #ffc2dc; border-radius: 12px; outline: none; background: #fff; }
.cp .quiz-in:focus { border-color: #ff7ab8; box-shadow: 0 0 0 3px rgba(255, 122, 184, 0.25); }
.cp .quiz-go { padding: 8px 16px; font-size: 16px; font-weight: 900; color: #fff; border: 0; border-radius: 12px; background: linear-gradient(180deg, #ff8cc2, #ff4f9a); box-shadow: 0 3px 0 #c8327a; cursor: pointer; }
.cp .quiz-go:disabled, .cp .quiz-in:disabled { opacity: 0.6; }
.cp .quiz-bar { margin-top: 12px; height: 8px; border-radius: 4px; background: #ffe0ee; overflow: hidden; }
.cp .quiz-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff7ab8, #ff4f9a); transform-origin: left center; animation: quiz-time var(--ms, 10000ms) linear forwards; }
.cp .quiz-note { min-height: 1.4em; margin-top: 8px; font-size: 14px; font-weight: 800; }
.cp .quiz-note.good { color: #2aa870; }
.cp .quiz-note.bad { color: #e0457a; }
.cp .quiz-left { font-size: 12px; color: #9a7a90; }
@keyframes quiz-time { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes quiz-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } }