body { font-family: 'Quicksand', sans-serif; }

[hidden] { display: none !important; }
#beta-report-trigger { display: none !important; }   /* reporting lives in the Options menu */

.sr-page { --a: #f97316; --a2: #fb923c; --bg: #1b0f08; --panel: #2a1a0f; --line: rgba(255, 255, 255, .12); --tx: #fff3e6; --mut: #d9b99a; --good: #22c55e; --bad: #ef4444;
  font-family: 'Quicksand', sans-serif; color: var(--tx); padding: 10px 10px calc(14px + env(safe-area-inset-bottom)); box-sizing: border-box; }
.sr-page *, .sr-page *::before, .sr-page *::after { box-sizing: border-box; }
.sr-app { position: relative; max-width: 1000px; margin: 0 auto; padding: 10px; border-radius: 22px; overflow: hidden; min-height: min(560px, calc(100dvh - 90px));
  background: radial-gradient(120% 90% at 50% 0%, #3b2314 0%, var(--bg) 62%); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); }

/* ---- top bar ---- */
.sr-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 34px; }
.sr-modechip { font-weight: 800; letter-spacing: 2px; font-size: 12px; color: #1b0f08; background: var(--a); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.sr-best { font-weight: 700; font-size: 12px; letter-spacing: 1.5px; color: var(--mut); white-space: nowrap; }
.sr-best b { color: var(--tx); font-size: 15px; letter-spacing: 0; margin-left: 2px; }
.sr-topbtns { margin-left: auto; display: flex; gap: 6px; }
.sr-mini { font: inherit; font-weight: 800; font-size: 11px; letter-spacing: 1.5px; color: var(--tx); background: rgba(255, 255, 255, .08); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; white-space: nowrap; }
.sr-mini:hover { background: rgba(255, 255, 255, .14); }
.sr-mini:disabled { opacity: .45; cursor: default; }

/* ---- layout ---- */
.sr-main { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.sr-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #3a2216; border: 1px solid var(--line); margin: 0 auto; touch-action: manipulation; }
.sr-stage canvas { display: block; width: 100%; height: 100%; }
.sr-call { position: absolute; left: 0; right: 0; top: 8px; text-align: center; pointer-events: none; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.sr-call-name { font-weight: 800; font-size: clamp(18px, 4.6vw, 30px); letter-spacing: 1px; line-height: 1.1; }
.sr-call-pts { font-weight: 800; font-size: clamp(14px, 3.4vw, 20px); color: #fde047; min-height: 1.2em; }
.sr-call.bust .sr-call-name { color: #fca5a5; }
.sr-call.jack .sr-call-name { color: #fde047; }
.sr-call.pop .sr-call-name { animation: srPop .35s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes srPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.sr-side { display: grid; gap: 8px; }
.sr-board { display: flex; gap: 6px; flex-wrap: wrap; }
.sr-pl { flex: 1 1 0; min-width: 96px; padding: 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 2px solid transparent; text-align: center; transition: border-color .2s, background .2s; }
.sr-pl.on { border-color: var(--a); background: rgba(249, 115, 22, .16); box-shadow: 0 0 18px -6px var(--a); }
.sr-pl-n { font-weight: 800; font-size: 12px; letter-spacing: 1.2px; color: var(--mut); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-pl-s { font-weight: 800; font-size: clamp(26px, 6vw, 36px); line-height: 1.05; font-variant-numeric: tabular-nums; }
.sr-pl-t { font-weight: 700; font-size: 11px; color: var(--mut); letter-spacing: 1px; }
.sr-pl .sr-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); margin-top: 5px; overflow: hidden; }
.sr-pl .sr-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--a), #fde047); width: 0; transition: width .4s; }

.sr-turnbox { text-align: center; padding: 6px 8px 4px; border-radius: 14px; background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.sr-turnlabel { font-weight: 800; font-size: 11px; letter-spacing: 2px; color: var(--mut); }
.sr-turnpts { font-weight: 800; font-size: clamp(34px, 8vw, 52px); line-height: 1; font-variant-numeric: tabular-nums; color: #fde047; }
.sr-turnpts.bump { animation: srBump .3s ease-out; }
@keyframes srBump { 40% { transform: scale(1.18); } }
.sr-ifbank { font-weight: 700; font-size: 12px; color: var(--mut); min-height: 1.4em; }

.sr-ctrl { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.sr-btn { font: inherit; font-weight: 800; letter-spacing: 2px; font-size: 16px; color: #1b0f08; border: 0; border-radius: 16px; padding: 16px 10px; min-height: 58px; cursor: pointer; transition: transform .1s, filter .2s; }
.sr-btn:active:not(:disabled) { transform: scale(.97); }
.sr-btn:disabled { opacity: .38; cursor: default; filter: grayscale(.4); }
.sr-roll { background: linear-gradient(180deg, #fdba74, var(--a)); box-shadow: 0 8px 22px -8px var(--a); }
.sr-bank { background: linear-gradient(180deg, #86efac, var(--good)); box-shadow: 0 8px 22px -8px var(--good); }
.sr-hint { text-align: center; font-weight: 600; font-size: 12px; color: var(--mut); min-height: 1.3em; }

/* ---- overlays ---- */
.sr-ov { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 12px; background: #170c06; }
.sr-ov > * { flex-shrink: 0; }
.sr-ov > :first-child { margin-top: auto; }
.sr-ov > :last-child { margin-bottom: auto; }
.sr-ov.clear { background: rgba(15, 8, 4, .86); }
.sr-card { width: 100%; max-width: 440px; text-align: center; }
.sr-h1 { font-weight: 800; font-size: clamp(30px, 8vw, 44px); letter-spacing: 1px; line-height: 1; margin: 0; color: var(--a2); text-shadow: 0 0 26px rgba(249, 115, 22, .45); }
.sr-sub { font-weight: 600; font-size: 13px; color: var(--mut); margin: 6px 0 12px; }
.sr-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 8px; }
.sr-mode { font: inherit; font-weight: 800; font-size: 12px; letter-spacing: 1.2px; color: var(--mut); background: transparent; border: 1px solid var(--line); border-radius: 12px; padding: 10px 4px; cursor: pointer; line-height: 1.15; }
.sr-mode small { display: block; font-weight: 600; letter-spacing: 0; font-size: 10px; opacity: .8; margin-top: 2px; }
.sr-mode[aria-checked="true"] { color: #1b0f08; background: var(--a); border-color: transparent; }
.sr-mdesc { font-weight: 600; font-size: 13px; color: var(--tx); min-height: 2.6em; margin: 4px 2px; }
.sr-mbest { font-weight: 700; font-size: 12px; color: #fde047; min-height: 1.3em; letter-spacing: 1px; }
.sr-extra { text-align: left; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; margin: 8px 0; display: grid; gap: 8px; }
.sr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-weight: 700; font-size: 13px; }
.sr-row label { color: var(--tx); }
.sr-in { font: inherit; font-weight: 700; font-size: 14px; color: var(--tx); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; width: 150px; max-width: 55%; }
.sr-seg { display: flex; gap: 4px; }
.sr-seg button { font: inherit; font-weight: 800; font-size: 12px; color: var(--mut); background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px; cursor: pointer; }
.sr-seg button[aria-pressed="true"] { color: #1b0f08; background: var(--a); border-color: transparent; }
.sr-play { font: inherit; font-weight: 800; letter-spacing: 3px; font-size: 18px; color: #1b0f08; background: linear-gradient(180deg, #fdba74, var(--a)); border: 0; border-radius: 16px; padding: 15px 10px; width: 100%; margin-top: 8px; cursor: pointer; box-shadow: 0 8px 24px -8px var(--a); }
.sr-play.alt { background: rgba(255, 255, 255, .1); color: var(--tx); box-shadow: none; border: 1px solid var(--line); font-size: 14px; letter-spacing: 2px; padding: 12px 10px; }
.sr-opts-h { font-weight: 800; letter-spacing: 3px; font-size: 14px; color: var(--a2); margin: 0 0 6px; }
.sr-optrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); margin: 5px 0; font-weight: 700; font-size: 13px; text-align: left; }
.sr-optrow button.sr-mini { padding: 7px 12px; }
#trophy-list { width: 100%; max-width: 440px; max-height: 46vh; overflow-y: auto; text-align: left; margin: 4px 0 6px; flex-shrink: 0; }
.sr-win-n { font-weight: 800; font-size: clamp(22px, 6vw, 30px); color: #fde047; margin: 4px 0 2px; }
.sr-win-s { display: grid; gap: 4px; margin: 10px 0; }
.sr-win-s div { display: flex; justify-content: space-between; font-weight: 800; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .07); }
.sr-win-s div.w { background: rgba(253, 224, 71, .18); color: #fde047; }
.sr-big { font-size: 56px; line-height: 1; margin-bottom: 6px; }
.sr-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: #10b981; color: #fff; padding: 10px 20px; border-radius: 30px; z-index: 21000; font-weight: 800; font-size: 13px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); max-width: 90%; text-align: center; }

/* ---- sizes ---- */
@media (min-width: 880px) {
  .sr-main { grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
  .sr-app { padding: 14px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  .sr-app { min-height: calc(100dvh - 70px); padding: 8px; }
  .sr-main { grid-template-columns: minmax(0, 1fr) 210px; }
  .sr-stage { width: min(100%, calc((100dvh - 128px) * 1.6)); }
  .sr-btn { min-height: 48px; padding: 10px 6px; font-size: 15px; }
  .sr-turnpts { font-size: 32px; }
  .sr-hint { display: none; }
  .sr-pl-s { font-size: 24px; }
  .sr-top { margin-bottom: 4px; }
}
@media (max-width: 380px) {
  .sr-modes { grid-template-columns: repeat(2, 1fr); }
  .sr-modechip { font-size: 11px; padding: 5px 9px; }
  .sr-mini { padding: 7px 9px; }
  .sr-pl { min-width: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-call.pop .sr-call-name, .sr-turnpts.bump { animation: none; }
}

/* ---- big screens: use the room ---- */
@media (min-width: 880px) and (min-height: 541px) {
  .sr-page { padding-left: 24px; padding-right: 24px; }
  .sr-app { max-width: min(1500px, 100%); min-height: 0; padding: 20px; display: flex; flex-direction: column; }
  .sr-top { margin-bottom: 14px; min-height: 44px; }
  .sr-modechip { font-size: 14px; padding: 8px 16px; }
  .sr-best { font-size: 14px; } .sr-best b { font-size: 20px; }
  .sr-mini { font-size: 13px; padding: 11px 18px; }
  .sr-main { flex: 1; grid-template-columns: minmax(0, 2.2fr) minmax(340px, 1fr); gap: 20px; align-items: stretch; }
  .sr-stage { width: min(100%, calc((100dvh - 200px) * 1.6)); min-width: 560px; justify-self: start; align-self: start; }
  .sr-side { gap: 14px; align-content: start; }
  .sr-pl { padding: 14px 14px; min-width: 130px; }
  .sr-pl-n { font-size: 14px; } .sr-pl-s { font-size: clamp(38px, 3.4vw, 54px); } .sr-pl-t { font-size: 13px; }
  .sr-turnpts { font-size: clamp(52px, 5vw, 76px); }
  .sr-btn { min-height: 76px; font-size: 22px; }
  .sr-hint { font-size: 16px; }
  .sr-call-name { font-size: clamp(26px, 2.6vw, 44px); } .sr-call-pts { font-size: clamp(18px, 1.8vw, 28px); }
}