/* EMBERFALL UI — all sizes in rem; html font-size == --u (scales 1280x720 .. 4K) */
:root {
--us: 1;
--u: calc(clamp(10px, min(1.1vw, 1.95vh), 32px) * var(--us));
--serif: "Cinzel", "Trajan Pro", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
--sans: "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
--gold: #e6bf6a; --gold-hi: #fbe7ae; --gold-d: #8a6a34; --bronze: #5e4522;
--ember: #ff7a2a; --ember-hi: #ffb060;
--ink: #ece6d6; --dim: #9d9886; --faint: #6c6a60;
--blue: #46b0ff; --red: #ff5560; --green: #4fd36a; --mana: #3a8dff;
--panel: linear-gradient(180deg, rgba(26,30,42,.9), rgba(10,12,18,.94));
}
html { font-size: var(--u); }
.ef-ui { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
.ef-ui *, .ef-ui *::before, .ef-ui *::after { box-sizing: border-box; }
.ef-ui b { font-weight: 700; }
.ef-ui button { font-family: inherit; color: inherit; cursor: pointer; }
.ef-ui input { font-family: inherit; }
.ef-ui > * { position: absolute; }
/* layers */
.ef-ui > .overlay { inset: 0; z-index: 1; pointer-events: none; }
.hud { inset: 0; z-index: 2; pointer-events: none; display: none; }
.minimap { z-index: 3; } .killfeed, .banners, .toasts { z-index: 4; } .chat { z-index: 5; } .sb { z-index: 6; } .shop { z-index: 7; }
.endscr { z-index: 8; } .menu { z-index: 9; } .settings { z-index: 10; } .tip { z-index: 50; }
.hud.on { display: block; }
.hud > * { position: absolute; z-index: 1; }
/* ---------- shared widgets ---------- */
.panel, .panel-lite {
background: var(--panel); border-radius: .45rem; position: relative;
box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(138,106,52,.9), 0 0 0 3px #000, inset 0 1px 0 rgba(255,238,190,.16), inset 0 0 1.4rem rgba(0,0,0,.55), 0 .6rem 2rem rgba(0,0,0,.55);
backdrop-filter: blur(6px);
}
.panel::before, .panel::after { content: ''; position: absolute; width: .9rem; height: .9rem; border: 2px solid var(--gold); pointer-events: none; opacity: .9; }
.panel::before { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: .45rem; }
.panel::after { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: .45rem; }
.panel-lite { box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(138,106,52,.55), inset 0 0 .8rem rgba(0,0,0,.5); }
.ph { font-family: var(--serif); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 1rem 0 .45rem; display: flex; align-items: center; gap: .6rem; }
.ph::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-d), transparent); }
.ph:first-child { margin-top: 0; }
.btn { background: linear-gradient(180deg, #3a2f20, #1b150d); border: 1px solid var(--gold-d); border-radius: .3rem; padding: .5rem 1.1rem; font-family: var(--serif); letter-spacing: .1em; font-size: .8rem; text-transform: uppercase; color: var(--gold-hi); box-shadow: inset 0 1px 0 rgba(255,230,170,.25), 0 .15rem .4rem rgba(0,0,0,.5); transition: filter .15s, transform .1s; }
.btn:hover:not(:disabled) { filter: brightness(1.3); } .btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn.dis { opacity: .45; cursor: default; }
.btn.danger { background: linear-gradient(180deg, #5a2024, #2a0e10); border-color: #a04048; color: #ffc8c8; }
.seg { display: flex; border: 1px solid var(--gold-d); border-radius: .35rem; overflow: hidden; background: rgba(0,0,0,.4); }
.seg button { flex: 1; padding: .45rem .5rem; background: transparent; border: 0; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border-right: 1px solid rgba(138,106,52,.4); transition: background .15s, color .15s; }
.seg button:last-child { border-right: 0; } .seg button:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.seg button.on { background: linear-gradient(180deg, rgba(255,150,60,.35), rgba(160,70,20,.35)); color: var(--gold-hi); box-shadow: inset 0 0 .6rem rgba(255,140,50,.35); }
.seg .az.on { background: linear-gradient(180deg, rgba(70,176,255,.4), rgba(20,70,130,.4)); box-shadow: inset 0 0 .6rem rgba(70,176,255,.35); } .seg .cr.on { background: linear-gradient(180deg, rgba(255,85,96,.4), rgba(130,25,35,.4)); box-shadow: inset 0 0 .6rem rgba(255,85,96,.35); }
kbd { font-family: var(--sans); font-size: .68rem; font-weight: 700; padding: .12rem .4rem; border-radius: .25rem; background: linear-gradient(180deg, #2c2f3a, #14161c); border: 1px solid #484c5a; color: var(--gold-hi); box-shadow: 0 1px 0 #000; white-space: nowrap; }
.ico { background-size: 100% 100%; background-repeat: no-repeat; border-radius: .4rem; }
.port { background-size: cover; background-position: center; }
.bot { font-style: normal; font-size: .6rem; font-weight: 800; letter-spacing: .08em; padding: .08rem .3rem; border-radius: .2rem; background: rgba(120,130,150,.25); color: #aab; border: 1px solid rgba(170,180,200,.3); }
.g-coin { display: inline-block; width: .95em; height: .95em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4b8, #f0b830 45%, #9a6a10); box-shadow: 0 0 0 1px #5a3c08, inset 0 -1px 2px rgba(0,0,0,.4); vertical-align: -.12em; }
.g-tower { display: inline-block; width: .85rem; height: 1rem; background: currentColor; clip-path: polygon(12% 100%, 12% 42%, 0 42%, 0 0, 26% 0, 26% 16%, 40% 16%, 40% 0, 60% 0, 60% 16%, 74% 16%, 74% 0, 100% 0, 100% 42%, 88% 42%, 88% 100%); }
.g-cs::before { content: 'CS'; font-size: .62rem; font-weight: 800; letter-spacing: .06em; color: var(--dim); }
/* ---------- tooltip ---------- */
.tip { left: 0; top: 0; max-width: 22rem; min-width: 12rem; padding: .7rem .85rem; font-size: .82rem; line-height: 1.45; pointer-events: none; opacity: 0; transition: opacity .12s; background: linear-gradient(180deg, rgba(30,34,46,.97), rgba(10,12,18,.98)); border-radius: .4rem; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-d), 0 .8rem 2rem rgba(0,0,0,.7); }
.tip.on { opacity: 1; }
.t-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .25rem; }
.t-h b { font-family: var(--serif); font-size: 1rem; color: var(--gold-hi); letter-spacing: .04em; } .t-h span { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.t-m { color: var(--dim); font-size: .74rem; margin-bottom: .35rem; } .t-m b { color: #cfe; }
.t-w { color: #ff9c70; font-size: .74rem; margin-bottom: .3rem; font-weight: 600; }
.t-d { color: #d6d0c0; } .t-d b.pas { color: var(--ember-hi); }
.seq i { color: var(--faint); font-style: normal; margin: 0 .05em; } .seq b, .t-m b, .am b { font-weight: 600; } .seq b { color: #a9a590; } .seq b.cur, b.cur { color: #ffe08a; text-shadow: 0 0 .5rem rgba(255,190,70,.6); font-weight: 800; }
.t-st { margin: .25rem 0 .4rem; display: grid; gap: .1rem; } .st-v { color: #8fe3a2; font-weight: 700; }
.t-gold { margin-top: .4rem; color: #ffd25a; font-weight: 700; font-size: .9rem; }
/* ---------- TOP BAR ---------- */
.topbar { top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: stretch; filter: drop-shadow(0 .3rem .5rem rgba(0,0,0,.6)); }
.tb-team { display: flex; align-items: center; gap: .9rem; padding: 0 1.1rem; height: 2.5rem; background: linear-gradient(180deg, rgba(20,24,34,.92), rgba(8,10,15,.92)); border-bottom: 2px solid var(--gold-d); min-width: 9rem; }
.tb-team.t0 { justify-content: flex-end; border-radius: 0 0 0 .8rem; box-shadow: inset 0 -.5rem 1rem -.5rem rgba(70,176,255,.55); color: var(--blue); }
.tb-team.t1 { justify-content: flex-start; border-radius: 0 0 .8rem 0; box-shadow: inset 0 -.5rem 1rem -.5rem rgba(255,85,96,.55); color: var(--red); }
.tb-kills b { font-size: 1.5rem; font-weight: 800; color: #fff; text-shadow: 0 0 .6rem currentColor; font-variant-numeric: tabular-nums; }
.tb-towers { display: flex; align-items: center; gap: .35rem; font-size: .95rem; opacity: .9; } .tb-towers b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tb-clock { min-width: 6rem; display: flex; align-items: center; justify-content: center; height: 2.9rem; margin: 0 -.2rem; z-index: 1; background: linear-gradient(180deg, #2b2216, #0d0b08); border: 2px solid var(--gold-d); border-top: 0; border-radius: 0 0 .9rem .9rem; box-shadow: inset 0 0 1rem rgba(0,0,0,.7), inset 0 -1px 0 rgba(255,220,150,.25); }
.tb-clock span { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--gold-hi); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tb-me { top: .7rem; left: .8rem; display: flex; gap: .9rem; align-items: center; padding: .4rem .8rem; background: rgba(10,12,18,.72); border: 1px solid rgba(138,106,52,.6); border-radius: .35rem; font-size: .85rem; }
.tb-me .kda b { font-size: 1.02rem; } .tb-me .kda b.d { color: #ff9a9a; } .tb-me .cs b { margin-left: .3rem; } .tb-me .net { color: var(--dim); font-size: .72rem; } .tb-me .net b { color: #b6e8c0; } .tb-me .net em { margin: 0 .3rem; font-style: normal; }
/* ---------- BOTTOM FRAME ---------- */
.frame { left: 50%; bottom: .7rem; transform: translateX(-50%); display: flex; gap: .7rem; padding: .7rem .8rem .7rem .7rem; pointer-events: auto; background: linear-gradient(180deg, rgba(30,26,22,.92), rgba(9,9,12,.96)); border-radius: .6rem; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-d), 0 0 0 3px #000, inset 0 1px 0 rgba(255,230,170,.2), inset 0 0 1.6rem rgba(0,0,0,.6), 0 .8rem 2.4rem rgba(0,0,0,.7); }
.frame::before, .frame::after { content: ''; position: absolute; top: -.35rem; width: 3rem; height: .35rem; background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-hi) 50%, var(--gold) 70%, transparent); border-radius: .2rem .2rem 0 0; }
.frame::before { left: 14%; } .frame::after { right: 14%; }
.f-port { position: relative; width: 7.2rem; height: 7.2rem; flex: none; align-self: center; }
.xp-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#f0b84a 0deg, rgba(255,255,255,.08) 0); box-shadow: 0 0 0 2px #000, 0 0 1rem rgba(240,184,74,.25); }
.f-portin { position: absolute; inset: .35rem; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold-d), inset 0 0 1rem rgba(0,0,0,.6); background: #0a0c12; }
.f-portin .port { width: 100%; height: 100%; }
.lvl { position: absolute; left: 50%; bottom: -.55rem; transform: translateX(-50%); min-width: 1.9rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; padding: 0 .3rem; font-weight: 800; font-size: .95rem; background: linear-gradient(180deg, #3a3020, #14100a); border: 1.5px solid var(--gold); border-radius: .5rem; color: var(--gold-hi); box-shadow: 0 0 0 1px #000, 0 .2rem .4rem rgba(0,0,0,.6); }
.f-mid { width: 27rem; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem; }
.abil-bar { display: flex; align-items: flex-end; gap: .45rem; padding: .85rem .1rem .75rem; }
.passive { width: 2.1rem; height: 2.1rem; flex: none; opacity: .0; margin-right: .35rem; } .passive.on { opacity: 1; }
.passive .ico { width: 100%; height: 100%; box-shadow: 0 0 0 1px #000, 0 0 .5rem rgba(0,0,0,.6); } .passive { pointer-events: auto; border-radius: 50%; }
.slots { display: flex; gap: .55rem; } .spells { display: flex; gap: .4rem; margin-left: auto; }
.slot { position: relative; width: 3.45rem; height: 3.45rem; flex: none; pointer-events: auto; border-radius: .45rem; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--bronze), 0 .25rem .5rem rgba(0,0,0,.5); transition: box-shadow .2s; }
.slot.sm { width: 2.5rem; height: 2.5rem; }
.slot .ico { position: absolute; inset: 0; transition: filter .2s; }
.slot.ult { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-d), 0 0 .8rem rgba(255,130,40,.25), 0 .25rem .5rem rgba(0,0,0,.5); }
.slot.ready { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 .7rem rgba(255,190,90,.35), 0 .25rem .5rem rgba(0,0,0,.5); }
.slot.locked .ico { filter: grayscale(1) brightness(.45); }
.slot.nomana .ico { filter: saturate(.55) brightness(.5) hue-rotate(-10deg); } .slot.nomana { box-shadow: 0 0 0 1px #000, 0 0 0 2px #2b4c8a, 0 0 .6rem rgba(58,141,255,.35); }
.slot.cooling .ico { filter: brightness(.65) saturate(.7); }
.slot.silenced::after { content: ''; position: absolute; inset: 0; border-radius: .45rem; background: linear-gradient(45deg, transparent 46%, rgba(255,70,70,.85) 47% 53%, transparent 54%), rgba(0,0,0,.5); }
.slot .cd { position: absolute; inset: 0; border-radius: .45rem; pointer-events: none; }
.slot .cdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: #fff; text-shadow: 0 0 .3rem #000, 0 1px 2px #000, 0 0 .8rem #000; font-variant-numeric: tabular-nums; pointer-events: none; }
.slot.sm .cdt { font-size: .95rem; }
.slot .key { position: absolute; left: -.2rem; top: -.35rem; min-width: 1.05rem; height: 1.05rem; padding: 0 .2rem; border-radius: .25rem; background: linear-gradient(180deg, #403525, #17120b); border: 1px solid var(--gold-d); font-size: .66rem; font-weight: 800; color: var(--gold-hi); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px #000; }
.slot .cost { position: absolute; right: .2rem; bottom: .1rem; font-size: .66rem; font-weight: 800; color: #8fc4ff; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
.slot.nomana .cost { color: #ff8a8a; }
.slot .pips { position: absolute; left: 50%; bottom: -.55rem; transform: translateX(-50%); display: flex; gap: .14rem; }
.slot .pips i { width: .46rem; height: .2rem; background: #20222a; border: 1px solid #000; border-radius: .06rem; box-shadow: 0 0 0 .5px rgba(138,106,52,.55); }
.slot .pips i.on { background: linear-gradient(180deg, #ffe9a0, #d8a030); box-shadow: 0 0 .35rem rgba(255,200,80,.8); }
.slot .pulse { position: absolute; inset: 0; border-radius: .45rem; pointer-events: none; }
.slot.flash .pulse { animation: flash .6s ease-out; } .slot.casted { animation: casted .25s ease-out; }
@keyframes flash { 0% { box-shadow: inset 0 0 1.2rem 0.4rem rgba(255,255,255,.95), 0 0 1.2rem 0.2rem rgba(255,210,120,.9); background: rgba(255,255,255,.55); } 100% { box-shadow: inset 0 0 0 0 transparent, 0 0 0 0 transparent; background: transparent; } }
@keyframes casted { 0% { transform: scale(1.12); filter: brightness(1.5); } 100% { transform: scale(1); } }
.plus { position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%) scale(0); width: 1.4rem; height: 1.4rem; border-radius: 50%; border: 1.5px solid #fff3c0; background: radial-gradient(circle at 35% 30%, #ffe58a, #e49a1c 60%, #8a5208); color: #3a2200; font-size: 1.05rem; font-weight: 900; line-height: 1; padding: 0 0 .1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; pointer-events: none; opacity: 0; transition: transform .2s cubic-bezier(.3,1.6,.5,1), opacity .15s; box-shadow: 0 0 0 1px #000, 0 0 .8rem rgba(255,200,70,.8); }
.plus.on { transform: translateX(-50%) scale(1); opacity: 1; pointer-events: auto; animation: plusPulse 1s ease-in-out infinite; } .plus:hover { filter: brightness(1.2); }
@keyframes plusPulse { 50% { box-shadow: 0 0 0 1px #000, 0 0 1.3rem rgba(255,220,100,1); } }
.slot.canlvl .ico { box-shadow: 0 0 0 2px #ffd25a, 0 0 .8rem rgba(255,210,90,.6); }
.bar { position: relative; height: 1.45rem; background: #07090d; border-radius: .25rem; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(94,69,34,.9), inset 0 0 .4rem rgba(0,0,0,.9); overflow: hidden; pointer-events: auto; }
.bar.mp { height: 1.1rem; }
.bar i { position: absolute; top: 0; bottom: 0; left: 0; }
.bar .fill { width: 100%; transition: filter .2s; } .bar.hp .fill { background: linear-gradient(180deg, #7bf08e 0%, #36b556 45%, #1b7a38 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.bar.hp.low .fill { background: linear-gradient(180deg, #ff8a7a, #d93a38 50%, #8a1620); animation: lowhp 1s ease-in-out infinite; }
@keyframes lowhp { 50% { filter: brightness(1.35); } }
.bar.mp .fill { background: linear-gradient(180deg, #7ab8ff 0%, #3a78e0 50%, #1f48a8 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.bar .lag { background: rgba(255,255,255,.8); } .bar .shield { background: linear-gradient(180deg, #f4f6fb, #aeb6c8); box-shadow: inset 0 1px 0 #fff; }
.bar .ticks { right: 0; background-image: linear-gradient(90deg, transparent calc(100% - 1px), rgba(0,0,0,.5) 0); background-size: 10% 100%; pointer-events: none; }
.bar .bt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; font-variant-numeric: tabular-nums; }
.bar.mp .bt { font-size: .7rem; } .bar .br { position: absolute; right: .35rem; top: 0; bottom: 0; display: flex; align-items: center; font-size: .66rem; font-weight: 600; color: rgba(210,255,220,.8); text-shadow: 0 1px 2px #000; } .bar.mp .br { color: rgba(190,220,255,.8); }
.f-right { display: flex; flex-direction: column; justify-content: center; gap: .4rem; }
.items { display: grid; grid-template-columns: repeat(3, 2.7rem); gap: .3rem; padding: .35rem; background: rgba(0,0,0,.35); border-radius: .35rem; box-shadow: inset 0 0 .5rem #000, 0 0 0 1px rgba(94,69,34,.8); }
.islot { position: relative; width: 2.7rem; height: 2.7rem; border-radius: .35rem; background: radial-gradient(circle, #1a1d27, #0a0c11); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 0 1px #000; pointer-events: auto; }
.islot .ico { position: absolute; inset: 0; } .islot.full { box-shadow: 0 0 0 1px #000; } .islot.sel { box-shadow: 0 0 0 2px var(--gold), 0 0 .6rem rgba(255,200,90,.5); }
.gold { display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .3rem .6rem; font-size: 1.1rem; font-weight: 800; color: #ffd25a; background: rgba(0,0,0,.4); border-radius: .35rem; box-shadow: inset 0 0 .5rem #000, 0 0 0 1px rgba(94,69,34,.8); pointer-events: auto; cursor: pointer; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; }
.gold:hover { filter: brightness(1.2); }
.hud > .stats { position: absolute; left: .8rem; bottom: .8rem; width: 9.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .15rem .7rem; padding: .55rem .7rem; font-size: .76rem; pointer-events: auto; background: linear-gradient(180deg, rgba(20,22,30,.82), rgba(8,9,13,.86)); }
.sv { display: flex; justify-content: space-between; align-items: baseline; } .sv span { color: var(--dim); font-weight: 700; font-size: .64rem; letter-spacing: .06em; } .sv b { font-variant-numeric: tabular-nums; color: #f2ecd8; }
.buffs { left: 50%; bottom: 10.6rem; transform: translateX(-50%); display: flex; gap: .3rem; align-items: flex-end; }
.buff { position: relative; width: 2.1rem; height: 2.1rem; pointer-events: auto; border-radius: .35rem; box-shadow: 0 0 0 1.5px #1d6a35, 0 0 .5rem rgba(60,220,110,.35); } .buff.bad { box-shadow: 0 0 0 1.5px #8a2630, 0 0 .5rem rgba(255,70,80,.4); }
.buff .ico { position: absolute; inset: 0; } .buff .cd { position: absolute; inset: 0; border-radius: .35rem; }
.buff .bt { position: absolute; left: 0; right: 0; bottom: -.9rem; text-align: center; font-size: .62rem; font-weight: 700; color: #ddd; text-shadow: 0 1px 2px #000; } .buff .bs { position: absolute; right: .1rem; top: 0; font-size: .7rem; color: #fff; text-shadow: 0 0 3px #000, 0 1px 1px #000; font-weight: 800; }
.bars-top { left: 50%; bottom: 13.2rem; transform: translateX(-50%); width: 16rem; }
.recall, .castbar { opacity: 0; transition: opacity .2s; text-align: center; margin-top: .3rem; } .recall.on, .castbar.on { opacity: 1; }
.rc-t, .cb-t { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: #aee0ff; margin-bottom: .2rem; text-shadow: 0 1px 2px #000; } .cb-t { color: var(--gold-hi); }
.rc-bar, .cb-bar { height: .55rem; background: #07090d; border-radius: .3rem; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--bronze); overflow: hidden; }
.rc-bar i, .cb-bar i { display: block; height: 100%; width: 0; background: linear-gradient(180deg, #a8e4ff, #3a9ae8); box-shadow: 0 0 .6rem rgba(120,200,255,.8); } .cb-bar i { background: linear-gradient(180deg, #ffe49a, #e08a20); box-shadow: 0 0 .6rem rgba(255,180,70,.8); }
/* death */
.hud > .death { inset: 0; z-index: 0; display: none; pointer-events: none; }
.death.on { display: flex; align-items: center; justify-content: center; backdrop-filter: grayscale(.92) brightness(.62) contrast(1.08); background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0) 30%, rgba(20,0,0,.7) 100%); animation: fadein .6s; }
.death-in { text-align: center; margin-top: -8vh; text-shadow: 0 .2rem 1rem #000; } .d-t { font-family: var(--serif); letter-spacing: .4em; font-size: 1.3rem; color: #d8c8b0; } .d-n { font-family: var(--serif); font-size: 6.5rem; font-weight: 700; line-height: 1.05; color: #fff; text-shadow: 0 0 2rem rgba(255,90,60,.5), 0 .3rem 1rem #000; } .d-s { letter-spacing: .3em; text-transform: uppercase; font-size: .8rem; color: #b8aa98; }
@keyframes fadein { from { opacity: 0; } }
/* ---------- MINIMAP ---------- */
.minimap { right: .8rem; bottom: .8rem; width: 17.5rem; aspect-ratio: 1; display: none; pointer-events: auto; border-radius: .28rem; background: linear-gradient(145deg, #41444c, #1b1d23 38%, #2a2c33 62%, #101216); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 2px rgba(0,0,0,.45), 0 .6rem 1.6rem rgba(0,0,0,.7); }
.minimap.lg { width: min(25rem, calc(50vw - 24.6rem)); min-width: 17.5rem; }
.minimap.on { display: block; } .minimap canvas { position: absolute; left: .32rem; top: .32rem; width: calc(100% - .64rem); height: calc(100% - .64rem); border-radius: .1rem; cursor: crosshair; background: #0d1015; }
.mm-shade { position: absolute; inset: .32rem; border-radius: .1rem; pointer-events: none; box-shadow: inset 0 0 0 1px #000, inset 0 0 .5rem rgba(0,0,0,.6); }
.mm-corner { position: absolute; width: .95rem; height: .95rem; border: 2px solid var(--gold-d); pointer-events: none; filter: drop-shadow(0 0 1px #000); } .mm-corner.a { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-color: var(--gold); } .mm-corner.b { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-color: var(--gold); } .mm-corner.c { top: -2px; right: -2px; border-left: 0; border-bottom: 0; } .mm-corner.d { bottom: -2px; left: -2px; border-right: 0; border-top: 0; }
.mm-size { position: absolute; right: 100%; top: 0; margin-right: .3rem; width: 1.35rem; height: 1.35rem; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; line-height: 1; color: var(--gold); background: linear-gradient(180deg, #2c2f37, #121419); border: 1px solid #000; border-radius: .2rem; box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 .15rem .4rem rgba(0,0,0,.6); opacity: .6; } .mm-size:hover { opacity: 1; color: var(--gold-hi); }
/* ---------- KILL FEED / BANNERS / TOASTS ---------- */
.killfeed { top: .8rem; right: .8rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-end; pointer-events: none; }
.kf { display: flex; align-items: center; gap: .5rem; padding: .25rem .6rem .25rem .3rem; background: linear-gradient(90deg, rgba(10,12,18,.2), rgba(10,12,18,.85) 30%); border-right: 3px solid var(--gold-d); border-radius: .3rem; font-size: .82rem; font-weight: 600; animation: kfin .3s ease-out; transition: opacity .5s, transform .5s; flex-wrap: wrap; justify-content: flex-end; }
.kf.mk { border-right-color: #6bff93; background: linear-gradient(90deg, rgba(20,80,40,.1), rgba(14,50,28,.9) 30%); } .kf.mv { border-right-color: #ff5a5a; background: linear-gradient(90deg, rgba(90,20,20,.1), rgba(60,14,14,.9) 30%); }
.kf.out { opacity: 0; transform: translateX(1rem); } .kf small { width: 100%; text-align: right; color: var(--dim); font-size: .68rem; font-weight: 500; }
.kside { display: flex; align-items: center; gap: .35rem; } .kside img { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px currentColor; background: #111; } .kside.a { color: var(--blue); } .kside.e { color: var(--red); } .kside.n { color: #ccc; } .kside span { color: #f2efe6; } .exec { font-size: 1.1rem; }
.karrow { width: 1.2rem; height: .7rem; background: var(--gold); clip-path: polygon(0 35%, 55% 35%, 55% 0, 100% 50%, 55% 100%, 55% 65%, 0 65%); }
@keyframes kfin { from { opacity: 0; transform: translateX(2rem); } }
.banners { top: 17vh; left: 50%; transform: translateX(-50%); width: 60vw; text-align: center; pointer-events: none; }
.banner { animation: banin .5s cubic-bezier(.2,1.3,.4,1); transition: opacity .4s, transform .4s; } .banner.out { opacity: 0; transform: translateY(-.6rem); }
.bn-t { font-family: var(--serif); font-weight: 800; font-size: 2.5rem; letter-spacing: .22em; padding-left: .22em; background: linear-gradient(180deg, #fff6d0 10%, #f3c765 50%, #b87a22 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .15rem .2rem rgba(0,0,0,.9)) drop-shadow(0 0 1rem rgba(255,160,50,.45)); }
.bn-s { margin-top: .2rem; font-size: .95rem; letter-spacing: .14em; color: #e6dcc4; text-shadow: 0 1px 3px #000; text-transform: uppercase; }
.bn-l { display: block; width: 24rem; max-width: 80%; height: 2px; margin: .5rem auto 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.banner.bad .bn-t { background-image: linear-gradient(180deg, #ffe0dc 10%, #ff6a5a 55%, #8a1a1a 95%); filter: drop-shadow(0 .15rem .2rem #000) drop-shadow(0 0 1rem rgba(255,50,40,.5)); } .banner.bad .bn-l { background: linear-gradient(90deg, transparent, #ff5a50, transparent); }
.banner.small .bn-t { font-size: 1.3rem; letter-spacing: .16em; } .banner.small .bn-l { width: 14rem; opacity: .6; } .banner.big .bn-t { font-size: 3.4rem; }
.banner.win .bn-t, .banner.lose .bn-t { font-size: 5rem; letter-spacing: .3em; } .banner.lose .bn-t { background-image: linear-gradient(180deg, #e8eef8 10%, #8a9ab8 55%, #404c64 95%); filter: drop-shadow(0 .2rem .3rem #000) drop-shadow(0 0 1.4rem rgba(120,150,220,.5)); }
@keyframes banin { from { opacity: 0; transform: scale(1.6); } 60% { opacity: 1; } }
.toasts { left: 50%; bottom: 15.5rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; }
.toast { padding: .4rem 1rem; background: linear-gradient(180deg, rgba(90,24,28,.92), rgba(40,10,12,.94)); border: 1px solid #a04048; border-radius: .3rem; font-size: .85rem; font-weight: 600; color: #ffd0d0; box-shadow: 0 .3rem 1rem rgba(0,0,0,.5); animation: toastin .25s ease-out; transition: opacity .5s; } .toast.out { opacity: 0; }
@keyframes toastin { from { opacity: 0; transform: translateY(.6rem); } }
/* ---------- CHAT ---------- */
.chat { left: .8rem; bottom: 11.4rem; width: 26rem; display: none; pointer-events: none; } .chat.on { display: block; }
.msgs { max-height: 10rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; font-size: .82rem; line-height: 1.35; text-shadow: 0 1px 3px #000, 0 0 4px #000; }
.chat.open .msgs { overflow-y: auto; pointer-events: auto; background: rgba(6,8,12,.7); border-radius: .3rem .3rem 0 0; padding: .3rem .5rem; scrollbar-width: thin; }
.cm { padding: .08rem .3rem; transition: opacity 1s; } .cm.old { opacity: 0; } .chat.open .cm.old { opacity: 1; } .cm b { margin: 0 .35rem 0 .25rem; } .cm b.a { color: var(--blue); } .cm b.e { color: var(--red); } .cm em { font-style: normal; font-size: .68rem; font-weight: 800; } .cm em.all { color: #ffd25a; } .cm em.tm { color: #7fd8a0; } .cm.sys { color: #d8c690; font-style: italic; }
.cin { display: none; align-items: center; gap: .5rem; padding: .35rem .5rem; background: rgba(6,8,12,.9); border: 1px solid var(--gold-d); border-radius: 0 0 .3rem .3rem; pointer-events: auto; } .chat.open .cin { display: flex; }
.cin .mode { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #7fd8a0; } .cin .mode.all { color: #ffd25a; } .cin input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-size: .85rem; }
/* ---------- SCOREBOARD ---------- */
.sb { inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; } .sb.on { display: flex; }
.sb-in { width: min(74rem, 94vw); padding: 1rem 1.3rem 1.2rem; animation: fadein .15s; }
.sb-h { display: flex; justify-content: space-between; font-family: var(--serif); letter-spacing: .3em; font-size: .95rem; color: var(--gold); margin-bottom: .7rem; } .sb-h em { font-style: normal; letter-spacing: .1em; color: var(--ink); }
.st { margin-bottom: .8rem; } .sth { display: flex; justify-content: space-between; padding: .35rem .7rem; font-family: var(--serif); letter-spacing: .12em; border-radius: .3rem .3rem 0 0; } .sth span { font-family: var(--sans); font-size: .78rem; letter-spacing: .04em; opacity: .85; }
.st.ally .sth { background: linear-gradient(90deg, rgba(70,176,255,.4), rgba(70,176,255,.05)); color: #cde9ff; border-left: 3px solid var(--blue); } .st.foe .sth { background: linear-gradient(90deg, rgba(255,85,96,.4), rgba(255,85,96,.05)); color: #ffd3d6; border-left: 3px solid var(--red); }
.stc, .sr, .ec, .er { display: grid; grid-template-columns: 3.2rem 1fr 6.5rem 3.5rem 13.2rem; align-items: center; gap: .6rem; padding: .25rem .7rem; }
.stc, .ec { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); padding-top: .3rem; padding-bottom: .1rem; }
.sr, .er { background: rgba(255,255,255,.03); border-bottom: 1px solid rgba(0,0,0,.35); min-height: 2.9rem; } .sr:nth-child(odd), .er:nth-child(odd) { background: rgba(255,255,255,.05); } .sr.me, .er.me { background: linear-gradient(90deg, rgba(255,200,90,.2), rgba(255,200,90,.04)); box-shadow: inset 2px 0 0 var(--gold); }
.sp { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 50%; background-size: cover; box-shadow: 0 0 0 2px #000, 0 0 0 3px var(--gold-d); } .sp b { position: absolute; right: -.3rem; bottom: -.25rem; min-width: 1.15rem; height: 1.15rem; border-radius: .6rem; font-size: .68rem; display: flex; align-items: center; justify-content: center; background: #14100a; border: 1px solid var(--gold); color: var(--gold-hi); }
.sr.dead .sp { filter: grayscale(1) brightness(.6); } .sp u { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; text-decoration: none; text-shadow: 0 0 .4rem #000; font-size: 1rem; }
.sn { display: flex; flex-direction: column; min-width: 0; } .sn span { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sn small { color: var(--dim); font-size: .72rem; }
.sk { font-weight: 700; font-variant-numeric: tabular-nums; } .sk i { color: var(--faint); font-style: normal; margin: 0 .2rem; } .scs { font-variant-numeric: tabular-nums; color: #dcd5c0; }
.si { display: flex; gap: .2rem; } .si i { width: 2rem; height: 2rem; border-radius: .3rem; background: rgba(0,0,0,.4) center/100% 100% no-repeat; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
/* ---------- SHOP ---------- */
.shop { inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; padding-bottom: 5rem; } .shop.on { display: flex; }
.shop-in { width: min(76rem, 95vw); height: min(46rem, calc(100vh - 11rem)); display: flex; flex-direction: column; padding: 1rem 1.2rem; pointer-events: auto; animation: shopin .22s cubic-bezier(.2,1.1,.4,1); }
@keyframes shopin { from { opacity: 0; transform: translateY(1.5rem) scale(.97); } }
.shop-h { display: flex; align-items: center; gap: 1.2rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(138,106,52,.5); margin-bottom: .8rem; }
.sh-t { font-family: var(--serif); font-size: 1.4rem; letter-spacing: .3em; color: var(--gold-hi); } .sh-note { flex: 1; font-size: .8rem; color: #9fd8a8; } .shop.browse .sh-note { color: #e8a860; }
.sh-gold { display: flex; align-items: center; gap: .45rem; font-size: 1.2rem; font-weight: 800; color: #ffd25a; padding: .25rem .8rem; border-radius: .35rem; background: rgba(0,0,0,.45); box-shadow: inset 0 0 .5rem #000, 0 0 0 1px var(--bronze); }
.shop .x { width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--gold-d); background: #1a150d; font-size: .85rem; color: var(--gold-hi); } .shop .x:hover { background: #4a2020; }
.shop-b { flex: 1; display: grid; grid-template-columns: 1fr 22rem; gap: 1rem; min-height: 0; }
.shop-l { display: flex; flex-direction: column; min-height: 0; } .sh-tools { display: flex; gap: .8rem; align-items: center; margin-bottom: .7rem; flex-wrap: wrap; }
.tabs { display: flex; gap: .25rem; flex-wrap: wrap; flex: 1; } .tab { padding: .38rem .8rem; border-radius: .3rem; background: rgba(255,255,255,.04); border: 1px solid transparent; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); transition: all .15s; } .tab:hover { color: var(--ink); background: rgba(255,255,255,.08); } .tab.on { color: var(--gold-hi); background: linear-gradient(180deg, rgba(255,150,60,.3), rgba(120,50,10,.3)); border-color: var(--gold-d); }
.search { width: 11rem; padding: .4rem .7rem; background: rgba(0,0,0,.5); border: 1px solid var(--gold-d); border-radius: .3rem; color: #fff; font-size: .8rem; outline: 0; } .search:focus { border-color: var(--gold); box-shadow: 0 0 .6rem rgba(230,191,106,.3); }
.grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .55rem; align-content: start; padding: .2rem .5rem .5rem .2rem; scrollbar-width: thin; scrollbar-color: var(--gold-d) transparent; }
.tier-h { grid-column: 1 / -1; font-family: var(--serif); letter-spacing: .25em; text-transform: uppercase; font-size: .72rem; color: var(--gold); margin-top: .5rem; display: flex; align-items: center; gap: .6rem; } .tier-h::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-d), transparent); } .tier-h:first-child { margin-top: 0; } .empty { color: var(--dim); padding: 1rem; grid-column: 1/-1; }
.icard { position: relative; display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .45rem .3rem .35rem; border-radius: .4rem; background: rgba(255,255,255,.035); border: 1px solid rgba(138,106,52,.25); cursor: pointer; transition: transform .12s, border-color .15s, background .15s; }
.icard:hover { transform: translateY(-2px); background: rgba(255,255,255,.07); border-color: var(--gold-d); } .icard.sel { border-color: var(--gold); background: rgba(255,190,80,.1); box-shadow: 0 0 .8rem rgba(255,190,80,.25); }
.icard .ico { width: 3.3rem; height: 3.3rem; box-shadow: 0 0 .4rem rgba(0,0,0,.6); } .icard .in { font-size: .66rem; text-align: center; line-height: 1.15; height: 1.5em; overflow: hidden; color: #d6d0c0; } .icard .ic { font-size: .8rem; font-weight: 800; color: #ffd25a; display: flex; gap: .25rem; align-items: center; } .icard.no .ic { color: #e0705a; } .icard.no .ico { filter: brightness(.7) saturate(.7); } .icard.can .ico { filter: none; }
.icard.own::after { content: '✔'; position: absolute; top: .2rem; right: .3rem; font-size: .7rem; color: #6bff93; text-shadow: 0 0 3px #000; }
.shop-r { overflow-y: auto; padding: .2rem .3rem .2rem .2rem; background: rgba(0,0,0,.28); border-radius: .4rem; box-shadow: inset 0 0 .8rem rgba(0,0,0,.6); padding: .9rem; scrollbar-width: thin; }
.di-h { display: flex; gap: .8rem; align-items: center; margin-bottom: .7rem; } .di-ico .ico { width: 4rem; height: 4rem; } .di-n { font-family: var(--serif); font-size: 1.15rem; color: var(--gold-hi); } .di-t { font-size: .72rem; color: var(--dim); text-transform: capitalize; }
.di-stats { display: grid; gap: .15rem; font-size: .84rem; margin-bottom: .5rem; } .di-pass { font-size: .8rem; color: #d6d0c0; margin: .4rem 0; line-height: 1.4; } .di-pass b { color: var(--ember-hi); }
.di-sec { font-family: var(--serif); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: .9rem 0 .5rem; }
.tree { display: flex; justify-content: center; overflow-x: auto; padding-bottom: .3rem; } .tn { display: flex; flex-direction: column; align-items: center; } .kids { display: flex; gap: .4rem; padding-top: .9rem; position: relative; } .kids::before { content: ''; position: absolute; top: 0; left: 50%; height: .9rem; border-left: 1px solid var(--gold-d); }
.kids > .tn { position: relative; padding-top: .9rem; } .kids > .tn::before { content: ''; position: absolute; top: 0; left: 50%; height: .9rem; border-left: 1px solid var(--gold-d); } .kids > .tn::after { content: ''; position: absolute; top: 0; left: 0; right: 0; border-top: 1px solid var(--gold-d); } .kids > .tn:first-child::after { left: 50%; } .kids > .tn:last-child::after { right: 50%; } .kids > .tn:only-child::after { display: none; }
.kids { margin-top: -.9rem; padding-top: .9rem; }
.nd { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 4.4rem; padding: .3rem .2rem; border-radius: .35rem; cursor: pointer; transition: background .15s; font-size: .62rem; text-align: center; line-height: 1.1; } .nd:hover { background: rgba(255,255,255,.07); } .nd .ico { width: 2.6rem; height: 2.6rem; } .nd em { font-style: normal; font-weight: 800; color: #ffd25a; font-size: .74rem; } .nd.own { opacity: .6; } .nd.own em { color: #6bff93; }
.into { display: flex; flex-wrap: wrap; gap: .3rem; }
.di-buy { margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; position: sticky; bottom: -.9rem; padding: .6rem 0 .1rem; background: linear-gradient(180deg, transparent, rgba(10,12,18,.95) 35%); } .di-cost span:first-child { display: block; font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); } .cc { font-size: 1.2rem; color: #ffd25a; display: flex; gap: .4rem; align-items: center; } .cc.no { color: #e0705a; } .buy { flex: 1; }
.shop-f { display: flex; align-items: center; gap: 1.2rem; padding-top: .8rem; margin-top: .8rem; border-top: 1px solid rgba(138,106,52,.5); } .inv { display: flex; gap: .35rem; } .inv .islot { width: 3rem; height: 3rem; cursor: pointer; } .inv .islot .ico { border-radius: .35rem; }
.sh-btns { display: flex; gap: .5rem; } .sh-hint { color: var(--faint); font-size: .72rem; margin-left: auto; }
/* ---------- END SCREEN ---------- */
.endscr { inset: 0; display: none; align-items: center; justify-content: center; pointer-events: auto; background: radial-gradient(circle, rgba(0,0,0,.8), rgba(0,0,0,.93)); } .endscr.on { display: flex; animation: fadein .6s; }
.end-in { width: min(72rem, 94vw); padding: 1.6rem 1.8rem; text-align: center; } .end-t { font-family: var(--serif); font-weight: 800; font-size: 4.2rem; letter-spacing: .3em; padding-left: .3em; background: linear-gradient(180deg, #fff6d0, #f3c765 55%, #a8681a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .2rem .3rem #000) drop-shadow(0 0 1.5rem rgba(255,160,50,.5)); }
.endscr.lose .end-t { background-image: linear-gradient(180deg, #e8eef8, #8a9ab8 55%, #3a4660); filter: drop-shadow(0 .2rem .3rem #000) drop-shadow(0 0 1.5rem rgba(120,150,230,.4)); } .end-s { color: var(--dim); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; margin-bottom: 1rem; }
.end-tbl { display: grid; gap: .8rem; text-align: left; } .et .eth { display: flex; gap: 1rem; align-items: center; padding: .3rem .7rem; font-family: var(--serif); letter-spacing: .12em; } .et.t0 .eth { background: linear-gradient(90deg, rgba(70,176,255,.4), transparent); color: #cde9ff; } .et.t1 .eth { background: linear-gradient(90deg, rgba(255,85,96,.4), transparent); color: #ffd3d6; } .eth em { font-style: normal; color: var(--gold-hi); font-size: .8rem; }
.ec, .er { grid-template-columns: 3.2rem 1.2fr 6rem 3rem 1.4fr 4.5rem 13.2rem; } .edm { position: relative; height: 1.1rem; background: rgba(0,0,0,.4); border-radius: .2rem; overflow: hidden; } .edm i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #b8501c, #ff8a3a); opacity: .85; } .edm span { position: absolute; inset: 0; display: flex; align-items: center; padding-left: .4rem; font-size: .72rem; font-weight: 700; text-shadow: 0 1px 2px #000; } .egd { color: #ffd25a; font-size: .85rem; font-weight: 700; }
.end-f { display: flex; justify-content: space-between; align-items: center; margin-top: 1.2rem; } .next { display: flex; align-items: center; gap: .7rem; color: var(--gold-hi); letter-spacing: .1em; font-size: .9rem; } .spin { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid rgba(230,191,106,.25); border-top-color: var(--gold); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } }
/* ---------- SETTINGS ---------- */
.settings { inset: 0; display: none; align-items: center; justify-content: center; pointer-events: auto; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); } .settings.on { display: flex; animation: fadein .15s; }
.set-in { width: 30rem; padding: 1.5rem 1.8rem; } .set-t { font-family: var(--serif); letter-spacing: .4em; text-align: center; font-size: 1.2rem; color: var(--gold-hi); margin-bottom: 1.2rem; }
.set-in .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid rgba(138,106,52,.25); font-size: .88rem; } .set-in .row > span:first-child { color: #d6d0c0; } .set-in .row input[type=range] { flex: 1; max-width: 11rem; accent-color: var(--ember); } .set-in .row b { width: 3rem; text-align: right; font-variant-numeric: tabular-nums; } .set-in input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--ember); } .set-in .seg { width: 14rem; }
.set-btns { display: flex; gap: .8rem; justify-content: center; margin-top: 1.4rem; } .set-h { text-align: center; color: var(--faint); font-size: .7rem; margin-top: 1rem; letter-spacing: .1em; }
/* ---------- MAIN MENU ---------- */
.menu { inset: 0; display: none; padding: 1.1rem 2rem 1.3rem; pointer-events: none; grid-template-columns: 23rem 1fr 34rem; grid-template-rows: auto 1fr auto; grid-template-areas: "top top top" "left . detail" "bottom bottom bottom"; gap: 1rem 1.6rem; }
.menu.on { display: grid; animation: fadein .5s; }
.menu-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(4,6,10,.78) 0, rgba(4,6,10,.15) 32%, rgba(4,6,10,.12) 58%, rgba(4,6,10,.72) 100%), linear-gradient(0deg, rgba(4,6,10,.85) 0, rgba(4,6,10,0) 36%), linear-gradient(180deg, rgba(4,6,10,.7) 0, rgba(4,6,10,0) 22%); }
.menu-top { grid-area: top; display: flex; justify-content: space-between; align-items: flex-start; }
.logo { text-align: left; } .logo-sub { font-family: var(--serif); letter-spacing: .6em; font-size: .75rem; color: var(--gold); padding-left: .2rem; }
.logo-main { font-family: var(--serif); font-weight: 900; font-size: 3.6rem; line-height: 1; letter-spacing: .14em; background: linear-gradient(180deg, #fff2c0 8%, #ffb84a 40%, #e8561a 75%, #7a1c08 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .2rem .25rem rgba(0,0,0,.9)) drop-shadow(0 0 1.6rem rgba(255,110,30,.55)); }
.logo-rule { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; } .logo-rule i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); } .logo-rule i:last-child { background: linear-gradient(270deg, var(--gold), transparent); } .logo-rule b { width: .5rem; height: .5rem; background: var(--ember); transform: rotate(45deg); box-shadow: 0 0 .8rem var(--ember); }
.conn { display: flex; align-items: center; gap: .55rem; padding: .35rem .9rem; font-size: .78rem; color: var(--dim); background: rgba(8,10,16,.7); border: 1px solid rgba(138,106,52,.5); border-radius: 2rem; } .conn .dot { width: .6rem; height: .6rem; border-radius: 50%; background: #e0a030; animation: blink 1s infinite; } .conn.ok { color: #b8e8c4; } .conn.ok .dot { background: #4fd36a; box-shadow: 0 0 .6rem #4fd36a; animation: none; } @keyframes blink { 50% { opacity: .3; } }
.menu-left { grid-area: left; padding: 1.1rem 1.1rem 1rem; pointer-events: auto; overflow-y: auto; scrollbar-width: none; align-self: start; max-height: 100%; }
.field { display: block; } .field span { display: none; } .name { width: 100%; padding: .65rem .8rem; background: rgba(0,0,0,.55); border: 1px solid var(--gold-d); border-radius: .35rem; color: #fff; font-size: 1rem; font-weight: 600; outline: 0; transition: border-color .15s, box-shadow .15s; } .name:focus { border-color: var(--gold); box-shadow: 0 0 .8rem rgba(230,191,106,.3); }
.roster { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .rc { min-width: 0; } .rh { font-family: var(--serif); font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; padding: .2rem .4rem; display: flex; justify-content: space-between; border-bottom: 2px solid; margin-bottom: .25rem; } .rh em { font-style: normal; color: var(--dim); font-family: var(--sans); } .rc.t0 .rh { color: var(--blue); border-color: var(--blue); } .rc.t1 .rh { color: var(--red); border-color: var(--red); }
.rr { display: flex; align-items: center; gap: .35rem; padding: .18rem .2rem; font-size: .76rem; } .rr img { width: 1.4rem; height: 1.4rem; border-radius: 50%; object-fit: cover; background: #111; box-shadow: 0 0 0 1px #000; } .rr .rn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rr.empty { color: var(--faint); } .rr .hum { font-size: .56rem; font-weight: 800; letter-spacing: .06em; color: #6bff93; padding: .08rem .25rem; border-radius: .2rem; background: rgba(60,220,110,.15); border: 1px solid rgba(60,220,110,.35); }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: .22rem .6rem; font-size: .72rem; color: var(--dim); } .keys div { display: flex; align-items: center; gap: .45rem; } .keys kbd { min-width: 3.1rem; text-align: center; }
.menu-detail { grid-area: detail; padding: 1.2rem 1.3rem; pointer-events: auto; align-self: start; max-height: 100%; overflow-y: auto; scrollbar-width: none; border-left: 0; } .menu-detail::-webkit-scrollbar, .menu-left::-webkit-scrollbar { display: none; }
.menu-detail { --hc: #ff8a3a; } .menu-detail::before { border-color: var(--hc); } .menu-detail::after { border-color: var(--hc); }
.d-head { display: flex; gap: 1.1rem; } .d-port { width: 7.5rem; height: 10rem; flex: none; border-radius: .4rem; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--hc), 0 0 1.5rem color-mix(in srgb, var(--hc) 40%, transparent); } .d-port .port { width: 100%; height: 100%; }
.d-id { display: flex; flex-direction: column; justify-content: flex-end; gap: .2rem; } .d-role { display: flex; gap: .4rem; } .d-role span { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: .15rem .5rem; border-radius: .2rem; background: color-mix(in srgb, var(--hc) 25%, #000); border: 1px solid color-mix(in srgb, var(--hc) 55%, #000); color: #ffe; } .d-role span.rg, .d-role span.ml { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); color: var(--dim); }
.menu-detail h2 { margin: .1rem 0 0; font-family: var(--serif); font-size: 2.4rem; letter-spacing: .1em; color: #fff; text-shadow: 0 0 1.4rem var(--hc), 0 .15rem .3rem #000; line-height: 1; } .d-title { font-family: var(--serif); letter-spacing: .12em; color: var(--gold); font-size: .95rem; }
.diff { display: flex; align-items: center; gap: .3rem; margin-top: .5rem; } .diff span { font-size: .66rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); margin-right: .3rem; } .diff i { width: .9rem; height: .5rem; border-radius: .1rem; background: #23262e; box-shadow: 0 0 0 1px #000; } .diff i.on { background: linear-gradient(180deg, #ffb060, #e05a18); box-shadow: 0 0 0 1px #000, 0 0 .5rem rgba(255,120,40,.7); }
.lore { color: #c4bfae; font-size: .8rem; line-height: 1.45; margin: .7rem 0; font-style: italic; }
.hstats { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1.2rem; } .hs { display: flex; align-items: center; gap: .5rem; font-size: .72rem; } .hs span { width: 4.2rem; color: var(--dim); text-transform: uppercase; letter-spacing: .06em; font-size: .64rem; } .hs i { flex: 1; height: .4rem; background: rgba(0,0,0,.6); border-radius: .2rem; overflow: hidden; box-shadow: 0 0 0 1px #000; } .hs i b { display: block; height: 100%; border-radius: .2rem; } .hs em { width: 2rem; text-align: right; font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.abil-row { display: flex; gap: .55rem; margin: .9rem 0 .8rem; } .abil { position: relative; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; background: none; border-radius: .45rem; transition: transform .12s; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--bronze); } .abil .ico { width: 100%; height: 100%; } .abil:hover { transform: translateY(-2px); } .abil.on { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 1rem rgba(255,190,80,.5); } .abil kbd { position: absolute; left: 50%; bottom: -.55rem; transform: translateX(-50%); font-size: .58rem; padding: .05rem .35rem; }
.abil-desc { min-height: 6.5rem; padding: .8rem .9rem; margin-top: .7rem; background: rgba(0,0,0,.35); border-radius: .35rem; box-shadow: inset 0 0 .8rem rgba(0,0,0,.5); } .an { font-family: var(--serif); font-size: 1.05rem; color: var(--gold-hi); } .an small { font-family: var(--sans); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-left: .5rem; } .am { display: flex; gap: 1rem; color: var(--dim); font-size: .74rem; margin: .25rem 0 .4rem; } .am b { color: #cfe8ff; } .ad { font-size: .83rem; line-height: 1.5; color: #d6d0c0; }
.rand-big { font-family: var(--serif); font-size: 7rem; text-align: center; color: var(--gold); text-shadow: 0 0 2rem rgba(255,160,50,.5); }
.menu-bottom { grid-area: bottom; display: flex; align-items: flex-end; gap: 1.5rem; pointer-events: none; }
.strip { flex: 1; display: flex; gap: .55rem; justify-content: center; pointer-events: none; }
.card { pointer-events: auto; position: relative; width: 6.4rem; padding: 0 0 .2rem; border: 0; background: rgba(8,10,16,.78); border-radius: .4rem; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(138,106,52,.6), 0 .4rem 1rem rgba(0,0,0,.6); transition: transform .15s, box-shadow .15s, filter .15s; filter: brightness(.8) saturate(.85); text-align: center; --hc: #aaa; }
.card:hover { transform: translateY(-.3rem); filter: none; } .card.on { transform: translateY(-.6rem); filter: none; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--hc), 0 0 1.6rem color-mix(in srgb, var(--hc) 60%, transparent), 0 .6rem 1.2rem rgba(0,0,0,.6); }
.card .port { width: 100%; height: 6rem; } .card .rnd { display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 3rem; color: var(--gold); background: radial-gradient(circle, #2a2214, #0a0806); }
.card-n { font-family: var(--serif); font-weight: 700; font-size: .85rem; letter-spacing: .08em; padding-top: .3rem; color: #fff; } .card-r { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); }
.card.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hc); box-shadow: 0 0 .8rem var(--hc); }
.play { pointer-events: auto; flex: none; position: relative; width: 15rem; height: 5rem; border: 0; padding: 0; border-radius: .6rem; cursor: pointer; background: linear-gradient(180deg, #ffb64a 0%, #f0701c 45%, #a8300a 100%); box-shadow: 0 0 0 1px #000, 0 0 0 .2rem var(--gold), 0 0 0 calc(.2rem + 1px) #000, 0 0 2.2rem rgba(255,110,30,.55), 0 .8rem 1.6rem rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.5); overflow: hidden; transition: transform .15s, filter .15s; }
.play::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-120%); animation: shine 3.2s ease-in-out infinite; } @keyframes shine { 45%, 100% { transform: translateX(120%); } }
.play:hover { transform: translateY(-.15rem) scale(1.02); filter: brightness(1.12); } .play:active { transform: scale(.98); }
.play-in { position: absolute; inset: .3rem; border-radius: .4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,230,160,.5); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.12)); }
.play b { font-family: var(--serif); font-size: 2.3rem; font-weight: 900; letter-spacing: .3em; padding-left: .3em; color: #fff7e0; text-shadow: 0 .12rem 0 #7a2406, 0 0 1rem rgba(255,230,160,.7); line-height: 1; } .play small { font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: #ffe3b0; margin-top: .3rem; text-shadow: 0 1px 2px #6a1c04; }
@media (max-width: 1100px) { .menu { grid-template-columns: 19rem 1fr 28rem; } .logo-main { font-size: 3.2rem; } }
@media (prefers-reduced-motion: reduce) { .ef-ui * { animation: none !important; } }
/* ======================= round 2 ======================= */
.ef-ui > .loading, .ef-ui > .help, .ef-ui > .hint, .ef-ui > .tgt, .ef-ui > .boss, .ef-ui > .wheel { position: absolute; }
em.bot, .bot { white-space: nowrap; }
/* ---------- loading splash ---------- */
.loading { inset: 0; z-index: 11; display: none; align-items: center; justify-content: center; pointer-events: auto; --hc: #ff8a3a; }
.loading.on { display: flex; animation: fadein .35s; } .loading.out { opacity: 0; transition: opacity .55s; pointer-events: none; }
.ld-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--hc) 28%, #0a0c14) 0, #07080d 62%, #020305 100%); }
.ld-bg::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 3rem, rgba(255,255,255,.012) 3rem 3.1rem); }
.ld-in { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ld-port { width: 15rem; height: 20rem; border-radius: .5rem; overflow: hidden; box-shadow: 0 0 0 1px #000, 0 0 0 3px var(--hc), 0 0 3rem color-mix(in srgb, var(--hc) 55%, transparent), 0 1rem 3rem rgba(0,0,0,.7); animation: ldrise .8s cubic-bezier(.2,.9,.3,1); }
.ld-port .port { width: 100%; height: 100%; }
.ld-name { margin-top: 1rem; font-family: var(--serif); font-size: 3rem; letter-spacing: .2em; padding-left: .2em; font-weight: 700; color: var(--gold-hi); text-shadow: 0 .2rem 1rem #000, 0 0 2rem color-mix(in srgb, var(--hc) 60%, transparent); }
.ld-title { font-size: 1.05rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
.ld-sub { margin-top: 1.4rem; font-size: .8rem; letter-spacing: .5em; color: var(--ember-hi); animation: ldblink 1.4s ease-in-out infinite; }
.ld-bar { width: 22rem; height: .3rem; background: rgba(255,255,255,.08); border-radius: .2rem; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ember), var(--gold-hi)); box-shadow: 0 0 .8rem var(--ember); animation: ldbar 1.8s cubic-bezier(.3,.7,.3,1) forwards; }
.ld-tip { margin-top: 1.2rem; max-width: 34rem; font-size: .85rem; color: var(--dim); line-height: 1.5; font-style: italic; }
@keyframes ldrise { from { opacity: 0; transform: translateY(2rem) scale(.94); } }
@keyframes ldblink { 50% { opacity: .45; } } @keyframes ldbar { 0% { width: 0; } 60% { width: 78%; } 100% { width: 96%; } }
/* ---------- HUD intro ---------- */
.ef-ui.intro .frame { animation: introUp .9s cubic-bezier(.2,.9,.3,1) both; }
.ef-ui.intro .topbar { animation: introDown .8s cubic-bezier(.2,.9,.3,1) both; }
.ef-ui.intro .minimap { animation: introRight .9s cubic-bezier(.2,.9,.3,1) both; }
.ef-ui.intro .tb-me, .ef-ui.intro .stats { animation: fadein 1.2s both; }
@keyframes introUp { from { opacity: 0; transform: translate(-50%, 6rem); } }
@keyframes introDown { from { opacity: 0; transform: translate(-50%, -4rem); } }
@keyframes introRight { from { opacity: 0; transform: translateX(8rem); } }
/* ---------- ability feedback ---------- */
.slot.errf { animation: errflash .55s ease-out; } .slot.errm { animation: errmana .6s ease-out; }
@keyframes errflash { 0%, 40% { box-shadow: 0 0 0 2px #ff3b3b, 0 0 1.2rem rgba(255,60,60,.9); } 100% { } }
@keyframes errmana { 0%, 40% { box-shadow: 0 0 0 2px #3a8dff, 0 0 1.2rem rgba(58,141,255,.95); } 100% { } }
.bar.mp.errm { animation: mpflash .6s ease-out; } @keyframes mpflash { 0%, 35% { box-shadow: 0 0 0 1px #000, 0 0 1rem 2px rgba(90,160,255,1); filter: brightness(1.6); } }
.abil-bar.shake { animation: shake .3s; } @keyframes shake { 20% { transform: translateX(-.25rem); } 50% { transform: translateX(.25rem); } 80% { transform: translateX(-.12rem); } }
/* level-up: impossible to miss */
.slot.canlvl { animation: lvlglow 1s ease-in-out infinite; z-index: 2; }
.slot.canlvl::before { content: ''; position: absolute; inset: -.5rem; border-radius: .8rem; background: radial-gradient(circle, rgba(255,215,90,.55), transparent 70%); pointer-events: none; animation: lvlhalo 1s ease-in-out infinite; }
@keyframes lvlglow { 50% { box-shadow: 0 0 0 2px #ffe27a, 0 0 1.6rem 4px rgba(255,210,80,1); transform: translateY(-.2rem); } }
@keyframes lvlhalo { 50% { opacity: .35; } }
.plus.on { width: 1.7rem; height: 1.7rem; top: -1.9rem; font-size: 1.2rem; box-shadow: 0 0 1rem rgba(255,220,100,.9); }
.f-port.pts::after { content: 'LEVEL UP'; position: absolute; left: 50%; top: -1.1rem; transform: translateX(-50%); font-size: .62rem; letter-spacing: .15em; font-weight: 800; color: #3a2400; background: linear-gradient(#ffe99a, #f2b83a); padding: .1rem .5rem; border-radius: .6rem; box-shadow: 0 0 1rem rgba(255,210,80,.9); animation: lvlhalo 1s infinite; white-space: nowrap; }
/* ---------- item slots ---------- */
.islot .icd { position: absolute; inset: 0; border-radius: .35rem; pointer-events: none; }
.islot .icdt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 800; color: #fff; text-shadow: 0 0 .3rem #000, 0 1px 2px #000; font-variant-numeric: tabular-nums; pointer-events: none; }
.islot .ikey { position: absolute; left: -.15rem; top: -.3rem; min-width: .95rem; height: .95rem; padding: 0 .15rem; display: flex; align-items: center; justify-content: center; border-radius: .22rem; font-style: normal; font-size: .6rem; font-weight: 800; background: linear-gradient(180deg, #403525, #17120b); border: 1px solid var(--gold-d); color: var(--gold-hi); opacity: 0; }
.islot.full .ikey { opacity: .75; } .islot.has-act .ikey { opacity: 1; }
.islot.has-act { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-d); cursor: pointer; }
.islot.cooling .ico { filter: brightness(.6) saturate(.7); }
.islot.casted { animation: casted .25s ease-out; } .islot.flash { animation: islotflash .6s ease-out; } @keyframes islotflash { 0% { box-shadow: 0 0 1.2rem 3px rgba(255,220,120,1); } }
.t-d b.act { color: #ffd45a; }
.di-act { border-left-color: #ffd45a; } .di-act small { display: block; color: var(--dim); margin-top: .2rem; } .di-boots { color: var(--dim); font-style: italic; }
/* ---------- next purchase pin ---------- */
.nextpin { position: absolute; z-index: 3; right: .6rem; top: -3.6rem; display: none; align-items: center; gap: .55rem; padding: .35rem .7rem .35rem .4rem; pointer-events: auto; cursor: pointer; border-radius: .5rem; background: linear-gradient(180deg, rgba(40,34,18,.96), rgba(14,12,8,.96)); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold), 0 0 1.2rem rgba(255,190,80,.4); animation: nppulse 1.6s ease-in-out infinite; }
.nextpin.on { display: flex; } .nextpin:hover { filter: brightness(1.2); }
.np-ico { width: 2.4rem; height: 2.4rem; flex: none; } .np-ico .ico { width: 100%; height: 100%; }
.np-t small { display: block; font-size: .58rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold); } .np-t b { font-size: .8rem; color: var(--ink); white-space: nowrap; }
.np-c { display: flex; align-items: center; gap: .25rem; font-weight: 800; color: var(--gold-hi); } .np-c b { font-size: .95rem; }
@keyframes nppulse { 50% { box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-hi), 0 0 1.8rem rgba(255,200,90,.7); } }
/* ---------- hints ---------- */
.hint { left: 50%; bottom: 13.2rem; transform: translateX(-50%) translateY(.8rem); display: none; align-items: center; gap: .7rem; padding: .45rem 1rem .45rem .55rem; border-radius: 2rem; background: rgba(12,14,20,.9); border: 1px solid var(--gold-d); box-shadow: 0 .4rem 1.4rem rgba(0,0,0,.6), 0 0 1rem rgba(255,190,80,.18); opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; z-index: 4; font-size: .9rem; white-space: nowrap; }
.hint.vis { display: flex; } .hint.on { opacity: 1; transform: translateX(-50%); }
.hint kbd { padding: .2rem .55rem; border-radius: .3rem; background: linear-gradient(#4a3d28, #1c150b); border: 1px solid var(--gold); color: var(--gold-hi); font: 800 .8rem var(--sans); box-shadow: 0 .15rem 0 #000; }
/* ---------- target info ---------- */
.tgt { top: 3.8rem; left: .8rem; width: 15rem; padding: .5rem .7rem .55rem; display: none; z-index: 3; font-size: .78rem; pointer-events: none; }
.tgt.on { display: block; animation: fadein .15s; }
.tg-h { display: flex; align-items: baseline; gap: .45rem; margin-bottom: .3rem; } .tg-n { font-size: .95rem; } .tg-l { margin-left: auto; color: var(--dim); font-size: .72rem; }
.tgt[data-rel=foe] .tg-n { color: #ff8e98; } .tgt[data-rel=ally] .tg-n { color: #8ccaff; } .tgt[data-rel=me] .tg-n { color: #9af0b0; } .tgt[data-rel=neutral] .tg-n { color: #f0d48a; }
.tg-bot { display: none; font-style: normal; font-size: .55rem; font-weight: 800; letter-spacing: .08em; padding: .05rem .28rem; border-radius: .2rem; background: rgba(120,130,150,.25); color: #aab; } .tg-bot.on { display: inline; }
.tg-bar { position: relative; height: .9rem; border-radius: .2rem; background: rgba(0,0,0,.6); box-shadow: 0 0 0 1px #000; overflow: hidden; margin-top: .2rem; }
.tg-bar .f { position: absolute; left: 0; top: 0; bottom: 0; } .tg-bar.hp .f { background: linear-gradient(#5fd37a, #2a8a44); } .tg-bar.mp .f { background: linear-gradient(#5aa0ff, #2a5ab8); } .tg-bar.mp { height: .55rem; } .tg-bar.mp.off { display: none; }
.tgt[data-rel=foe] .tg-bar.hp .f { background: linear-gradient(#ff6670, #b02030); } .tgt[data-rel=ally] .tg-bar.hp .f { background: linear-gradient(#5cb8ff, #2c78d6); } .tgt[data-rel=neutral] .tg-bar.hp .f { background: linear-gradient(#e8c45a, #a9812a); }
.tg-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; text-shadow: 0 0 3px #000, 0 1px 1px #000; } .tg-bar.mp span { display: none; }
.tg-s { margin-top: .35rem; color: var(--dim); font-size: .7rem; } .tg-s b { color: var(--ink); }
/* ---------- boss bar ---------- */
.boss { top: 4.4rem; left: 50%; transform: translateX(-50%); width: min(34rem, 44vw); display: none; text-align: center; z-index: 3; pointer-events: none; --b1: #ff9a40; --b2: #c4441a; }
.boss.on { display: block; animation: bossin .5s cubic-bezier(.2,1.2,.4,1); }
.bs-n { font-family: var(--serif); font-size: 1.05rem; letter-spacing: .35em; padding-left: .35em; text-transform: uppercase; color: #ffe2b0; text-shadow: 0 .1rem .5rem #000, 0 0 1rem var(--b2); margin-bottom: .25rem; }
.bs-bar { position: relative; height: 1.15rem; background: rgba(6,8,12,.85); border-radius: .25rem; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-d), 0 0 1.4rem color-mix(in srgb, var(--b2) 50%, transparent); overflow: hidden; }
.bs-bar i { position: absolute; left: 0; top: 0; bottom: 0; } .bs-bar .lag { background: rgba(255,255,255,.8); } .bs-bar .f { background: linear-gradient(var(--b1), var(--b2)); box-shadow: inset 0 .2rem 0 rgba(255,255,255,.22); }
.bs-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 800; text-shadow: 0 0 3px #000, 0 1px 1px #000; }
@keyframes bossin { from { opacity: 0; transform: translateX(-50%) scale(1.25); } }
/* ---------- ping wheel ---------- */
.wheel { width: 0; height: 0; display: none; z-index: 6; pointer-events: none; }
.wheel.on { display: block; }
.wc { position: absolute; left: -1.4rem; top: -1.4rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: rgba(8,10,16,.7); border: 2px solid var(--gold-d); }
.ws { position: absolute; left: 0; top: 0; transform: rotate(var(--a)) translateX(5rem) rotate(calc(-1 * var(--a))) translate(-50%, -50%); padding: .45rem .8rem; border-radius: 2rem; background: rgba(10,12,18,.88); border: 1.5px solid var(--gold-d); font-size: .8rem; font-weight: 800; letter-spacing: .06em; white-space: nowrap; transition: transform .08s, background .08s; }
.ws.on { background: linear-gradient(#5a4524, #2a1f0e); border-color: var(--gold-hi); color: var(--gold-hi); box-shadow: 0 0 1.2rem rgba(255,200,90,.6); }
.ws[data-k=danger].on { background: linear-gradient(#7a2222, #3a0c0c); border-color: #ff6a6a; color: #ffd0d0; box-shadow: 0 0 1.2rem rgba(255,70,70,.6); } .ws[data-k=omw].on { border-color: #5dff8a; color: #c8ffd8; } .ws[data-k=help].on { border-color: #5db8ff; color: #d0eaff; }
/* ---------- help ---------- */
.help { inset: 0; z-index: 12; display: none; align-items: center; justify-content: center; pointer-events: auto; background: rgba(2,3,6,.72); } .help.on { display: flex; animation: fadein .15s; }
.help-in { width: min(62rem, 94vw); padding: 1.1rem 1.5rem 1rem; }
.help-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); letter-spacing: .4em; color: var(--gold); margin-bottom: .9rem; } .help-h .x { background: none; border: 0; color: var(--dim); font-size: 1.1rem; }
.help-g { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.hgt { font-size: .7rem; letter-spacing: .25em; text-transform: uppercase; color: var(--ember-hi); border-bottom: 1px solid rgba(138,106,52,.5); padding-bottom: .25rem; margin-bottom: .4rem; }
.hr { display: flex; align-items: center; gap: .8rem; padding: .22rem 0; font-size: .85rem; } .hr kbd { min-width: 6.6rem; text-align: center; padding: .15rem .5rem; border-radius: .3rem; background: linear-gradient(#3a3020, #17120b); border: 1px solid var(--gold-d); color: var(--gold-hi); font: 800 .74rem var(--sans); white-space: nowrap; } .hr span { color: var(--ink); }
.help-f { margin-top: .9rem; text-align: center; font-size: .75rem; color: var(--faint); letter-spacing: .15em; }
/* ---------- banners by tier / team ---------- */
.banner.ally .bn-t { background-image: linear-gradient(180deg, #e8f6ff 10%, #6cc4ff 55%, #1c5aa8 95%); filter: drop-shadow(0 .15rem .2rem #000) drop-shadow(0 0 1rem rgba(70,176,255,.55)); }
.banner.ally .bn-l { background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.banner.enemy .bn-t { background-image: linear-gradient(180deg, #ffe0dc 10%, #ff6a5a 55%, #8a1a1a 95%); filter: drop-shadow(0 .15rem .2rem #000) drop-shadow(0 0 1rem rgba(255,50,40,.55)); }
.banner.enemy .bn-l { background: linear-gradient(90deg, transparent, var(--red), transparent); }
.banner.obj .bn-t { font-size: 1.9rem; letter-spacing: .2em; } .banner.o-wyrm .bn-t, .banner.o-colossus .bn-t { font-size: 2.6rem; }
.banner.o-wyrm.ally .bn-t { background-image: linear-gradient(180deg, #fff2d8 10%, #ff9a40 55%, #b02a10 95%); filter: drop-shadow(0 .15rem .2rem #000) drop-shadow(0 0 1.6rem rgba(255,120,40,.8)); }
.banner.o-colossus.ally .bn-t { background-image: linear-gradient(180deg, #f2ecff 10%, #b79cff 55%, #5a38b8 95%); filter: drop-shadow(0 .15rem .2rem #000) drop-shadow(0 0 1.6rem rgba(160,120,255,.8)); }
.banner.o-inhib .bn-t { font-size: 2.2rem; }
.banner.multi .bn-t { animation: multipop .5s cubic-bezier(.2,1.6,.4,1); }
.banner.m2 .bn-t { font-size: 2.4rem; } .banner.m3 .bn-t { font-size: 2.9rem; letter-spacing: .26em; filter: drop-shadow(0 .15rem .2rem #000) drop-shadow(0 0 1.2rem rgba(255,160,40,.7)); }
.banner.m4 .bn-t { font-size: 3.5rem; letter-spacing: .3em; background-image: linear-gradient(180deg, #fff0e0 10%, #ff8a3a 50%, #b02a0a 95%); filter: drop-shadow(0 .2rem .3rem #000) drop-shadow(0 0 1.8rem rgba(255,90,30,.85)); }
.banner.m5 .bn-t { font-size: 4.4rem; letter-spacing: .34em; background-image: linear-gradient(180deg, #fff 5%, #ffe27a 35%, #ff5a2a 65%, #8a0a3a 98%); filter: drop-shadow(0 .2rem .3rem #000) drop-shadow(0 0 2.4rem rgba(255,70,120,.95)); animation: multipop .6s cubic-bezier(.2,1.6,.4,1), pentashake .5s .2s 3; }
.banner.streak .bn-t { font-size: 2.1rem; letter-spacing: .24em; } .banner.s5 .bn-t, .banner.s6 .bn-t { font-size: 2.5rem; } .banner.s7 .bn-t { font-size: 3rem; background-image: linear-gradient(180deg, #fff 5%, #ffe27a 40%, #d8501a 98%); filter: drop-shadow(0 .2rem .3rem #000) drop-shadow(0 0 1.8rem rgba(255,160,40,.9)); }
.banner.shut .bn-t { font-size: 2.2rem; background-image: linear-gradient(180deg, #f0e8ff, #c9a0ff 55%, #5a2aa0); }
.banner.fb .bn-t { font-size: 2.6rem; background-image: linear-gradient(180deg, #ffe0dc 10%, #ff5a4a 55%, #7a0e0e 95%); filter: drop-shadow(0 .15rem .2rem #000) drop-shadow(0 0 1.4rem rgba(255,50,40,.7)); }
@keyframes multipop { from { opacity: 0; transform: scale(2.2); } } @keyframes pentashake { 25% { transform: translateX(-.4rem) rotate(-.6deg); } 75% { transform: translateX(.4rem) rotate(.6deg); } }
/* ---------- chat system lines, bot tags ---------- */
.cm.sys { color: #c9b98a; font-style: italic; opacity: .9; } .cm .bot { margin-right: .3rem; }
.sobj { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .3rem .7rem; font-size: .72rem; color: var(--dim); background: rgba(0,0,0,.25); } .sobj b { color: var(--ink); margin-left: .2rem; } .sobj .gdiff { margin-left: auto; } .sobj .gdiff b.up { color: #6bff93; } .sobj .gdiff b.dn { color: #ff8a8a; }
/* ---------- end screen ---------- */
.er.mvp { box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 1.4rem rgba(255,200,80,.18); background: linear-gradient(90deg, rgba(255,200,80,.14), transparent); }
.mvpt { font-style: normal; font-size: .58rem; font-weight: 800; letter-spacing: .1em; padding: .06rem .3rem; border-radius: .2rem; background: linear-gradient(#ffe58a, #e49a1c); color: #3a2400; }
.etot { margin-left: auto; margin-right: .8rem; font-size: .68rem; color: var(--dim); letter-spacing: .05em; font-family: var(--sans); } .end-s b { color: var(--gold-hi); } .next .cdn { color: #fff; font-size: 1.1rem; }
/* ---------- shop grid: names never cut ---------- */
.grid { grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); }
.icard .in { height: auto; min-height: 2.3em; max-height: 2.4em; display: flex; align-items: center; justify-content: center; overflow: hidden; hyphens: none; word-break: normal; overflow-wrap: break-word; }
.icard[data-step]::before { content: attr(data-step); position: absolute; top: .2rem; left: .3rem; min-width: 1.1rem; height: 1.1rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: .62rem; font-weight: 800; color: #3a2400; background: linear-gradient(#ffe58a, #e49a1c); box-shadow: 0 0 0 1px #000; }
/* end screen: always fits the viewport */
.end-in { padding: 1rem 1.6rem 1rem; max-height: 97vh; overflow-y: auto; scrollbar-width: thin; } .end-t { font-size: 3.2rem; line-height: 1.1; } .end-s { margin-bottom: .6rem; }
.end-tbl { gap: .5rem; } .er { min-height: 2.35rem; padding-top: .1rem; padding-bottom: .1rem; gap: .5rem; } .er .sp { width: 2.1rem; height: 2.1rem; } .er .sn small { display: none; }
.end-f { margin-top: .6rem; }
.ec { padding-top: .1rem; }
/* ---------- round 3 ---------- */
/* team-relative top bar: own team left ("YOUR TEAM"), enemy right */
.tb-team { position: relative; }
.tb-hint { position: absolute; left: 0; right: 0; top: 100%; margin-top: .22rem; text-align: center; font-size: .56rem; font-weight: 800; letter-spacing: .22em; color: var(--blue); text-shadow: 0 1px 3px #000; opacity: .85; white-space: nowrap; }
.tb-me .lk { display: inline-flex; align-items: center; gap: .35rem; font-size: .64rem; letter-spacing: .1em; color: var(--faint); } .tb-me .lk i { width: .5rem; height: .5rem; border-radius: 50%; background: #3a3d46; box-shadow: 0 0 0 1px #000; } .tb-me .lk.on { color: var(--gold-hi); } .tb-me .lk.on i { background: var(--ember-hi); box-shadow: 0 0 0 1px #000, 0 0 .5rem var(--ember); }
.tb-me .lk b { font-weight: 800; }
.sth .you { margin-left: .5rem; font-family: var(--sans); font-size: .56rem; font-weight: 800; letter-spacing: .18em; padding: .1rem .4rem; border-radius: .2rem; color: #bfe6ff; background: rgba(70,176,255,.18); border: 1px solid rgba(70,176,255,.5); vertical-align: middle; }
/* death: panel moved up out of the fight; lighter grey filter so teammates stay followable */
.death.on { align-items: flex-start; padding-top: 12vh; backdrop-filter: grayscale(.72) brightness(.8) contrast(1.04); background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 45%, rgba(20,0,0,.45) 100%); }
.death-in { margin-top: 0; padding: .6rem 2.2rem .7rem; border-radius: .6rem; background: radial-gradient(ellipse at center, rgba(8,6,6,.78) 0, rgba(8,6,6,.55) 65%, rgba(8,6,6,0) 100%); }
.death-in .d-t { font-size: 1rem; } .death-in .d-n { font-size: 3.6rem; }
/* hero select: 12 heroes + Random in two compact rows */
.strip { display: grid; grid-template-columns: repeat(7, 5.4rem); gap: .5rem .45rem; justify-content: center; align-content: end; }
.strip .card { width: 5.4rem; } .strip .card .port { height: 3.7rem; } .strip .card .rnd { font-size: 2rem; }
.strip .card-n { font-size: .74rem; padding-top: .2rem; } .strip .card-r { font-size: .54rem; padding-bottom: .1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strip .card.on, .strip .card:hover { transform: translateY(-.2rem); }
@media (min-height: 1100px) { .strip { grid-template-columns: repeat(13, 5.4rem); } }
/* onboarding card */
.onb { left: 50%; top: 5rem; transform: translateX(-50%); z-index: 11; display: none; pointer-events: none; } .onb.on { display: block; animation: onbin .4s cubic-bezier(.2,.9,.3,1.2); }
@keyframes onbin { from { opacity: 0; transform: translate(-50%, -1rem); } }
.onb-in { width: 33rem; padding: 1rem 1.3rem 1rem; pointer-events: auto; box-shadow: 0 0 0 1px #000, 0 1rem 3rem rgba(0,0,0,.7), 0 0 2.4rem rgba(255,150,50,.25); }
.onb-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); letter-spacing: .4em; font-size: .85rem; color: var(--gold); margin-bottom: .8rem; } .onb-h .x { background: none; border: 0; color: var(--dim); font-size: 1rem; }
.onb-body { display: flex; gap: 1.1rem; align-items: center; min-height: 7.6rem; }
.onb-ico { flex: none; width: 5.2rem; height: 5.2rem; border-radius: .6rem; color: var(--ember-hi); display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 40%, rgba(255,140,50,.25), rgba(0,0,0,.4)); box-shadow: inset 0 0 0 1px rgba(255,190,100,.35), 0 0 1.2rem rgba(255,120,40,.25); } .onb-ico svg { width: 3.4rem; height: 3.4rem; }
.onb-n { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); } .onb-txt h3 { margin: .1rem 0 .3rem; font-family: var(--serif); font-size: 1.35rem; color: #fff; letter-spacing: .06em; }
.onb-keys { display: flex; gap: .3rem; margin-bottom: .4rem; } .onb-txt p { margin: 0; font-size: .82rem; line-height: 1.5; color: #d6d0c0; } .onb-txt p b { color: var(--gold-hi); }
.onb-f { display: flex; justify-content: space-between; align-items: center; margin-top: .8rem; } .onb-dots { display: flex; gap: .4rem; } .onb-dots i { width: .55rem; height: .55rem; border-radius: 50%; background: #2c2f38; box-shadow: 0 0 0 1px #000; } .onb-dots i.on { background: var(--ember); box-shadow: 0 0 0 1px #000, 0 0 .6rem var(--ember); }
.onb-btns { display: flex; gap: .5rem; } .onb-btns .btn { padding: .4rem 1rem; } .btn.pri { background: linear-gradient(180deg, #ffb64a, #c8561a); color: #fff7e0; border-color: #ffd890; }
/* ---------- round 4 ---------- */
/* REAL team colours everywhere: Azure = blue, Crimson = red (own team stays left with the YOUR TEAM hint) */
.tb-team[data-tm="0"] { box-shadow: inset 0 -.5rem 1rem -.5rem rgba(70,176,255,.55); color: var(--blue); } .tb-team[data-tm="0"] .tb-hint { color: var(--blue); }
.tb-team[data-tm="1"] { box-shadow: inset 0 -.5rem 1rem -.5rem rgba(255,85,96,.55); color: var(--red); } .tb-team[data-tm="1"] .tb-hint { color: var(--red); }
.st.t0 .sth { background: linear-gradient(90deg, rgba(70,176,255,.4), rgba(70,176,255,.05)); color: #cde9ff; border-left: 3px solid var(--blue); }
.st.t1 .sth { background: linear-gradient(90deg, rgba(255,85,96,.4), rgba(255,85,96,.05)); color: #ffd3d6; border-left: 3px solid var(--red); }
.st.t0 .sth .you { color: #bfe6ff; background: rgba(70,176,255,.18); border-color: rgba(70,176,255,.5); }
.st.t1 .sth .you { color: #ffc9ce; background: rgba(255,85,96,.18); border-color: rgba(255,85,96,.5); }
.sr.me .sn span { color: var(--gold-hi); font-weight: 800; } .sr.me { box-shadow: inset 3px 0 0 var(--gold), 0 0 0 1px rgba(255,200,90,.35); }
.sb.on .sb-in { pointer-events: auto; } .si i.f[data-it], .si i.f { cursor: help; }
/* private match */
.room { display: grid; gap: .4rem; } .room-cur { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--dim); letter-spacing: .1em; text-transform: uppercase; } .room-n { font-size: .85rem; color: var(--ink); letter-spacing: .04em; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .room-n.priv { color: var(--gold-hi); }
.room-row { display: flex; gap: .35rem; } .room-in { flex: 1; min-width: 0; padding: .4rem .55rem; background: rgba(0,0,0,.55); border: 1px solid var(--gold-d); border-radius: .3rem; color: #fff; font-size: .8rem; outline: 0; } .room-in:focus { border-color: var(--gold); }
.btn.sm { padding: .32rem .6rem; font-size: .62rem; letter-spacing: .06em; } .room-copy { flex: 1; }
/* death recap */
.recap { left: 50%; top: calc(12vh + 9.6rem); transform: translateX(-50%); width: 23rem; display: none; padding: .55rem .7rem .6rem; background: rgba(8,8,12,.82); border: 1px solid rgba(138,106,52,.6); border-radius: .4rem; box-shadow: 0 .6rem 1.6rem rgba(0,0,0,.6); z-index: 4; pointer-events: none; } .recap.on { display: block; animation: fadein .3s; }
.rc-h { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .35rem; } .rc-l { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); } .rc-k { color: #ffd0d4; font-size: .95rem; font-family: var(--serif); letter-spacing: .05em; }
.rc-r { display: grid; grid-template-columns: 1.6rem 6.2rem 1fr 2.4rem; gap: .4rem; align-items: center; padding: .12rem 0; font-size: .74rem; } .rc-p { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #1b1e28 center/cover; box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(138,106,52,.6); display: flex; align-items: center; justify-content: center; font-size: .7rem; color: var(--dim); }
.rc-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-b { position: relative; height: .5rem; background: rgba(255,255,255,.07); border-radius: .2rem; overflow: hidden; } .rc-b i { position: absolute; top: 0; bottom: 0; } .rc-a { text-align: right; font-variant-numeric: tabular-nums; }
.rc-none { color: var(--faint); font-size: .75rem; padding: .2rem 0; } .rc-f { display: flex; gap: .6rem; margin-top: .4rem; padding-top: .3rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .66rem; flex-wrap: wrap; } .rc-t { color: var(--dim); } .rc-c { color: var(--c); font-weight: 700; }
/* spectate */
.spec { left: 50%; bottom: 9.8rem; transform: translateX(-50%); display: none; align-items: center; gap: .5rem; padding: .3rem .5rem; background: rgba(8,8,12,.82); border: 1px solid rgba(138,106,52,.6); border-radius: 2rem; z-index: 4; pointer-events: auto; } .spec.on { display: flex; }
.sp-a { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 1px solid var(--gold-d); background: linear-gradient(180deg, #3a2f20, #1b150d); color: var(--gold-hi); font-size: .7rem; cursor: pointer; } .sp-a:hover { filter: brightness(1.4); }
.sp-m { min-width: 9rem; text-align: center; line-height: 1.15; } .sp-m small { display: block; font-size: .56rem; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); } .sp-n { font-size: .85rem; color: var(--ink); }
/* ally frames */
.allies { left: .6rem; top: 4.6rem; display: none; flex-direction: column; gap: .35rem; z-index: 3; pointer-events: none; } .allies.on { display: flex; }
.af { display: flex; gap: .4rem; align-items: center; width: 10.5rem; padding: .22rem .4rem .22rem .22rem; background: rgba(8,10,16,.72); border: 1px solid rgba(138,106,52,.5); border-radius: .3rem; cursor: pointer; pointer-events: auto; color: var(--ink); text-align: left; font: inherit; } .af:hover { border-color: var(--gold); background: rgba(20,22,30,.85); }
.af-p { position: relative; flex: none; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: #1b1e28 center/cover; box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-d); }
.af-l { position: absolute; right: -.25rem; bottom: -.2rem; min-width: 1rem; height: 1rem; padding: 0 .15rem; border-radius: .5rem; font-size: .6rem; display: flex; align-items: center; justify-content: center; background: #14100a; border: 1px solid var(--gold); color: var(--gold-hi); }
.af-r { position: absolute; inset: 0; border-radius: 50%; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.62); font-size: .95rem; font-weight: 800; text-decoration: none; color: #fff; } .af.dead .af-r { display: flex; } .af.dead .af-p { filter: grayscale(1); }
.af-i { flex: 1; min-width: 0; } .af-n { display: block; font-size: .68rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: .15rem; }
.af-hp, .af-mp { height: .42rem; background: rgba(0,0,0,.6); border-radius: .15rem; overflow: hidden; } .af-mp { height: .28rem; margin-top: .12rem; } .af-hp i, .af-mp i { display: block; height: 100%; } .af-hp i { background: linear-gradient(#68f08a, #27a84a); } .af-mp i { background: #3a8dff; }
.af.dead { opacity: .65; }
.chat .cm em.all { color: #ffd25a; } .chat .cm em.tm { color: #7fd8a0; } .chat .cm em { margin-right: .1rem; }
/* ---------- round 5: 3D hero stage in the menu ---------- */
.menu { grid-template-areas: "top top top" "left stage detail" "bottom bottom bottom"; }
.menu-stage { grid-area: stage; position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; pointer-events: none; }
.stage-host { position: relative; flex: 1; min-height: 0; pointer-events: auto; }
.stage-host::before { content: ''; position: absolute; inset: -4% 6% 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 52% 58% at 50% 54%, rgba(14,8,18,.62), rgba(14,8,18,.3) 55%, transparent 76%); }
.stage-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; cursor: grab; touch-action: none; opacity: 0; transition: opacity .5s; }
.stage-host.live .stage-cv { opacity: 1; } .stage-cv.drag { cursor: grabbing; }
.stage-host.nogl .stage-cv, .menu.nogl .stage-host, .menu.nogl .stage-hint, .menu.rand .stage-cv { display: none; }
.menu.nogl .menu-stage { justify-content: flex-end; } .menu.nogl .d-port { width: 7.5rem; height: 10rem; }
.stage-hint { text-align: center; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,214,160,.55); text-shadow: 0 1px 3px #000; padding: .25rem 0; }
.menu-stage .keys { grid-template-columns: 1fr 1fr; gap: .2rem .8rem; padding: .5rem .7rem; margin-top: .15rem; background: rgba(10,7,12,.62); border-radius: .35rem; box-shadow: 0 0 0 1px #2a1810, inset 0 0 .8rem rgba(0,0,0,.45); pointer-events: auto; }
.menu-stage .keys kbd { min-width: 2.6rem; }
.d-port { width: 6rem; height: 6rem; }
.menu-detail .lore { margin: .55rem 0; }
.abil-row { margin: .8rem 0 .7rem; }
.abil-desc { min-height: 5.6rem; margin-top: .6rem; }
.menu-left { padding-bottom: .8rem; }
.menu-left .ph { margin: .8rem 0 .4rem; } .menu-left .ph:first-child { margin-top: 0; }
/* ---------- round 5: ART.md chrome (warm umber ink line, ember gold, paper grain, team ember cores) ---------- */
:root {
--ink-line: #2a1810; --blue: #3da9ff; --red: #ff4d5a; /* Azure / Crimson ember-core colours */
--grain: url("data:image/svg+xml;utf8,");
}
/* hand-inked border: umber line whose weight swells toward the lower right like a brush stroke */
.panel { box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px rgba(150,112,52,.95), 0 0 0 3.5px var(--ink-line), 1.5px 2px 0 3.5px var(--ink-line), inset 0 1px 0 rgba(255,214,150,.18), inset 0 0 1.4rem rgba(20,8,6,.6), 0 .6rem 2rem rgba(0,0,0,.55); }
.panel-lite { box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px rgba(138,106,52,.55), 1px 1.5px 0 2.5px var(--ink-line), inset 0 0 .8rem rgba(20,8,6,.5); }
.panel::before, .panel::after { border-color: #f2c46a; filter: drop-shadow(0 0 3px rgba(255,150,50,.55)); }
.card, .abil { box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px rgba(138,106,52,.6), 1px 1.5px 0 2.5px var(--ink-line), 0 .4rem 1rem rgba(0,0,0,.6); }
.abil { box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px var(--bronze), 1px 1.5px 0 3px var(--ink-line); }
.abil.on { box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px var(--gold), 1px 1.5px 0 3px var(--ink-line), 0 0 1rem rgba(255,170,70,.55); }
.card.on { box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px var(--hc), 1px 1.5px 0 3px var(--ink-line), 0 0 1.6rem color-mix(in srgb, var(--hc) 60%, transparent), 0 .6rem 1.2rem rgba(0,0,0,.6); }
.d-port { box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px var(--hc), 1px 1.5px 0 3px var(--ink-line), 0 0 1.5rem color-mix(in srgb, var(--hc) 40%, transparent); }
.ico { box-shadow: 0 0 0 1px rgba(42,24,16,.85); }
/* tooltips + shop detail pane: parchment paper grain over the dusk panel */
.tip { background: var(--grain), linear-gradient(180deg, rgba(40,32,34,.97), rgba(16,11,14,.98)); box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px var(--gold-d), 1px 1.5px 0 3.5px var(--ink-line), 0 .8rem 2rem rgba(0,0,0,.7), inset 0 0 1rem rgba(255,190,110,.06); }
.shop-r { background: var(--grain), rgba(14,9,12,.5); box-shadow: inset 0 0 0 1px rgba(42,24,16,.9), inset 0 0 1.2rem rgba(0,0,0,.6), inset 0 1px 0 rgba(255,214,150,.1); }
.abil-desc { background: var(--grain), rgba(14,9,12,.45); box-shadow: inset 0 0 0 1px rgba(42,24,16,.9), inset 0 0 .8rem rgba(0,0,0,.5); }
.t-h { border-bottom: 1px solid rgba(255,183,102,.22); padding-bottom: .2rem; }
/* team ember cores: a small glowing gem marks allegiance */
.rh::before, .tb-team .tb-hint::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .4rem; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 0 1px var(--ink-line), 0 0 .6rem currentColor; vertical-align: .05rem; }
.tb-team .tb-hint::before { width: .4rem; height: .4rem; }
.rc.t0 .rh, .st.t0 .sth { --core: #3da9ff; } .rc.t1 .rh, .st.t1 .sth { --core: #ff4d5a; }
.seg .az.on { background: linear-gradient(180deg, rgba(61,169,255,.42), rgba(20,70,130,.42)); box-shadow: inset 0 0 .6rem rgba(61,169,255,.4); }
.seg .cr.on { background: linear-gradient(180deg, rgba(255,77,90,.42), rgba(130,25,35,.42)); box-shadow: inset 0 0 .6rem rgba(255,77,90,.4); }
.logo-rule b { background: #ffb766; box-shadow: 0 0 0 1px var(--ink-line), 0 0 .9rem #ff8a3c; }
.name, .room-in, .search { border-color: rgba(150,112,52,.9); box-shadow: inset 0 0 0 1px var(--ink-line), inset 0 .15rem .5rem rgba(0,0,0,.5); }
.btn { border-color: #96702f; box-shadow: 0 0 0 1px var(--ink-line), 1px 1.5px 0 1.5px var(--ink-line), inset 0 1px 0 rgba(255,230,170,.2); }
@media (min-height: 1100px) { .strip { grid-template-columns: repeat(13, 4.9rem); } .strip .card { width: 4.9rem; } }
/* QA: while dead the "You have fallen" panel + death recap occupy the top-centre; kill banners must not draw through them */
.ef-ui:has(.death.on) .banners { top: calc(12vh + 20rem); }
.seg.cs button { white-space: nowrap; font-size: .68rem; letter-spacing: .03em; padding: .45rem .55rem; }
/* ---------- multiplayer front door: landing, custom game, room / pre-game, modals (ART.md v2 "Ashen": iron, stone, restrained gold, ember accents) ---------- */
.mp { inset: 0; z-index: 9; pointer-events: none; }
.mps { position: absolute; inset: 0; display: none; pointer-events: none; padding: 1.3rem 2.2rem 1.4rem; }
.mps.on { display: flex; flex-direction: column; animation: fadein .45s; }
.mps::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6,5,8,.86) 0, rgba(6,5,8,.5) 34%, rgba(6,5,8,.12) 62%, rgba(6,5,8,.28) 100%), linear-gradient(0deg, rgba(6,5,8,.8), rgba(6,5,8,0) 30%), linear-gradient(180deg, rgba(6,5,8,.7), rgba(6,5,8,0) 24%); }
.mps.custom::before, .mps.room::before { background: radial-gradient(ellipse at 50% 45%, rgba(8,6,9,.6), rgba(6,5,8,.88) 80%); }
.mp-conn { position: absolute; top: 1.2rem; right: 2.2rem; display: none; pointer-events: none; } .mp-conn.on { display: flex; }
.mp-head { display: flex; align-items: center; gap: 1.2rem; pointer-events: auto; margin-bottom: 1rem; }
.mp-head h1 { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 1.9rem; letter-spacing: .22em; color: var(--gold-hi); text-shadow: 0 .15rem .3rem #000, 0 0 1.2rem rgba(255,130,40,.35); }
.ef-ui button:focus-visible, .ef-ui input:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 2px; }
/* landing */
.landing { justify-content: space-between; }
.ld-stack { width: 26rem; display: flex; flex-direction: column; gap: .8rem; pointer-events: auto; align-self: flex-start; margin: auto 0; transform: translateY(-1rem); }
.ld-name span { display: block; font-family: var(--serif); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }
.ld-name .name { text-align: left; }
.mbtn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; width: 100%; padding: .95rem 1.3rem; text-align: left; border: 0; border-radius: .35rem; cursor: pointer; background: linear-gradient(180deg, rgba(48,38,30,.94), rgba(18,13,12,.96)); box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px rgba(150,112,52,.85), 1px 1.5px 0 3px var(--ink-line), inset 0 1px 0 rgba(255,214,150,.18), 0 .5rem 1.2rem rgba(0,0,0,.55); transition: transform .14s, filter .14s, box-shadow .14s; overflow: hidden; }
.mbtn b { font-family: var(--serif); font-size: 1.45rem; letter-spacing: .24em; color: var(--gold-hi); text-shadow: 0 .1rem .2rem #000; line-height: 1.1; }
.mbtn small { font-size: .72rem; letter-spacing: .05em; color: var(--dim); }
.mbtn:hover:not(:disabled) { transform: translateX(.35rem); filter: brightness(1.18); box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px var(--gold), 1px 1.5px 0 3px var(--ink-line), 0 0 1.6rem rgba(255,140,50,.35), 0 .5rem 1.2rem rgba(0,0,0,.55); }
.mbtn:active:not(:disabled) { transform: translateX(.15rem) scale(.99); }
.mbtn::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: .3rem; background: var(--gold-d); }
.mbtn.pri { padding: 1.25rem 1.4rem; background: linear-gradient(180deg, #d9772a 0%, #a13c10 55%, #5e1d08 100%); }
.mbtn.pri::after { background: #ffd890; box-shadow: 0 0 .8rem #ffb060; }
.mbtn.pri b { font-size: 2.1rem; color: #fff6e0; text-shadow: 0 .12rem 0 #5a1c06, 0 0 1rem rgba(255,220,150,.6); } .mbtn.pri small { color: #ffe0b4; }
.mbtn.sm { width: auto; align-items: center; padding: .65rem 1.6rem; } .mbtn.sm b { font-size: 1.05rem; letter-spacing: .2em; } .mbtn.sm::after { display: none; } .mbtn.sm:hover:not(:disabled) { transform: translateY(-.1rem); }
.mbtn:disabled { opacity: .45; cursor: default; }
.ld-row { display: flex; gap: .7rem; } .ld-row .btn { flex: 1; padding: .6rem .5rem; }
.ld-foot { font-size: .72rem; color: var(--faint); letter-spacing: .08em; pointer-events: none; } .ld-foot span { color: var(--gold); border: 1px solid rgba(138,106,52,.6); border-radius: .2rem; padding: 0 .35rem; }
.ld-logo { pointer-events: none; }
/* custom */
.cu-box { width: min(48rem, 94vw); margin: 0 auto; padding: 1.2rem 1.5rem 1.4rem; pointer-events: auto; }
.cu-tabs { margin-bottom: 1.1rem; } .cu-tabs button { padding: .6rem; font-family: var(--serif); letter-spacing: .15em; }
.cu-pane { display: none; } .cu-pane.on { display: block; }
.fld { display: block; margin-bottom: .9rem; } .fld > span { display: block; font-family: var(--serif); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .35rem; }
.fld input, .cu-code, .ro-title, .rm-say { width: 100%; padding: .6rem .8rem; background: rgba(0,0,0,.55); border: 1px solid rgba(150,112,52,.9); border-radius: .3rem; color: #fff; font-size: .95rem; outline: 0; box-shadow: inset 0 0 0 1px var(--ink-line), inset 0 .15rem .5rem rgba(0,0,0,.5); }
.fld input:focus, .cu-code:focus, .ro-title:focus, .rm-say:focus { border-color: var(--gold); box-shadow: 0 0 .8rem rgba(230,191,106,.3); }
.chk { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .88rem; color: #d6d0c0; cursor: pointer; } .chk input { width: 1.05rem; height: 1.05rem; accent-color: var(--ember); }
.cu-act { margin-top: 1rem; display: flex; justify-content: flex-end; } .hint { color: var(--dim); font-size: .82rem; margin: 0 0 .8rem; }
.cu-joinrow { display: flex; gap: .8rem; } .cu-code { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .35em; text-transform: uppercase; text-align: center; }
.br-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; font-family: var(--serif); letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; color: var(--gold); }
.br-list { max-height: 24rem; overflow-y: auto; scrollbar-width: thin; }
.br-row { display: grid; grid-template-columns: 1.7fr 1fr .9fr .7fr 1.2fr 6.5rem; gap: .7rem; align-items: center; padding: .55rem .7rem; font-size: .8rem; border-bottom: 1px solid rgba(138,106,52,.22); } .br-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-row.hd { font-family: var(--serif); font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--faint); } .br-row:not(.hd):hover { background: rgba(255,170,70,.07); }
.br-row .bt { color: #fff; font-weight: 600; } .br-row .run { color: var(--ember-hi); } .br-row.pub .bt::before { content: ''; display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; transform: rotate(45deg); background: var(--gold); }
.br-empty { padding: 2rem 1rem; text-align: center; color: var(--dim); font-size: .85rem; }
/* room */
.room .mp-head { margin-bottom: .8rem; } .rm-code { display: flex; align-items: center; gap: .6rem; font-size: .8rem; color: var(--dim); } .rm-code .lbl { letter-spacing: .15em; text-transform: uppercase; font-size: .66rem; }
.rm-code b { font-family: var(--serif); font-size: 1.5rem; letter-spacing: .3em; color: var(--gold-hi); }
.rm-count { margin-left: auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; } .rm-count small { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); } .rm-count b { font-family: var(--serif); font-size: 2.1rem; color: var(--gold-hi); line-height: 1; text-shadow: 0 0 1rem rgba(255,130,40,.5); font-variant-numeric: tabular-nums; }
.rm-main { display: grid; grid-template-columns: 1fr 1fr 22rem; gap: 1.1rem; flex: 1; min-height: 0; }
.rm-teams { display: contents; }
.rm-team { padding: .8rem .9rem 1rem; pointer-events: auto; align-self: start; } .rm-th { display: flex; justify-content: space-between; font-family: var(--serif); letter-spacing: .18em; text-transform: uppercase; font-size: .85rem; padding: .15rem .3rem .45rem; border-bottom: 2px solid; margin-bottom: .5rem; } .rm-th em { font-style: normal; color: var(--dim); font-family: var(--sans); }
.rm-th b::before { content: ''; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; transform: rotate(45deg); background: currentColor; box-shadow: 0 0 0 1px var(--ink-line), 0 0 .6rem currentColor; vertical-align: .05rem; }
.rm-team.t0 .rm-th { color: var(--blue); border-color: var(--blue); } .rm-team.t1 .rm-th { color: var(--red); border-color: var(--red); }
.rm-row { display: flex; align-items: center; gap: .7rem; padding: .35rem .5rem; margin-bottom: .35rem; min-height: 3.4rem; border-radius: .3rem; background: rgba(0,0,0,.32); box-shadow: inset 0 0 0 1px rgba(42,24,16,.9); transition: background .15s; }
.rm-row.me { background: linear-gradient(90deg, rgba(255,150,60,.2), rgba(0,0,0,.3)); box-shadow: inset 0 0 0 1px rgba(230,191,106,.55); } .rm-row.rdy { box-shadow: inset 0 0 0 1px rgba(80,220,120,.55); } .rm-row.off { opacity: .55; }
.rm-port { width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; overflow: hidden; background: #181a22; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 1.1rem; color: var(--gold-d); box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px rgba(138,106,52,.7); } .rm-port img { width: 100%; height: 100%; object-fit: cover; }
.rm-nm { flex: 1; min-width: 0; } .rm-nm .n { display: block; font-weight: 700; font-size: .92rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rm-nm small { display: block; font-size: .68rem; color: var(--dim); letter-spacing: .04em; }
.rm-row.open .rm-port, .rm-row.bot .rm-port { color: var(--faint); background: #101116; } .rm-row.open .rm-nm .n, .rm-row.bot .rm-nm .n { color: var(--dim); font-weight: 600; } .rm-row.open { background: transparent; box-shadow: inset 0 0 0 1px rgba(138,106,52,.3); border-style: dashed; }
.rm-tags { display: flex; gap: .3rem; } .tg { font-size: .56rem; font-weight: 800; letter-spacing: .08em; padding: .12rem .35rem; border-radius: .2rem; border: 1px solid; } .tg.host { color: var(--gold-hi); border-color: var(--gold-d); background: rgba(230,191,106,.14); } .tg.rdy { color: #6bff93; border-color: rgba(60,220,110,.4); background: rgba(60,220,110,.14); } .tg.off { color: #ffb0a0; border-color: rgba(255,120,100,.4); background: rgba(255,90,70,.12); }
.rm-acts { display: flex; gap: .3rem; opacity: 0; transition: opacity .12s; } .rm-row:hover .rm-acts, .rm-acts:focus-within, .rm-acts.vis { opacity: 1; }
.ib { width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: .25rem; background: rgba(255,255,255,.08); color: var(--gold-hi); font-size: .85rem; box-shadow: inset 0 0 0 1px rgba(138,106,52,.5); } .ib:hover { background: rgba(255,170,70,.25); } .ib.x:hover { background: rgba(255,80,80,.35); color: #fff; }
.rm-side { display: flex; flex-direction: column; padding: .9rem 1rem; pointer-events: auto; min-height: 0; max-height: 26rem; align-self: start; width: 100%; }
.rm-chat { flex: 1; min-height: 8rem; overflow-y: auto; scrollbar-width: thin; font-size: .8rem; line-height: 1.4; margin-bottom: .6rem; color: #d6d0c0; user-select: text; } .rm-chat .cl { padding: .1rem 0; overflow-wrap: anywhere; } .rm-chat b.t0 { color: var(--blue); } .rm-chat b.t1 { color: var(--red); }
.rm-opts { margin-top: 1rem; padding: .8rem 1.1rem; pointer-events: auto; display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; align-items: center; }
.ro { display: flex; align-items: center; gap: .7rem; font-size: .8rem; color: var(--dim); } .ro > span { text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; } .ro .seg button { padding: .38rem .7rem; } .ro .seg button:disabled { cursor: default; } .ro-title { width: 13rem; padding: .4rem .6rem; } .ro-line { color: var(--dim); font-size: .8rem; }
.rm-opts .chk { padding: 0; font-size: .8rem; }
.rm-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 1rem; pointer-events: none; } .rm-note { color: var(--dim); font-size: .82rem; } .rm-btns { display: flex; gap: .9rem; align-items: center; pointer-events: auto; }
.mbtn.ready.on { background: linear-gradient(180deg, #3f9d54, #1c5a2c); } .mbtn.ready.on b { text-shadow: 0 0 1rem rgba(160,255,190,.7); }
/* modals, finder, toasts */
.mp-modal { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: auto; background: radial-gradient(circle, rgba(0,0,0,.55), rgba(0,0,0,.86)); z-index: 2; } .mp-modal.on { display: flex; animation: fadein .25s; }
.mm-box { min-width: 26rem; max-width: 36rem; padding: 1.6rem 2rem 1.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.mm-k { font-family: var(--serif); letter-spacing: .3em; font-size: .75rem; color: var(--ember-hi); } .mm-box h2 { margin: 0; font-family: var(--serif); letter-spacing: .14em; font-size: 1.7rem; color: #fff; text-shadow: 0 0 1.2rem rgba(255,130,40,.4); }
.mm-time { font-family: var(--serif); font-size: 3.2rem; line-height: 1; color: var(--gold-hi); text-shadow: 0 0 1.4rem rgba(255,150,50,.5); font-variant-numeric: tabular-nums; } .mm-score { display: flex; gap: .9rem; align-items: center; font-family: var(--serif); letter-spacing: .1em; font-size: 1.05rem; } .mm-score i { color: var(--faint); font-size: .68rem; font-style: normal; text-transform: uppercase; letter-spacing: .15em; } .mm-score .t0 { color: var(--blue); } .mm-score .t1 { color: var(--red); }
.mm-sub { margin: .2rem 0 .4rem; color: #cfc8b6; font-size: .86rem; line-height: 1.45; max-width: 28rem; } .mm-btns { display: flex; gap: .8rem; margin-top: .6rem; flex-wrap: wrap; justify-content: center; }
.spin.big { width: 3rem; height: 3rem; border-width: 3px; } .finder .mm-box { min-width: 22rem; }
.mp-toasts { position: absolute; top: 5.2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .4rem; align-items: center; pointer-events: none; z-index: 3; }
.mp-toast { padding: .5rem 1.1rem; font-size: .85rem; color: var(--ink); background: linear-gradient(180deg, rgba(34,26,22,.96), rgba(14,10,10,.96)); border-radius: .3rem; box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px rgba(150,112,52,.8), 0 .4rem 1rem rgba(0,0,0,.6); animation: fadein .3s; transition: opacity .5s; } .mp-toast.err { box-shadow: 0 0 0 1px var(--ink-line), 0 0 0 2px #a04048, 0 .4rem 1rem rgba(0,0,0,.6); color: #ffd6d6; } .mp-toast.out { opacity: 0; }
/* the classic hero-select screen now has a mode: quick / practice / room (lobby) / legacy (?room=) */
.menu .sec { display: none; } .menu .back { display: block; width: 100%; margin-bottom: .8rem; }
.menu[data-mode="legacy"] .sec-name, .menu[data-mode="legacy"] .sec-room, .menu[data-mode="legacy"] .sec-team, .menu[data-mode="practice"] .sec-team, .menu[data-mode="practice"] .sec-prac, .menu .sec-find { display: block; }
.menu[data-mode="quick"] .roster, .menu[data-mode="quick"] .sec-rh, .menu[data-mode="practice"] .roster, .menu[data-mode="practice"] .sec-rh { display: none; }
.menu[data-mode="legacy"] .back { display: block; }
.card.dim { opacity: .22; filter: grayscale(.8) brightness(.7); }
.hsearch { width: 100%; padding: .5rem .7rem; background: rgba(0,0,0,.55); border: 1px solid rgba(150,112,52,.9); border-radius: .3rem; color: #fff; font-size: .85rem; outline: 0; box-shadow: inset 0 0 0 1px var(--ink-line); } .hsearch:focus { border-color: var(--gold); }
.prac-seg button { padding: .45rem .2rem; }
.end-btns { display: flex; gap: .8rem; }
@media (max-width: 1500px), (max-height: 760px) { .rm-main { grid-template-columns: 1fr 1fr 19rem; } .rm-row { min-height: 3rem; } .rm-port { width: 2.3rem; height: 2.3rem; } }
.room .rm-count { margin-right: 14rem; }
.rm-row.open { box-shadow: none; border: 1px dashed rgba(138,106,52,.38); }
.menu:not([data-mode="legacy"]) .play { width: 18.5rem; } .menu:not([data-mode="legacy"]) .play b { font-size: 1.8rem; letter-spacing: .16em; padding-left: .16em; white-space: nowrap; } .play small { white-space: nowrap; }
.menu .sec { margin-bottom: .7rem; } .menu .sec .ph { margin-top: 0; }
.mp-over { inset: 0; z-index: 12; pointer-events: none; }
/* pre-game buy phase (me.pr > 0): big centred countdown, abilities / summoner spells visibly locked */
.hud .prep { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); text-align: center; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 6; text-shadow: 0 .15rem .4rem #000; }
.hud .prep.on { opacity: 1; }
.hud .prep .pp-k { font-size: 1.15rem; letter-spacing: .32em; color: #ffe2a8; font-weight: 700; }
.hud .prep .pp-n { font-size: 6.5rem; line-height: 1; font-weight: 800; color: #fff4d8; filter: drop-shadow(0 0 1.2rem rgba(255,150,50,.65)); }
.hud .prep .pp-n.tick { animation: ppTick .9s ease-out; }
.hud .prep .pp-h { margin-top: .2rem; font-size: 1.05rem; letter-spacing: .08em; color: #d8e6ff; } .hud .prep .pp-h b { color: #ffd45a; border: 1px solid rgba(255,212,90,.6); border-radius: .25rem; padding: 0 .35rem; }
@keyframes ppTick { 0% { transform: scale(1.35); opacity: .3; } 30% { transform: scale(1); opacity: 1; } 100% { transform: scale(.96); opacity: .9; } }
.hud.prep .slot .ico, .hud.prep .slot .key { filter: grayscale(.9) brightness(.55); }
.hud.prep .slot.sm { opacity: .6; }