:root { color-scheme: dark; --bg:#101225; --panel:#191c38; --panel2:#22254a; --gold:#ffd777; --fg:#f6f4ff; --sub:#bfc3dc; --border:#3d4271; --green:#a8f0bf; font-family:system-ui,-apple-system,"Noto Sans TC",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; color:var(--fg); background:radial-gradient(ellipse at 50% 0,#34346b 0,#16172e 38%,#0e1123 100%); min-height:100vh; }
button { font:inherit; cursor:pointer; touch-action:manipulation; }
button:disabled { opacity:.48; cursor:not-allowed; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
[hidden] { display:none!important; }
.app { max-width:790px; margin:0 auto; padding:20px 16px calc(32px + env(safe-area-inset-bottom)); }
.heading { margin-bottom:16px; }
.back-link { display:inline-flex; color:#e5ceff; text-decoration:none; padding:10px 0; font-weight:650; }
.back-link:hover { text-decoration:underline; }
.heading-main { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.eyebrow { margin:0 0 4px; font-size:.77rem; color:var(--gold); letter-spacing:.19em; font-weight:900; }
h1 { font-size:clamp(1.55rem,4vw,2.15rem); line-height:1.2; margin:0; }
.tagline { margin:7px 0 0; color:var(--sub); font-size:.92rem; }
.ghost-button { border:1px solid #777ba9; background:#282b4d; color:var(--fg); border-radius:13px; padding:11px 13px; font-weight:700; min-height:44px; }
.ghost-button:hover:not(:disabled) { background:#383b63; }
.machine { border-radius:25px; border:5px solid #9766c1; background:linear-gradient(160deg,#50266e,#30245a 60%,#292547); box-shadow:0 20px 50px #0007, inset 0 0 0 4px #d19bff44; padding:14px; }
.machine-top { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:13px; }
.counter { background:linear-gradient(#ffedab,#ffc552); border-radius:13px; padding:10px 5px; text-align:center; box-shadow:inset 0 -3px #b27a36,0 3px 10px #0004; color:#342512; min-width:0; }
.counter span { display:block; font-size:.79rem; font-weight:700; white-space:nowrap; }
.counter strong { display:block; font-size:clamp(1.05rem,3.6vw,1.6rem); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.slot-face { padding:12px; border-radius:17px; background:#12172d; border:3px solid #6d70a8; box-shadow:inset 0 0 20px #000a; }
.reels-hint { margin:0 0 10px; color:#d4d4ed; font-size:.8rem; text-align:center; }
.reels { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.reel { display:grid; grid-template-rows:repeat(3,1fr); background:linear-gradient(100deg,#e7e8fa,#fff,#dadbef); border-radius:11px; overflow:hidden; box-shadow:inset 1px 0 5px #0005; min-width:0; }
.reel-cell { display:flex; align-items:center; justify-content:center; min-height:79px; border-bottom:1px solid #b8bedc; font-size:clamp(1.8rem,5vw,3.5rem); line-height:1; text-shadow:0 3px 5px #0002; position:relative; }
.reel-cell:last-child { border-bottom:0; }
.reel-cell.winner { background:#fff2b9; box-shadow:inset 0 0 0 3px #e0a02c; animation:winning .5s ease-in-out 2; }
.reel.spinning .reel-cell { filter:blur(1px); }
@keyframes winning { 50% { background:#f9da60; } }
.panel { margin-top:13px; padding:13px; border-radius:16px; background:#171831b8; border:1px solid #b7a9dc5c; }
.panel-label { font-weight:780; margin-bottom:10px; }
.note { margin-left:7px; color:var(--sub); font-size:.78rem; font-weight:500; }
.bet-choices { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; }
.bet-chip { border:1px solid #8f7d4e; background:#35314b; color:#ffdf9f; font-weight:800; border-radius:12px; padding:10px 3px; min-height:48px; font-variant-numeric:tabular-nums; }
.bet-chip[aria-pressed="true"] { background:linear-gradient(#ffdf8b,#e69c39); color:#342410; border-color:#fff2be; box-shadow:0 0 0 2px #fff1a644; }
.action-bar { display:grid; grid-template-columns:1fr 1.6fr; gap:10px; margin-top:13px; }
.auto-button { min-height:58px; border:2px solid #787fb3; background:#282e56; color:#e8ecff; border-radius:15px; font-weight:750; }
.auto-button[aria-pressed="true"] { border-color:var(--green); color:var(--green); background:#214739; }
.spin-button { border:0; border-radius:15px; background:linear-gradient(#c7fbd2,#66df90); color:#11442a; min-height:58px; font-weight:950; font-size:1.18rem; box-shadow:inset 0 -4px #339a63,0 3px 14px #0006; }
.spin-button:hover:not(:disabled) { filter:brightness(1.06); }
.status { margin:12px 2px 0; min-height:2.8em; color:#f4e1b3; font-size:.92rem; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:15px; }
.info-card { background:#1a1e39; border:1px solid var(--border); border-radius:16px; padding:17px; min-width:0; }
.info-card h2 { font-size:1.08rem; margin:0 0 12px; }
.metric-row { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #ffffff18; padding:9px 0; gap:12px; }
.metric-row strong { color:var(--gold); font-variant-numeric:tabular-nums; }
.muted { color:var(--sub); font-size:.83rem; }
.result-list { margin:0; padding-left:22px; line-height:1.9; font-size:.87rem; }
.history-card, .rules { margin-top:13px; }
.rules summary { cursor:pointer; font-weight:850; font-size:1.05rem; padding:2px 0; }
.rules p { color:var(--sub); line-height:1.7; font-size:.91rem; }
.table-scroll { overflow-x:auto; }
.rules table { width:100%; border-collapse:collapse; text-align:center; font-size:.89rem; }
.rules th,.rules td { padding:9px 5px; border-bottom:1px solid #424a76; }
.rules th { color:var(--gold); }
.rules caption { caption-side:bottom; text-align:left; color:var(--sub); padding:8px 2px; }
footer { text-align:center; color:var(--sub); padding:20px 3px 0; font-size:.82rem; }
.bonus-dialog { width:min(calc(100% - 24px),500px); max-height:calc(100vh - 24px); overflow:auto; border:2px solid #f6c66a; background:#20213c; color:#fff; border-radius:20px; padding:23px; text-align:center; box-shadow:0 20px 70px #000c; }
.bonus-dialog::backdrop { background:#000c; }
.bonus-dialog h2 { font-size:1.42rem; margin:0 0 10px; }
.bonus-dialog p { line-height:1.5; }
.bonus-choices { display:flex; justify-content:center; gap:15px; margin:18px auto; }
.bonus-choices button { min-width:70px; min-height:72px; border:2px solid #ffd184; border-radius:16px; background:#712c3f; color:#fff; font-size:2.5rem; }
.bonus-choices button:not(:disabled):hover { background:#a44250; transform:translateY(-2px); }
.bonus-result { color:var(--gold); min-height:2em; font-weight:800; }
.bonus-actions { display:flex; justify-content:center; }
.bonus-actions button { padding-inline:19px; }
@media (max-width:570px) {
  .app { padding:12px 9px 28px; }
  .machine { padding:8px; border-width:4px; border-radius:20px; }
  .counter { padding:9px 2px; }
  .counter span { font-size:.67rem; }
  .slot-face { padding:6px; border-width:2px; }
  .reels { gap:4px; }
  .reel { border-radius:7px; }
  .reel-cell { min-height:clamp(53px,15vw,75px); font-size:clamp(1.45rem,7.3vw,2.35rem); }
  .panel { padding:10px; }
  .bet-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .note { display:block; margin:4px 0 0; }
  .info-grid { grid-template-columns:1fr; }
  .heading-main { align-items:flex-start; }
  .ghost-button { font-size:.85rem; }
  .status { min-height:3em; }
}
@media (max-width:360px) {
  .reels-hint { font-size:.7rem; }
  .reel-cell { min-height:47px; font-size:1.38rem; }
  .action-bar { grid-template-columns:1fr; }
  .auto-button { min-height:47px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Reviewer fixes: persistent storage banner, individual paylines, auto mode. */
.storage-alert { background:#5a262e; border:2px solid #ffbca1; border-radius:12px; padding:12px; color:#fff1df; display:flex; gap:12px; align-items:center; justify-content:space-between; font-weight:750; margin-top:12px; }
.storage-alert .ghost-button { background:#fff0d7; color:#3d1a24; border-color:#fff0d7; white-space:nowrap; }
.auto-hint { color:#c0f1d0; font-size:.83rem; margin:12px 2px 0; min-height:1.3em; }
.line-choice { color:var(--fg); border:1px solid #515a85; border-radius:9px; background:#293052; text-align:left; padding:9px; width:100%; min-height:44px; }
.line-choice[aria-pressed="true"] { background:#7c5423; color:#fff2cf; border-color:#f9ca69; }
.line-choice:hover:not(:disabled) { border-color:#ffdf9f; }
.line-all { margin:0 0 10px; }
@media(max-width:400px) { .storage-alert { flex-direction:column; align-items:stretch; } .storage-alert .ghost-button { width:100%; } }