:root {
  --bg: #080a14;
  --panel: rgba(16, 18, 33, .78);
  --panel-solid: #121525;
  --panel-soft: rgba(25, 28, 49, .56);
  --line: rgba(165, 174, 222, .12);
  --line-bright: rgba(165, 174, 222, .22);
  --text: #f5f3ff;
  --muted: #8d90a9;
  --muted-2: #5c6078;
  --cyan: #6de7e1;
  --violet: #a78bfa;
  --amber: #ffc76a;
  --coral: #ff7f9f;
  --green: #79e3a8;
  --shadow: 0 24px 80px rgba(0,0,0,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 1120px; color: var(--text); background: radial-gradient(circle at 50% -10%, #1b2145 0, #0d1020 36%, var(--bg) 73%); font-family: Manrope, system-ui, sans-serif; letter-spacing: -.01em; }
body:before, body:after { content: ''; pointer-events: none; position: fixed; inset: 0; z-index: -3; }
body:before { background: linear-gradient(115deg, rgba(91, 82, 240, .08), transparent 30%, rgba(40, 232, 215, .05) 72%, transparent); }
body:after { background: radial-gradient(circle at 16% 70%, rgba(109, 231, 225, .055), transparent 23%), radial-gradient(circle at 88% 36%, rgba(167, 139, 250, .07), transparent 25%); }
button, input { font: inherit; }
button { cursor: pointer; }
.noise { position: fixed; inset: 0; pointer-events: none; opacity: .035; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.app-shell { width: min(1780px, calc(100vw - 70px)); margin: 0 auto; padding: 0 0 20px; }
.topbar { height: 86px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; letter-spacing: .14em; font-size: 14px; font-weight: 800; }
.brand-mark { width: 26px; height: 26px; position: relative; display: flex; gap: 3px; align-items: end; }
.brand-mark span { display:block; width: 5px; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 14px rgba(109,231,225,.7); }
.brand-mark span:nth-child(1) { height: 12px; opacity: .55; }.brand-mark span:nth-child(2) { height: 21px; }.brand-mark span:nth-child(3) { height: 16px; background: var(--violet); }
.brand-text span { color: var(--cyan); font-weight: 500; }
.topbar-context, .topbar-actions, .profile-chip, .wallet-row, .stat-line, .bid-console-top, .round-progress, .footerbar { display: flex; align-items: center; }
.topbar-context { gap: 12px; font: 10px 'DM Mono', monospace; color: #b8bbd1; letter-spacing: .12em; }
.muted { color: var(--muted-2); }.divider { width: 1px; height: 13px; background: var(--line-bright); }.live-dot, .live-label i, .footer-center i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); display: inline-block; }
.topbar-actions { gap: 16px; }.icon-button { border: 0; background: transparent; color: var(--muted); font-size: 18px; padding: 8px; }.icon-button:hover { color: var(--cyan); }
.mode-toggle { display:flex; align-items:center; gap:7px; padding:7px 10px; color:#c8cadc; border:1px solid var(--line); border-radius:6px; background:rgba(17,20,38,.58); font:9px 'DM Mono', monospace; }.mode-toggle span:first-child { color:var(--cyan); font-size:14px; }.mode-toggle:hover { color:var(--text); border-color:rgba(109,231,225,.42); }
.secondary-action:disabled { opacity:.45; cursor:not-allowed; }
.profile-chip { gap: 9px; padding: 6px 11px 6px 6px; border: 1px solid var(--line); border-radius: 30px; color: var(--text); background: rgba(22, 25, 43, .62); text-align: left; }.profile-chip:hover { border-color: rgba(109,231,225,.42); }.profile-chip-avatar { display: grid; place-items: center; width: 30px; height: 30px; background: #252b51; border-radius: 50%; font-size: 17px; }.profile-chip strong, .profile-chip small { display: block; }.profile-chip strong { font: 10px 'DM Mono', monospace; letter-spacing: .12em; }.profile-chip small { color: var(--muted); font: 8px 'DM Mono', monospace; letter-spacing: .1em; margin-top: 2px; }.chevron { color: var(--muted); margin-left: 5px; }
.game-grid { display: grid; grid-template-columns: 270px minmax(600px, 1fr) 280px; gap: 28px; padding: 28px 0 34px; }.left-rail, .right-rail, .arena-column { display: flex; flex-direction: column; gap: 18px; }.panel { position: relative; border: 1px solid var(--line); background: linear-gradient(150deg, rgba(22,25,44,.84), rgba(11,14,27,.84)); box-shadow: var(--shadow); border-radius: 14px; overflow: hidden; }.left-rail .panel, .right-rail .panel { box-shadow: 0 16px 50px rgba(0,0,0,.22); }
.eyebrow { display: block; color: var(--muted); font: 9px 'DM Mono', monospace; letter-spacing: .19em; text-transform: uppercase; }.eyebrow .status-pill { color: var(--green); margin-left: 8px; }.status-pill { padding: 4px 6px; border: 1px solid rgba(121,227,168,.23); border-radius: 4px; letter-spacing: .08em; }.room-button { margin-left: 7px; padding: 3px 5px; color: var(--cyan); border: 1px solid rgba(109,231,225,.2); border-radius: 4px; background: rgba(109,231,225,.06); font: 8px 'DM Mono', monospace; letter-spacing: .08em; }.room-button:hover { border-color: var(--cyan); background: rgba(109,231,225,.14); }.profile-panel { padding: 18px; }.creature-portrait { height: 174px; margin: 17px -2px 15px; overflow: hidden; position: relative; display: grid; place-items: center; border: 1px solid rgba(143, 170, 233, .13); border-radius: 10px; background: radial-gradient(circle at 48% 55%, rgba(88, 216, 205, .35), transparent 31%), radial-gradient(circle at 60% 50%, rgba(135, 114, 253, .28), transparent 50%), linear-gradient(135deg, #171b3a, #0a0e20 80%); }.creature-portrait:before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(125, 233, 225, .04) 9px); }.portrait-orbit { position: absolute; border: 1px solid rgba(109,231,225,.35); border-radius: 50%; transform: rotate(25deg); }.orbit-one { width: 160px; height: 55px; }.orbit-two { width: 95px; height: 144px; transform: rotate(-35deg); border-color: rgba(167,139,250,.4); }.portrait-glow { width: 94px; height: 94px; position: absolute; border-radius: 50%; background: rgba(109,231,225,.16); filter: blur(16px); }.portrait-symbol { font-size: 68px; transform: translateY(-1px); filter: drop-shadow(0 0 18px rgba(109,231,225,.8)); z-index: 1; animation: float 4.5s ease-in-out infinite; }.portrait-scanline { position: absolute; top: 35%; width: 100%; height: 1px; background: rgba(109,231,225,.5); box-shadow: 0 0 12px rgba(109,231,225,.6); animation: scan 4s linear infinite; opacity: .45; }.creature-name-row { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }.creature-name-row h1 { margin:0; font-size: 15px; letter-spacing: -.02em; }.creature-name-row p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }.level-badge { color: var(--cyan); font: 9px 'DM Mono', monospace; padding: 7px 7px 6px; border: 1px solid rgba(109,231,225,.27); border-radius: 4px; }.trait-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; }.trait { padding: 6px 8px; border-radius: 5px; color: #c9c7df; background: rgba(75, 74, 130, .24); font: 9px 'DM Mono', monospace; }.trait:first-child { color: #a8f0e7; background: rgba(65, 151, 148, .17); }.stat-stack { padding-bottom: 13px; border-bottom: 1px solid var(--line); }.stat-line { justify-content: space-between; margin: 10px 0 6px; color: var(--muted); font-size: 10px; }.stat-line strong { color: #e7e7f4; font: 11px 'DM Mono', monospace; }.meter { height: 4px; border-radius: 5px; background: #282a40; overflow: hidden; }.meter span { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #51d6cf, #8df2dd); box-shadow: 0 0 13px rgba(109,231,225,.54); transition: width .5s ease; }.meter-violet span { background: linear-gradient(90deg, #8d7be9, #c8a7ff); box-shadow: 0 0 13px rgba(167,139,250,.5); }.wallet-row { gap: 11px; padding: 16px 0 2px; }.wallet-icon { display:grid; place-items:center; width: 25px; height: 25px; border: 1px solid rgba(255,199,106,.36); border-radius: 7px; color: var(--amber); font-size: 15px; }.wallet-row small, .wallet-row strong { display: block; }.wallet-row small { color: var(--muted); font: 8px 'DM Mono', monospace; letter-spacing: .14em; }.wallet-row strong { color: var(--amber); margin-top: 3px; font: 17px 'DM Mono', monospace; }.wallet-change { margin-left: auto; color: var(--green); font: 9px 'DM Mono', monospace; }
.compact-panel { padding: 16px; }.section-heading { display:flex; align-items: flex-start; justify-content: space-between; gap: 8px; }.section-heading h2 { margin: 5px 0 0; font-size: 13px; font-weight: 700; }.tiny-mark { color: var(--violet); font-size: 16px; }.compass { height: 142px; width: 142px; margin: 18px auto 12px; position: relative; border-radius: 50%; border: 1px solid rgba(167,139,250,.25); background: radial-gradient(circle, rgba(128, 93, 225, .2) 0, rgba(26, 28, 54, .1) 32%, transparent 33%), linear-gradient(135deg, rgba(109,231,225,.03), rgba(167,139,250,.11)); }.compass:before, .compass:after { content:''; position:absolute; background: rgba(167,139,250,.15); }.compass:before { width: 1px; height: 100%; left:50%; top:0; }.compass:after { width: 100%; height: 1px; left:0; top:50%; }.compass-center { position:absolute; width: 11px; height:11px; left: calc(50% - 5px); top: calc(50% - 5px); border-radius:50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }.compass-point { position: absolute; width: 8px; height: 8px; border-radius: 50%; left: 64%; top: 35%; background: var(--amber); box-shadow: 0 0 12px var(--amber); transition: .5s ease; }.compass-label { position:absolute; font: 7px 'DM Mono', monospace; color: var(--muted); letter-spacing: .08em; }.label-top { top: -15px; left: 50%; transform: translateX(-50%); }.label-bottom { bottom: -15px; left: 50%; transform: translateX(-50%); }.label-left { left: -36px; top: 50%; transform: translateY(-50%); }.label-right { right: -18px; top: 50%; transform: translateY(-50%); }.microcopy { color: var(--muted); font-size: 10px; line-height: 1.55; margin: 0; }
.counter, .journal-count { color: var(--muted); font: 9px 'DM Mono', monospace; }.inventory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 16px; }.inventory-slot { aspect-ratio: 1; position:relative; display:grid; place-items:center; border: 1px dashed rgba(165,174,222,.16); border-radius: 7px; color: var(--muted-2); background: rgba(7,9,20,.34); font-size: 16px; }.inventory-slot.filled { border-style: solid; border-color: var(--slot-color, rgba(109,231,225,.32)); background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--slot-color, #6de7e1) 24%, transparent), transparent 62%), rgba(32, 35, 58, .45); }.inventory-slot .slot-index { position:absolute; bottom: 4px; left: 5px; color: var(--muted-2); font: 7px 'DM Mono', monospace; }.inventory-slot .slot-level { position:absolute; top: 4px; right: 5px; color: var(--amber); font: 7px 'DM Mono', monospace; }.inventory-slot.selected { outline: 1px solid var(--cyan); box-shadow: 0 0 16px rgba(109,231,225,.17); }
.inventory-upgrade { width: 100%; margin-top: 11px; padding: 8px 9px; display: flex; align-items: center; gap: 7px; color: #c8c9dc; border: 1px solid rgba(167,139,250,.2); border-radius: 6px; background: rgba(111, 87, 180, .08); font-size: 9px; text-align: left; }.inventory-upgrade span { color: var(--violet); }.inventory-upgrade small { margin-left: auto; color: var(--muted); font: 8px 'DM Mono', monospace; }.inventory-upgrade:hover { border-color: var(--violet); color: var(--text); }
.arena-header { display:flex; align-items: end; justify-content:space-between; min-height: 47px; }.arena-header h2 { margin: 6px 0 0; font-size: 22px; letter-spacing: -.045em; }.arena-helper { margin: 8px 0 0; color: var(--muted); font-size: 10px; }.glow-word { color: var(--cyan); text-shadow: 0 0 22px rgba(109,231,225,.35); }.round-progress { gap: 8px; font: 9px 'DM Mono', monospace; }.round-progress strong { color: var(--text); font-size: 16px; }.progress-track { width: 76px; height: 3px; border-radius: 5px; background: rgba(165,174,222,.16); overflow:hidden; }.progress-track i { display:block; height:100%; border-radius:inherit; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); transition: width .5s ease; }
.stage-card { height: 338px; position:relative; overflow:hidden; border:1px solid rgba(132,149,235,.24); border-radius: 16px; background: #11132a url('./assets/auction-hero.png') center/cover no-repeat; box-shadow: 0 28px 80px rgba(5,7,24,.55), inset 0 0 80px rgba(5,9,23,.24); }.stage-card:after { content:''; position:absolute; inset:0; background: linear-gradient(90deg, rgba(11,14,29,.86) 0%, rgba(14,16,38,.58) 48%, rgba(9,11,25,.2) 100%), linear-gradient(0deg, rgba(6,8,19,.6), transparent 38%); }.stage-backdrop, .stage-grid { position:absolute; inset:0; pointer-events:none; }.stage-grid { opacity:.2; background-image: linear-gradient(rgba(130, 155, 240, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(130, 155, 240, .12) 1px, transparent 1px); background-size: 40px 40px; mask-image: linear-gradient(to right, transparent, black 35%, black 75%, transparent); }.stage-topline, .item-content, .stage-footer, .item-sigil { position:absolute; z-index:1; }.stage-topline { top: 18px; left: 20px; right: 20px; display:flex; justify-content:space-between; font: 9px 'DM Mono', monospace; letter-spacing: .1em; }.auction-state { display:flex; align-items:center; gap:8px; color: #beffe4; }.auction-state i { width: 6px; height:6px; border-radius:50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.timer { color: var(--amber); }.item-content { left: 34px; top: 102px; width: 54%; }.item-rarity { color: var(--amber); font: 10px 'DM Mono', monospace; letter-spacing: .18em; }.item-content h3 { margin: 8px 0 8px; font-size: 38px; line-height: .98; letter-spacing: -.06em; max-width: 420px; }.item-subtitle { max-width: 360px; color: #b2b6ca; font-size: 12px; line-height: 1.5; }.item-tags { display:flex; gap:6px; margin-top: 19px; }.item-tag { padding: 6px 8px; color: #d4d6ee; border: 1px solid rgba(185,190,234,.18); border-radius:4px; background: rgba(14, 16, 32, .36); font: 8px 'DM Mono', monospace; }.item-sigil { right: 22%; top: 43%; font-size: 110px; color: rgba(109,231,225,.75); text-shadow: 0 0 35px rgba(109,231,225,.7); filter: drop-shadow(0 0 18px rgba(167,139,250,.7)); animation: pulse 3.2s ease-in-out infinite; }.item-orbit { position:absolute; z-index:1; border:1px solid rgba(109,231,225,.35); border-radius:50%; right: 7%; top: 19%; transform: rotate(35deg); }.orbit-a { width: 280px; height: 150px; }.orbit-b { width: 230px; height: 260px; border-color: rgba(255,199,106,.25); transform: rotate(-46deg); }.stage-footer { bottom: 16px; left:20px; right:20px; display:flex; justify-content:space-between; color: #8c90a8; font: 9px 'DM Mono', monospace; }.stage-footer span:first-child { max-width: 72%; }.stage-index { color: var(--cyan); }
.decision-strip { display:flex; align-items:center; justify-content:space-between; gap: 20px; padding: 3px 2px 0; }.decision-copy p { margin: 6px 0 0; color: #babed1; font-size: 11px; }.secondary-action { padding: 11px 13px; white-space:nowrap; color: #d8d9e7; background: rgba(19,22,42,.65); border: 1px solid var(--line); border-radius: 7px; font-size: 10px; }.secondary-action:hover { border-color: var(--violet); color: var(--text); }.secondary-action span { color: var(--violet); margin-right: 6px; }.secondary-action small { color: var(--muted); font: 8px 'DM Mono', monospace; margin-left: 8px; }
.bid-console { padding: 20px; }.bid-console-top { justify-content:space-between; }.bid-console h3 { margin: 7px 0 0; font-size: 13px; font-weight: 600; }.highest-bid { text-align:right; }.highest-bid span { display:block; color: var(--muted); font: 8px 'DM Mono', monospace; letter-spacing: .13em; }.highest-bid strong { display:block; margin-top: 6px; color: var(--amber); font: 17px 'DM Mono', monospace; }.bid-controls { display:grid; grid-template-columns: 38px 120px 38px 1fr; gap: 12px; align-items:center; margin: 21px 0 16px; }.step-button { height: 38px; color: var(--cyan); background: rgba(109,231,225,.06); border:1px solid rgba(109,231,225,.25); border-radius:6px; font-size: 19px; }.step-button:hover { background: rgba(109,231,225,.14); }.bid-value { text-align:center; }.bid-value span { display:block; color: var(--text); font: 25px 'DM Mono', monospace; }.bid-value small { color: var(--muted); font: 8px 'DM Mono', monospace; letter-spacing:.1em; }.bid-controls input { appearance:none; height: 4px; border-radius: 3px; background: linear-gradient(90deg, var(--cyan) 0 var(--range, 32%), #2b2d43 var(--range, 32%)); outline: none; }.bid-controls input::-webkit-slider-thumb { appearance:none; width:16px; height:16px; border-radius:50%; background:var(--cyan); border:3px solid #162132; box-shadow:0 0 11px rgba(109,231,225,.65); }.bid-actions { display:grid; grid-template-columns: 1fr 1.75fr; gap: 10px; }.pass-button, .bid-button { min-height: 52px; border-radius:7px; }.pass-button { display:grid; grid-template-columns: 28px 1fr; align-items:center; text-align:left; padding: 9px 13px; color: #c5c7da; border: 1px solid var(--line); background: rgba(12,15,29,.5); }.pass-button span { grid-row: span 2; color: var(--muted); font-size: 18px; }.pass-button b { font-size: 11px; font-weight: 600; }.pass-button small { color: var(--muted); font-size: 9px; margin-top:2px; }.pass-button:hover { border-color: rgba(167,139,250,.5); }.bid-button { display:flex; gap: 10px; align-items:center; justify-content:center; border: 1px solid rgba(109,231,225,.48); color: #082320; background: linear-gradient(100deg, #71e2d4, #b0f1d9); box-shadow: 0 8px 25px rgba(109,231,225,.14); font-size: 12px; }.bid-button strong { font: 12px 'DM Mono', monospace; }.bid-button i { font-style:normal; font-size: 17px; }.bid-button:hover { filter: brightness(1.08); transform: translateY(-1px); }.risk-note { display:flex; align-items:center; gap:8px; margin-top:16px; color: var(--muted); font: 9px 'DM Mono', monospace; }.risk-note strong { color: var(--amber); font-weight: 500; }.risk-dot { width:6px; height:6px; border-radius:50%; background: var(--amber); box-shadow: 0 0 9px var(--amber); }.risk-meter { flex:1; height:3px; background:#2a2c42; border-radius:3px; overflow:hidden; }.risk-meter i { height:100%; display:block; background:linear-gradient(90deg, var(--green), var(--amber), var(--coral)); border-radius:inherit; transition: width .3s ease; }.opponents-row { display:grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }.opponent-card { display:flex; align-items:center; gap:9px; padding: 10px; border:1px solid var(--line); background: rgba(15,18,34,.63); border-radius:8px; }.opponent-avatar { display:grid; place-items:center; width:29px; height:29px; border-radius:50%; background: #282b50; font-size:16px; }.opponent-copy { min-width:0; }.opponent-copy strong { display:block; font-size:10px; }.opponent-copy small { display:block; color:var(--muted); font:8px 'DM Mono', monospace; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:3px; }.opponent-signal { margin-left:auto; color:var(--muted); font-size:10px; }.opponent-card.active { border-color: rgba(109,231,225,.32); }.opponent-card.active .opponent-signal { color: var(--coral); animation: blink 1.3s infinite; }
.event-panel, .journal-panel, .mission-panel { padding: 17px; }.live-label { display:flex; align-items:center; gap:6px; color:var(--coral); font:8px 'DM Mono', monospace; }.live-label i { width:5px; height:5px; background:var(--coral); box-shadow:0 0 8px var(--coral); }.event-feed { display:flex; flex-direction:column; gap: 13px; margin-top: 18px; }.event { display:grid; grid-template-columns: 26px 1fr; gap:9px; position:relative; }.event:not(:last-child):after { content:''; position:absolute; width:1px; height: 12px; left:13px; top:28px; background:var(--line-bright); }.event-avatar { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:rgba(82,87,157,.3); font-size:13px; }.event-copy { font-size:10px; line-height:1.35; color:#c8c9d8; }.event-copy strong { color:var(--text); font-weight:600; }.event-copy small { display:block; color:var(--muted-2); margin-top:4px; font:8px 'DM Mono', monospace; }.journal-panel { min-height: 174px; }.journal-entry { display:flex; gap:10px; margin-top:16px; padding: 11px; border:1px solid rgba(167,139,250,.16); background:rgba(113,89,182,.09); border-radius:7px; }.journal-icon { color:var(--violet); font-size:15px; }.journal-entry p { margin:0; color:#c3c4d6; font-size:10px; line-height:1.5; }.journal-divider { height:1px; background:var(--line); margin:14px 0 11px; }.choice-stats { display:grid; grid-template-columns:1fr 1fr; gap: 12px; }.choice-stats small { display:block; color:var(--muted); font:7px 'DM Mono', monospace; }.choice-stats strong { display:block; margin-top:4px; font:12px 'DM Mono', monospace; color:var(--cyan); }.mission-panel { min-height: 255px; background: radial-gradient(circle at 95% 10%, rgba(109,231,225,.12), transparent 32%), linear-gradient(145deg, rgba(20, 28, 48, .9), rgba(15,18,34,.85)); }.mission-orb { width:37px; height:37px; display:grid; place-items:center; margin-bottom:17px; border:1px solid rgba(109,231,225,.35); border-radius:50%; color:var(--cyan); background:rgba(109,231,225,.08); font-size:18px; box-shadow:0 0 22px rgba(109,231,225,.1); }.mission-panel h2 { max-width: 200px; margin: 9px 0 11px; font-size: 19px; line-height:1.07; letter-spacing:-.045em; }.mission-panel p { color:var(--muted); font-size:10px; line-height:1.55; }.mission-progress { display:flex; align-items:center; gap:8px; margin: 16px 0 17px; }.mission-progress > span { flex:1; height:4px; border-radius:4px; background:#2a2e45; overflow:hidden; }.mission-progress i { display:block; height:100%; border-radius:inherit; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }.mission-progress strong { color:var(--cyan); font:9px 'DM Mono', monospace; }.text-button { padding:0; color:#d7d9ea; border:0; background:transparent; font-size:10px; }.text-button span { margin-left:6px; color:var(--cyan); }.text-button:hover { color:var(--cyan); }
.footerbar { justify-content:space-between; padding: 17px 0 0; color:var(--muted-2); border-top:1px solid var(--line); font:8px 'DM Mono', monospace; letter-spacing:.08em; }.footer-center { display:flex; align-items:center; gap:7px; }.footer-center i { width:5px; height:5px; }.toast-stack { position:fixed; right: 28px; bottom: 28px; z-index:20; display:flex; flex-direction:column; gap:8px; }.toast { min-width: 245px; padding: 13px 15px; border:1px solid rgba(109,231,225,.3); border-radius:8px; color:#dcebef; background: rgba(15,22,38,.94); box-shadow: 0 12px 35px rgba(0,0,0,.35); font-size:11px; animation: toast-in .35s ease both; }.toast.success { border-color:rgba(121,227,168,.4); }.toast.warn { border-color:rgba(255,199,106,.42); }.toast.fade { opacity:0; transform:translateX(20px); transition:.3s ease; }
@keyframes float { 0%,100% { transform:translateY(-2px); } 50% { transform:translateY(-8px) scale(1.03); } } @keyframes scan { from { top: 18%; } to { top: 83%; } } @keyframes pulse { 0%,100% { transform:scale(1) rotate(0deg); opacity:.74; } 50% { transform:scale(1.08) rotate(7deg); opacity:1; } } @keyframes blink { 50% { opacity:.25; } } @keyframes toast-in { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }
.onboarding-overlay[hidden] { display: none; }.onboarding-overlay { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(5, 7, 17, .76); backdrop-filter: blur(18px); }.onboarding-card { width: min(620px, calc(100vw - 50px)); position: relative; overflow: hidden; padding: 34px; border: 1px solid rgba(109,231,225,.3); border-radius: 18px; background: radial-gradient(circle at 88% 8%, rgba(109,231,225,.14), transparent 25%), radial-gradient(circle at 5% 100%, rgba(167,139,250,.15), transparent 32%), linear-gradient(145deg, rgba(23,28,52,.98), rgba(11,14,28,.98)); box-shadow: 0 30px 120px rgba(0,0,0,.55), 0 0 70px rgba(109,231,225,.08); }.onboarding-card:before { content: ''; position:absolute; inset:0; pointer-events:none; opacity:.35; background-image: linear-gradient(rgba(109,231,225,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(109,231,225,.05) 1px, transparent 1px); background-size:32px 32px; mask-image: linear-gradient(to bottom, black, transparent 72%); }.onboarding-orbit { position: absolute; top: 28px; right: 34px; width: 54px; height: 54px; display:grid; place-items:center; border: 1px solid rgba(109,231,225,.38); border-radius:50%; color:var(--cyan); box-shadow:0 0 28px rgba(109,231,225,.14); }.onboarding-orbit:before, .onboarding-orbit:after { content:''; position:absolute; inset:-9px 7px; border:1px solid rgba(167,139,250,.25); border-radius:50%; transform:rotate(42deg); }.onboarding-orbit:after { transform:rotate(-42deg); }.onboarding-orbit span { animation:pulse 2.8s ease-in-out infinite; }.onboarding-card h2 { position:relative; max-width:430px; margin:13px 0 9px; font-size:32px; line-height:1; letter-spacing:-.06em; }.onboarding-lead { position:relative; max-width:450px; color:#b8bdd2; font-size:12px; line-height:1.55; }.registration-layout { position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:12px; margin:26px 0 16px; }.handle-field, .registration-creature { min-height:90px; padding:15px; border:1px solid rgba(165,174,222,.16); border-radius:10px; background:rgba(8,11,24,.42); }.handle-field span, .registration-creature > div:last-child > span { display:block; color:var(--muted); font:8px 'DM Mono',monospace; letter-spacing:.14em; }.handle-field input { width:100%; margin:11px 0 7px; padding:0; color:var(--text); border:0; outline:0; background:transparent; font:20px 'DM Mono',monospace; letter-spacing:.08em; }.handle-field input::placeholder { color:#4b506b; }.handle-field small { display:block; color:var(--muted-2); font-size:9px; }.registration-creature { display:flex; align-items:center; gap:11px; }.registration-avatar { display:grid; place-items:center; flex:0 0 49px; width:49px; height:49px; border:1px solid rgba(109,231,225,.3); border-radius:50%; background:radial-gradient(circle, rgba(109,231,225,.22), rgba(74,63,145,.25)); font-size:27px; box-shadow:0 0 23px rgba(109,231,225,.15); }.registration-creature strong, .registration-creature small { display:block; }.registration-creature strong { margin-top:6px; color:#e8e9f5; font-size:11px; }.registration-creature small { margin-top:3px; color:var(--muted); font-size:9px; }.onboarding-actions { position:relative; display:grid; grid-template-columns:.8fr 1.4fr; gap:9px; }.reroll-button, .enter-button { min-height:48px; border-radius:7px; font-size:10px; }.reroll-button { color:#d4d6e8; border:1px solid var(--line); background:rgba(18,21,39,.66); }.reroll-button:hover { border-color:var(--violet); }.enter-button { color:#09231f; border:1px solid rgba(109,231,225,.48); background:linear-gradient(100deg,#71e2d4,#b0f1d9); box-shadow:0 8px 24px rgba(109,231,225,.13); }.enter-button:disabled { cursor:not-allowed; color:#606577; border-color:rgba(165,174,222,.14); background:#282b3d; box-shadow:none; }.enter-button:not(:disabled):hover { filter:brightness(1.08); }.enter-button span { margin-left:10px; font-size:15px; }.random-handle { position:relative; display:block; margin:15px auto 0; padding:0; color:var(--violet); border:0; background:transparent; font-size:9px; }.random-handle:hover { color:var(--cyan); }.privacy-note { position:relative; display:flex; align-items:center; justify-content:center; gap:6px; margin:22px 0 0; color:var(--muted-2); font-size:9px; }.privacy-note span { color:var(--cyan); font-size:13px; }
@media (max-width: 1350px) { body { min-width: 1000px; }.app-shell { width: calc(100vw - 36px); }.game-grid { grid-template-columns: 240px minmax(530px, 1fr) 240px; gap: 16px; }.item-content h3 { font-size:32px; }.item-sigil { right:18%; } }
.focus-mode .game-grid { grid-template-columns: minmax(0, 980px); justify-content: center; }.focus-mode .left-rail, .focus-mode .right-rail { display: none; }.focus-mode .arena-column { width: 100%; }.focus-mode .stage-card { height: clamp(260px, 38vh, 330px); }.focus-mode .item-content { width: 62%; }.focus-mode .item-content h3 { font-size: clamp(32px, 4vw, 48px); }.focus-mode .opponents-row, .focus-mode .footerbar { display:none; }
body { min-width: 0; overflow-x: hidden; }.app-shell { width: min(1780px, calc(100vw - 36px)); }.game-grid { grid-template-columns: minmax(205px, 240px) minmax(0, 1fr) minmax(215px, 240px); }.stage-card { min-width: 0; }
@media (max-width: 1180px) { .game-grid { grid-template-columns: 210px minmax(0, 1fr) 220px; gap: 14px; }.item-content h3 { font-size: 30px; }.item-sigil { right: 13%; font-size: 82px; }.topbar-context { display:none; } }
@media (max-width: 880px) { .app-shell { width: calc(100vw - 24px); }.game-grid, .focus-mode .game-grid { grid-template-columns: 1fr; }.left-rail, .right-rail { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }.arena-column { order:-1; }.profile-panel, .event-panel { grid-column:span 1; }.inventory-panel, .journal-panel, .compass-panel, .mission-panel { grid-column:span 1; }.footerbar { gap:10px; flex-wrap:wrap; }.footer-center { order:3; width:100%; justify-content:center; }.focus-mode .left-rail, .focus-mode .right-rail { display:none; } }
@media (max-height: 900px) and (min-width: 881px) { .topbar { height:70px; }.game-grid { padding:16px 0 22px; gap:12px; }.left-rail, .right-rail, .arena-column { gap:12px; }.stage-card, .focus-mode .stage-card { height: clamp(245px, 32vh, 290px); }.creature-portrait { height:130px; margin-top:12px; margin-bottom:11px; }.profile-panel { padding:14px; }.compact-panel, .event-panel, .journal-panel, .mission-panel { padding:13px; }.mission-panel { min-height:210px; }.event-feed { margin-top:12px; gap:9px; }.item-content { top:78px; }.item-content h3 { margin-top:6px; }.item-tags { margin-top:13px; }.bid-console { padding:16px; }.decision-strip { padding-top:0; } }
@media (max-width: 560px) { .topbar { height:68px; }.topbar-actions { gap:5px; }.mode-toggle { padding:7px; }.mode-toggle span:last-child { display:none; }.profile-chip { padding-right:7px; }.profile-chip > span:nth-child(2) { display:none; }.game-grid { padding-top:15px; }.stage-card, .focus-mode .stage-card { height:320px; }.item-content { left:22px; top:82px; width:78%; }.item-content h3 { font-size:31px; }.item-sigil { right:8%; top:50%; font-size:64px; }.decision-strip { align-items:flex-start; flex-direction:column; gap:10px; }.secondary-action { width:100%; }.bid-controls { grid-template-columns:32px 96px 32px 1fr; gap:7px; }.bid-actions { grid-template-columns:1fr; }.left-rail, .right-rail { grid-template-columns:1fr; } }
.bid-button:disabled { cursor:not-allowed; color:#606577; border-color:rgba(165,174,222,.14); background:#282b3d; box-shadow:none; transform:none; }
.exchange-status { margin-left:auto; color:var(--muted-2); letter-spacing:.08em; }.stage-card.leading { border-color:rgba(121,227,168,.58); box-shadow:0 28px 80px rgba(5,7,24,.55), 0 0 30px rgba(121,227,168,.13); }.stage-card.leading .auction-state { color:var(--green); }.stage-card.leading .auction-state i { background:var(--green); box-shadow:0 0 12px var(--green); }.timer.urgent { color:var(--coral); animation:blink .8s infinite; }
.turn-brief { display:grid; grid-template-columns:40px minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 14px; border-color:rgba(109,231,225,.18); background:linear-gradient(100deg, rgba(32,44,67,.82), rgba(17,20,38,.72)); }
.brief-icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(109,231,225,.4); border-radius:10px; color:var(--cyan); background:rgba(109,231,225,.09); font-size:18px; box-shadow:0 0 22px rgba(109,231,225,.1); }
.brief-copy { min-width:0; }.brief-copy strong { display:block; margin-top:4px; color:var(--text); font-size:13px; }.brief-copy p { margin:4px 0 0; color:#afb4ca; font-size:10px; line-height:1.35; }.brief-reward { display:grid; gap:4px; min-width:130px; text-align:right; }.brief-reward small { color:var(--muted); font:8px 'DM Mono',monospace; letter-spacing:.13em; }.brief-reward b { color:var(--amber); font:11px 'DM Mono',monospace; }.brief-reward span { color:var(--muted-2); font:8px 'DM Mono',monospace; }.turn-brief.completed { border-color:rgba(121,227,168,.45); background:linear-gradient(100deg, rgba(30,67,62,.78), rgba(17,25,36,.72)); }.turn-brief.completed .brief-icon { color:var(--green); border-color:rgba(121,227,168,.5); background:rgba(121,227,168,.12); }.turn-brief.completed .brief-reward b { color:var(--green); }
.item-meta { display:flex; gap:8px; margin-top:12px; color:#aeb4cb; font:8px 'DM Mono',monospace; letter-spacing:.06em; }.item-meta span { padding:5px 7px; border:1px solid rgba(255,199,106,.24); border-radius:4px; background:rgba(7,10,22,.34); }.item-meta span + span { color:var(--cyan); border-color:rgba(109,231,225,.22); }
.treasure-pool-overlay { position:absolute; z-index:3; left:20px; right:20px; bottom:36px; display:grid; gap:6px; }.pool-label { display:flex; justify-content:space-between; align-items:center; color:#b8c0d9; font:8px 'DM Mono',monospace; letter-spacing:.12em; }.pool-label small { color:var(--cyan); font-size:7px; }.treasure-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:6px; }.treasure-tile { min-width:0; padding:7px 6px; color:#d9def2; border:1px solid rgba(165,174,222,.2); border-radius:6px; background:rgba(10,14,30,.78); text-align:left; transition:.2s ease; }.treasure-tile:hover { border-color:var(--cyan); transform:translateY(-2px); }.treasure-tile.selected { border-color:var(--amber); box-shadow:0 0 16px rgba(255,199,106,.2); }.treasure-tile.revealed { border-color:rgba(109,231,225,.5); background:rgba(16,43,49,.78); }.treasure-tile b, .treasure-tile strong, .treasure-tile small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.treasure-tile b { color:var(--muted-2); font:7px 'DM Mono',monospace; }.treasure-tile strong { margin-top:3px; color:var(--amber); font:9px 'DM Mono',monospace; }.treasure-tile.revealed strong { color:var(--cyan); }.treasure-tile small { margin-top:3px; color:var(--muted); font:7px 'DM Mono',monospace; }.treasure-tile .tile-mark { float:right; color:var(--violet); font-size:11px; }
@media (max-width: 560px) { .turn-brief { grid-template-columns:34px 1fr; }.brief-reward { grid-column:2; min-width:0; text-align:left; }.brief-icon { width:32px; height:32px; } }
@media (max-height: 800px) and (min-width: 881px) { .focus-mode .stage-card { height:220px; }.focus-mode .item-content { top:55px; }.focus-mode .item-content h3 { font-size:30px; margin:5px 0; }.focus-mode .item-tags { margin-top:8px; }.focus-mode .item-meta { margin-top:7px; }.focus-mode .stage-footer { bottom:10px; }.focus-mode .bid-console { padding:12px 16px; }.focus-mode .bid-controls { margin:12px 0 10px; }.focus-mode .pass-button, .focus-mode .bid-button { min-height:44px; }.focus-mode .risk-note { margin-top:10px; } }
@media (max-height: 800px) and (min-width: 881px) { .focus-mode .decision-copy p { display:none; }.focus-mode .decision-strip { min-height:30px; }.focus-mode .secondary-action { padding:8px 11px; }.focus-mode .bid-console { padding:9px 16px 7px; }.focus-mode .bid-console h3 { margin-top:4px; font-size:12px; }.focus-mode .bid-controls { margin:8px 0; }.focus-mode .pass-button, .focus-mode .bid-button { min-height:40px; }.focus-mode .risk-note { display:none; } }
.treasure-pool-overlay { left:44%; }.treasure-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 560px) { .treasure-pool-overlay { left:20px; }.treasure-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) {
  .stage-card, .focus-mode .stage-card { height:360px; }
  .item-content { top:64px; width:70%; }
  .item-content h3 { font-size:24px; line-height:1.02; max-height:50px; overflow:hidden; }
  .item-subtitle { max-width:210px; font-size:10px; line-height:1.25; max-height:28px; overflow:hidden; }
  .item-tags { margin-top:8px; }
  .item-meta { gap:5px; margin-top:8px; }
  .item-meta span { padding:4px 5px; }
  .treasure-pool-overlay { bottom:12px; }
}

@media (min-width: 561px) and (max-height: 760px) {
  body.focus-mode .topbar { height: 56px; }
  body.focus-mode .game-grid { gap: 5px; padding-top: 7px; }
  body.focus-mode .arena-column { gap: 5px; }
  body.focus-mode .arena-header { min-height: 27px; }
  body.focus-mode .arena-header h2 { margin-top: 1px; font-size: 17px; }
  body.focus-mode .arena-helper { display: none; }
  body.focus-mode .network-strip { min-height: 25px; padding: 3px 8px; }
  body.focus-mode .turn-brief { grid-template-columns: 28px minmax(0, 1fr); min-height: 43px; padding: 5px 9px; }
  body.focus-mode .brief-icon { width: 26px; height: 26px; font-size: 13px; }
  body.focus-mode .brief-copy strong { font-size: 11px; }
  body.focus-mode .brief-copy p { display: none; }
  body.focus-mode .brief-reward { display: none; }
  body.focus-mode .stage-card { height: 176px; border-radius: 11px; }
  body.focus-mode .stage-topline { top: 8px; left: 13px; right: 13px; font-size: 8px; }
  body.focus-mode .item-content { top: 39px; left: 17px; width: 57%; }
  body.focus-mode .item-content h3 { margin: 3px 0; font-size: 26px; }
  body.focus-mode .item-subtitle { font-size: 9px; }
  body.focus-mode .item-tags { display: none; }
  body.focus-mode .item-meta { margin-top: 5px; }
  body.focus-mode .item-sigil { right: 9%; top: 39%; font-size: 58px; }
  body.focus-mode .treasure-pool-overlay { left: 43%; right: 12px; bottom: 17px; }
  body.focus-mode .treasure-grid { gap: 3px; }
  body.focus-mode .treasure-tile { padding: 3px; }
  body.focus-mode .treasure-tile strong { font-size: 7px; }
  body.focus-mode .treasure-tile small { display: none; }
  body.focus-mode .stage-footer { bottom: 5px; }
  body.focus-mode .stage-footer span:first-child { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.focus-mode .decision-strip { min-height: 26px; gap: 8px; }
  body.focus-mode .decision-copy p { display: none; }
  body.focus-mode .secondary-action { padding: 6px 9px; }
  body.focus-mode .bid-console { padding: 7px 12px 6px; }
  body.focus-mode .bid-console h3 { margin-top: 2px; font-size: 11px; }
  body.focus-mode .highest-bid strong { margin-top: 1px; font-size: 13px; }
  body.focus-mode .bid-controls { margin: 5px 0; }
  body.focus-mode .step-button { height: 30px; }
  body.focus-mode .bid-value span { font-size: 19px; }
  body.focus-mode .pass-button, body.focus-mode .bid-button { min-height: 38px; }
  body.focus-mode .risk-note { display: none; }
}

@media (max-width: 560px) {
  body.focus-mode .treasure-pool-overlay { display: none; }
  body.focus-mode .item-content { width: 78%; }
  body.focus-mode .item-content h3 { font-size: 25px; max-height: 2.1em; }
}

/* Simple auction presentation: lot, current price, and one clear decision. */
body.focus-mode .game-grid { max-width: 980px; }
body.focus-mode .network-address { display: none; }
body.focus-mode .network-copy { margin-left: auto; }
body.focus-mode .turn-brief { grid-template-columns: minmax(0, 1fr) auto; min-height: 52px; padding: 10px 14px; border-color: rgba(109,231,225,.22); background: linear-gradient(100deg, rgba(24,39,58,.92), rgba(15,20,35,.92)); }
body.focus-mode .brief-icon { display: none; }
body.focus-mode .brief-copy strong { margin-top: 3px; font-size: 14px; }
body.focus-mode .brief-copy p { margin-top: 4px; font-size: 10px; }
body.focus-mode .brief-reward { min-width: 112px; }
body.focus-mode .brief-reward b { color: var(--cyan); }
body.focus-mode .stage-card { height: 286px; border-radius: 13px; background: radial-gradient(circle at 80% 45%, rgba(109,231,225,.13), transparent 25%), linear-gradient(135deg, #18253a, #0d1324 72%); box-shadow: 0 20px 55px rgba(0,0,0,.35); }
body.focus-mode .stage-card:after { background: linear-gradient(90deg, rgba(8,13,25,.82), rgba(8,13,25,.2)); }
body.focus-mode .stage-backdrop, body.focus-mode .stage-grid, body.focus-mode .item-orbit, body.focus-mode .stage-footer, body.focus-mode .treasure-pool-overlay { display: none; }
body.focus-mode .stage-topline { top: 16px; left: 22px; right: 22px; }
body.focus-mode .item-content { top: 63px; left: 32px; width: 62%; }
body.focus-mode .item-rarity { color: var(--cyan); letter-spacing: .14em; }
body.focus-mode .item-content h3 { max-width: 520px; margin: 8px 0 9px; font-size: clamp(34px, 4vw, 48px); line-height: 1; }
body.focus-mode .item-subtitle { max-width: 460px; color: #c7cede; font-size: 13px; }
body.focus-mode .item-tags { display: flex; margin-top: 17px; }
body.focus-mode .item-meta { margin-top: 14px; }
body.focus-mode .item-sigil { right: 12%; top: 29%; font-size: 128px; opacity: .18; }
body.focus-mode .decision-strip { display: none; }
body.focus-mode .bid-console { padding: 16px 18px 14px; border-color: rgba(109,231,225,.22); border-radius: 12px; background: linear-gradient(145deg, rgba(22,34,51,.96), rgba(12,17,30,.96)); }
body.focus-mode .bid-console-top { align-items: flex-start; }
body.focus-mode .bid-console h3 { margin-top: 5px; font-size: 15px; }
body.focus-mode .highest-bid strong { margin-top: 4px; font-size: 20px; }
body.focus-mode .bid-controls { grid-template-columns: 40px 112px 40px minmax(0, 1fr); margin: 14px 0 13px; }
body.focus-mode .bid-value span { font-size: 28px; }
body.focus-mode .bid-actions { grid-template-columns: .8fr 1.8fr; }
body.focus-mode .pass-button, body.focus-mode .bid-button { min-height: 54px; }
body.focus-mode .pass-button { background: rgba(36,38,52,.72); }
body.focus-mode .pass-button b { font-size: 12px; }
body.focus-mode .pass-button small { font-size: 10px; }
body.focus-mode .bid-button { font-size: 13px; }
body.focus-mode .risk-note { display: none; }
body.focus-mode .opponents-row { display: none; }

@media (max-height: 760px) and (min-width: 561px) {
  body.focus-mode .turn-brief { min-height: 43px; padding: 7px 11px; }
  body.focus-mode .brief-copy strong { font-size: 12px; }
  body.focus-mode .brief-copy p { margin-top: 2px; font-size: 9px; }
  body.focus-mode .stage-card { height: 190px; }
  body.focus-mode .stage-topline { top: 10px; }
  body.focus-mode .item-content { top: 43px; left: 22px; }
  body.focus-mode .item-content h3 { margin: 5px 0; font-size: 30px; }
  body.focus-mode .item-subtitle { font-size: 10px; }
  body.focus-mode .item-tags { margin-top: 8px; }
  body.focus-mode .item-meta { margin-top: 7px; }
  body.focus-mode .item-sigil { font-size: 84px; }
  body.focus-mode .bid-console { padding: 9px 13px 8px; }
  body.focus-mode .bid-console h3 { margin-top: 2px; font-size: 12px; }
  body.focus-mode .bid-controls { margin: 7px 0 7px; }
  body.focus-mode .bid-value span { font-size: 21px; }
  body.focus-mode .pass-button, body.focus-mode .bid-button { min-height: 42px; }
}

@media (max-width: 560px) {
  body.focus-mode .turn-brief { grid-template-columns: 1fr; min-height: 44px; padding: 7px 10px; }
  body.focus-mode .brief-copy strong { font-size: 11px; }
  body.focus-mode .brief-copy p { margin-top: 2px; font-size: 8px; }
  body.focus-mode .brief-reward { display: none; }
  body.focus-mode .stage-card { height: 206px; }
  body.focus-mode .stage-topline { top: 10px; left: 14px; right: 14px; }
  body.focus-mode .item-content { top: 46px; left: 17px; width: 78%; }
  body.focus-mode .item-content h3 { margin: 5px 0; font-size: 25px; }
  body.focus-mode .item-subtitle { font-size: 9px; }
  body.focus-mode .item-tags { display: none; }
  body.focus-mode .item-meta { margin-top: 7px; }
  body.focus-mode .item-sigil { right: 7%; top: 31%; font-size: 62px; }
  body.focus-mode .bid-console { padding: 9px 10px 7px; }
  body.focus-mode .bid-console h3 { font-size: 11px; }
  body.focus-mode .highest-bid strong { font-size: 14px; }
  body.focus-mode .bid-controls { margin: 7px 0; }
  body.focus-mode .bid-actions { grid-template-columns: 1fr 1.55fr; }
  body.focus-mode .pass-button, body.focus-mode .bid-button { min-height: 42px; }
}

body.focus-mode .turn-brief { grid-template-columns: minmax(0, 1fr) auto !important; }
body.focus-mode .brief-copy { width: auto; }
@media (max-width: 560px) {
  body.focus-mode .turn-brief { grid-template-columns: 1fr !important; }
}
.commander-skill-card { margin:14px -2px 17px; padding:12px; border:1px solid color-mix(in srgb, var(--commander-color, var(--cyan)) 32%, transparent); border-radius:9px; background:linear-gradient(135deg, color-mix(in srgb, var(--commander-color, var(--cyan)) 12%, transparent), rgba(9,12,25,.5)); box-shadow:inset 0 0 20px color-mix(in srgb, var(--commander-color, var(--cyan)) 8%, transparent); }.skill-heading { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }.skill-heading strong { display:block; margin-top:5px; color:#eef3ff; font-size:11px; }.commander-role { display:block; margin-top:4px; color:var(--muted-2); font:8px 'DM Mono',monospace; }.skill-tier { padding:4px 5px; color:var(--commander-color, var(--cyan)); border:1px solid color-mix(in srgb, var(--commander-color, var(--cyan)) 42%, transparent); border-radius:4px; font:8px 'DM Mono',monospace; }.commander-skill-card p { margin:8px 0; color:#aeb4ca; font-size:9px; line-height:1.4; }.skill-meter { height:4px; overflow:hidden; border-radius:4px; background:#2a2d43; }.skill-meter i { display:block; height:100%; border-radius:inherit; background:var(--commander-color, var(--cyan)); box-shadow:0 0 12px var(--commander-color, var(--cyan)); transition:width .35s ease; }.commander-skill-card > small { display:block; margin-top:7px; color:var(--muted-2); font:8px 'DM Mono',monospace; line-height:1.35; }.commander-upgrade { width:100%; display:grid; grid-template-columns:22px 1fr; gap:2px 7px; align-items:center; margin-top:8px; padding:9px; color:#dcdff2; border:1px solid rgba(255,199,106,.26); border-radius:6px; background:rgba(255,199,106,.06); text-align:left; }.commander-upgrade span { grid-row:span 2; color:var(--amber); font-size:15px; }.commander-upgrade b { font-size:9px; font-weight:600; }.commander-upgrade small { color:var(--muted); font:8px 'DM Mono',monospace; }.commander-upgrade:hover:not(:disabled) { border-color:var(--amber); background:rgba(255,199,106,.12); transform:translateY(-1px); }.commander-upgrade:disabled { cursor:not-allowed; opacity:.45; }
.creature-portrait { --commander-color:var(--cyan); border-color:color-mix(in srgb, var(--commander-color) 40%, transparent); background:radial-gradient(circle at 48% 55%, color-mix(in srgb, var(--commander-color) 35%, transparent), transparent 31%), radial-gradient(circle at 60% 50%, rgba(135,114,253,.28), transparent 50%), linear-gradient(135deg,#171b3a,#0a0e20 80%); }.creature-portrait .portrait-glow { background:color-mix(in srgb, var(--commander-color) 22%, transparent); }.creature-portrait .portrait-scanline { background:color-mix(in srgb, var(--commander-color) 80%, white); box-shadow:0 0 12px var(--commander-color); }.creature-portrait[data-tier="2"] .portrait-symbol { filter:drop-shadow(0 0 22px var(--commander-color)) drop-shadow(0 0 10px var(--amber)); }.creature-portrait[data-tier="3"] { box-shadow:0 0 28px color-mix(in srgb, var(--commander-color) 25%, transparent); }.creature-portrait[data-tier="3"] .portrait-symbol { filter:drop-shadow(0 0 25px var(--commander-color)) drop-shadow(0 0 16px var(--violet)); transform:scale(1.08); }
.network-strip { min-height:34px; display:flex; align-items:center; gap:9px; margin-bottom:10px; padding:7px 10px; border-color:rgba(109,231,225,.18); background:rgba(109,231,225,.045); }.network-pulse { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); animation:pulse 1.8s ease-in-out infinite; }.network-strip strong { color:#dceff1; font:9px 'DM Mono',monospace; white-space:nowrap; }.network-address { min-width:0; overflow:hidden; color:var(--muted); font:8px 'DM Mono',monospace; text-overflow:ellipsis; white-space:nowrap; }.network-copy { margin-left:auto; flex:0 0 auto; padding:5px 7px; color:var(--cyan); border:1px solid rgba(109,231,225,.24); border-radius:4px; background:rgba(109,231,225,.06); font:8px 'DM Mono',monospace; }.network-copy:hover { border-color:var(--cyan); background:rgba(109,231,225,.12); }.opponent-card.remote-player { border-color:rgba(121,227,168,.36); background:linear-gradient(135deg,rgba(121,227,168,.1),rgba(15,19,36,.72)); }.opponent-card.remote-player .opponent-signal { color:var(--green); text-shadow:0 0 8px var(--green); }
@media (max-width: 760px) { .network-strip { align-items:flex-start; flex-wrap:wrap; }.network-address { order:3; flex-basis:100%; }.network-copy { margin-left:auto; } }
.arena-header { position:relative; }
.rules-button { position:absolute; top:-6px; right:0; padding:6px 9px; color:var(--cyan); border:1px solid rgba(109,231,225,.25); border-radius:5px; background:rgba(109,231,225,.07); font:8px 'DM Mono',monospace; letter-spacing:.08em; }
.rules-button:hover { border-color:var(--cyan); background:rgba(109,231,225,.14); }
.rules-overlay[hidden] { display:none; }
.rules-overlay { position:fixed; inset:0; z-index:31; display:grid; place-items:center; padding:20px; background:rgba(5,7,17,.78); backdrop-filter:blur(16px); }
.rules-card { width:min(700px,calc(100vw - 32px)); max-height:min(760px,calc(100vh - 32px)); overflow:auto; padding:28px; border:1px solid rgba(109,231,225,.34); border-radius:16px; background:radial-gradient(circle at 92% 6%,rgba(109,231,225,.13),transparent 25%),linear-gradient(145deg,rgba(23,28,52,.98),rgba(11,14,28,.98)); box-shadow:0 30px 120px rgba(0,0,0,.6),0 0 70px rgba(109,231,225,.08); }
.rules-card h2 { max-width:560px; margin:11px 0 10px; font-size:28px; line-height:1.02; letter-spacing:-.05em; }
.rules-lead { max-width:570px; margin:0; color:#b8bdd2; font-size:12px; line-height:1.5; }
.rules-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 16px; }
.rules-steps article { min-height:148px; padding:14px; border:1px solid rgba(165,174,222,.16); border-radius:9px; background:rgba(8,11,24,.44); }
.rules-steps b { display:block; color:var(--cyan); font:10px 'DM Mono',monospace; }
.rules-steps strong { display:block; margin-top:10px; color:#eef1ff; font-size:13px; }
.rules-steps p { margin:8px 0 0; color:#aeb4ca; font-size:10px; line-height:1.45; }
.rules-next { display:grid; gap:5px; margin:0 0 17px; padding:12px 14px; border-left:2px solid var(--amber); background:rgba(255,199,106,.07); }
.rules-next span { color:var(--amber); font:8px 'DM Mono',monospace; letter-spacing:.12em; }
.rules-next strong { color:#f0e6c9; font-size:11px; line-height:1.35; }
.rules-close { width:100%; min-height:46px; color:#09231f; border:1px solid rgba(109,231,225,.48); border-radius:7px; background:linear-gradient(100deg,#71e2d4,#b0f1d9); font-size:11px; box-shadow:0 8px 24px rgba(109,231,225,.13); }
@media (max-width:560px) {
  .rules-button { top:-8px; right:0; padding:6px 7px; }
  .rules-card { padding:22px 18px; }
  .rules-card h2 { font-size:24px; }
  .rules-steps { grid-template-columns:1fr; gap:8px; margin:17px 0 13px; }
  .rules-steps article { min-height:0; padding:11px 12px; }
  .rules-steps strong { display:inline; margin-left:7px; }
  .rules-steps p { margin-top:6px; }
}

/* Focus layout: one decision per screen, with optional details behind the toggle. */
body.focus-mode { min-height: 100vh; overflow: hidden; }
body.focus-mode .app-shell { height: 100vh; padding-bottom: 0; }
body.focus-mode .game-grid { grid-template-columns: minmax(0, 980px); gap: 8px; padding: 12px 0 0; }
body.focus-mode .arena-column { gap: 8px; }
body.focus-mode .arena-header { min-height: 36px; }
body.focus-mode .arena-header h2 { margin-top: 3px; font-size: 20px; }
body.focus-mode .arena-helper { margin-top: 4px; font-size: 9px; }
body.focus-mode .network-strip { min-height: 29px; margin-bottom: 0; padding: 5px 9px; }
body.focus-mode .turn-brief { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 9px; padding: 8px 11px; }
body.focus-mode .brief-icon { width: 30px; height: 30px; font-size: 15px; }
body.focus-mode .brief-copy strong { font-size: 12px; }
body.focus-mode .brief-copy p { margin-top: 2px; font-size: 9px; line-height: 1.2; }
body.focus-mode .brief-reward { min-width: 96px; gap: 2px; }
body.focus-mode .brief-reward b { font-size: 10px; }
body.focus-mode .stage-card { height: clamp(220px, 32vh, 280px); }
body.focus-mode .stage-topline { top: 12px; left: 16px; right: 16px; }
body.focus-mode .item-content { top: 62px; left: 24px; width: 58%; }
body.focus-mode .item-content h3 { max-height: 2em; margin: 6px 0; overflow: hidden; font-size: clamp(28px, 3.4vw, 40px); }
body.focus-mode .item-subtitle { display: -webkit-box; max-height: 2.6em; overflow: hidden; font-size: 10px; line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
body.focus-mode .item-tags { margin-top: 10px; }
body.focus-mode .item-meta { margin-top: 8px; }
body.focus-mode .item-sigil { font-size: 86px; }
body.focus-mode .treasure-pool-overlay { bottom: 25px; }
body.focus-mode .stage-footer { bottom: 9px; font-size: 8px; }
body.focus-mode .decision-strip { min-height: 36px; padding: 0 2px; gap: 12px; }
body.focus-mode .decision-copy { min-width: 0; }
body.focus-mode .decision-copy p { max-width: 100%; margin-top: 3px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
body.focus-mode .secondary-action { padding: 8px 10px; font-size: 9px; }
body.focus-mode .bid-console { padding: 12px 16px 10px; }
body.focus-mode .bid-console h3 { margin-top: 4px; font-size: 12px; }
body.focus-mode .highest-bid strong { margin-top: 3px; font-size: 15px; }
body.focus-mode .bid-controls { margin: 10px 0 9px; }
body.focus-mode .bid-value span { font-size: 21px; }
body.focus-mode .pass-button, body.focus-mode .bid-button { min-height: 44px; }
body.focus-mode .risk-note { margin-top: 9px; }

@media (max-width: 560px) {
  body.focus-mode { overflow: hidden; }
  body.focus-mode .app-shell { width: calc(100vw - 16px); }
  body.focus-mode .topbar { height: 62px; }
  body.focus-mode .game-grid { gap: 6px; padding-top: 9px; }
  body.focus-mode .arena-header { min-height: 31px; }
  body.focus-mode .arena-header h2 { font-size: 17px; }
  body.focus-mode .arena-helper { display: none; }
  body.focus-mode .network-address { display: none; }
  body.focus-mode .network-strip { min-height: 28px; }
  body.focus-mode .turn-brief { grid-template-columns: 30px minmax(0, 1fr); padding: 7px 9px; }
  body.focus-mode .brief-icon { width: 28px; height: 28px; }
  body.focus-mode .brief-copy strong { font-size: 11px; }
  body.focus-mode .brief-copy p { font-size: 8px; }
  body.focus-mode .brief-reward { display: none; }
  body.focus-mode .stage-card { height: 220px; border-radius: 12px; }
  body.focus-mode .stage-topline { top: 10px; left: 13px; right: 13px; font-size: 8px; }
  body.focus-mode .item-content { top: 51px; left: 16px; width: 66%; }
  body.focus-mode .item-content h3 { font-size: 26px; }
  body.focus-mode .item-subtitle { font-size: 9px; }
  body.focus-mode .item-tags { margin-top: 7px; }
  body.focus-mode .item-tag { padding: 4px 5px; }
  body.focus-mode .item-meta { gap: 4px; margin-top: 6px; }
  body.focus-mode .item-meta span { padding: 3px 4px; }
  body.focus-mode .item-sigil { right: 6%; top: 43%; font-size: 54px; }
  body.focus-mode .treasure-pool-overlay { left: 13px; right: 13px; bottom: 21px; }
  body.focus-mode .pool-label { font-size: 7px; }
  body.focus-mode .treasure-grid { gap: 4px; }
  body.focus-mode .treasure-tile { padding: 4px; }
  body.focus-mode .treasure-tile strong { margin-top: 1px; font-size: 8px; }
  body.focus-mode .treasure-tile small { margin-top: 1px; font-size: 6px; }
  body.focus-mode .stage-footer { bottom: 6px; left: 13px; right: 13px; }
  body.focus-mode .stage-footer span:first-child { max-width: 78%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body.focus-mode .decision-strip { min-height: 32px; gap: 6px; }
  body.focus-mode .decision-copy p { font-size: 8px; }
  body.focus-mode .secondary-action { flex: 0 0 auto; padding: 7px 8px; }
  body.focus-mode .secondary-action small { display: none; }
  body.focus-mode .bid-console { padding: 9px 10px 7px; border-radius: 10px; }
  body.focus-mode .bid-console h3 { font-size: 11px; }
  body.focus-mode .highest-bid span { font-size: 7px; }
  body.focus-mode .highest-bid strong { margin-top: 2px; font-size: 13px; }
  body.focus-mode .bid-controls { grid-template-columns: 28px 82px 28px minmax(0, 1fr); gap: 6px; margin: 7px 0 7px; }
  body.focus-mode .step-button { height: 32px; font-size: 16px; }
  body.focus-mode .bid-value span { font-size: 19px; }
  body.focus-mode .bid-value small { font-size: 7px; }
  body.focus-mode .bid-actions { gap: 6px; }
  body.focus-mode .pass-button, body.focus-mode .bid-button { min-height: 40px; }
  body.focus-mode .pass-button { padding: 6px 8px; grid-template-columns: 22px 1fr; }
  body.focus-mode .pass-button b { font-size: 10px; }
  body.focus-mode .pass-button small { font-size: 8px; }
  body.focus-mode .bid-button { gap: 6px; font-size: 10px; }
  body.focus-mode .bid-button strong { font-size: 10px; }
  body.focus-mode .risk-note { display: none; }
}