:root { --p: #59ff73; }
* { box-sizing: border-box; margin: 0; font-family: "SF Mono", "Menlo", "Consolas", monospace; }
html, body { height: 100%; background: #000; color: var(--p); overflow: hidden;
  -webkit-user-select: none; user-select: none; touch-action: none; }
#crt { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; padding: 24px; text-align: center; z-index: 10; background: #000; }
.hidden { display: none !important; }
h1 { font-size: 56px; letter-spacing: 6px; line-height: 1.05; }
h2 { font-size: 34px; letter-spacing: 4px; }
.glow { text-shadow: 0 0 18px var(--p); }
.dim { opacity: .65; font-size: 13px; white-space: pre-line; } .tiny { font-size: 10px; line-height: 1.7; }
.warn { color: #ffb020; font-size: 12px; min-height: 16px; }
.big { font-size: 40px; font-weight: 700; }
button { background: transparent; color: var(--p); border: 3px solid var(--p); padding: 13px 22px;
  font-size: 16px; letter-spacing: 2px; cursor: pointer; min-width: 220px; }
button:active { opacity: .6; }
button.prominent { background: var(--p); color: #000; font-weight: 700; }
.row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.row button { min-width: 0; padding: 11px 14px; font-size: 13px; }
.seg button.on { background: var(--p); color: #000; }
input { background: transparent; border: 2px solid var(--p); color: var(--p); padding: 12px;
  font-size: 16px; letter-spacing: 2px; text-align: center; width: 260px; text-transform: uppercase; }
input::placeholder { color: var(--p); opacity: .4; }
#game { position: fixed; inset: 0; }
#court { position: absolute; inset: 0; width: 100%; height: 100%; }
#hud { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; font-size: 13px; z-index: 20; }
#hud-ping { margin-left: auto; }
#btn-quit { min-width: 0; padding: 6px 12px; font-size: 15px; }
#post-rows { width: min(360px, 84vw); display: flex; flex-direction: column; gap: 8px; }
#post-rows .r { display: flex; justify-content: space-between; font-size: 14px; }
#post-rows .r b { font-weight: 700; }
#post-troph { display: flex; flex-direction: column; gap: 8px; }
#post-troph .a { border: 2px solid var(--p); padding: 8px 14px; font-size: 13px; text-align: left; }
#post-troph .a small { display: block; opacity: .6; font-size: 10px; }
#ranks-list { font-size: 14px; line-height: 2; min-width: min(360px, 84vw); text-align: left; white-space: pre; }

.col { display: flex; flex-direction: column; gap: 12px; align-items: center; }

/* action sheet — the web stand-in for the app's confirmation dialog */
#sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.82);
  display: flex; align-items: center; justify-content: center; padding: 24px; }
#sheet-panel { display: flex; flex-direction: column; gap: 12px; align-items: center;
  border: 3px solid var(--p); background: #000; padding: 22px; max-width: 92vw; }
#sheet-title { letter-spacing: 2px; }
#sheet-cancel { opacity: .7; }
.col .secret { border: 2px solid var(--p); padding: 10px 14px; font-size: 13px; letter-spacing: 1px; word-break: break-all; max-width: min(340px, 84vw); }
button.danger { border-color: #ffb020; color: #ffb020; }

.scrolly { justify-content: flex-start; overflow-y: auto; padding-top: 40px; }
.col.wide { width: min(420px, 92vw); align-items: stretch; }
.mp-head { display: flex; align-items: baseline; gap: 20px; }
.ovr { text-align: center; } .ovr span { font-size: 44px; font-weight: 700; } .ovr small { display: block; opacity: .6; }
.xpbar { width: min(420px, 92vw); height: 8px; background: color-mix(in srgb, var(--p) 15%, transparent); }
.xpbar div { height: 100%; background: var(--p); }
.attr { display: flex; align-items: center; gap: 8px; }
.attr .k { width: 84px; font-size: 13px; font-weight: 700; text-align: left; }
.attr .v { width: 34px; font-size: 17px; font-weight: 700; text-align: right; }
.attr .bar { flex: 1; height: 10px; background: color-mix(in srgb, var(--p) 15%, transparent); }
.attr .bar div { height: 100%; background: var(--p); }
.attr button { min-width: 0; width: 40px; padding: 6px 0; font-size: 17px; font-weight: 700; }
.attr button:disabled { opacity: .3; }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle; box-shadow: 0 0 6px currentColor; }
.blurb { font-size: 10px; opacity: .5; text-align: left; margin: -6px 0 4px 0; }
.badge-row { border: 2px solid color-mix(in srgb, var(--p) 50%, transparent); padding: 8px 10px; text-align: left; }
.badge-row .t { font-size: 13px; font-weight: 700; }
.badge-row .d { font-size: 10px; opacity: .55; }
.badge-row .tiers { display: flex; gap: 6px; margin-top: 6px; }
.badge-row .tiers button { min-width: 0; padding: 5px 10px; font-size: 10px; }
.badge-row .tiers button.on { background: var(--p); color: #000; }
.badge-row .tiers button:disabled { opacity: .25; }
.troph { display: flex; gap: 10px; align-items: center; text-align: left; padding: 4px 0; }
.troph.locked { opacity: .4; }
.troph .tt { font-size: 13px; font-weight: 700; } .troph .td { font-size: 10px; opacity: .6; }
#badge-flash { position: fixed; left: 50%; bottom: 22%; transform: translateX(-50%); font-size: 20px;
  font-weight: 700; color: var(--p); text-shadow: 0 0 12px var(--p); opacity: 0; transition: opacity .3s; z-index: 30; pointer-events: none; }

button.chaos { border-color: #ffb020; color: #ffb020; }