/* ===== Online (DESIGN 13.3): hub, rooms, tournaments, overlays, online build layout ===== */
#scr-online.active, #scr-oranked.active, #scr-room.active, #scr-tournament.active { display: flex; flex-direction: column; align-items: center; gap: 1.2cqmin; padding-top: 2cqmin; }
.ol-title { max-width: 62%; }
.portrait .ol-title { max-width: 56%; font-size: 2.1em; }
.ol-body { flex: 1 1 0; min-height: 0; width: 100%; max-width: 1100px; padding: 0 3cqmin 2cqmin; display: grid; gap: 2.4cqmin; align-items: center; }
.landscape .ol-body { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); }
.portrait .ol-body { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
.ol-profile { display: flex; flex-direction: column; align-items: center; gap: .3em; min-width: 0; }
.portrait .ol-profile { flex-direction: row; justify-content: center; gap: 1em; }
.ol-badge { width: min(100%, 36cqh, 60cqw); aspect-ratio: 1; animation: badgeFloat 3s ease-in-out infinite; }
.portrait .ol-badge { width: min(34cqw, 17cqh); flex: none; }
.ol-badge .tier-badge { width: 100% !important; height: 100% !important; filter: drop-shadow(0 .4em .5em rgba(0, 0, 0, .45)); }
.ol-id { display: flex; flex-direction: column; align-items: center; gap: .15em; min-width: 0; max-width: 100%; }
.portrait .ol-id { align-items: flex-start; flex: 1; }
.ol-name-btn { font-size: 1.05em; max-width: 100%; padding: .3em .8em; gap: .5em; }
.ol-name-btn .ico { width: 1.1em; height: 1.1em; }
.ol-name-txt { max-width: 11em; display: block; }
.ol-tier { font-size: 1.5em; line-height: 1.1; color: var(--tc, var(--yellow)); -webkit-text-stroke: .07em var(--ink); paint-order: stroke fill; text-shadow: 0 .08em 0 var(--ink); max-width: 100%; padding: 0 .1em .08em; }
.ol-rec { color: var(--text-dim); font-size: .85em; max-width: 100%; }
.ol-status-line { color: var(--yellow); font-size: .85em; min-height: 1.2em; max-width: 100%; }
.ol-status-line.bad { color: #ff7d7d; }
.ol .rk-mmr b { font-size: 2.2em; }
.ol-modes { display: grid; gap: 1.6cqmin; min-width: 0; align-content: center; }
.landscape .ol-modes { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(0, 22cqh); }
.portrait .ol-modes { grid-template-columns: 1fr; grid-auto-rows: minmax(0, 14cqh); align-content: start; }
.ol-mode { flex-direction: row; justify-content: flex-start; text-align: left; gap: .8em; padding: .5em .9em; font-size: 1em; min-width: 0; min-height: 44px; white-space: normal; }
.landscape .ol-mode { flex-direction: column; justify-content: center; text-align: center; gap: .3em; }
.om-ico { width: 2.5em; height: 2.5em; flex: none; display: block; }
.landscape .om-ico { width: 3em; height: 3em; }
.om-ico svg { width: 100%; height: 100%; display: block; }
.ol-mode .om-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: .1em; overflow: hidden; }
.ol-mode .om-txt b { font-size: 1.2em; font-weight: 400; line-height: 1.1; white-space: normal; text-wrap: balance; overflow-wrap: break-word; max-width: 100%; min-width: 0; }
.landscape .ol-mode .om-txt b { font-size: 1.1em; text-align: center; }
.ol-mode .om-txt small { white-space: normal; text-wrap: balance; line-height: 1.15; font-family: var(--font-ui); text-transform: none; font-weight: 700; letter-spacing: 0; opacity: .8; font-size: .66em; }
.landscape .ol-mode .om-txt { flex: none; align-items: center; max-width: 100%; }
.ol.connecting .ol-modes { opacity: .55; }

/* connection chip */
.net-chip { position: absolute; top: max(6px, .8cqmin); right: max(8px, 1.2cqmin); z-index: 70; display: none; align-items: center; gap: .4em; padding: .12em .7em .12em .5em; border-radius: 1em;
    background: rgba(20, 12, 34, .88); border: .12em solid var(--ink); font-size: clamp(10px, 1.7cqmin, 15px); font-weight: 800; color: var(--text); pointer-events: none; }
.net-chip.show { display: inline-flex; }
.net-chip.play { top: 1px; right: auto; left: 50%; transform: translateX(-50%); opacity: .85; font-size: clamp(9px, 1.5cqmin, 13px); padding-block: .05em; }
#scr-build.online .build-grid { inset: max(15px, 2.1cqmin) 0 0 0; }
.nc-dot { width: .8em; height: .8em; border-radius: 50%; background: var(--green); box-shadow: 0 0 .5em var(--green); }
.net-chip[data-state="reconnecting"] .nc-dot, .net-chip[data-state="connecting"] .nc-dot { background: var(--yellow); box-shadow: 0 0 .5em var(--yellow); animation: urgentVig 1s ease-in-out infinite; }
.net-chip[data-state="offline"] .nc-dot { background: var(--red); box-shadow: 0 0 .5em var(--red); }

/* keypad */
.kp { width: min(100%, 25em); display: flex; flex-direction: column; gap: .8em; font-size: 1em; }
.kp.busy { opacity: .6; pointer-events: none; }
.kp-display { display: flex; gap: .5em; justify-content: center; }
.kp-slot { width: 2.6em; height: 3em; border-radius: .7em; border: .18em solid var(--ink); background: #0e0720; display: flex; align-items: center; justify-content: center; font-size: 1.7em; color: #fff;
    box-shadow: inset 0 .12em .3em rgba(0, 0, 0, .5); }
.kp-slot.cur { border-color: var(--yellow); animation: pulseRing 1s ease-in-out infinite; outline: 0; }
.kp-slot.on { background: linear-gradient(180deg, #4b2a82, #2b1650); color: var(--yellow); }
.kp-slot.pop { animation: popIn .25s var(--ease-spring); }
.kp-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45em; }
.kp-key { font-size: 1.25em; padding: .25em 0; min-height: max(44px, 2.3em); --c: #4a2d7c; --cd: #2e1a55; --tc: var(--text); }
.kp-key.coral { --c: var(--coral); --cd: var(--coral-d); --tc: #fff; }
.kp-key.green { --c: var(--green); --cd: var(--green-d); --tc: var(--ink); }
.kp-del { grid-column: span 2; } .kp-go { grid-column: span 3; }
.kp-key.disabled { opacity: .55; }
.short .kp { gap: .4em; } .short .kp-key { min-height: 40px; font-size: 1.05em; } .short .kp-slot { height: 2.2em; width: 2.2em; font-size: 1.4em; }

/* views, lobby */
.ol-room-body { flex: 1 1 0; min-height: 0; width: min(100%, 40em); padding: 0 3cqmin 2cqmin; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.tr .ol-room-body { width: min(100%, 64em); }
.ol-view { display: none; width: 100%; flex-direction: column; align-items: center; gap: 1em; min-height: 0; }
.ol-view.on { display: flex; margin-block: auto; }
.ol-view.ol-join.on { margin-block: 0; }
.landscape .ol { font-size: clamp(13px, 3cqmin, 32px); }
.ol-choose { margin-top: 2cqmin; max-width: 26em; gap: 1.2em; }
.ol-choose .btn.big { width: 100%; font-size: 1.35em; }
.ol-lenwrap { width: 100%; display: flex; flex-direction: column; gap: .35em; }
.ol-lenlbl, .ol-joinlbl, .ol-codelbl { text-align: center; color: var(--text-dim); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .85em; max-width: 100%; }
.ol-joinlbl { font-size: 1em; letter-spacing: .04em; }
.ol-seg .btn small { opacity: .7; }
.ol-join { margin-top: 1.5cqmin; }
.ol-lobby { margin-top: 1cqmin; max-width: 28em; }
.ol-row { display: flex; gap: .7em; justify-content: center; width: 100%; }
.ol-row .btn { flex: 1 1 0; min-width: 0; font-size: .95em; max-width: 12em; }
.code-tiles { display: flex; gap: .55em; justify-content: center; }
.code-tile { width: 2.1em; height: 2.5em; display: flex; align-items: center; justify-content: center; font-size: 2.6em; color: var(--ink); border: .06em solid var(--ink); border-radius: .22em;
    background: linear-gradient(180deg, #fff3a8, var(--yellow) 45%, var(--yellow-d)); box-shadow: 0 .06em 0 var(--ink), 0 .12em .25em rgba(0, 0, 0, .5), inset 0 .04em 0 rgba(255, 255, 255, .6); }
.code-tile:nth-child(even) { background: linear-gradient(180deg, #b7ecff, var(--cyan) 45%, var(--cyan-d)); }
.code-tile.flip { animation: tileFlip .5s var(--ease-spring) both; }
@keyframes tileFlip { from { transform: rotateX(90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.ol-slots { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; width: 100%; }
.portrait .ol-slots { grid-template-columns: 1fr; }
.sl { display: flex; align-items: center; gap: .6em; padding: .4em .7em; border-radius: 1em; background: var(--panel-2); border: .15em solid var(--ink); box-shadow: 0 .2em 0 var(--ink); min-width: 0; }
.sl.me { border-color: var(--coral); } .sl.opp { border-color: var(--cyan); }
.sl.empty { opacity: .6; border-style: dashed; }
.sl.off { filter: grayscale(.8); }
.sl-av { width: 2.8em; height: 2.8em; flex: none; display: flex; align-items: center; justify-content: center; } .sl-av canvas { width: 100% !important; height: 100% !important; }
.sl-q { font-size: 1.6em; color: var(--text-dim); }
.sl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-name { font-size: 1.1em; color: #fff; } .sl-tag { font-size: .75em; color: var(--text-dim); min-height: 1em; }
.sl-dot { width: .8em; height: .8em; border-radius: 50%; background: var(--green); box-shadow: 0 0 .5em var(--green); flex: none; }
.sl.empty .sl-dot, .sl.off .sl-dot { background: var(--text-dim); box-shadow: none; }
.ol-chip { padding: .15em .9em; border-radius: 1em; background: rgba(12, 6, 26, .65); border: .12em solid var(--ink); color: var(--yellow); font-weight: 800; font-size: .9em; }
.ol-lobby .btn.big { width: 100%; max-width: 20em; font-size: 1.4em; }
.ol-wait { color: var(--text-dim); text-align: center; min-height: 1.3em; max-width: 24em; font-size: .95em; line-height: 1.25; text-wrap: balance; }
.ol-how { font-size: .9em; line-height: 1.3; color: var(--text); }
.ol-search { display: none; align-items: center; gap: .6em; justify-content: center; color: var(--yellow); }
.ol.searching .ol-search { display: flex; }
.sc-spin { width: 1.3em; height: 1.3em; border-radius: 50%; border: .2em solid var(--yellow); border-right-color: transparent; animation: spin .8s linear infinite; flex: none; display: inline-block; }
.ol-ghosts { text-align: center; color: var(--text-dim); font-size: .85em; padding-top: .3em; }

/* tournament lobby + bracket */
.tr-choose { gap: 1em; }
.tr-lobby { margin-top: 1cqmin; gap: 1em; }
.tr-lobby-top { display: flex; flex-direction: column; align-items: center; gap: .6em; width: 100%; }
.tr-codeblock { display: flex; flex-direction: column; align-items: center; gap: .5em; width: 100%; }
.tr-codeblock .code-tile { font-size: 2em; }
.tr-countdown { display: flex; flex-direction: column; align-items: center; }
.tr-cd { font-size: 3.4em; color: var(--yellow); -webkit-text-stroke: .06em var(--ink); paint-order: stroke fill; text-shadow: 0 .06em 0 var(--ink); line-height: 1; }
.tr-cdlbl { color: var(--text-dim); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85em; }
.tr-entrants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5em; width: 100%; }
.portrait .tr-entrants { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.en { display: flex; align-items: center; gap: .4em; padding: .35em .6em; border-radius: .8em; background: var(--panel-2); border: .13em solid var(--ink); min-width: 0; font-weight: 800; }
.en.me { border-color: var(--yellow); background: rgba(255, 210, 63, .14); }
.en.empty { opacity: .5; border-style: dashed; }
.en.off { filter: grayscale(.8); opacity: .7; }
.en-name { flex: 1; min-width: 0; } .en-you { color: var(--yellow); font-size: .75em; }
.en-dot { width: 1em; height: 1em; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; border: .1em solid var(--ink); background: #8d7f9e; }
.en-dot.bot { background: transparent; border: 0; color: var(--text-dim); width: 1.2em; height: 1.2em; } .en-dot svg { width: 100%; height: 100%; }
.tr-bracket { gap: .6em; flex: 1; align-items: stretch; }
.tr-status { text-align: center; font-family: var(--font-display); text-transform: uppercase; color: var(--yellow); font-size: 1.1em; line-height: 1.2; min-height: 1.6em; padding: .3em .8em; text-wrap: balance; border-radius: 1em; background: rgba(12, 6, 26, .6); border: .12em solid var(--ink); }
.tr-status.win { color: var(--green); border-color: var(--green); animation: heroGlow 2s ease-in-out infinite; } .tr-status.out { color: #ff9d9d; } .tr-status.live { color: #fff; border-color: var(--red); }
.br { display: flex; gap: 1.2cqmin; flex: 1 1 0; min-height: 0; width: 100%; }
.br-col { flex: 1 1 0; display: flex; flex-direction: column; min-width: 0; gap: .4em; }
.br-h { text-align: center; font-family: var(--font-display); text-transform: uppercase; color: var(--text-dim); font-size: .85em; letter-spacing: .04em; }
.br-list { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: space-around; gap: .5em; }
.br-m { position: relative; display: flex; flex-direction: column; gap: .12em; padding: .3em .35em; border-radius: .8em; border: .14em solid var(--ink); background: var(--panel-2); box-shadow: 0 .18em 0 var(--ink);
    font: inherit; color: var(--text); text-align: left; cursor: default; min-width: 0; }
.br-m.live { border-color: var(--red); animation: setb 1.4s ease-in-out infinite; }
.br-m.watch { cursor: pointer; padding-right: 1.6em; } .br-m.watch:hover { filter: brightness(1.15); }
.br-m.pending { opacity: .55; }
.br-st { align-self: flex-start; font-size: .65em; font-weight: 800; letter-spacing: .08em; color: var(--text-dim); max-width: 100%; }
.br-st.live { color: #fff; background: var(--red); border-radius: 1em; padding: 0 .6em; }
.br-p { display: flex; align-items: center; gap: .3em; padding: .12em .25em; border-radius: .5em; min-height: 1.9em; min-width: 0; font-size: .92em; }
.br-p.win { background: rgba(91, 227, 125, .22); color: #fff; } .br-p.lose { opacity: .5; } .br-p.tbd { opacity: .5; }
.br-p.me { box-shadow: inset 0 0 0 .12em var(--yellow); }
.br-n { flex: 1; min-width: 0; font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: .95em; }
.portrait .br-n { font-size: .92em; } .br-s { color: var(--yellow); min-width: .8em; text-align: right; }
.br-play { position: absolute; right: .35em; top: 50%; width: 1.1em; height: 1.1em; margin-top: -.55em; color: var(--cyan); } .br-play svg { width: 100%; height: 100%; display: block; }
.br-champ { flex: .8 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3em; min-width: 0; animation: popIn .6s var(--ease-spring) both; }
.br-champ .ico { width: 4em; height: 4em; display: block; animation: trophyBob 1.6s ease-in-out infinite; } .br-champ .ico svg { width: 100%; height: 100%; }
.br-champ b { font-size: 1.1em; color: var(--yellow); max-width: 100%; text-shadow: 0 .08em 0 var(--ink); }
.tr-bracket-actions .btn { max-width: 14em; }
.portrait .br { gap: 1cqmin; } .portrait .br-m { padding: .25em .25em; } .portrait .br-champ .ico { width: 2.5em; height: 2.5em; }
.tr .confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.short .tr-status { font-size: .95em; }

/* name editor, notices, status card */
.ol-name { width: min(94%, 28em); }
.ne-hint { text-align: center; color: var(--text-dim); font-size: .95em; line-height: 1.25; }
.ne-row { display: flex; gap: .6em; align-items: stretch; }
.ne-input { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 1.4em; padding: .45em .7em; border-radius: .7em; border: .15em solid var(--ink); background: #0e0720; color: #fff;
    -webkit-user-select: text; user-select: text; outline: none; text-transform: none; touch-action: auto; }
.ne-input:focus { border-color: var(--yellow); } .ne-input.bad { border-color: var(--red); }
.ne-roll { flex: none; width: 3.2em; padding: 0; font-size: 1.1em; }
.ne-meta { display: flex; justify-content: space-between; gap: .6em; min-height: 1.4em; align-items: flex-start; }
.ne-err { flex: 1; color: #ff9d9d; font-size: .9em; line-height: 1.2; text-align: left; } .ne-count { color: var(--text-dim); font-size: .85em; flex: none; }
.ol-name .btn.big { font-size: 1.3em; } .ol-name .btn.disabled { opacity: .6; }
.ol-notice { width: min(94%, 30em); }
.ol-notice-text { text-align: center; line-height: 1.3; font-size: 1.05em; padding: .2em .4em; text-wrap: balance; }
.ol-notice-btns { display: flex; gap: .7em; justify-content: center; flex-wrap: wrap; } .ol-notice-btns .btn { flex: 1 1 8em; max-width: 14em; }
.modal-back.net-back { background: transparent; backdrop-filter: none; align-items: flex-start; pointer-events: none; padding-top: 3.5cqmin; }
.modal-back.net-back .modal { pointer-events: auto; width: min(92%, 24em); gap: .4em; padding: .8em 1em 1em; border-color: var(--yellow); }
.sc-head { display: flex; align-items: center; gap: .6em; padding-right: 1.6em; min-width: 0; } .sc-title { font-size: 1.25em; color: var(--yellow); flex: 1; min-width: 0; }
.sc-text { color: var(--text); font-size: .95em; line-height: 1.25; } .sc-time { font-size: 2em; color: #fff; text-align: center; text-shadow: 0 .06em 0 var(--ink); }
.sc-leave { margin-top: .4em; font-size: .9em; }
.ol-lb { width: min(94%, 38em); } .ol-lb-seg .btn { font-size: .8em; }
.lb-badges { display: inline-flex; align-items: center; gap: .15em; color: var(--yellow); font-size: .85em; } .lb-badges .ico { width: 1.2em; height: 1.2em; display: inline-flex; } .lb-badges .ico svg { width: 100%; height: 100%; }

/* ===== Build screen, online layout: my panel big, opponent panel compact (last-round bot + status) ===== */
.landscape #scr-build.online .build-grid { grid-template-columns: minmax(0, 1fr) clamp(84px, 11cqw, 170px) minmax(0, .5fr); }
.portrait #scr-build.online .build-grid { grid-template-rows: minmax(0, .42fr) clamp(42px, 6.5cqh, 90px) minmax(0, 1fr); }
.landscape #scr-build.online .panel.is-me { order: 1; } .landscape #scr-build.online .panel.is-remote { order: 3; }
.portrait #scr-build.online .panel.is-remote { order: 1; } .portrait #scr-build.online .panel.is-me { order: 3; }
#scr-build .panel.is-remote .p-in { --k: max(1px, min(.34cqw, .3333cqh)); grid-template-rows: auto minmax(0, 1fr); }
.portrait #scr-build .panel.is-remote .p-in { --k: max(1px, min(.2778cqw, .5cqh)); }
.is-remote .p-chips, .is-remote .p-shop, .is-remote .p-actions, .is-remote .p-stats, .is-remote .p-scrap, .is-remote .p-hint, .is-remote .p-brands, .is-remote .ready-stamp { display: none; }
.p-remote { display: none; }
.is-remote .p-remote { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: .5em; min-width: 0; min-height: 0; padding: .2em; }
.landscape .is-remote .p-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.rm-cap { font-size: .95em; color: var(--text-dim); text-align: center; line-height: 1.2; max-height: 2.5em; }
.rm-status { display: flex; align-items: center; justify-content: center; gap: .4em; padding: .25em .8em; border-radius: 1em; font-family: var(--font-display); text-transform: uppercase; font-size: 1.3em; border: .13em solid var(--ink); }
.rm-status.shop { background: rgba(12, 6, 26, .7); color: var(--yellow); }
.rm-status.ready { background: var(--green); color: var(--ink); animation: popIn .4s var(--ease-spring); }
.rm-status .ico { width: 1.1em; height: 1.1em; display: block; } .rm-status .ico svg { width: 100%; height: 100%; }
.dots { display: inline-flex; gap: .15em; } .dots b { width: .3em; height: .3em; border-radius: 50%; background: currentColor; animation: dotBlink 1.2s infinite; } .dots b:nth-child(2) { animation-delay: .2s; } .dots b:nth-child(3) { animation-delay: .4s; }
@keyframes dotBlink { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
.rm-meta { text-align: center; color: var(--text); font-weight: 800; font-size: .95em; }
#scr-build.online .is-remote { opacity: .96; }
#scr-build.online .panel.is-me .p-name::after { content: ''; }
.watching .rr-scraps { display: none; }
.watching .taunt { display: none; }

/* ---- player account (Playgama): avatar, account strip, login button ---- */
.av { display: inline-flex; flex: none; border-radius: 50%; overflow: hidden; background: rgba(12, 6, 26, .55); box-shadow: 0 0 0 .1em var(--ink, #140c22); vertical-align: middle; }
.av img, .av canvas { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
.ol-acct { display: flex; align-items: center; gap: .55em; max-width: 100%; min-width: 0; padding: .2em .8em .2em .25em; border-radius: 2em; background: rgba(12, 6, 26, .55); border: .1em solid rgba(255, 255, 255, .12); }
.ol-acct[hidden], .ol-login[hidden] { display: none !important; }
.ol-acct-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; text-align: left; }
.ol-acct-txt b { font-size: .9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
.ol-acct-badge { color: var(--cyan, #4dd9ff); font-size: .62em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ol-login { flex-direction: column; gap: .05em; margin-top: .3em; padding: .35em 1em; max-width: 100%; min-height: 44px; white-space: normal; }
.ol-login b { font-size: 1em; }
.ol-login small { font-size: .62em; font-weight: 700; opacity: .85; }
.lb-row .av { margin-right: -.1em; }

/* ---- Playgama online build: identity strip + offline state of ONLINE RANKED, server leaderboard "you" card / past seasons */
.ork-id { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .6em; padding: .45em .7em; }
.ork-id .ork-name { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ork-hint { flex: 1 1 12em; color: var(--text-dim); font-size: .8em; line-height: 1.25; }
.ork-login { flex: none; font-size: .85em; padding: .35em .9em; }
.ork-off { display: flex; flex-direction: column; gap: .5em; align-items: center; text-align: center; padding: .9em 1em; border-color: var(--coral, #ff4d6d); }
.ork-off > b { font-size: 1.25em; color: var(--yellow); }
.ork-off-t { line-height: 1.3; text-wrap: balance; }
.ork-off-c { color: var(--text-dim); font-size: .85em; }
.ol-lb-past { flex-wrap: wrap; justify-content: center; } .ol-lb-past .btn { font-size: .72em; }
.ol-lb-me { display: flex; flex-direction: column; gap: .3em; padding: .45em .7em; border-radius: .8em; background: rgba(255, 210, 63, .12); border: .12em solid var(--yellow); }
.ol-lb-me-main { display: flex; align-items: center; gap: .6em; }
.ol-lb-me-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.1; }
.ol-lb-me-name small { color: var(--text-dim); font-size: .7em; }
.ol-lb-me-hint { color: var(--text); font-size: .85em; line-height: 1.25; }
.ol-lb-me-acts { display: flex; flex-wrap: wrap; gap: .4em; }
.ol-lb-me-acts .btn { font-size: .8em; padding: .3em .8em; }
.ol-lb-me-acts .btn .ico { width: 1em; height: 1em; display: inline-block; margin-right: .3em; vertical-align: -.1em; }
.ol-lb-h { font-size: .8em; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; margin-top: .3em; }
.ol-lb-crown { display: inline-flex; width: 1.3em; height: 1em; flex: none; } .ol-lb-crown svg { width: 100%; height: 100%; }
.lb-note.small { font-size: .8em; padding: .3em; }
.ol-lb-rank { margin-top: .3em; display: flex; gap: .6em; align-items: center; justify-content: center; flex-wrap: wrap; }
/* connection indicator: just a red dot while disconnected (no "Online" / ping text) */
.net-chip.dot-only { padding: .3em; gap: 0; background: rgba(12, 6, 26, .55); }
.net-chip.dot-only .nc-txt { display: none; }
.net-chip.dot-only .nc-dot { background: var(--red); box-shadow: 0 0 .5em var(--red); }