/* Vivid pass: no paper, no faded tones. Glossy saturated panels, strong contrast, bright scene. Loaded last. */
:root {
  --ink: #ffffff; --muted: #b6c6f2; --line: rgba(160,190,255,.35);
  --panel-a: #2f58b8; --panel-b: #17327f; --panel-edge: #0a1236; --hi: #ffd34d; --link: #8fe0ff;
  --paper-2: #1f3f94; --paper-3: #16306f;
}
body { color: #fff; }
a { color: var(--link); }
.muted { color: var(--muted); }

/* brighter, more saturated harbor scene */
body[data-screen]:not([data-screen="/play"]) #scene svg { filter: blur(2px) brightness(.8) saturate(1.5); }
#scene svg { filter: saturate(1.35) contrast(1.05); }

/* glossy royal-blue panels */
.card, .modal, .sheet {
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 14%), linear-gradient(160deg, var(--panel-a), var(--panel-b));
  color: #fff; border: 3px solid var(--panel-edge); border-radius: 16px 22px 16px 20px;
  box-shadow: 0 0 0 2px #6fa0ff, 0 8px 0 rgba(4,10,40,.55), 0 14px 22px rgba(0,0,0,.35);
}
.card::before { inset: 5px; border: 1px solid rgba(255,255,255,.22); border-radius: 12px 18px 12px 16px; }
.card::after { background: radial-gradient(circle at 100% 0, rgba(255,211,77,.35), transparent 70%); }
.card.flat { background: linear-gradient(160deg, #264a9e, #14296d); box-shadow: 0 0 0 1px rgba(160,190,255,.4); border-width: 2px; }
.card > h2 { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.45); }
.card > h2::after { background: linear-gradient(90deg, var(--hi), #ff8a3d); height: 5px; width: 60px; }
h1, h2, h3 { text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.modal, .sheet { box-shadow: 0 0 0 2px #6fa0ff, 0 -8px 0 rgba(255,138,61,.9), 0 14px 22px rgba(0,0,0,.45); }
.sheet .tile { background: linear-gradient(#3b66cc, #1b3a8f); color: #fff; border-color: var(--panel-edge); box-shadow: 0 0 0 2px #6fa0ff, 0 4px 0 rgba(0,0,0,.5); }
.sheet .tile .k { color: var(--hi); text-shadow: 0 2px 0 rgba(0,0,0,.5); }

/* text surfaces */
th { color: #9ec0ff; } td, th { border-bottom: 1px solid rgba(160,190,255,.25); }
tr.me td { background: linear-gradient(90deg, rgba(255,211,77,.35), rgba(255,138,61,.2)); color: #fff; }
.bar { background: rgba(4,10,40,.6); border-color: var(--panel-edge); box-shadow: inset 0 2px 0 rgba(0,0,0,.4); }
.bar > i { background: linear-gradient(90deg, #35e0ff, #3d8bff); } .bar.red > i { background: linear-gradient(90deg, #ff4b3a, #ff9a3d); }
input, select { background: #0d1c52; color: #fff; border-color: #6fa0ff; }
input::placeholder { color: #8da4e0; }
.pill { border-color: rgba(0,0,0,.6); } .pill.up { background: #2f7cff; } .pill.ended { background: #55628c; }
.cd { color: var(--hi); text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.err { color: #ff8b7a; } .ok { color: #7dff9a; }
.bigrank { color: #ff5a3c; text-shadow: 0 3px 0 var(--hi), 0 0 18px rgba(255,90,60,.6); }
.tabs button { background: linear-gradient(#3b66cc, #1b3a8f); color: #fff; border-color: var(--panel-edge); box-shadow: 0 0 0 2px #6fa0ff, 0 3px 0 rgba(0,0,0,.5); }
.tabs button.on { background: linear-gradient(#ff6a47, #c8321b); box-shadow: 0 0 0 2px var(--hi), 0 0 14px rgba(255,106,71,.8); }
.btn.ghost { background: linear-gradient(#3b66cc, #1b3a8f); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }

/* art tiles and slots */
.art { background: linear-gradient(135deg, #3a64c8, #1a3586); color: #bcd0ff; border-color: var(--panel-edge); box-shadow: 0 0 0 2px #6fa0ff; }
.slot { background: rgba(4,10,40,.45); border: 2px dashed rgba(160,190,255,.45); }
.slot.filled { background: linear-gradient(#3b66cc, #1b3a8f); border: 3px solid var(--panel-edge); box-shadow: 0 0 0 2px #6fa0ff; }
.slot.locked { background: repeating-linear-gradient(45deg, #1a2d6b 0 6px, #14245a 6px 12px); }
.squad { border-bottom: 1px solid rgba(160,190,255,.25); }
.tl { border-left-color: var(--hi); } .tl .entry::before { background: #fff; border-color: var(--panel-edge); }

/* rankings rows */
.rrow { background: linear-gradient(#3b66cc, #1b3a8f); color: #fff; border-color: var(--panel-edge); box-shadow: 0 0 0 2px #6fa0ff, 0 4px 0 rgba(0,0,0,.5); }
.rrow .rn { color: var(--hi); } .rrow .rm span { color: #b6c6f2; } .rrow .rs { color: #fff; }
.rrow.me { background: linear-gradient(#ffd34d, #ff8a3d); color: #2a1200; border-color: #5a2a00; box-shadow: 0 0 0 2px #fff, 0 0 20px rgba(255,170,60,.8), 0 4px 0 rgba(0,0,0,.5); }
.rrow.me .rn, .rrow.me .rs { color: #2a1200; } .rrow.me .rm span { color: #5a2a00; }
.sbar { background: rgba(0,0,0,.3); } .sbar i { background: linear-gradient(90deg, #35e0ff, #fff); }

/* map canvas frame brighter */
.mapwrap { border-color: var(--panel-edge); box-shadow: 0 0 0 2px #6fa0ff, 0 8px 0 rgba(4,10,40,.55); background: #3a8f4a; }
.mapwrap .legend { background: rgba(10,18,60,.85); color: #fff; border-color: #6fa0ff; }

/* hud pills and dock more vivid */
.topbar { background: linear-gradient(rgba(6,12,50,.9), rgba(6,12,50,0)); }
.dock { background: linear-gradient(rgba(35,70,160,.96), rgba(12,26,90,.97)); box-shadow: 0 0 0 2px #ffd34d, 0 10px 24px rgba(0,0,0,.5); }
.dock .ic { background: radial-gradient(circle at 35% 30%, #6aa2ff, #1f46b0 70%); }
.rankchip { background: linear-gradient(rgba(40,80,180,.85), rgba(14,30,100,.85)); border-color: rgba(160,200,255,.6); }
.evr { background: linear-gradient(90deg, rgba(14,36,110,.92), rgba(30,70,170,.65)); }
.rbtn, .act { background: linear-gradient(#5b8eff, #1e46b8); }
.act.go { background: linear-gradient(#ff7a47, #d1321b); }
.boardpick .bp { background: linear-gradient(#3b66cc, #1b3a8f); }
.nameplate { background: linear-gradient(#2a4fb0, #132a78); border-color: #ffd34d; }
.onb-back { background: radial-gradient(circle at 50% 30%, #2b5fd0, #0a1236 80%); }
.reveal-back { background: radial-gradient(circle at 50% 30%, rgba(43,95,208,.9), rgba(6,12,40,.96)); }
.toast { background: linear-gradient(#1a3a9a, #0e2066); border-color: var(--hi); }