/* Ridge Fire online rooms: the shared screen (tv) and the phone controller. Builds on tanks.css. */

.secs { font-variant-numeric: tabular-nums; }
.honest { font-size: 14px; margin: 0; }
.tank-ico { display: block; flex: none; }
.err { color: #ff8fb0; font-weight: 700; text-align: center; margin: 6px 0 0; min-height: 0; }
.err:empty, #status:empty { display: none; }

/* A timer line under the top bar. */
.timer-line, .ph-timer { height: 6px; border-radius: 3px; background: #ffffff1f; overflow: hidden; }
.timer-line i, .ph-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--teal), var(--accent)); transition: width .25s linear; }
.timer-line.low i, .ph-timer.low i { background: var(--pink); }

/* ---------------- the shared screen ---------------- */
.tv .turn-chip { font-size: 26px; justify-content: center; }
.tv .turn-chip i { width: 22px; height: 22px; }
.tv .turn-chip .secs { margin-left: 8px; min-width: 2.2em; padding: 0 10px; border-radius: 999px; background: #1e220db3; border: 2px solid var(--line); font-size: 22px; text-align: center; }
.tv .turn-chip .secs:empty { display: none; }
.tv .wind { font-size: 20px; padding: 6px 16px 6px 10px; }
.tv .timer-line { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 8px; border-radius: 0; }
.tv .banner b { font-size: 34px; }
.tv .banner small { font-size: 18px; }
.tv .banner { top: 24px; padding: 12px 30px; }

.tv-lobby { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 72px 24px 24px; }
.tv-card { display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; width: min(1100px, 100%); padding: 28px 36px; background: #3a4120e6; backdrop-filter: blur(4px); animation: g-rise .5s ease-out both; }
.tv-card .title { font-size: 40px; font-weight: 700; margin: 0 0 8px; }
.tv-join > * + * { margin-top: 14px; }
.tv .lead { font-size: 22px; margin: 0; }
.big-code { display: inline-block; font-size: clamp(64px, 11vw, 132px); font-weight: 700; letter-spacing: .14em; line-height: 1; padding: 10px 26px 14px 36px; color: var(--ink); background: var(--accent); border: 4px solid var(--ink); border-radius: 26px; box-shadow: 0 8px 0 var(--ink); }
.tv .qr { background: #efe6c4; color: var(--ink); border: 4px solid var(--ink); border-radius: 22px; padding: 16px; text-align: center; box-shadow: 0 8px 0 var(--ink); }
.tv .qr svg { width: clamp(150px, 20vw, 240px); height: auto; display: block; }
.tv .qr p { margin: 8px 0 0; font-weight: 700; font-size: 18px; }
.tv-people { display: flex; flex-wrap: wrap; gap: 10px 22px; min-height: 64px; }
.tv-person { display: flex; align-items: center; gap: 10px; font-size: 24px; font-weight: 700; animation: g-pop .4s cubic-bezier(.2,1.5,.4,1) both; }
.tv-person small { font-size: 14px; color: var(--ink); background: var(--accent); border-radius: 999px; padding: 1px 8px; }
.tv-person.away { opacity: .45; }
.tv-corner { position: absolute; z-index: 3; right: 16px; bottom: 12px; margin: 0; padding: 6px 14px; border-radius: 999px; background: #1e220db3; border: 2px solid var(--line); font-size: 16px; color: var(--soft); }
.tv-corner b { color: var(--text); }
.tv-status { position: absolute; z-index: 7; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; font-weight: 700; color: var(--accent); }
.tv-win { width: min(520px, 100%); }
.tv-win h2 { font-size: 44px; }
.tv-win #win-art { width: 300px; height: 150px; }

.board { text-align: left; }
.board > p { margin: 0 0 4px; font-size: 14px; text-align: center; }
.board .row { display: flex; align-items: center; gap: 10px; padding: 4px 10px; border-radius: 12px; background: #1e220d99; font-weight: 700; }
.board .row + .row { margin-top: 4px; }
.board .row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv .board .row { font-size: 22px; }

@media (max-width: 760px) {
  .tv-card { grid-template-columns: 1fr; text-align: center; }
  .tv-people { justify-content: center; }
}

/* ---------------- the phone ---------------- */
#app.phone { grid-template-rows: auto minmax(150px, 1fr) auto; }
#app.phone.no-field { grid-template-rows: auto 0 1fr; }
.phone.no-field #stage { visibility: hidden; }
.ph-top { min-height: 56px; }
.me-chip { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.me-chip .nm { min-width: min(4.5em, 30vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-chip .hp { flex: 1; min-width: 16px; max-width: 120px; height: 10px; border-radius: 5px; background: #1e220d; border: 2px solid var(--line); overflow: hidden; }
.me-chip .hp i { display: block; height: 100%; transition: width .4s; }
.me-chip .hpn { font-variant-numeric: tabular-nums; min-width: 2ch; }
@media (max-width: 430px) { .me-chip .hpn { display: none; } } /* room for the TV button; the bar shows health */

.ph-panel { overflow-y: auto; overscroll-behavior: contain; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(#3a4120, #262b12); border-top: 3px solid var(--ink); }
.phone.no-field .ph-panel { border-top: 0; background: none; display: flex; flex-direction: column; }
.phone.no-field #screen { margin-top: auto; margin-bottom: auto; } /* centered, and still scrolls from the top when it's taller than the screen */
.phone #screen { width: 100%; max-width: 520px; margin-left: auto; margin-right: auto; }
.ph-card { padding: 18px; }
.ph-card h1 { font-size: 28px; }
.ph-card h2 { font-size: 24px; }
.ph-card p { margin: 0; }
.stack > * + * { margin-top: 12px; }
.center { text-align: center; }
.ph-card .tank-ico { margin: 0 auto; }
.ph-card label { display: block; font-weight: 700; color: var(--soft); }
.ph-card input { width: 100%; min-height: 54px; border-radius: 16px; border: 3px solid var(--ink); background: #efe6c4; color: var(--ink); padding: 8px 14px; font-size: 22px; font-weight: 600; }
.ph-people { list-style: none; margin: 0; padding: 0; }
.ph-people li { display: flex; align-items: center; gap: 10px; padding: 6px 4px; font-weight: 700; font-size: 18px; }
.ph-people li + li { border-top: 2px solid #ffffff12; }
.ph-people li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ph-people small { color: var(--soft); font-weight: 600; }
.phone .opt { flex-wrap: wrap; }
.ph-end canvas { width: 240px; height: 120px; display: block; margin: -4px auto 0; }
.ph-end h1 { font-size: 32px; }

/* Your turn: one thing on the screen. */
.ctl > * + * { margin-top: 8px; }
.ctl-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 22px; }
.ctl-head .secs { font-size: 20px; font-weight: 700; color: var(--accent); }
.pad { display: block; width: 100%; height: clamp(120px, 22vh, 190px); border-radius: 18px; background: #1e220d; border: 2px solid var(--line); touch-action: none; cursor: crosshair; }
.ctl-dials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctl .dial { padding: 16px 4px 4px; }
.ctl .dial .step { min-height: 48px; font-size: 20px; }
.weapons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.weapons button { min-height: 52px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; font-size: 17px; background: var(--panel2); color: var(--text); border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
.weapons button[aria-checked="true"] { background: var(--teal); color: var(--ink); }
.weapons small { font-size: 12px; font-weight: 600; opacity: .85; }
.ctl .fire { width: 100%; min-height: 70px; font-size: 28px; }
.ctl .fire-txt { font-size: 30px; }
.ph-wait h2 { font-size: 26px; }

/* Join steps on the shared screen's lobby: big enough to read from the sofa. */
.join-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: clamp(18px, 2.2vw, 30px); font-weight: 600; }
.join-steps li { display: inline-flex; align-items: center; gap: 10px; }
.join-steps b { color: var(--accent, #e6b54a); }
.join-steps .js-n { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: #8fa64a; color: #1c1f0e; border: 3px solid #1c1f0e; font-weight: 700; flex: none; }

/* Your color in the lobby (Doug, 1 Oct). */
.ph-colors { display: grid; gap: 6px; justify-items: center; }
.ph-colors > span { font-weight: 600; color: var(--soft); }
.ph-colors .color-pick { justify-content: center; padding: 0; }

/* Gear on your turn: shields, Repair, Fuel (Doug, 1 Oct). */
.gear { display: grid; gap: 4px; }
.gear-note { margin: 0; font-size: 13px; text-align: center; }
.gear-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.gear-row button { min-height: 48px; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; font-size: 12.5px; background: #4a5228; color: var(--text); border-width: 2px; box-shadow: 0 3px 0 var(--ink); }
.gear-row button small { font-size: 12px; color: #d8cf9e; }
.gear-row button:disabled { opacity: .35; }
.gear-ask { display: grid; gap: 6px; background: var(--panel2); border: 2px solid var(--line); border-radius: 14px; padding: 10px; }
.gear-ask p { margin: 0; }
.gear-ask .warn { color: #ff8fb0; font-weight: 600; }
.gear-ask input[type=range] { width: 100%; min-height: 44px; accent-color: #ff4d4d; }
.gear-ask .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Never wider than the phone: grid tracks may shrink below their content (long weapon names wrap instead). */
#app.phone { grid-template-columns: minmax(0, 1fr); }
.ctl-dials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.weapons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gear-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.weapons button, .gear-row button, .ctl .dial { min-width: 0; }
.weapons button span { overflow-wrap: anywhere; text-align: center; }
.guide-btn { width: 100%; margin-top: 6px; }
.guide-card { max-height: 88vh; overflow: auto; text-align: left; }
.guide-card h3 { margin: 12px 0 6px; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--soft); }
.reroll-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.reroll-bar.hidden { display: none; }
.reroll-bar button { min-height: 44px; }
.reroll-bar button[aria-pressed="true"] { border-color: #e6b54a; color: #e6b54a; }
.reroll-bar .muted { font-size: 13px; }