/* assets/css/echo.css - Echo (echo.php). Fixed logical world, scaled by echo.js fit() through --sz. */
body { font-family: 'Quicksand', sans-serif; background: #070816; margin: 0; padding: 0; }   /* margin 0: header runs edge to edge, no gap around it */   /* dark arcade page: the HUD labels are pale and need it */
[hidden] { display: none !important; }

.ec-page { max-width: 700px; margin: 0 auto; padding: 8px max(12px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right)); box-sizing: border-box; font-family: 'Quicksand', sans-serif; }
.ec-card { --sz: 360px; --acc: #2de2ff; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #e8f4ff; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.ec-card > * { flex-shrink: 0; }

/* HUD */
.ec-hud { width: var(--sz); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ec-stat { background: linear-gradient(180deg, #0f1430, #080a1c); border: 1px solid rgba(120, 150, 255, .22); border-radius: 12px; padding: 6px 8px; text-align: center; min-width: 0; }
.ec-k { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; color: rgba(190, 215, 255, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-v { display: block; font-size: 22px; font-weight: 800; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 14px rgba(45, 226, 255, .45); }

/* stage */
.ec-stage { position: relative; width: var(--sz); height: var(--sz); border-radius: 16px; overflow: hidden; background: #04050d; box-shadow: 0 0 0 1px rgba(45, 226, 255, .35), 0 10px 40px -12px rgba(45, 226, 255, .45); }
#ecCanvas { display: block; width: var(--sz); height: var(--sz); touch-action: none; cursor: crosshair; }

/* overlays laid over the canvas must never swallow touches meant for the arena */
.ec-hint, .ec-count, .ec-banner { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.ec-hint { bottom: 14%; font-size: 14px; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 0 16px rgba(45, 226, 255, .9); animation: ecBlink 1.2s ease-in-out infinite; padding: 0 12px; }
.ec-count { top: 50%; transform: translateY(-50%); font-size: 96px; font-weight: 800; color: #fff; text-shadow: 0 0 30px rgba(45, 226, 255, .9); }
.ec-banner { top: 16%; }
.ec-b1 { font-size: 30px; font-weight: 800; letter-spacing: 3px; color: #fff; text-shadow: 0 0 22px rgba(45, 226, 255, .9); }
.ec-b2 { margin-top: 4px; font-size: 13px; font-weight: 700; color: #c4b5fd; text-shadow: 0 2px 8px rgba(0, 0, 0, .7); padding: 0 10px; }
@keyframes ecBlink { 50% { opacity: .45; } }

/* start / pause overlays: opaque enough that the arena never ghosts through the text */
.ec-ov { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow-y: auto; background: rgba(5, 6, 15, .97); }
.ec-ov > .ec-ov-inner { margin: auto 0; width: 100%; max-width: 330px; padding: 14px 16px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ec-ov-inner > * { flex-shrink: 0; }
.ec-logo { font-size: 46px; font-weight: 800; letter-spacing: 12px; padding-left: 12px; color: #fff; text-shadow: 0 0 24px rgba(45, 226, 255, .8), 0 0 60px rgba(167, 139, 250, .5); line-height: 1; }
.ec-tag { font-size: 13px; font-weight: 700; color: #c4b5fd; margin-top: -4px; }
.ec-h { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: 4px; color: #fff; }

.ec-modes { display: flex; gap: 8px; width: 100%; justify-content: center; flex-wrap: wrap; }
.ec-mode { flex: 1 1 120px; padding: 10px 8px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: rgba(235, 245, 255, .85); font: inherit; font-weight: 800; font-size: 12px; letter-spacing: 1.2px; cursor: pointer; white-space: nowrap; }
.ec-mode.on { background: var(--acc); color: #04121a; border-color: transparent; box-shadow: 0 0 18px -2px var(--acc); }
.ec-modedesc { font-size: 12.5px; font-weight: 600; color: rgba(210, 225, 255, .75); text-align: center; line-height: 1.4; min-height: 34px; }
.ec-modebest { font-size: 12px; font-weight: 800; color: #fde047; letter-spacing: .5px; }

.ec-btn { width: 100%; padding: 13px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: #fff; font: inherit; font-weight: 800; font-size: 14px; letter-spacing: 2px; cursor: pointer; transition: transform .12s, filter .2s; }
.ec-btn:active { transform: scale(.97); }
.ec-btn:hover { filter: brightness(1.15); }
.ec-primary { background: var(--acc); color: #04121a; border-color: transparent; box-shadow: 0 6px 22px -6px var(--acc); }

/* meters */
.ec-meters { width: var(--sz); display: grid; gap: 6px; }
.ec-meter { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.ec-ml { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: rgba(190, 215, 255, .6); }
.ec-bar { height: 9px; border-radius: 9px; background: rgba(255, 255, 255, .09); overflow: hidden; }
.ec-bar i { display: block; height: 100%; width: 100%; border-radius: 9px; }
.ec-charge i { background: linear-gradient(90deg, #2de2ff, #67e8f9); transition: width .08s linear; }
.ec-charge.low i { background: linear-gradient(90deg, #ff4d6d, #fb923c); }
.ec-timer i { background: linear-gradient(90deg, #a78bfa, #f472b6); width: 0; }

/* bottom chips: single row, never wrapping */
.ec-bottom { width: var(--sz); display: flex; gap: 8px; }
.ec-chip { flex: 1 1 0; min-width: 0; padding: 10px 6px; border-radius: 12px; border: 1px solid rgba(120, 150, 255, .3); background: #0b0f26; color: #dbe9ff; font: inherit; font-weight: 800; font-size: 12px; letter-spacing: 1.2px; cursor: pointer; white-space: nowrap; }
.ec-chip:active { transform: scale(.97); }

/* options: full-screen, OPAQUE, scrollable; content is top-anchored with auto margins so tall content is never clipped */
.ec-opts { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #070816; padding: max(12px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.ec-opts > .ec-opts-in { margin: auto 0; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 10px; }
.ec-opts-in > * { flex-shrink: 0; }
.ec-opts .ec-h { text-align: center; }
.ec-row-h { font-size: 11px; font-weight: 800; letter-spacing: 2px; color: rgba(190, 215, 255, .6); }
.ec-list { display: flex; flex-direction: column; gap: 8px; }
.ec-list > * { flex-shrink: 0; }
.ec-item { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(120, 150, 255, .25); background: #0d1230; color: #e8f4ff; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; text-align: left; }
.ec-item b { font-size: 12px; letter-spacing: 1.4px; color: var(--acc); }
#trophy-list { text-align: left; max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px; border-radius: 12px; background: #0a0d24; border: 1px solid rgba(120, 150, 255, .2); flex-shrink: 0; }

.ec-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #10b981; color: #fff; padding: 11px 22px; border-radius: 30px; z-index: 21000; font-weight: 800; font-size: 13px; font-family: 'Quicksand', sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); max-width: 90%; text-align: center; }

/* the bug-report pill is never shown on arcade pages (menu-only reporter), belt and braces */
#beta-report-trigger { display: none !important; }

/* phones */
.ec-card.compact .ec-v { font-size: 19px; }
.ec-card.compact .ec-logo { font-size: 38px; letter-spacing: 9px; }
.ec-card.tight .ec-hud, .ec-card.tight .ec-bottom, .ec-card.tight .ec-meters { gap: 5px; }
.ec-card.tight .ec-k { font-size: 9px; letter-spacing: 1px; }
.ec-card.tight .ec-v { font-size: 17px; }
.ec-card.tight .ec-chip { font-size: 11px; letter-spacing: .6px; padding: 9px 4px; }
.ec-card.tight .ec-logo { font-size: 32px; letter-spacing: 7px; padding-left: 7px; }
.ec-card.tight .ec-mode { font-size: 11px; padding: 9px 4px; flex-basis: 100px; }
.ec-card.tight .ec-btn { padding: 11px 8px; font-size: 13px; }
.ec-card.tight .ec-modedesc { font-size: 12px; min-height: 30px; }
.ec-card.tight .ec-count { font-size: 72px; }
.ec-card.tight .ec-b1 { font-size: 24px; }

/* short landscape phones: arena on the left, HUD + controls in a column on the right */
.ec-card.land { display: grid; grid-template-columns: var(--sz) minmax(150px, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 12px; row-gap: 8px; align-items: start; justify-items: stretch; }
.ec-card.land .ec-stage { grid-column: 1; grid-row: 1 / span 4; }
.ec-card.land .ec-hud, .ec-card.land .ec-meters, .ec-card.land .ec-bottom { grid-column: 2; width: auto; }
.ec-card.land .ec-hud { grid-row: 1; grid-template-columns: 1fr 1fr 1fr; }
.ec-card.land .ec-meters { grid-row: 2; }
.ec-card.land .ec-bottom { grid-row: 3; flex-wrap: wrap; }
.ec-card.land .ec-chip { flex-basis: 40%; }
.ec-card.land .ec-logo { font-size: 28px; letter-spacing: 6px; padding-left: 6px; }
.ec-card.land .ec-count { font-size: 64px; }

@media (prefers-reduced-motion: reduce) { .ec-hint { animation: none; } .ec-btn, .ec-chip { transition: none; } }