/* Arena lounge composition: the interface lives inside the illustrated world. */
.css-screen {
  --css-accent: #83dfff;
  --css-cyan: #26c6ff;
  --css-ui: ui-monospace, SFMono-Regular, Consolas, monospace;
  position: fixed;
  inset: 0;
  z-index: 41;
  overflow: hidden;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  background: #080a11;
  color: #f4f7ff;
}
.css-screen[hidden] { display: none !important; }
.css-screen button, .css-screen button:hover { filter: none; }
.css-screen button { touch-action: manipulation; }
.css-screen.is-leaving { opacity: 0; pointer-events: none; transition: opacity 250ms var(--ob-ease); }
.css-world, .css-lounge, .css-haze, .css-vignette, .css-ambient { position: absolute; inset: 0; pointer-events: none; }
.css-lounge { background: url('../../assets/ui/fighter-select/arena-lounge.png') center / cover no-repeat; }
.css-haze { background: linear-gradient(90deg, #02061066, #03091488 8%, #03091444 26%, #02091418 38%, transparent 64%), linear-gradient(0deg, #02050c70, transparent 21%); }
.css-vignette { background: radial-gradient(ellipse at 57% 37%, transparent 42%, #02040a66 100%); }
.css-ambient { overflow: hidden; }
.css-ambient i { position: absolute; left: 34%; top: 61%; width: 3px; height: 3px; background: #73dfff; box-shadow: 0 0 12px 2px #259dffcc; border-radius: 50%; animation: css-mote 11s linear infinite; }
.css-ambient i:nth-child(2) { left: 42%; top: 70%; animation-delay: -3s; }
.css-ambient i:nth-child(3) { left: 53%; top: 61%; animation-delay: -7s; }
.css-ambient i:nth-child(4) { left: 62%; top: 55%; animation-delay: -2s; }
.css-ambient i:nth-child(5) { left: 73%; top: 70%; animation-delay: -8s; }
.css-ambient i:nth-child(6) { left: 81%; top: 46%; animation-delay: -4s; }
.css-ambient i:nth-child(7) { left: 16%; top: 74%; animation-delay: -6s; background: #ffc879; box-shadow: 0 0 12px #e89339; }
.css-ambient i:nth-child(8) { left: 94%; top: 73%; animation-delay: -1s; background: #ffc879; box-shadow: 0 0 12px #e89339; }
.css-shell { --css-content-left: 5%; position: relative; width: 100%; height: 100%; min-height: 0; }
.css-top { position: absolute; z-index: 8; top: 3.2%; left: var(--css-content-left); right: 5.5%; display: flex; align-items: center; gap: 18px; }
.css-top .ob-lockup { gap: 12px; }
.css-top .ob-mark { font-size: clamp(27px, 2.8vw, 50px); filter: drop-shadow(0 3px 8px #0009); }
.css-top .ob-lockup-text { display: flex; align-items: center; gap: clamp(16px, 1.6vw, 28px); }
.css-top .ob-lockup strong { font: 650 clamp(23px, 2.75vw, 48px)/1 system-ui, sans-serif; letter-spacing: -.055em; text-shadow: 0 2px 12px #0007; }
/* Small controls share the same luminous inset material as the roster. */
.css-modes { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-left: auto; min-width: 230px; padding: 4px; border: 1px solid #b4d9ef44; border-radius: 3px; background: linear-gradient(160deg, #18273ee8, #060c18f2); box-shadow: 0 7px 18px #0006, inset 0 1px #ffffff15; }
.css-modes::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border: 1px solid #94eaff; border-radius: 1px; background: linear-gradient(160deg, #77deff47, #129aff33); box-shadow: 0 0 12px #1eaaff38, inset 0 1px #effcff55; transition: transform 200ms var(--ob-ease); }
.css-modes[data-mode="versus"]::before { transform: translateX(100%); }
.css-mode { position: relative; padding: 10px 13px; border: 0; border-radius: 0; background: transparent; color: #a4b9cf; font: 600 clamp(9px, .65vw, 12px)/1 var(--css-ui); letter-spacing: .08em; text-transform: uppercase; transition: color 140ms; }
.css-mode.is-on { color: #effcff; text-shadow: 0 0 12px #5dd5ff77; }


.css-main { position: absolute; z-index: 2; top: 14%; bottom: 44%; left: var(--css-content-left); right: 5.5%; pointer-events: none; }
.css-hero-well { position: absolute; left: 16%; right: 18%; top: -25%; bottom: -28%; z-index: 1; pointer-events: none; }
.css-hero-aura { position: absolute; inset: 24% -6% -8%; background: radial-gradient(ellipse at 50% 68%, #037dff69, #5b32fb25 45%, transparent 72%); animation: css-aura 9s ease-in-out infinite alternate; }
.css-hero-float { position: absolute; inset: 0; overflow: hidden; mask-image: linear-gradient(#000 85%, transparent); animation: css-float 8s ease-in-out infinite; }
.css-hero { display: block; width: 100%; height: 165%; object-fit: contain; object-position: center top; filter: drop-shadow(0 7px 16px #030514bb) drop-shadow(-4px 2px 3px #49bfff6b); }
.css-screen.has-key-art .css-hero { height: 100%; object-position: 50% 25%; }
.css-hero[hidden], .css-hero:not([src]) { display: none; }
.css-hero-fallback { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(150px, 28vw, 490px)/1 var(--font-ob-title); color: var(--css-accent); text-shadow: 0 5px #b9efff, 0 14px #133467, 0 22px 28px #000b, 0 0 90px #209cff77; transform: perspective(900px) rotateY(-16deg) rotate(-8deg); }
.css-hero-fallback[hidden] { display: none; }
.css-energy { position: absolute; inset: 20% 3% -9%; overflow: hidden; mask-image: linear-gradient(transparent, #000 28%, #000 75%, transparent); }
.css-energy i { position: absolute; left: 10%; top: 71%; width: 7%; height: 4%; background: #4fe6ff; transform: skew(-25deg) rotate(-45deg); box-shadow: 0 0 18px #309dff, 0 0 38px #0d86ff; animation: css-shard 6s ease-in-out infinite alternate; }
.css-energy i:nth-child(2) { left: 17%; top: 58%; width: 3%; height: 2%; animation-delay: -2s; }
.css-energy i:nth-child(3) { left: 25%; top: 80%; width: 5%; height: 3%; animation-delay: -4s; }
.css-energy i:nth-child(4) { left: 72%; top: 76%; width: 3%; height: 2%; background: #b990ff; animation-delay: -1s; }
.css-energy i:nth-child(5) { left: 81%; top: 66%; width: 2%; height: 3%; background: #f39cff; animation-delay: -3s; }
.css-energy i:nth-child(6) { left: 64%; top: 86%; width: 6%; height: 1.5%; animation-delay: -5s; }

.css-billboard { position: absolute; z-index: 4; top: 12%; left: 0; width: 24%; pointer-events: auto; text-shadow: 0 2px 12px #020610cc; }
.css-kicker, .css-headline { display: none; }
.css-ident { margin: 0; }
.css-player-line { display: flex; align-items: center; gap: 10px; }
.css-seat { display: inline-block; padding: 5px 15px; border: 0; border-radius: 0; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); background: linear-gradient(150deg, #c4f5ff, #43ceff 48%, #069cf2); color: #032238; font: 850 clamp(12px, 1.1vw, 20px)/1 system-ui, sans-serif; font-style: italic; text-shadow: 0 1px #ffffff55; box-shadow: inset 0 1px #e5fbff; }
.css-selection-status { font: 8px/1.2 var(--css-ui); letter-spacing: .09em; color: #cae2f4; opacity: 0; }
.css-screen.is-locked .css-selection-status { opacity: 1; color: #b6ffd9; }
.css-screen.is-locked .css-seat { background: linear-gradient(150deg, #e6fff4, #8df2c2); }
.css-name { margin: 8px 0 0; color: #fff; font: 700 clamp(38px, 4.25vw, 80px)/.95 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; text-transform: uppercase; }
.css-name.is-long { font-size: clamp(23px, 2.25vw, 42px); line-height: 1.05; overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.css-title { margin: 8px 0 0; font: 400 clamp(9px, 1.15vw, 19px)/1.1 var(--css-ui); letter-spacing: .22em; color: #f0f0fa; text-transform: uppercase; }
.css-blurb { max-width: 28ch; margin: 15px 0 0; font: clamp(10px, .95vw, 16px)/1.4 system-ui, sans-serif; color: #f1eef4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.css-stats { width: 100%; margin-top: 18px; display: grid; gap: 7px; }
.css-stat { display: grid; grid-template-columns: 9ch 1fr 2ch; gap: 10px; align-items: center; font: clamp(8px, .67vw, 12px)/1 var(--css-ui); color: #e1e9f3; letter-spacing: .04em; text-transform: uppercase; }
.css-stat i { display: block; position: relative; height: clamp(6px, .8vh, 9px); background: #667b9a2e; box-shadow: inset 0 1px 3px #0007, 0 0 8px #169eee18; overflow: hidden; }
.css-stat i::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(6.25% - 2px), #0a1429 calc(6.25% - 2px) 6.25%); }
.css-stat b { display: block; height: 100%; width: 100%; transform-origin: left; background: linear-gradient(#b4f3ff 0%, #38caff 38%, #129fe8 100%); box-shadow: 0 0 10px #2fc4ff; transition: transform 200ms var(--ob-ease); }
.css-stat-value { color: #94c4de; font-size: .85em; font-variant-numeric: tabular-nums; text-align: right; }
.css-style { display: block; padding-top: 10px; margin-top: 12px; border-top: 1px solid #acc1e333; font: clamp(6px, .57vw, 10px)/1.2 var(--css-ui); letter-spacing: .25em; color: #c2d0e0; text-transform: uppercase; }

/* Chamfered glass housing, with the bright rim separate from the dark surface. */
.css-stagebox { --panel-cut: polygon(0 0, 92% 0, 100% 11%, 100% 100%, 0 100%); position: absolute; z-index: 5; right: 0; bottom: 20px; width: 30%; padding: 10px; border: 0; border-radius: 0; background: none; box-shadow: 0 16px 28px #01050aa3; pointer-events: auto; }
.css-stagebox::before, .css-stagebox::after, .css-dock::before, .css-dock::after { content: ''; position: absolute; inset: 0; clip-path: var(--panel-cut); pointer-events: none; }
.css-stagebox::before { background: linear-gradient(130deg, #c0e6f3aa, #408ab970 30%, #78d6ffcc 66%, #28506d66); }
.css-stagebox::after { inset: 1px; background: linear-gradient(140deg, #25324aea, #080f20f5 38%, #101a2af2); }
.css-stagebox > * { position: relative; z-index: 1; }
.css-stagebox-head { display: grid; grid-template-columns: auto 28px 1fr 28px; align-items: center; gap: 6px; padding: 0 7px 8px 2px; }
.css-stage-kicker { color: #91acc5; font: 9px/1 var(--css-ui); letter-spacing: .12em; text-transform: uppercase; }
.css-stagebox-head button { display: grid; place-items: center; width: 28px; height: 28px; padding: 5px; border: 1px solid transparent; border-radius: 2px; background: #94bfe008; color: #e3f5ff; transition: background 140ms, transform 120ms var(--ob-ease); }
.css-stagebox-head svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.css-stage-name { min-width: 0; font: 500 clamp(9px, .7vw, 13px)/1.2 var(--css-ui); letter-spacing: .04em; text-transform: uppercase; text-align: center; }
.css-stage-shot { position: relative; aspect-ratio: 16 / 8.5; border: 1px solid #c4e4fb77; border-radius: 2px; background: #10192e; overflow: hidden; box-shadow: 0 1px 0 #000, 0 0 0 3px #01060c99; }
.css-stage-image { position: absolute; inset: 0; background: center / cover no-repeat; transition: transform 300ms var(--ob-ease); }
.css-stage-shot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(130deg, #d5edff18, transparent 35%), linear-gradient(0deg, #01081342, transparent 20%); pointer-events: none; }
.css-stage-reticle { position: absolute; inset: 7px; border: 1px solid #ecf8ff22; clip-path: polygon(0 0, 12px 0, 12px 1px, 1px 1px, 1px 12px, 0 12px, 0 0, 100% 0, 100% 100%, calc(100% - 12px) 100%, calc(100% - 12px) calc(100% - 1px), calc(100% - 1px) calc(100% - 1px), calc(100% - 1px) calc(100% - 12px), 100% calc(100% - 12px), 100% 0); pointer-events: none; }
.css-stagebox-foot { display: flex; justify-content: space-between; align-items: center; gap: 5px; margin: 10px 1px 0; font: clamp(7px, .5vw, 9px)/1 var(--css-ui); letter-spacing: .16em; color: #98b7ca; text-transform: uppercase; }
#css-stage-count { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; color: #c1ddeb; letter-spacing: .06em; }
.css-screen.is-stage .css-stagebox::before { background: #89e8ff; }
.css-screen.is-stage .css-stagebox { box-shadow: 0 0 22px #25afff40, 0 16px 22px #020611aa; }

/* Portraits sit behind a polished bezel. Only the selected seat emits light. */
.css-tray { position: absolute; z-index: 6; top: 56%; left: var(--css-content-left); right: 5.5%; display: grid; grid-template-columns: minmax(0, 1fr) 19%; gap: clamp(14px, 1.5vw, 25px); align-items: stretch; }
.css-tray-main { min-width: 0; padding: 8px; border: 1px solid #9dc1dc40; border-radius: 3px; background: linear-gradient(150deg, #27374e9c, #040c1bee 28%, #071021e6); backdrop-filter: blur(14px); box-shadow: 0 16px 26px #000a, inset 0 1px #c8ecff38, inset 0 -1px #000b; }
.css-tray-main::before { content: ''; position: absolute; top: -1px; left: 6%; width: 36%; height: 1px; background: linear-gradient(90deg, transparent, #c2f4ff, transparent); box-shadow: 0 0 14px #51caff99; }
.css-roster-head { display: none; }
.css-grid { display: grid; grid-template-columns: repeat(var(--css-cols, 8), minmax(0, 1fr)); gap: clamp(5px, .48vw, 9px); }
.css-grid.is-scrollable { max-height: 29vh; overflow-y: auto; padding: 7px; margin: -7px; scrollbar-width: thin; scrollbar-color: #5cc9f0 #091328; }
.css-slot { --seat-light: #45ccff; position: relative; isolation: isolate; display: block; width: 100%; min-width: 0; height: auto; max-height: 170px; aspect-ratio: 1.12; padding: 0; border: 1px solid #7997b660; border-radius: 2px; background: #0b1426; color: #e5f3ff; overflow: visible; box-shadow: 0 2px 3px #000b, inset 0 1px #edfbff25; transition: transform 160ms var(--ob-ease), border-color 140ms; }
.css-slot::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: 2px; box-shadow: 0 0 0 1px var(--seat-light), 0 0 12px 2px color-mix(in srgb, var(--seat-light) 85%, transparent), 0 0 32px color-mix(in srgb, var(--seat-light) 55%, transparent); opacity: 0; transition: opacity 160ms; }
.css-slot::after { content: ''; position: absolute; z-index: 5; inset: -3px; border: 1px solid #dcfcff; border-radius: 2px; opacity: 0; pointer-events: none; }
.css-slot-surface { position: absolute; inset: 1px; display: block; overflow: hidden; border-radius: 1px; background: radial-gradient(ellipse at 44% 3%, color-mix(in srgb, var(--slot-color, #718da9) 30%, #293950), #0a1322 83%); box-shadow: inset 0 0 12px #0003; }
.css-slot-art { display: block; position: absolute; inset: 0; transform-origin: 50% 30%; }
.css-slot-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #03102373, transparent 36%); pointer-events: none; }
.css-slot img { display: block; width: 100%; height: 235%; object-fit: cover; object-position: 50% 0%; pointer-events: none; }
.css-slot-reflection { position: absolute; inset: -30% -60%; z-index: 1; pointer-events: none; background: linear-gradient(115deg, transparent 26%, #dbf7ff08 35%, #e4f9ff40 36%, #b8eaff0a 49%, transparent 53%); opacity: .13; transition: opacity 180ms; }
.css-slot-rim { position: absolute; z-index: 4; inset: -3px; border-radius: 2px; pointer-events: none; opacity: 0; background: linear-gradient(#e8fbff, #e8fbff) left top / 13px 2px no-repeat, linear-gradient(#e8fbff, #e8fbff) left top / 2px 13px no-repeat, linear-gradient(#e8fbff, #e8fbff) right top / 13px 2px no-repeat, linear-gradient(#e8fbff, #e8fbff) right top / 2px 13px no-repeat, linear-gradient(#e8fbff, #e8fbff) left bottom / 13px 2px no-repeat, linear-gradient(#e8fbff, #e8fbff) left bottom / 2px 13px no-repeat, linear-gradient(#e8fbff, #e8fbff) right bottom / 13px 2px no-repeat, linear-gradient(#e8fbff, #e8fbff) right bottom / 2px 13px no-repeat; filter: drop-shadow(0 0 3px var(--seat-light)); transition: opacity 140ms; }
.css-slot-seat { position: absolute; z-index: 6; top: -4px; left: 3px; padding: 4px 7px; border-radius: 0 0 3px 0; color: #04253a; background: linear-gradient(#e2fcff, var(--seat-light)); font: 850 clamp(10px, 1vw, 17px)/1 system-ui; font-style: italic; text-shadow: 0 1px #ffffff55; box-shadow: 1px 2px 7px #0006; pointer-events: none; }
.css-slot-seat:empty { display: none; }
.css-slot-name { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 15px 4px 5px; background: linear-gradient(transparent, #020813ed); color: #eafaff; font: 600 clamp(8px, .63vw, 12px)/1.1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em; text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transform: translateY(3px); transition: opacity 140ms, transform 160ms var(--ob-ease); pointer-events: none; }
.css-slot.is-letter .css-slot-name, .css-slot.is-create .css-slot-name { opacity: .75; transform: none; text-align: center; font-size: clamp(7px, .56vw, 10px); }
.css-slot-monogram { display: grid; position: absolute; inset: 0; place-items: center; color: var(--slot-color, #b7ebff); font: 700 clamp(24px, 2.7vw, 48px)/1 var(--font-ob-title); text-shadow: 0 1px #e4fffa77, 0 0 22px color-mix(in srgb, var(--slot-color) 60%, transparent); }
.css-slot.is-letter .css-slot-surface::before { content: ''; position: absolute; width: 45%; aspect-ratio: 1; top: 23%; left: 27.5%; transform: rotate(45deg); border: 1px solid color-mix(in srgb, var(--slot-color) 28%, transparent); box-shadow: inset 0 0 18px color-mix(in srgb, var(--slot-color) 10%, transparent); }
.css-slot.is-create .css-slot-surface { background: linear-gradient(145deg, #263b524d, #081222); }
.css-create-mark { display: grid; position: absolute; inset: 0 0 10%; place-items: center; }
.css-create-mark svg { width: 32%; fill: none; stroke: #a4c4db; stroke-width: 1.4; }
.css-slot.is-void { border-style: dashed; border-color: #6b9bc422; opacity: .4; }
.css-slot.is-p1 { z-index: 3; transform: translateY(-3px); border-color: #e5fbff; box-shadow: 0 0 0 1px #49d4ff, 0 0 10px #16bfff, 0 0 25px #1392ff99; }
.css-slot.is-p2 { --seat-light: #ff528f; z-index: 2; border-color: #ffc8dc; }
.css-slot.is-p1.is-p2 { --seat-light: #55d7ff; box-shadow: inset -3px 0 #ff5893; }
.css-slot.is-p1::before, .css-slot.is-p2::before { opacity: 1; }
.css-slot.is-p1 .css-slot-rim, .css-slot.is-p2 .css-slot-rim { opacity: 1; }
.css-slot.is-p1 .css-slot-rim::after { content: ''; position: absolute; top: 0; left: 3%; width: 44%; height: 2px; background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 8px var(--seat-light); animation: css-edge-glint 5.5s ease-in-out infinite; pointer-events: none; }
.css-slot.is-p1 .css-slot-name, .css-slot.is-p2 .css-slot-name { opacity: 1; transform: none; }
.css-slot.is-locked-p1::after, .css-slot.is-locked-p2::after { animation: css-lock-ring 320ms var(--ob-ease) both; }
.css-slot.is-locked-p1 .css-slot-seat, .css-slot.is-locked-p2 .css-slot-seat { background: linear-gradient(#f1fff9, #aef4d1); }
.css-filters { position: absolute; left: 0; right: 0; top: calc(100% + 9px); display: flex; justify-content: center; gap: 3px; padding: 5px 8px; border-top: 1px solid #9cc5e624; border-bottom: 1px solid #78c5ff22; background: linear-gradient(90deg, transparent, #040b19e8 9%, #040b19e8 91%, transparent); }
.css-filters[hidden] { display: none; }
.css-filter { position: relative; padding: 8px 13px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: #b1c1d3; font: 500 clamp(9px, .65vw, 12px)/1 var(--css-ui); letter-spacing: .015em; text-transform: uppercase; transition: color 140ms, background 140ms; }
.css-filter.is-on { border-color: #76d7f780; background: linear-gradient(135deg, #3b97c53d, #1173b237); color: #dcfaff; box-shadow: inset 0 1px #b4eeff44, 0 0 13px #20b4ff24; text-shadow: 0 0 10px #46caff88; }
.css-filter.is-on::after { content: ''; position: absolute; height: 2px; bottom: -1px; left: 22%; right: 22%; background: #b3f5ff; box-shadow: 0 0 9px #29caff; }

.css-tray-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
.css-dock { --panel-cut: polygon(0 0, 86% 0, 100% 14%, 100% 100%, 7% 100%, 0 94%); position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr auto; align-items: center; justify-items: center; gap: 8px; width: 100%; min-width: 0; padding: 16px 14px 12px; border: 0; border-radius: 0; background: none; color: #f8f0fa; text-align: center; box-shadow: 0 10px 22px #0007; }
.css-dock::before { z-index: -2; background: linear-gradient(135deg, #ffaacaac, #d12e7273 36%, #5e426477 68%, #fb8fbeb3); }
.css-dock::after { z-index: -1; inset: 1px; background: radial-gradient(ellipse at 20% 0, #6d1c4559, transparent 65%), linear-gradient(135deg, #221426fa, #080d1ef7 55%); }
.css-dock-tag { justify-self: start; padding: 5px 13px; background: linear-gradient(140deg, #ffacd0, #ff4589 60%, #ec2c70); clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%); color: #300c20; font: 850 clamp(12px, 1.25vw, 21px)/1 system-ui; font-style: italic; text-shadow: 0 1px #ffffff44; }
.css-dock-name { position: relative; z-index: 2; align-self: start; margin-top: 3px; max-width: 100%; font: 700 clamp(13px, 1.25vw, 23px)/1.1 var(--font-ob-title); letter-spacing: .05em; text-transform: uppercase; }
.css-dock.is-waiting .css-dock-name { position: absolute; top: 30%; left: 9%; right: 9%; margin: 0; font: 400 clamp(10px, .94vw, 17px)/1.55 var(--css-ui); letter-spacing: .12em; color: #f4e9f6; }
.css-dock-thumb { position: absolute; right: 6%; bottom: 16%; left: 6%; height: 48%; background: center 0% / auto 220% no-repeat; mask-image: linear-gradient(#000 50%, transparent); pointer-events: none; opacity: .85; }
.css-dock-thumb svg { position: absolute; width: 54px; height: 38px; bottom: 0; left: calc(50% - 27px); fill: none; stroke: #d7bfe1; stroke-width: 1.35; opacity: .75; filter: drop-shadow(0 0 7px #dc7eba44); }
.css-dock-thumb.is-art svg { display: none; }
.css-dock.is-waiting .css-dock-thumb { height: 21%; bottom: 20%; mask-image: none; }
.css-dock.is-waiting .css-dock-thumb svg { width: auto; height: 100%; max-width: 68px; left: 50%; transform: translateX(-50%); }
.css-dock-detail { position: relative; z-index: 2; align-self: end; padding-top: 9px; border-top: 1px solid #c895b147; width: 100%; font: clamp(7px, .55vw, 10px)/1.2 var(--css-ui); letter-spacing: .1em; color: #bb9bb4; text-transform: uppercase; }
.css-dock.is-ready::before { background: linear-gradient(135deg, #dcfff0, #53d3a2aa, #7bacba55); }
.css-dock.is-ready .css-dock-tag { background: linear-gradient(#e0fff1, #93efc7); }
.css-dock.is-ready .css-dock-detail { color: #b7f9db; }
.css-fight { position: relative; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 7px; min-height: 55px; padding: 11px 13px; border: 1px solid #88d6ef88; border-radius: 2px; color: #e1f6ff; background: linear-gradient(145deg, #255876db, #0b2138ed 55%, #13273e); text-align: left; box-shadow: 0 6px 14px #0006, inset 0 1px #b4edff66, inset 0 -1px #041020; transition: transform 120ms var(--ob-ease); }
.css-fight::after { content: ''; position: absolute; bottom: -1px; left: 16%; right: 16%; height: 2px; background: #9cefff; box-shadow: 0 0 10px #31bfff; opacity: .6; }
.css-fight-copy { display: grid; gap: 5px; min-width: 0; }
.css-fight-kicker { font: 500 clamp(6px, .52vw, 9px)/1 var(--css-ui); letter-spacing: .08em; text-transform: uppercase; color: #98c7e3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.css-fight strong { font: 700 clamp(14px, 1.16vw, 22px)/1 var(--font-ob-title); letter-spacing: .02em; text-transform: uppercase; }
.css-fight-arrow { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform 160ms var(--ob-ease); }
.css-fight.is-ready { color: #05283b; border-color: #d6faff; background: linear-gradient(130deg, #ddfaff, #85ddff 55%, #39bbf5); box-shadow: 0 0 18px #27b6ff55, 0 5px 14px #0009, inset 0 1px #fff; }
.css-fight.is-ready .css-fight-kicker { color: #22516a; }
.css-fight:disabled { color: #899aaf; border-color: #8697b440; background: #091021ee; box-shadow: inset 0 1px #ffffff0c; cursor: default; }
.css-fight:disabled::after { opacity: 0; }
.css-fight:disabled .css-fight-arrow { opacity: .3; }
.css-foot { position: absolute; z-index: 7; bottom: 4.8%; left: 62%; right: 5.5%; display: flex; justify-content: end; gap: 10px; margin: 0; padding: 0; }
.css-foot .ob-prompts { justify-content: end; gap: clamp(10px, 1vw, 20px); font: clamp(10px, .67vw, 13px)/1 system-ui; color: #e0e8f1; }
.css-foot .ob-prompts button { min-height: 30px; gap: 7px; padding: 3px 0; white-space: nowrap; font: inherit; letter-spacing: 0; text-transform: none; transition: color 140ms; }
.css-foot .ob-badge { display: inline-grid; place-items: center; background: linear-gradient(#fcffff, #bbd0e4); color: #172b40; min-width: 19px; height: 19px; padding: 0 3px; border: 1px solid #edfcff; border-radius: 50%; font: 700 9px/1 var(--css-ui); box-shadow: 0 2px 0 #44556a, 0 3px 6px #0008; }
.css-foot .ob-stamp { position: absolute; top: calc(100% + 20px); right: 0; white-space: nowrap; color: #adbac58c; font: clamp(5px, .5vw, 8px)/1 var(--css-ui); letter-spacing: .25em; }
.css-foot .ob-stamp .ob-mark { display: none; }
.css-screen button:focus-visible { outline: 2px solid #b0f0ff; outline-offset: 4px; }
.css-screen button:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.css-screen.is-keyboard *, .css-screen.is-keyboard *::after, .css-screen.is-keyboard *::before { transition-duration: 0ms !important; }
.css-screen.is-keyboard .css-slot::after { animation: none; }
@keyframes css-lock-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(1.12); } }
@keyframes css-edge-glint { 0%, 12% { opacity: 0; transform: translateX(0); } 28% { opacity: .9; } 62% { opacity: .9; transform: translateX(115%); } 78%, 100% { opacity: 0; transform: translateX(115%); } }
@keyframes css-float { 0%, 100% { transform: translateY(0) rotate(-.15deg); } 50% { transform: translateY(-5px) rotate(.15deg); } }
@keyframes css-aura { from { opacity: .65; transform: scale(.98); } to { opacity: 1; transform: scale(1.02); } }
@keyframes css-mote { 0% { opacity: 0; transform: translate3d(0, 20px, 0); } 20% { opacity: .8; } 80% { opacity: .45; } 100% { opacity: 0; transform: translate3d(22px, -110px, 0); } }
@keyframes css-shard { from { opacity: .35; translate: 0 0; } to { opacity: .9; translate: 4px -8px; } }
@media (hover: hover) and (pointer: fine) {
  .css-slot:hover:not(.is-p1):not(.is-p2) { z-index: 4; transform: translateY(-3px); border-color: #d0e8f3; }
  .css-slot:hover::before { opacity: .38; }
  .css-slot:hover .css-slot-name, .css-slot:focus-visible .css-slot-name { opacity: 1; transform: none; }
  .css-slot:hover .css-slot-reflection { opacity: .7; }
  .css-slot.is-p1:hover::before, .css-slot.is-p2:hover::before { opacity: 1; }
  .css-mode:hover:not(.is-on), .css-filter:hover:not(.is-on) { color: #fff; background: #a3cded13; }
  .css-stagebox-head button:hover { border-color: #a5e2f655; background: #6bd5ff16; }
  .css-stagebox:hover .css-stage-image { transform: scale(1.025); }
  .css-dock.is-waiting:hover::before { background: #efa3c5; }
  .css-fight:hover:not(:disabled) { border-color: #d5f5ff; }
  .css-fight:hover:not(:disabled) .css-fight-arrow { transform: translateX(3px); }
  .css-foot .ob-prompts button:hover { color: #83e3ff; }
}
@media (max-width: 1100px) {
  .css-top { gap: 9px; }
  .css-mode { padding: 8px; }
  .css-stagebox { padding: 6px; }
  .css-stage-kicker { display: none; }
  .css-stagebox-head { grid-template-columns: 26px 1fr 26px; }
  .css-stagebox-head button { width: 26px; }
  .css-billboard { width: 27%; }
  .css-title { letter-spacing: .12em; }
  .css-blurb { margin-top: 12px; }
  .css-stats { margin-top: 13px; gap: 6px; }
  .css-filter { padding-inline: 8px; }
  .css-foot { left: 58%; }
}
@media (max-height: 700px) and (min-width: 901px) {
  .css-billboard { top: 6%; }
  .css-name { font-size: 46px; }
  .css-name.is-long { font-size: 29px; }
  .css-blurb { font-size: 10px; margin-top: 10px; }
  .css-stats { margin-top: 12px; gap: 5px; }
  .css-style { margin-top: 9px; padding-top: 8px; }
  .css-slot { max-height: 12.8vh; }
}
@media (max-width: 900px) {
  .css-shell { --css-content-left: 4%; }
  .css-top { right: 4%; }
  .css-top .ob-lockup small { display: none; }
  .css-main { right: 5%; top: 16%; bottom: 44%; }
  .css-billboard { top: 7%; width: 29%; }
  .css-name { font-size: 50px; }
  .css-name.is-long { font-size: 29px; }
  .css-hero-well { left: 19%; right: 7%; top: -18%; bottom: -22%; }
  .css-stagebox { width: 28%; bottom: 20px; }
  .css-tray { right: 5%; grid-template-columns: minmax(0, 1fr) 18%; gap: 9px; }
  .css-slot { max-height: 12vh; }
  .css-filters { padding-inline: 0; }
  .css-foot { left: 50%; bottom: 7%; }
  .css-foot .ob-prompts { gap: 9px; font-size: 9px; }
  .css-blurb { font-size: 10px; }
  .css-dock { padding: 11px 8px; }
  .css-dock-name { font-size: 17px; }
  .css-fight { font-size: 12px; }
}
@media (max-width: 600px) {
  .css-screen { overflow-y: auto; }
  .css-shell { height: 100svh; min-height: 760px; }
  .css-lounge { background-position: 47% center; }
  .css-haze { background: linear-gradient(90deg, #040814a6, transparent 75%), linear-gradient(0deg, #030611bb, transparent 65%); }
  .css-top { top: 3%; display: grid; grid-template-columns: 1fr auto; gap: 15px 10px; }
  .css-top .ob-lockup strong { font-size: 25px; }
  .css-top .ob-mark { font-size: 27px; }
  .css-modes { grid-row: 2; grid-column: 1 / -1; margin: 0; justify-self: start; }
  .css-main { right: 5%; top: 19%; bottom: 40%; }
  .css-billboard { top: 4%; width: 43%; }
  .css-name { font-size: 44px; }
  .css-name.is-long { font-size: clamp(16px, 4.5vw, 25px); }
  .css-title { font-size: 9px; }
  .css-seat { font-size: 12px; }
  .css-selection-status { font-size: 6px; }
  .css-blurb { font-size: 10px; line-height: 1.45; }
  .css-stat { font-size: 7px; gap: 8px; }
  .css-stats { margin-top: 16px; gap: 7px; }
  .css-style { font-size: 6px; letter-spacing: .12em; }
  .css-hero-well { left: 25%; right: -25%; top: 0; bottom: -12%; }
  .css-hero { height: 130%; }
  .css-screen.has-key-art .css-hero-well { left: 14%; right: -4%; }
  .css-screen.has-key-art .css-hero { height: 100%; object-fit: cover; object-position: 75% top; }
  .css-stagebox { width: 43%; bottom: 0; }
  .css-stage-shot { aspect-ratio: 16 / 8; }
  .css-stagebox-foot { font-size: 5px; letter-spacing: .13em; }
  .css-stage-name { font-size: 7px; }
  .css-tray { top: 63%; right: 5%; grid-template-columns: 1fr; gap: 48px; }
  .css-tray-main { padding: 4px; }
  .css-grid { gap: 4px; }
  .css-slot { height: auto; max-height: none; aspect-ratio: .8; }
  .css-slot.is-letter, .css-slot.is-create { font-size: 24px; }
  .css-slot-name { font-size: 6px; padding: 10px 2px 3px; }
  .css-slot-seat { font-size: 8px; padding: 3px; left: 0; top: -3px; }
  .css-slot-rim { background-size: 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px; }
  .css-slot.is-letter .css-slot-name, .css-slot.is-create .css-slot-name { font-size: 6px; }
  .css-slot-monogram { font-size: 24px; }
  .css-filter { padding: 7px 7px; font-size: 7px; }
  .css-tray-side { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .css-dock { min-height: 46px; padding: 8px; display: flex; gap: 7px; border-radius: 3px; }
  .css-dock-tag { padding: 3px 6px; font-size: 11px; }
  .css-dock-name { font-size: 13px; margin: 0; text-align: left; }
  .css-dock.is-waiting .css-dock-name { position: relative; top: auto; left: auto; right: auto; font-size: 8px; line-height: 1.3; }
  .css-dock-thumb, .css-dock-detail { display: none; }
  .css-fight { padding: 8px; min-height: 46px; }
  .css-fight strong { font-size: 14px; }
  .css-fight-kicker { font-size: 6px; }
  .css-fight-arrow { width: 15px; flex-basis: 15px; }
  .css-foot { bottom: 2%; left: 5%; right: 5%; justify-content: center; }
  .css-foot .ob-prompts { justify-content: space-between; width: 100%; font-size: 8px; }
  .css-foot .ob-stamp { display: none; }
}
@media (max-height: 580px) and (min-width: 601px) {
  .css-screen { overflow-y: auto; }
  .css-shell { min-height: 580px; }
  .css-blurb { -webkit-line-clamp: 1; }
  .css-name { font-size: 37px; }
  .css-name.is-long { font-size: 26px; }
  .css-slot { max-height: 64px; }
  .css-foot { bottom: 5%; }
}
.css-screen.is-backgrounded *, .css-screen.is-backgrounded *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .css-screen *, .css-screen *::before, .css-screen *::after { animation: none !important; transition: none !important; }
  .css-hero-well, .css-stagebox, .css-slot { transform: none !important; }
  .css-ambient { display: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .css-screen .ob-panel, .css-modes { background: #0a1222; backdrop-filter: none; }
  .css-billboard { background: #091323ef; padding: 10px; }
}