← back to Model Wars
public/styles.css
251 lines
/* MODEL WARS — 2026 liquid-glass × medieval tournament × AAA fantasy UI */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Cinzel+Decorative:wght@700;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');
:root {
--bg:#07070b;
--bg2:#0d0e16;
--ink:#f3ecdc;
--muted:#9a94a8;
--gold:#e8c56a;
--gold-deep:#a9822f;
--silver:#c9ced8;
--ember:#ff6a2a;
--glass:rgba(22,22,32,.44);
--glass-brite:rgba(255,255,255,.06);
--stroke:rgba(232,197,106,.22);
--stroke-soft:rgba(255,255,255,.09);
--emerald:#2ecc71; --azure:#6aa8ff; --crimson:#e05a5a; --violet:#7c5cff;
--shadow:0 30px 80px rgba(0,0,0,.55);
--radius:20px;
}
* { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body {
background:
radial-gradient(1200px 700px at 15% -10%, rgba(124,92,255,.10), transparent 60%),
radial-gradient(1000px 600px at 100% 0%, rgba(232,197,106,.08), transparent 55%),
linear-gradient(180deg,var(--bg2),var(--bg));
color:var(--ink);
font-family:Inter,system-ui,sans-serif;
overflow-x:hidden;
-webkit-font-smoothing:antialiased;
}
/* fixed scene layers */
#embers, #torch { position:fixed; inset:0; z-index:0; pointer-events:none; }
#torch { mix-blend-mode:screen; }
.parallax {
position:fixed; left:0; right:0; bottom:0; z-index:0; pointer-events:none;
height:52vh; opacity:.5;
background:no-repeat bottom center / cover;
}
.vignette { position:fixed; inset:0; z-index:1; pointer-events:none;
box-shadow:inset 0 0 300px 60px rgba(0,0,0,.75); }
.wrap { position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:26px 22px 90px; }
/* ── header ─────────────────────────────────────────────── */
header.hero { text-align:center; padding:34px 0 10px; }
.crest-line { font-family:Cinzel; letter-spacing:.55em; font-size:12px; color:var(--gold);
text-transform:uppercase; opacity:.8; }
h1.wordmark {
font-family:'Cinzel Decorative',serif; font-weight:900;
font-size:clamp(44px,9vw,104px); line-height:.95; margin:.1em 0 .05em;
letter-spacing:.02em;
background:linear-gradient(180deg,#fff6dd 0%,var(--gold) 42%,var(--gold-deep) 100%);
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow:0 2px 40px rgba(232,197,106,.25);
filter:drop-shadow(0 6px 24px rgba(0,0,0,.6));
}
.subtitle { font-family:Cinzel; color:var(--silver); letter-spacing:.28em;
text-transform:uppercase; font-size:clamp(10px,1.6vw,13px); opacity:.85; }
.mode-flag {
display:inline-flex; gap:8px; align-items:center; margin-top:16px;
font-family:'JetBrains Mono',monospace; font-size:12px; padding:7px 14px;
border-radius:999px; border:1px solid var(--stroke); background:var(--glass);
backdrop-filter:blur(14px);
}
.mode-flag .dot { width:8px; height:8px; border-radius:50%; }
.mute { margin-left:10px; font-family:'JetBrains Mono',monospace; font-size:12px; padding:7px 12px;
border-radius:999px; border:1px solid var(--stroke); background:var(--glass); color:var(--ink);
backdrop-filter:blur(14px); cursor:pointer; transition:.2s; }
.mute:hover { border-color:var(--gold); }
.mute.muted { color:var(--muted); opacity:.7; }
.mode-live .dot { background:var(--emerald); box-shadow:0 0 12px var(--emerald); }
.mode-exh .dot { background:var(--ember); box-shadow:0 0 12px var(--ember); }
/* ── nav tabs ───────────────────────────────────────────── */
nav.tabs { display:flex; gap:8px; justify-content:center; margin:26px 0 8px; flex-wrap:wrap; }
.tab {
font-family:Cinzel; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
font-size:13px; color:var(--muted); padding:11px 20px; border-radius:14px;
border:1px solid transparent; cursor:pointer; background:transparent; transition:.25s;
}
.tab:hover { color:var(--ink); }
.tab.active { color:#1a1305; background:linear-gradient(180deg,#fbe6a6,var(--gold));
border-color:var(--gold-deep); box-shadow:0 8px 30px rgba(232,197,106,.28); }
/* ── glass panel base ───────────────────────────────────── */
.glass {
background:linear-gradient(180deg,var(--glass-brite),transparent), var(--glass);
border:1px solid var(--stroke-soft);
border-radius:var(--radius);
backdrop-filter:blur(20px) saturate(1.2);
-webkit-backdrop-filter:blur(20px) saturate(1.2);
box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
position:relative; overflow:hidden;
}
.glass::before { /* refractive sheen */
content:''; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.06) 45%,transparent 60%);
}
.panel-title { font-family:Cinzel; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
font-size:13px; color:var(--gold); margin:0 0 14px; }
/* ── champion selectors ─────────────────────────────────── */
.combatants { display:grid; grid-template-columns:1fr 64px 1fr; gap:14px; align-items:stretch; margin-top:14px; }
.vs-emblem { display:grid; place-items:center; font-family:'Cinzel Decorative'; font-size:26px;
color:var(--gold); text-shadow:0 0 24px rgba(232,197,106,.4); }
.fighter { padding:18px; }
.fighter select {
width:100%; margin-top:10px; font-family:Cinzel; font-weight:700; font-size:15px;
color:var(--ink); background:rgba(0,0,0,.35); border:1px solid var(--stroke);
border-radius:12px; padding:11px 12px; cursor:pointer; appearance:none;
}
.fighter .portrait { width:100%; aspect-ratio:1; object-fit:cover; border-radius:14px;
border:1px solid var(--stroke); margin-bottom:8px; display:block; }
.fighter .crest { font-size:38px; line-height:1; }
.fighter .cname { font-family:Cinzel; font-weight:900; font-size:22px; margin-top:8px; }
.fighter .ctitle { color:var(--muted); font-size:13px; font-style:italic; }
.avail { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-family:'JetBrains Mono';
margin-top:8px; color:var(--muted); }
.avail .d { width:7px; height:7px; border-radius:50%; }
.avail.on .d { background:var(--emerald); box-shadow:0 0 8px var(--emerald); }
.avail.off .d { background:var(--ember); }
.fighter.side-a { border-left:2px solid color-mix(in srgb,var(--emerald),transparent 40%); }
.fighter.side-b { border-right:2px solid color-mix(in srgb,var(--crimson),transparent 40%); }
/* ── battle mode cards ──────────────────────────────────── */
.modes { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-top:16px; }
.mode-card { padding:16px 12px; text-align:center; cursor:pointer; transition:.22s; border:1px solid var(--stroke-soft); }
.mode-card:hover { transform:translateY(-3px); border-color:var(--stroke); }
.mode-card.sel { border-color:var(--gold); box-shadow:0 10px 34px rgba(232,197,106,.22), inset 0 0 0 1px var(--gold); }
.mode-card .mi { font-size:30px; }
.mode-card .mn { font-family:Cinzel; font-weight:700; letter-spacing:.08em; font-size:13px; margin-top:8px; text-transform:uppercase; }
.mode-card .md { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.35; min-height:2.4em; }
/* ── prompt + action ────────────────────────────────────── */
.prompt-row { margin-top:16px; padding:16px; }
.prompt-row label { font-family:Cinzel; font-size:12px; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; }
textarea#prompt {
width:100%; margin-top:8px; min-height:74px; resize:vertical; color:var(--ink);
background:rgba(0,0,0,.35); border:1px solid var(--stroke); border-radius:12px; padding:12px;
font-family:Inter; font-size:14px; line-height:1.5;
}
.actions { display:flex; gap:12px; align-items:center; margin-top:14px; flex-wrap:wrap; }
.btn {
font-family:Cinzel; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:14px;
padding:14px 30px; border-radius:14px; cursor:pointer; border:1px solid var(--gold-deep);
color:#1a1305; background:linear-gradient(180deg,#fce9ad,var(--gold));
box-shadow:0 12px 34px rgba(232,197,106,.32); transition:.2s;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 16px 44px rgba(232,197,106,.42); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn.ghost { background:transparent; color:var(--ink); border-color:var(--stroke); box-shadow:none; }
.hint { color:var(--muted); font-size:12px; }
/* ── battle stage ───────────────────────────────────────── */
.stage-wrap { margin-top:18px; padding:0; }
#stage { display:block; width:100%; height:340px; border-radius:var(--radius); }
.stage-banner { position:absolute; top:12px; left:0; right:0; text-align:center;
font-family:Cinzel; letter-spacing:.2em; text-transform:uppercase; font-size:13px; color:var(--gold);
text-shadow:0 2px 20px rgba(0,0,0,.8); pointer-events:none; }
/* ── results ────────────────────────────────────────────── */
.results { margin-top:18px; display:none; }
.winner-banner { text-align:center; padding:18px; margin-bottom:14px;
font-family:'Cinzel Decorative'; font-size:clamp(20px,4vw,34px); font-weight:900; }
.winner-banner .sub { font-family:Inter; font-size:13px; color:var(--muted); letter-spacing:.04em; margin-top:4px; text-transform:none; }
.score-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.resp-card { padding:18px; }
.resp-head { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.resp-head .n { font-family:Cinzel; font-weight:900; font-size:19px; }
.resp-head .badge { font-family:'JetBrains Mono'; font-size:11px; padding:4px 9px; border-radius:8px;
border:1px solid var(--stroke); color:var(--gold); }
.metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0; }
.metric { background:rgba(0,0,0,.28); border:1px solid var(--stroke-soft); border-radius:10px; padding:9px 10px; }
.metric .k { font-size:10px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; }
.metric .v { font-family:'JetBrains Mono'; font-size:15px; margin-top:3px; }
.aiscore { display:flex; align-items:baseline; gap:8px; margin-top:6px; }
.aiscore .big { font-family:'Cinzel Decorative'; font-size:40px; font-weight:900; color:var(--gold); }
.aiscore.sim .big { color:var(--ember); }
.aiscore .of { color:var(--muted); font-size:14px; }
.aiscore.none { padding:10px 0; }
.aiscore.none .of { color:var(--ember); font-size:13px; line-height:1.5; }
.resp-head .badge.sim { color:var(--ember); border-color:color-mix(in srgb,var(--ember),transparent 55%); }
.dims { margin-top:10px; }
.dim { display:grid; grid-template-columns:130px 1fr 40px; gap:8px; align-items:center; margin:5px 0; font-size:12px; }
.dim .bar { height:7px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.dim .bar i { display:block; height:100%; border-radius:99px;
background:linear-gradient(90deg,var(--gold-deep),var(--gold)); }
.dim.risk .bar i { background:linear-gradient(90deg,#8a2b2b,var(--crimson)); }
.dim .num { text-align:right; font-family:'JetBrains Mono'; color:var(--muted); }
.rationale { font-size:12px; color:var(--muted); font-style:italic; margin-top:10px; line-height:1.5; }
.objective-note { font-size:11px; color:var(--muted); margin-top:8px; }
.objective-note b { color:var(--azure); }
.vote-row { display:flex; gap:12px; align-items:center; justify-content:center; margin-top:16px; flex-wrap:wrap; }
.vote-row .btn { padding:11px 22px; font-size:12px; }
.people { text-align:center; font-size:12px; color:var(--muted); margin-top:8px; }
.response-full { display:none; white-space:pre-wrap; font-family:'JetBrains Mono'; font-size:12.5px;
line-height:1.6; color:var(--ink); background:rgba(0,0,0,.35); border:1px solid var(--stroke-soft);
border-radius:10px; padding:14px; margin-top:10px; max-height:340px; overflow:auto; }
/* ── King's Table ───────────────────────────────────────── */
.kings-table { padding:20px; overflow:auto; }
table.ladder { width:100%; border-collapse:collapse; font-size:13px; }
table.ladder th { font-family:Cinzel; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
font-size:11px; color:var(--gold); text-align:left; padding:10px 10px; border-bottom:1px solid var(--stroke); white-space:nowrap; }
table.ladder td { padding:11px 10px; border-bottom:1px solid rgba(255,255,255,.05); white-space:nowrap; }
table.ladder tr:hover td { background:rgba(255,255,255,.03); }
.champcell { display:flex; align-items:center; gap:10px; }
.champcell .cr { font-size:20px; }
.champcell .avatar { width:34px; height:34px; border-radius:9px; object-fit:cover; border:1px solid var(--stroke); }
.champcell .nm { font-family:Cinzel; font-weight:700; }
.champcell .tt { color:var(--muted); font-size:11px; font-style:italic; }
.elo { font-family:'JetBrains Mono'; font-size:16px; color:var(--gold); }
.rank1 td { background:linear-gradient(90deg,rgba(232,197,106,.12),transparent); }
.crown { display:inline-block; animation:crownFloat 3s ease-in-out infinite; filter:drop-shadow(0 0 8px rgba(232,197,106,.6)); }
@keyframes crownFloat { 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-4px) rotate(3deg);} }
.streak.pos { color:var(--emerald); } .streak.neg { color:var(--crimson); }
.delta.pos { color:var(--emerald); } .delta.neg { color:var(--crimson); }
/* ── add champion ───────────────────────────────────────── */
.addrow { display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; align-items:center; }
.addrow input, .addrow select { background:rgba(0,0,0,.35); border:1px solid var(--stroke); color:var(--ink);
border-radius:10px; padding:9px 11px; font-family:Inter; font-size:13px; }
.view { display:none; }
.view.active { display:block; animation:fade .4s ease; }
@keyframes fade { from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
footer { text-align:center; color:var(--muted); font-size:12px; margin-top:40px; line-height:1.7; }
footer a { color:var(--gold); text-decoration:none; }
.toast { position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
background:var(--glass); border:1px solid var(--stroke); backdrop-filter:blur(16px);
padding:12px 20px; border-radius:12px; font-size:13px; z-index:50; opacity:0; transition:.3s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media (max-width:820px){
.modes { grid-template-columns:repeat(2,1fr); }
.combatants { grid-template-columns:1fr; }
.vs-emblem { display:none; }
.score-grid { grid-template-columns:1fr; }
.dim { grid-template-columns:110px 1fr 34px; }
}