/* Android layout additions; the supplied game keeps its original visual style. */
:root { --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); }
html, body { overscroll-behavior: none; height: 100%; height: 100dvh; }
#safeAreaProbe { position: fixed; visibility: hidden; pointer-events: none; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
button, select, a { touch-action: manipulation; }
.screen, .modal { overscroll-behavior: contain; }
.menu-header { height: calc(81px + var(--safe-top)); padding-top: var(--safe-top); padding-left: max(22px, var(--safe-left)); padding-right: max(22px, var(--safe-right)); }
.menu-screen { top: calc(81px + var(--safe-top)); padding-bottom: var(--safe-bottom); }
.scoreboard { padding-top: calc(9px + var(--safe-top)); padding-left: max(12px, var(--safe-left)); padding-right: max(12px, var(--safe-right)); }
.pwa-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: -9px 0 25px; padding: 13px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .4px; }
.pwa-strip > span:first-child { display: flex; align-items: center; gap: 7px; color: var(--green); }
.pwa-strip > span:nth-child(2) { margin-left: auto; font-size: 9px; }
.status-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.install-button { border-color: #edc47765; color: var(--gold); white-space: nowrap; }
.mobile-guide { display: none; border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.mobile-guide strong { color: var(--gold); font-size: 9px; letter-spacing: 1.5px; }
#installDialog { width: min(520px, calc(100% - 28px)); max-height: calc(100dvh - 32px - var(--safe-top) - var(--safe-bottom)); padding: 0; border: 1px solid #57665a; border-radius: 16px; background: var(--panel); color: var(--text); overscroll-behavior: contain; }
#installDialog::backdrop { background: #061116d9; backdrop-filter: blur(6px); }
#installDialog .install-card { border: 0; width: 100%; max-width: none; padding: 32px 28px 24px; text-align: left; box-shadow: none; }
.install-card h2 { font-size: 31px; margin: 18px 0; letter-spacing: -.8px; }
.install-card p { line-height: 1.7; font-size: 13px; }
.install-card .install-note { color: var(--muted); font-size: 11px; line-height: 1.7; }
.install-card a { color: var(--gold); }
.close-install { float: right; min-width: 44px; min-height: 44px; margin: -18px -14px 8px 8px; }
.offline-panel { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 24px 0; padding: 22px 0 10px; }
.offline-panel > strong { color: var(--gold); font-size: 10px; letter-spacing: 1.8px; }
#audioProgress { width: 100%; height: 8px; margin-top: 15px; accent-color: var(--gold); }
#rotateHint { position: absolute; top: calc(102px + var(--safe-top)); left: 12px; right: 12px; text-align: center; font-size: 11px; color: var(--gold); pointer-events: none; z-index: 3; }
.touch-device .touch-controls { display: flex; }
.touch-device .match-controls, .touch-device .controls-guide { display: none; }
.touch-device .mobile-guide { display: block; }
.touch-device .touch-controls { bottom: calc(18px + var(--safe-bottom)); left: calc(16px + var(--safe-left)); right: calc(16px + var(--safe-right)); align-items: flex-end; }
.touch-device .move-pad { position: relative; width: 112px; height: 112px; border: 1px solid #b5e0c36b; border-radius: 50%; background: radial-gradient(circle, #3a5c5480, #132c2ee8); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.touch-device .dpad { display: block; width: 100%; height: 100%; position: relative; }
.touch-device .dpad button { position: absolute; min-width: 44px; min-height: 44px; width: 44px; height: 44px; border: 0; background: transparent; font-size: 16px; color: #d5dfcb88; padding: 0; border-radius: 50%; }
.touch-device .dpad .up { top: 0; left: 33px; }
.touch-device .dpad .down { bottom: 0; left: 33px; }
.touch-device .dpad .left { left: 0; top: 33px; }
.touch-device .dpad .right { right: 0; top: 33px; }
.move-stick { position: absolute; top: 33px; left: 33px; width: 44px; height: 44px; border-radius: 50%; background: #8eb7a7; border: 2px solid #c2dec9; box-shadow: 0 3px 18px #0008; pointer-events: none; transform: translate(var(--stick-x, 0px), var(--stick-y, 0px)); }
.move-pad.active .move-stick { background: var(--gold); border-color: #f5dba7; }
.touch-device .touch-actions { display: grid; grid-template-columns: 60px 60px; gap: 9px; }
.touch-device .touch-actions button { width: 60px; height: 60px; min-height: 60px; border-radius: 50%; font-size: 18px; font-weight: 700; background: #183332ed; border: 1px solid #9db9a875; touch-action: none; }
.touch-device .touch-actions button[data-key="a"] { grid-column: 2; width: 52px; height: 52px; min-height: 52px; justify-self: center; background: #243b33ed; font-size: 15px; }
.touch-device .touch-actions button[data-key="d"] { background: #d7b26b; color: #17292a; border-color: #f5dba7; }
.touch-device .touch-actions button[data-key="s"] { grid-column: 1; }
.touch-device .touch-actions small { color: inherit; font-size: 9px; letter-spacing: .6px; margin-top: 2px; }
.touch-device .touch-controls button.pressed { background: #b5e0c3; color: #14272b; }
.touch-device .icon-button { min-width: 44px; min-height: 44px; }
.touch-device .filter { min-height: 44px; }
.touch-device select { min-height: 44px; font-size: 16px; }
.touch-device .hub-tabs button { min-height: 44px; }
.touch-device .attack-hint { top: calc(77px + var(--safe-top)); right: max(14px, var(--safe-right)); }
.touch-device .compact-screen, .touch-device .modal { padding-top: calc(18px + var(--safe-top)); padding-bottom: calc(18px + var(--safe-bottom)); overflow-y: auto; }
.touch-device .help-card { max-height: none; }
@media (max-width: 760px) {
 .menu-header { height: calc(70px + var(--safe-top)); }
 .menu-screen { top: calc(70px + var(--safe-top)); }
 .header-right { gap: 7px; }
 .menu-header { padding-left: max(16px, var(--safe-left)); padding-right: max(16px, var(--safe-right)); }
 .pwa-strip { gap: 6px 16px; }
 .pwa-strip > span:nth-child(2) { font-size: 8px; }
}
@media (max-width: 420px) {
 .brand { font-size: 10px; gap: 5px; letter-spacing: .6px; }
 .brand-ball { font-size: 25px; }
 .brand small { font-size: 6px; letter-spacing: 1.5px; }
 .header-right > .icon-button { font-size: 10px; padding: 7px; }
 .pwa-strip > span:nth-child(2) { display: none; }
 .pwa-strip > button { margin-left: auto; }
}
@media (orientation: landscape) and (max-height: 560px) {
 .touch-device .scoreboard { min-height: calc(58px + var(--safe-top)); padding-top: calc(5px + var(--safe-top)); padding-bottom: 5px; grid-template-columns: 1fr auto 1fr; }
 .touch-device .live-score { padding-top: 3px; padding-bottom: 3px; }
 .touch-device .period-label { font-size: 9px; margin-top: 3px; }
 .touch-device .match-actions { flex-wrap: nowrap; max-width: none; justify-content: flex-end; }
 .touch-device .stage-label { max-width: none; }
 .touch-device .attack-hint { top: calc(65px + var(--safe-top)); font-size: 8px; }
 .touch-device .page-wrap { padding-top: 22px; }
 .touch-device .intro h1 { font-size: 42px; }
 .touch-device #penaltyCanvas { max-height: 150px; }
 .touch-device .shootout-card { width: min(650px, 100%); }
}