:root{--dod-ios-chrome-clearance:20px;} /* Buttons, touch controls, settings, rewards, and accessibility modes. */ .btn { border-radius: 999px; padding: 8px 18px; border: 1px solid rgba(0,255,157,0.4); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem; background: transparent; color: inherit; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; } .btn-primary { background: linear-gradient(120deg, var(--neon), var(--cyan)); color: #000; box-shadow: 0 0 20px rgba(0,255,157,0.35); border-color: transparent; } .btn:hover { transform: translateY(-1px); box-shadow: 0 0 18px rgba(0,255,157,0.4); } /* Audio control lives above the stage instead of covering the character HUD. */ .arcade-canvas-wrap { position: relative; } .arcade-stage-toolbar { min-height: 36px; margin: 0 0 7px; display: flex; justify-content: flex-end; align-items: center; } .arcade-mute-btn { position: static; z-index: auto; min-width: 112px; min-height: 34px; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(0,255,157,0.42); background: rgba(0,0,0,0.62); color: #82ffc0; font: inherit; font-size: .54rem; line-height: 1; letter-spacing: .08em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; touch-action: manipulation; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); user-select: none; -webkit-user-select: none; transition: background .2s, border-color .2s, color .2s, transform .2s; } .arcade-mute-icon { font-size: .92rem; line-height: 1; } .arcade-mute-label { white-space: nowrap; } .arcade-mute-btn:hover { background: rgba(0,255,157,.14); transform: translateY(-1px); } .arcade-mute-btn:active { transform: scale(.97); } .arcade-mute-btn:focus-visible { outline: 2px solid #00ff9d; outline-offset: 2px; } .arcade-mute-btn.muted { color: #ff929c; border-color: rgba(255,107,107,.58); background: rgba(70,5,12,.58); } /* Login button in the start-menu button row (only rendered when the player isn't signed in) — accented so it reads as a call to action. */ .arcade-login-btn { border-color: var(--neon) !important; color: var(--neon) !important; background: rgba(0,255,157,0.08) !important; } .arcade-login-btn:hover { background: rgba(0,255,157,0.18) !important; } /* Generic loading indicator: server-authority.js toggles this class on for the duration of any in-flight request to arcade_player_action.php / arcade_player_state.php. Individual features can also listen for the 'dod:server-authority-loading' event if they want a more specific spinner. */ body.dod-server-busy::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2000; background: linear-gradient(90deg, transparent, var(--neon), transparent); background-size: 200% 100%; animation: dodServerBusyBar 1.1s linear infinite; pointer-events: none; } @keyframes dodServerBusyBar { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .arcade-season-banner { margin-top: 10px; text-align: center; font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; display: flex; gap: 10px; justify-content: center; align-items: center; } .arcade-season-banner a { color: var(--neon); text-decoration: none; border: 1px solid rgba(0,255,157,0.35); border-radius: 999px; padding: 5px 12px; } .arcade-season-banner a:hover { background: rgba(0,255,157,0.1); } .arcade-season-banner span { color: #9ed8c8; } .arcade-version-footer { margin-top: 14px; text-align: center; font-size: 0.46rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.4; user-select: none; -webkit-user-select: none; pointer-events: none; } .arcade-controls-hint { margin-top: 8px; text-align: center; font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; } .touch-toggle { margin-top: 6px; text-align: center; font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .touch-toggle, .touch-toggle-option, .touch-toggle-option span { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } .touch-toggle-option { display: inline-flex; gap: 8px; align-items: center; border: 1px solid rgba(0,255,157,0.25); border-radius: 999px; padding: 5px 10px; background: rgba(0,0,0,0.35); cursor: default; touch-action: manipulation; } .touch-toggle-option span { pointer-events: none; } .touch-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--neon); cursor: pointer; touch-action: manipulation; } .touch-toggle input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; } .mobile-controls { position: relative; left: auto; right: auto; bottom: auto; transform: none; z-index: 20; display: none; width: 100%; max-width: 100%; box-sizing: border-box; grid-template-columns: minmax(72px,1.08fr) repeat(3,minmax(58px,1fr)); gap: 7px; align-items: stretch; margin: 9px 0 max(8px, env(safe-area-inset-bottom, 0px)); padding: 8px; background: linear-gradient(180deg,rgba(3,12,17,.96),rgba(0,5,9,.94)); border: 1px solid rgba(0,255,157,.38); border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(0,243,255,.08),0 10px 30px rgba(0,0,0,.36),0 0 20px rgba(0,255,157,.08); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; } .ctrl { width: 100%; min-width: 0; min-height: 52px; height: auto; padding: 7px 4px; border-radius: 12px; border: 1px solid rgba(0,255,157,.42); background: linear-gradient(180deg,rgba(10,16,23,.98),rgba(2,6,10,.98)); color: #fff; font: inherit; font-size: clamp(.58rem,2.7vw,.72rem); letter-spacing: .045em; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; box-shadow: inset 0 -3px 0 rgba(255,255,255,.035); } .ctrl-move { font-size: clamp(.9rem,4vw,1.15rem); } .ctrl-fire { border-color: rgba(0,243,255,.72); box-shadow: inset 0 -3px 0 rgba(0,243,255,.2),0 0 14px rgba(0,243,255,.08); } .ctrl-special { border-color: rgba(255,71,145,.54); } .ctrl:active { transform: scale(.97); background: rgba(0,255,157,.18); border-color: rgba(0,255,157,.9); } body.touch-ui .mobile-controls { display: grid; } body.touch-ui .arcade-page { align-items: flex-start; } body.touch-ui .arcade-shell { max-height: none; } body.left-handed .mobile-controls { direction: rtl; } body.left-handed .mobile-controls .ctrl, body.left-handed .mobile-controls .arcade-move-stick { direction: ltr; } body.touch-ui .ctrl { width: 100%; min-height: 52px; height: auto; } .touch-only-text { display: none; } body.touch-ui .kbd-only { display: none; } body.touch-ui .touch-only-text { display: inline; } .howto { position: fixed; inset: 0; z-index: 1600; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.9); padding: 16px; } .howto.show { display: flex; } .howto-card { width: min(440px, 96vw); border-radius: 16px; border: 1px solid var(--panel-border); background: rgba(10,10,10,0.95); box-shadow: 0 8px 30px rgba(0,0,0,0.8); padding: 16px; } .howto-card h3 { margin: 0 0 10px; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--neon); text-align: center; } .howto-card ul { margin: 0 0 12px 18px; padding: 0; line-height: 1.55; font-size: 0.66rem; letter-spacing: 0.06em; } .settings-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; align-items: center; justify-content: space-between; font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; } .settings-row input[type="range"] { width: 120px; } .settings-row label { display: inline-flex; align-items: center; gap: 6px; } .keybind-input { width: 56px; border: 1px solid rgba(0,255,157,0.35); background: rgba(0,0,0,0.5); color: #fff; border-radius: 6px; padding: 4px 6px; text-transform: uppercase; font-size: 0.6rem; letter-spacing: 0.08em; } .reward-modal { position: fixed; inset: 0; z-index: 1700; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.86); padding: 14px; } .reward-modal.show { display: flex; } .reward-card { width: min(420px, 96vw); border-radius: 16px; border: 1px solid rgba(0,255,157,0.45); background: rgba(0,0,0,0.92); box-shadow: 0 8px 30px rgba(0,0,0,0.8); padding: 16px; text-align: center; } .reward-code { display: inline-flex; align-items: center; justify-content: center; margin: 8px 0; min-width: 180px; border: 1px dashed rgba(0,255,157,0.6); border-radius: 999px; padding: 8px 12px; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); } body.reduced-motion * { animation: none !important; transition-duration: 0s !important; } body.high-contrast { filter: saturate(0.65) hue-rotate(-15deg); } body.big-touch .mobile-controls { gap: 8px; padding: 9px; } body.big-touch .ctrl { width: 100% !important; min-height: 62px !important; height: auto !important; font-size: .82rem !important; } .quality-select { min-width: 118px; border: 1px solid rgba(0,255,157,0.35); background: rgba(0,0,0,0.72); color: #fff; border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 0.62rem; text-transform: uppercase; } body.graphics-low .arcade-lights-overlay { display: none; } body.graphics-low .fog-overlay { opacity: 0.35; } body.graphics-medium .arcade-lights-overlay { opacity: 0.34; } body.graphics-high .arcade-lights-overlay { opacity: 0.56; } /* v3.9.3 session length selector. */ .session-length-row{align-items:flex-start!important;flex-wrap:wrap} .session-length-row .quality-select{min-width:min(100%,340px)} .settings-help{display:block;flex:1 1 100%;margin-top:5px;color:rgba(255,255,255,.55);font-size:.48rem;line-height:1.45} /* v4.0.0 live event banner. */ .arcade-event-banner{ display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px; margin:0 0 9px;padding:8px 10px;border:1px solid rgba(255,205,90,.46); border-radius:9px;background:linear-gradient(90deg,rgba(255,205,90,.09),rgba(0,255,157,.045)); color:#fff;font-size:.49rem; } .arcade-event-banner strong{color:#ffcf59;letter-spacing:.07em} .arcade-event-banner span{color:rgba(255,255,255,.65)} .arcade-event-banner button{ min-height:29px;padding:5px 9px;border:1px solid rgba(255,205,90,.55); border-radius:6px;background:rgba(0,0,0,.22);color:#ffdf8a;font:inherit;cursor:pointer; } .arcade-event-banner button:hover{border-color:#ffcf59;color:#fff} /* v4.6.5 pause-menu End Run and confirmation controls. */ .arcade-stage-toolbar{gap:8px} .arcade-pause-end-run-btn{border-color:rgba(255,100,112,.68)!important;color:#ff9aa4!important;background:rgba(82,5,14,.76)!important} .arcade-pause-end-run-btn:hover,.arcade-pause-end-run-btn:focus-visible{background:rgba(132,12,26,.9)!important} .end-run-confirm{position:absolute;inset:0;z-index:1900;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(0,0,0,.78);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)} .end-run-confirm.show{display:flex} .end-run-confirm-card{width:min(420px,92vw);padding:20px;border:1px solid rgba(255,100,112,.62);border-radius:14px;background:linear-gradient(160deg,#15080b,#050607);box-shadow:0 18px 60px rgba(0,0,0,.8);text-align:center} .end-run-confirm-card strong{display:block;color:#fff;letter-spacing:.14em}.end-run-confirm-card p{color:#c8c8c8;font-size:.7rem;line-height:1.5}.end-run-confirm-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.arcade-end-run-confirm-btn{border-color:#ff6470!important;color:#ff9aa4!important} @media(max-width:760px){.mobile-controls{gap:6px;padding:7px;border-radius:16px}.arcade-pause-end-run-btn{min-width:110px}} @media(max-width:380px){.mobile-controls{grid-template-columns:minmax(64px,.95fr) repeat(3,minmax(52px,1fr));gap:4px;padding:5px}.ctrl{min-height:48px;padding:5px 2px;font-size:.54rem}} /* v4.6.29.58 — horizontal move stick for paddle modes (Survival, Runway, Boss Rush) */ .arcade-move-stick{ display:none; grid-template-rows:1fr auto; place-items:center; min-width:0; min-height:52px; padding:4px 3px 2px; border:1px solid rgba(0,255,157,.42); border-radius:12px; background:linear-gradient(180deg,rgba(7,18,22,.96),rgba(2,7,10,.98)); touch-action:none; user-select:none; -webkit-user-select:none; box-sizing:border-box; -webkit-tap-highlight-color:transparent; } .arcade-move-stick-track{ position:relative; width:64px; height:36px; border:1px solid rgba(0,255,157,.48); border-radius:999px; background:radial-gradient(ellipse at center,rgba(0,255,157,.10) 0 42%,rgba(0,0,0,.35) 44% 100%); box-shadow:inset 0 0 14px rgba(0,255,157,.08); } .arcade-move-stick-track::before{ content:''; position:absolute; top:50%; left:8px; right:8px; height:1px; background:rgba(0,255,157,.16); pointer-events:none; } .arcade-move-stick-track i{ position:absolute; left:50%; top:50%; width:26px; height:26px; border:2px solid #00ff9d; border-radius:50%; background:radial-gradient(circle at 38% 32%,#c7fff0,#00ff9d 35%,#073c31 100%); box-shadow:0 0 12px rgba(0,255,157,.38); transform:translate(-50%,-50%); transition:transform .04s linear; pointer-events:none; } .arcade-move-stick.active{ border-color:#00ff9d; box-shadow:0 0 14px rgba(0,255,157,.16); } .arcade-move-stick-label{ margin-top:2px; color:#9fc5ba; font:900 6px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.7px; } body.touch-ui .arcade-move-stick{display:grid} body.touch-ui.big-touch .arcade-move-stick{min-height:58px} body.touch-ui.big-touch .arcade-move-stick-track{width:70px;height:40px} @media(max-width:430px){ .arcade-move-stick{min-height:48px;padding:3px 2px 2px} .arcade-move-stick-track{width:58px;height:32px} .arcade-move-stick-track i{width:22px;height:22px} } /* v4.6.29.58 — unified bottom dock: controls + touch toggles + version footer */ .arcade-bottom-dock{ display:flex; flex-direction:column; gap:0; width:100%; max-width:100%; box-sizing:border-box; } .arcade-bottom-dock .mobile-controls{margin-bottom:0} .arcade-bottom-dock .runway-stage-strip{ order:2; margin:6px 0 0!important; flex:0 0 auto; } .arcade-bottom-dock .mobile-controls{order:1} .arcade-bottom-dock .touch-toggle{order:3;margin-top:4px;margin-bottom:0} .arcade-bottom-dock .arcade-version-footer{order:4} body.mode-runway.touch-ui.arcade-run-active:not(.arcade-overlay-open) .arcade-bottom-dock .runway-stage-strip.show{ display:block!important; } .arcade-bottom-dock .arcade-version-footer{ margin-top:6px; margin-bottom:max(8px,env(safe-area-inset-bottom, 0px)); } /* v4.6.29.145 — classic modes: don't stack safe-area under controls AND under the footer while JS also lifts the dock. That floated the tray too high onto the game stage (Runway / Survival / Boss Rush). */ body.arcade-bottom-dock-active:not(.gauntlet-active) .arcade-bottom-dock .mobile-controls{ margin:6px 0 0!important; } body.arcade-bottom-dock-active:not(.gauntlet-active) .arcade-bottom-dock .arcade-version-footer{ margin-bottom:2px!important; } @media (pointer:coarse),(max-width:760px){ body.arcade-bottom-dock-active .arcade-bottom-dock{ position:fixed!important; z-index:145; /* v4.6.29.145 — pin dock to the layout bottom; one safe-area pad only. Do not add 52px chrome padding here (that crushed the stage in .140). */ padding:0 8px max(8px, env(safe-area-inset-bottom, 0px)); pointer-events:none; box-sizing:border-box; touch-action:manipulation; overscroll-behavior:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; } /* Gauntlet owns a fixed shell — dock stays in-flow under the stage (v4.6.29.77). */ body.gauntlet-active.arcade-bottom-dock-active .arcade-bottom-dock{ position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; top:auto!important; width:100%!important; max-width:100%!important; margin:0!important; margin-top:auto!important; flex:0 0 auto!important; transform:none!important; opacity:1!important; padding:0 6px max(4px,env(safe-area-inset-bottom))!important; } body.arcade-overlay-open.arcade-bottom-dock-active .arcade-bottom-dock{ z-index:1310; } body.arcade-bottom-dock-active .arcade-bottom-dock > *{pointer-events:auto} body.arcade-bottom-dock-active .arcade-bottom-dock .mobile-controls{display:none!important} body.arcade-overlay-open.arcade-bottom-dock-active .arcade-bottom-dock .mobile-controls{display:none!important} body.touch-ui.arcade-run-active:not(.arcade-run-paused):not(.arcade-overlay-open) .arcade-bottom-dock .mobile-controls{display:grid!important} /* During play: size the stage to leftover viewport so the fixed dock does not steal height twice (old margin-bottom + 66svh clamp). Gauntlet owns its own full-viewport shell — do not clamp it here. */ body.touch-ui.arcade-bottom-dock-active.arcade-run-active:not(.arcade-overlay-open):not(.gauntlet-active) .arcade-canvas-wrap{ height:calc(100svh - var(--arcade-bottom-dock-height,112px) - 92px)!important; min-height:280px!important; max-height:none!important; margin-bottom:0!important; } body.touch-ui.arcade-bottom-dock-active:not(.arcade-run-active) .arcade-canvas-wrap, body.touch-ui.arcade-bottom-dock-active.arcade-overlay-open .arcade-canvas-wrap{ margin-bottom:0!important; } body.arcade-overlay-open.touch-ui.arcade-bottom-dock-active .arcade-overlay{ align-items:flex-start; padding-bottom:calc(var(--arcade-bottom-dock-height,96px) + 8px); box-sizing:border-box; } body.arcade-overlay-open.touch-ui.arcade-bottom-dock-active .arcade-overlay .panel{ max-height:calc(100svh - var(--arcade-bottom-dock-height,96px) - 24px); } body.player-hub-open .arcade-bottom-dock{ position:static!important; padding:0; } }