:root {
  --ink: #2c3138;
  --muted: #6a717a;
  --card: #fbfaf5;
  --line: #d9d4c6;
  --panel: rgba(251, 250, 245, .86);
  --blue: #2f6fd6;
  --blue-soft: #e3ecfb;
  --orange: #e0662f;
  --orange-soft: #fbe9df;
  --green: #2a9d5a;
  --red: #d23b2f;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #dbe9f4; color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.hidden { display: none !important; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: #dbe9f4; cursor: grab; }
#c.dragging { cursor: grabbing; }
kbd { display: inline-block; min-width: 1.3em; padding: 0 4px; border: 1px solid #c4bdad; border-bottom-width: 2px; border-radius: 4px;
  background: #fffdf7; font: 600 11px/1.5 ui-monospace, Consolas, monospace; text-align: center; color: var(--ink); }
button { font: 700 14px system-ui, sans-serif; border: 1px solid #bdb6a6; background: #fffdf8; color: var(--ink); border-radius: 8px; padding: 7px 14px; cursor: pointer; }
button:hover { background: #fff; border-color: #9d9686; }

/* HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
#topbar { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; }
.side { display: flex; align-items: center; gap: 8px; background: var(--panel); border-radius: 12px; padding: 6px 12px;
  box-shadow: 0 3px 14px rgba(60, 60, 50, .12); border: 1px solid rgba(160, 150, 130, .35); }
.side b { font: 900 30px/1 system-ui; min-width: 26px; text-align: center; }
.side.blue b { color: var(--blue); } .side.orange b { color: var(--orange); }
.side .lbl { font: 800 10px system-ui; letter-spacing: 2px; color: var(--muted); }
.pips { display: flex; gap: 3px; max-width: 200px; flex-wrap: wrap; }
.pip { width: 11px; height: 20px; border-radius: 4px; position: relative; overflow: hidden; background: #e2ded4; }
.pip i { position: absolute; left: 0; right: 0; bottom: 0; }
.side.blue .pip i { background: var(--blue); } .side.orange .pip i { background: var(--orange); }
.pip.dead { background: #ece8de; opacity: .55; }
.pip.fell { background: repeating-linear-gradient(135deg, #ece8de 0 3px, #d6d0c2 3px 6px); }
#clock { text-align: center; background: var(--panel); border-radius: 12px; padding: 4px 14px; box-shadow: 0 3px 14px rgba(60, 60, 50, .12); }
#timer { font: 800 22px ui-monospace, Consolas, monospace; }
#mapName { font-size: 11px; color: var(--muted); white-space: nowrap; }
#feed { position: absolute; right: 12px; top: 74px; width: 330px; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
#feed div { background: var(--panel); border-radius: 8px; padding: 4px 10px; font-size: 13px; box-shadow: 0 2px 8px rgba(60,60,50,.1);
  border-left: 4px solid #b9b2a2; transition: opacity .6s; white-space: nowrap; }
#feed div.fall { border-left-color: #8a6bd1; }
#feed .b { color: var(--blue); font-weight: 800; } #feed .o { color: var(--orange); font-weight: 800; }
#feed .w { color: var(--muted); font-size: 12px; }
#center { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); text-align: center; font: 900 54px system-ui; letter-spacing: 2px;
  text-shadow: 0 0 12px #fff, 0 0 4px #fff; }
#center small { display: block; font-size: 17px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
#followCard { position: absolute; left: 12px; bottom: 12px; background: var(--panel); border-radius: 12px; padding: 8px 14px; min-width: 210px;
  box-shadow: 0 3px 14px rgba(60, 60, 50, .14); border-left: 5px solid var(--blue); font-size: 13px; }
#followCard.orange { border-left-color: var(--orange); }
#followCard h4 { margin: 0 0 2px; font-size: 16px; }
#followCard .hp { height: 8px; border-radius: 4px; background: #e2ded4; margin: 5px 0; overflow: hidden; }
#followCard .hp i { display: block; height: 100%; background: var(--green); }
#followCard .muted { color: var(--muted); font-size: 12px; }
#timebar { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: var(--panel); border-radius: 12px; padding: 6px 10px; box-shadow: 0 3px 14px rgba(60, 60, 50, .14); }
#timebar button { padding: 5px 10px; font-size: 13px; }
#timebar button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
#tPause { min-width: 40px; }
#tPause.on { background: var(--orange) !important; border-color: var(--orange) !important; }
#speeds { display: flex; gap: 4px; }
#speedTag { font: 800 14px ui-monospace, Consolas, monospace; min-width: 52px; text-align: center; }
#camHint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap;
  text-shadow: 0 0 4px #fff, 0 0 2px #fff; }

/* setup and results */
.screen { position: fixed; inset: 0; background: rgba(214, 228, 238, .55); display: flex; align-items: center; justify-content: center;
  overflow-y: auto; padding: 16px; backdrop-filter: blur(3px); z-index: 5; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 28px; width: min(860px, 100%);
  box-shadow: 0 12px 40px rgba(60, 60, 50, .18); max-height: 100%; overflow-y: auto; }
h1 { margin: 0; font-size: 42px; letter-spacing: 4px; color: var(--ink); }
h2 { margin: 2px 0 6px; }
h3 { margin: 12px 0 6px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.sub { margin: 4px 0 6px; line-height: 1.45; color: #4b525b; }
.pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pick button { text-align: left; font-weight: 400; padding: 9px 11px; border-width: 2px; border-color: var(--line); background: #fff; }
.pick button b { display: block; font-size: 14px; margin-bottom: 2px; }
.pick button span { font-size: 12px; color: var(--muted); line-height: 1.3; display: block; }
.pick button.on { border-color: var(--ink); background: #f4f1e8; }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; margin-top: 12px; align-items: stretch; }
.team { border-radius: 12px; padding: 10px 14px; }
.team.blue { background: var(--blue-soft); } .team.orange { background: var(--orange-soft); }
.team.blue h2 { color: var(--blue); } .team.orange h2 { color: var(--orange); }
.vs { align-self: center; font: 900 20px system-ui; color: var(--muted); }
.count { display: flex; align-items: center; gap: 8px; }
.count button { width: 36px; height: 36px; padding: 0; font-size: 20px; }
.count b { font: 900 30px system-ui; min-width: 36px; text-align: center; }
.count span { color: var(--muted); font-size: 13px; }
.seg { display: flex; flex-wrap: wrap; }
.seg button { flex: 1; border-radius: 0; margin-left: -1px; font-size: 12px; padding: 6px 4px; }
.seg button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.seg button:last-child { border-radius: 0 8px 8px 0; }
.team.blue .seg button.on { background: var(--blue); border-color: var(--blue); color: #fff; position: relative; }
.team.orange .seg button.on { background: var(--orange); border-color: var(--orange); color: #fff; position: relative; }
.note { font-size: 13px; color: var(--muted); margin: 10px 0 4px; min-height: 1.2em; }
.opts { display: flex; gap: 18px; font-size: 14px; margin: 6px 0; }
.opts label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.go { display: block; margin: 14px auto 0; background: var(--ink); border-color: var(--ink); color: #fff; font-size: 17px; padding: 11px 34px; }
.go:hover { background: #454c56; border-color: #454c56; }
.ghost { background: #fff; }
.keys { margin-top: 14px; font-size: 14px; }
.keys summary { cursor: pointer; font-weight: 700; }
.keys li { margin: 4px 0; line-height: 1.4; }

#end { position: fixed; right: 14px; top: 74px; bottom: 84px; width: min(470px, calc(100% - 28px)); z-index: 4; display: flex; }
#end .card { padding: 16px 18px; width: 100%; }
.kind { font-size: 12px; letter-spacing: 3px; text-transform: uppercase; font-weight: 800; color: var(--muted); }
#endTitle.blue { color: var(--blue); } #endTitle.orange { color: var(--orange); }
#endRows { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
#endRows td, #endRows th { padding: 3px 5px; border-bottom: 1px solid #ebe6da; text-align: left; white-space: nowrap; }
#endRows th { font-size: 10px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
#endRows tr.blue td:first-child { color: var(--blue); font-weight: 800; }
#endRows tr.orange td:first-child { color: var(--orange); font-weight: 800; }
#endRows tr.mvp { background: #fff3d6; }
#endRows td.r, #endRows th.r { text-align: right; }
#endRows .dead { color: var(--muted); }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.btns .go { margin: 0; font-size: 15px; padding: 8px 18px; }
#showEnd { position: fixed; right: 14px; top: 74px; z-index: 4; }

@media (max-width: 820px) {
  .pick { grid-template-columns: 1fr 1fr; }
  .teams { grid-template-columns: 1fr; }
  .vs { display: none; }
  #feed { width: 230px; top: 120px; }
  #feed div { font-size: 11px; }
  #topbar { gap: 6px; }
  .pips { display: none; }
  #camHint { display: none; }
  #timebar { bottom: 10px; }
  #center { font-size: 34px; }
}