#panel:has(.pachinko-game) {width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 16px; border: 0; border-radius: 0; color: #f7e9cf; background: radial-gradient(ellipse at 40% 35%, #29464b, #0b171e 72%); overflow: auto; box-sizing: border-box;}
#panel:has(.pachinko-game)::backdrop {background: #0b171e;}
#panel:has(.pachinko-game) :is(#panel-title, #panel-subtitle) {display: none;}
#panel:has(.pachinko-game) #panel-close {color: #ffe8bc; z-index: 2;}
#panel:has(.pachinko-game) #panel-body {height: 100%; margin: 0; max-width: none;}
.pachinko-game {height: 100%; max-width: 1080px; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 36px; align-items: center;}
.pachinko-stage {height: 100%; min-height: 0; display: flex; justify-content: center; align-items: center;}
.pachinko-canvas {display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 520 / 760; filter: drop-shadow(0 18px 28px #0009);}
.pachinko-side {padding: 24px 0;}
.pachinko-kicker {color: #c8ac72; letter-spacing: .2em; font-size: 11px;}
.pachinko-side h3 {font-size: 36px; margin: 12px 0; color: #fff0d2; font-family: Georgia, serif;}
.pachinko-fee {color: #a6dbce; font-size: 13px; line-height: 1.6;}
.pachinko-hud {display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0;}
.pachinko-hud > div {background: #06111688; border: 1px solid #bda36c44; border-radius: 10px; padding: 12px;}
.pachinko-hud > div:first-child {grid-column: 1 / -1;}
.pachinko-hud span {display: block; color: #adbdbe; font-size: 11px;}
.pachinko-hud strong {font: 24px monospace; color: #ffe2a2;}
.pachinko-power {display: grid; grid-template-columns: 1fr auto; gap: 8px; font-size: 13px;}
.pachinko-power input {grid-row: 2; grid-column: 1 / -1; width: 100%; min-height: 34px; accent-color: #e4bf70;}
.pachinko-power output {grid-row: 1; grid-column: 2; color: #ffe2a2;}
.pachinko-actions {display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px;}
.pachinko-game button {min-height: 46px; border-radius: 9px; background: #203c43; border: 1px solid #9db5ac66; color: #ecede1; font-size: 13px; cursor: pointer; touch-action: manipulation;}
.pachinko-game .pachinko-launch {grid-column: 1 / -1; background: linear-gradient(#f9dfa0, #ba8f48); color: #2c2115; font-size: 16px; font-weight: bold; touch-action: none; user-select: none;}
.pachinko-game button[aria-pressed=true] {background: #397769; border-color: #adebd7;}
.pachinko-game button:disabled {opacity: .5;}
.pachinko-game :focus-visible {outline: 3px solid #ffe2a2; outline-offset: 3px;}
.pachinko-status {color: #ffe2a2; min-height: 36px; font-size: 13px; margin: 12px 0;}
.pachinko-help {color: #b6c9ca; font-size: 12px; line-height: 1.65;}
.pachinko-help summary {cursor: pointer;}
@media (max-width: 700px) {
    #panel:has(.pachinko-game) {padding: 8px 10px max(10px, env(safe-area-inset-bottom));}
    .pachinko-game {height: auto; min-height: 100%; grid-template-columns: 1fr; gap: 8px; align-content: start;}
    .pachinko-stage {height: min(57dvh, 640px); padding-top: 16px; box-sizing: border-box;}
    .pachinko-side {padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;}
    .pachinko-kicker {display: none;}
    .pachinko-side h3 {font-size: 22px; margin: 0;}
    .pachinko-fee {font-size: 10px; margin: 0; text-align: right;}
    .pachinko-hud {grid-column: 1 / -1; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin: 0;}
    .pachinko-hud > div:first-child {grid-column: auto;}
    .pachinko-hud > div {padding: 5px 8px;}
    .pachinko-hud strong {font-size: 19px;}
    .pachinko-power {grid-column: 1 / -1; gap: 0; font-size: 11px;}
    .pachinko-power input {min-height: 24px; margin: 0;}
    .pachinko-actions {grid-column: 1 / -1; grid-template-columns: 1.2fr 1fr .7fr; margin: 0; gap: 6px;}
    .pachinko-game .pachinko-launch {grid-column: auto; font-size: 13px;}
    .pachinko-status {grid-column: 1 / -1; margin: 0; min-height: 18px; font-size: 11px;}
    .pachinko-help {grid-column: 1 / -1;}
}

.pachinko-balance {color: #ffe2a2; font-size: 14px; margin: 8px 0;}
.pachinko-game[data-win] .pachinko-status {color: #fff0a3; font-weight: bold; text-shadow: 0 0 12px #eaa53888;}
.pachinko-game[data-win=jackpot] .pachinko-canvas {filter: drop-shadow(0 0 22px #eab64b88);}
@media (max-width: 700px) {.pachinko-balance {grid-column: 1 / -1; font-size: 12px; margin: 0;}}