/* ============================================================
   Couch phone client — chrome styling.
   The skin is the game's own (PHONE-STYLE.md, binding): Solo
   Leveling system windows — dark translucent panels, glowing
   cyan tech framing, the REAL hex tile from the champion cards
   as the panel ground. The game's full stylesheet (GAME_CSS,
   fetched through the __CF_PHONE__ bridge) is injected BEFORE
   this file's rules at runtime, so card faces render exactly as
   the game renders them; this sheet styles only the phone
   chrome around them. NO grain. NO white bars.
   ============================================================ */

:root {
  /* The game's own theme variables (verbatim from the bundle). */
  --abyss: #070510;
  --abyss2: #0d0a1c;
  --panel: rgba(13, 11, 30, 0.92);
  --arcane: #7fd4ff;
  --arcane-dim: #3d6a8f;
  --ember: #ff9a3c;
  --gold: #e8b64c;
  --gold-deep: #9a6b1e;
  --blood: #ff4d5d;
  --violet: #9d7bff;
  --mana: #6fc3e3;
  --text: #f4eedd;
  --dim: #9d94c4;
  --serif: 'Cinzel', Georgia, serif;
  --body: 'Cormorant Garamond', Georgia, serif;
}

/* The real hex tile, extracted verbatim from the game's CSS
   (the .ft-boss plate ground in the shipped bundle). */
.cf-hex {
  background-color: rgba(5, 3, 9, 0.45);
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%237fd4ff' fill-opacity='0.055'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L15 6.35V0zm0 49v-8l12.99-7.5H28v2.31h-.01L15 42.15V49z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--abyss);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  overflow: hidden;
}
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(61, 106, 143, 0.28), transparent 60%),
    radial-gradient(100% 50% at 50% 115%, rgba(157, 123, 255, 0.10), transparent 60%),
    var(--abyss);
  pointer-events: none;
}

#app { position: relative; height: 100dvh; display: flex; flex-direction: column; }

/* ————— System-window panel (Solo Leveling chrome) ————— */
.syswin {
  position: relative;
  background-color: rgba(9, 7, 20, 0.88);
  background-image: url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%237fd4ff' fill-opacity='0.055'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L15 6.35V0zm0 49v-8l12.99-7.5H28v2.31h-.01L15 42.15V49z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  border: 1px solid var(--arcane-dim);
  box-shadow: 0 0 14px rgba(127, 212, 255, 0.22), inset 0 0 22px rgba(127, 212, 255, 0.05);
  border-radius: 4px;
}
.syswin::before, .syswin::after {
  content: '';
  position: absolute; width: 14px; height: 14px;
  border: 2px solid var(--arcane);
  pointer-events: none;
}
.syswin::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.syswin::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* ————— Header / status bar ————— */
.statusbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-family: var(--serif);
  letter-spacing: 0.06em;
  border-bottom: 1px solid rgba(127, 212, 255, 0.35);
  background: rgba(9, 7, 20, 0.9);
  box-shadow: 0 2px 12px rgba(127, 212, 255, 0.12);
  z-index: 5;
}
.statusbar .who { font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar .seat-tag {
  font-size: 11px; color: var(--abyss); background: var(--arcane);
  border-radius: 3px; padding: 2px 7px; font-weight: 700; letter-spacing: 0.08em;
}
.statusbar .seat-tag.s5 { background: var(--violet); color: #fff; }
.statusbar .pools { margin-left: auto; font-size: 14px; color: var(--mana); white-space: nowrap; }
.statusbar .leavebtn { margin-left: auto; font-size: 12px; letter-spacing: 0.12em; color: #ffb3ba; border: 1px solid rgba(255, 179, 186, 0.55); border-radius: 6px; padding: 4px 9px; cursor: pointer; white-space: nowrap; }
.statusbar .pools b { color: var(--text); font-weight: 600; }

/* PARITY BUILD 5 (audit finding 8): no text selection anywhere on
   the phone UI. A tap-hold on status text or a card face was invoking
   Android Chrome's Touch-to-Search ("google. SEAT — tap to see
   search results") — that was the browser, not the game. Form fields
   stay fully selectable/editable: claiming a seat and naming a
   champion need real text entry. */
body, body * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, textarea { user-select: text; -webkit-user-select: text; -webkit-touch-callout: default; }

/* ————— Page scaffolding ————— */
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px; gap: 10px; }
.scroll { overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: none; overflow-anchor: none; }
.scroll::-webkit-scrollbar { display: none; }
h1.title, h2.title {
  font-family: var(--serif); font-weight: 700; text-align: center;
  letter-spacing: 0.08em; margin: 4px 0 2px; color: var(--text);
  text-shadow: 0 0 12px rgba(127, 212, 255, 0.45);
  /* The game's own h1 paints a gold gradient via text-fill tricks;
     the phone chrome keeps its own flat glow instead. */
  background: none; -webkit-text-fill-color: currentColor;
}
h1.title { font-size: 24px; }
h2.title { font-size: 19px; }
.sub { text-align: center; color: var(--dim); font-size: 15px; margin: 0; }
.center-note { text-align: center; color: var(--dim); padding: 14px 8px; }
.left-off { color: var(--blood); font-size: 13.5px; line-height: 1.35; margin: 2px 2px 0; }
.err-line { color: var(--blood); text-align: center; font-size: 15px; min-height: 20px; }
.big-emoji { font-size: 44px; text-align: center; line-height: 1.1; }
/* PARITY BUILD 2: PixelLab icon sizing (replaces font emoji). */
.cf-ic { height: 1.05em; width: 1.05em; vertical-align: -0.18em; }
.cf-ic-big { width: 58px; height: 58px; }
.avatar img { width: 27px; height: 27px; }
.ringspace .face img { width: 19px; height: 19px; vertical-align: -3px; }
.ringspace .face.me img { filter: drop-shadow(0 0 5px #e8b64c); }
.dbtn img.cf-ic { height: 17px; width: 17px; vertical-align: -3px; }

/* ————— Buttons ————— */
.btn {
  display: block; width: 100%; padding: 13px 12px;
  font-family: var(--serif); font-size: 16px; letter-spacing: 0.07em;
  color: var(--arcane); background: rgba(13, 11, 30, 0.92);
  border: 1px solid var(--arcane-dim); border-radius: 4px;
  box-shadow: 0 0 10px rgba(127, 212, 255, 0.18), inset 0 0 14px rgba(127, 212, 255, 0.05);
  text-align: center; cursor: pointer; user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  color: #06121f; background: linear-gradient(180deg, #a8e2ff, var(--arcane));
  border-color: var(--arcane); font-weight: 700;
  box-shadow: 0 0 18px rgba(127, 212, 255, 0.5);
}
.btn.off, .btn:disabled { opacity: 0.38; pointer-events: none; box-shadow: none; }
.btn.gold { color: var(--gold); border-color: var(--gold-deep); box-shadow: 0 0 10px rgba(232, 182, 76, 0.25); }
.btn.danger { color: var(--blood); border-color: rgba(255, 77, 93, 0.55); }
.btn.small { width: auto; display: inline-block; padding: 7px 12px; font-size: 13.5px; }
.btnrow { display: flex; gap: 8px; }
.btnrow .btn { flex: 1; }
.commit { margin-top: auto; }

/* ————— Tabs ————— */
.tabs { display: flex; gap: 6px; }
.tabs .tab {
  flex: 1; text-align: center; padding: 9px 2px;
  font-family: var(--serif); font-size: 13.5px; letter-spacing: 0.1em;
  color: var(--dim); background: rgba(13, 11, 30, 0.85);
  border: 1px solid rgba(61, 106, 143, 0.5); border-radius: 4px 4px 0 0;
  cursor: pointer; user-select: none;
}
.tabs .tab.on {
  color: var(--arcane); border-color: var(--arcane-dim);
  box-shadow: inset 0 -2px 0 var(--arcane), 0 0 10px rgba(127, 212, 255, 0.15);
}

/* ————— Card grids ————— */
.cardgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 2px; }
/* Each cell is the face's size container — the game's face text
   scales in cqw units against its card, exactly as in the game. */
.cardgrid .cell { position: relative; border-radius: 6px; container-type: inline-size; }
.cardgrid .cell.sel { outline: 2px solid var(--arcane); box-shadow: 0 0 16px rgba(127, 212, 255, 0.55); border-radius: 6px; }
.cardgrid .cell.dim { opacity: 0.45; }
.oneface { container-type: inline-size; }
.cardgrid .card, .oneface .card { width: 100%; max-width: none; height: auto; flex: none; }
.cardgrid .facewrap, .oneface .facewrap { width: 100%; height: auto; aspect-ratio: 5 / 7; }
.cardgrid .facewrap img, .oneface .facewrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cellname { text-align: center; font-size: 13.5px; color: var(--dim); margin-top: 3px; font-family: var(--serif); letter-spacing: 0.04em; }
.keeptag {
  position: absolute; top: 6px; right: 6px; z-index: 3;
  font-family: var(--serif); font-size: 11px; letter-spacing: 0.08em;
  background: rgba(6, 18, 31, 0.9); color: var(--arcane);
  border: 1px solid var(--arcane); border-radius: 3px; padding: 2px 6px;
}
.oneface { max-width: 240px; margin: 0 auto; width: 100%; }

/* ————— Lists / rows ————— */
.row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.row .grow { flex: 1; min-width: 0; }
.row .nm { font-family: var(--serif); font-size: 16px; letter-spacing: 0.03em; }
.row .ln { color: var(--dim); font-size: 14px; }
.row .st { font-size: 14px; color: var(--mana); white-space: nowrap; }
.row.taken { opacity: 0.55; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 21px; background: rgba(61, 106, 143, 0.35);
  border: 1px solid var(--arcane-dim);
}

/* ————— Battle pieces ————— */
.namestrip { display: flex; gap: 6px; flex-wrap: wrap; }
.namestrip .chip {
  flex: 1 1 30%; text-align: center; padding: 7px 2px;
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.03em;
  border: 1px solid rgba(61, 106, 143, 0.6); border-radius: 4px;
  background: rgba(13, 11, 30, 0.88); color: var(--text); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.namestrip .chip.me { border-color: var(--arcane); color: var(--arcane); box-shadow: 0 0 8px rgba(127, 212, 255, 0.3); }
.namestrip .chip.bosschip { border-color: rgba(255, 77, 93, 0.6); color: #ffb3ba; }
.vitline { text-align: center; font-size: 16px; color: var(--mana); }
.vitline b { color: var(--text); }
.optlist .btn { margin-bottom: 8px; text-align: left; font-family: var(--body); letter-spacing: 0.01em; font-size: 16.5px; }
/* PARITY BUILD 3: the reason line inside a greyed action row, and
   the HAND tab's per-card play affordance / block reason. */
.optlist .btn .why { display: block; font-size: 12.5px; color: var(--dim); margin-top: 3px; font-family: var(--body); letter-spacing: 0; line-height: 1.35; }
.cardgrid .handact { margin-top: 6px; padding: 8px 4px; font-size: 14px; }
.cardgrid .handwhy { font-size: 12px; color: var(--dim); text-align: center; margin-top: 6px; line-height: 1.35; }
.optlist .btn.primary { text-align: center; font-family: var(--serif); }
.history { font-size: 15px; line-height: 1.45; color: var(--text); }
.history div { padding: 5px 2px; border-bottom: 1px solid rgba(61, 106, 143, 0.25); }
.history div:last-child { border-bottom: none; }

/* ————— Buzz takeover ————— */
.buzz { border-color: rgba(255, 77, 93, 0.75) !important; box-shadow: 0 0 22px rgba(255, 77, 93, 0.4), inset 0 0 22px rgba(255, 77, 93, 0.08) !important; animation: buzzpulse 1.1s ease-in-out infinite; }
@keyframes buzzpulse { 0%, 100% { box-shadow: 0 0 14px rgba(255, 77, 93, 0.3); } 50% { box-shadow: 0 0 30px rgba(255, 77, 93, 0.6); } }
.buzzhead { text-align: center; font-family: var(--serif); letter-spacing: 0.1em; color: var(--blood); font-size: 15px; }

/* ————— Placement ring ————— */
.ringwrap { position: relative; width: min(78vw, 320px); aspect-ratio: 1; margin: 4px auto; }
.ringspace {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border-radius: 50%; border: 1.5px solid var(--arcane-dim);
  background: rgba(13, 11, 30, 0.9); color: var(--text);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 14px;
}
.ringspace.sec0 { border-color: rgba(198, 44, 44, 0.9); }
.ringspace.sec1 { border-color: rgba(43, 176, 84, 0.9); }
.ringspace.sec2 { border-color: rgba(52, 96, 224, 0.9); }
.ringspace.occ { opacity: 0.4; }
.ringspace.sel { border-color: var(--arcane); box-shadow: 0 0 14px rgba(127, 212, 255, 0.8); color: var(--arcane); }
.ringspace .face { font-size: 19px; }
/* PARITY BUILD 4 (finding 16): rows mirror the collective ring —
   space 0 alone, centred, on top; the rest in rows beneath. */
.spacegrid { display: flex; flex-direction: column; gap: 7px; }
.spacegrid .spacerow { display: grid; gap: 7px; }
.ringspace .face img.fig { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 0; vertical-align: middle; }
.row.bosspick { border-color: rgba(255, 77, 93, 0.6); }
.row.bosspick .nm { color: #ffb3ba; }
.spacegrid .sp {
  padding: 12px 0; text-align: center; font-family: var(--serif); font-size: 16px;
  border: 1px solid var(--arcane-dim); border-radius: 4px; background: rgba(13, 11, 30, 0.9);
  cursor: pointer; user-select: none;
}
.spacegrid .sp.off { opacity: 0.35; pointer-events: none; text-decoration: line-through; }
.spacegrid .sp.sel { border-color: var(--arcane); color: var(--arcane); box-shadow: 0 0 12px rgba(127, 212, 255, 0.5); }
.spacegrid .sp small { display: block; font-size: 10.5px; color: var(--dim); font-family: var(--body); letter-spacing: 0; text-decoration: none; }

/* ————— Dress tab editor (P5f) ————— */
.dress-cvwrap {
  border: 1px solid var(--arcane-dim); border-radius: 4px;
  background: rgba(5, 3, 9, 0.6);
  box-shadow: inset 0 0 22px rgba(127, 212, 255, 0.06);
}
#dress-canvas { display: block; width: 100%; height: auto; touch-action: none; }
.dress-panel { margin-top: 8px; }
.dress-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; margin-bottom: 6px;
  border: 1px solid rgba(61, 106, 143, 0.45); border-radius: 4px;
  background: rgba(13, 11, 30, 0.85); cursor: pointer; user-select: none;
}
.dress-row.on { border-color: var(--arcane); box-shadow: 0 0 10px rgba(127, 212, 255, 0.35); }
.dress-row .grow { flex: 1; min-width: 0; font-family: var(--serif); font-size: 14.5px; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dkind { font-size: 12px; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; }
.dbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--arcane-dim); border-radius: 4px;
  color: var(--arcane); background: rgba(13, 11, 30, 0.9);
  font-size: 15px; cursor: pointer; user-select: none;
}
.dbtn.big { min-width: 42px; height: 40px; font-size: 16px; font-family: var(--serif); }
.dbtn.on { border-color: var(--arcane); color: var(--abyss); background: var(--arcane); font-weight: 700; }
.drow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 7px 0; }
.dlabel { font-family: var(--serif); font-size: 12px; letter-spacing: 0.1em; color: var(--dim); margin: 0 2px; }
.dress-tools { border-top: 1px solid rgba(61, 106, 143, 0.35); padding-top: 4px; }
.dress-tools .dslider { flex: 1; min-width: 0; height: 36px; accent-color: var(--arcane); cursor: pointer; }
.dress-tools .dval { min-width: 46px; text-align: right; color: var(--gold); font-family: var(--serif); font-size: 14.5px; }
.dress-pal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dpal {
  border: 1px solid rgba(61, 106, 143, 0.5); border-radius: 4px;
  background: rgba(13, 11, 30, 0.85); padding: 6px 4px;
  text-align: center; cursor: pointer; user-select: none;
}
.dpal img { width: 52px; height: 52px; object-fit: contain; display: block; margin: 0 auto 3px; }
.dpal span { font-size: 12px; color: var(--text); font-family: var(--serif); letter-spacing: 0.02em; line-height: 1.15; display: block; }
.dpen {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1px solid var(--arcane-dim); border-radius: 4px;
  background: rgba(13, 11, 30, 0.9); cursor: pointer; user-select: none;
}
.dpen.on { border-color: var(--arcane); box-shadow: 0 0 10px rgba(127, 212, 255, 0.4); }
.dpen .pdot { border-radius: 50%; background: var(--text); display: block; }
.dink {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(61, 106, 143, 0.6); cursor: pointer; display: inline-block;
}
.dink.on { border-color: var(--arcane); box-shadow: 0 0 10px rgba(127, 212, 255, 0.55); }
#dress-custom-color { width: 40px; height: 36px; padding: 0; border: 1px solid var(--arcane-dim); border-radius: 4px; background: rgba(13, 11, 30, 0.9); }
.dress-status { text-align: center; color: var(--gold); font-size: 14.5px; min-height: 20px; margin: 8px 2px 6px; }
.dress-variants { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 7px 0; }
.dvar {
  width: 46px; height: 46px; border: 1px solid rgba(61, 106, 143, 0.5); border-radius: 4px;
  background: rgba(13, 11, 30, 0.85); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
}
.dvar.on { border-color: var(--gold); box-shadow: 0 0 10px rgba(232, 182, 76, 0.4); }
.dvar img { width: 100%; height: 100%; object-fit: contain; }

/* ————— Forms ————— */
.field { margin-bottom: 10px; }
.field label { display: block; font-family: var(--serif); font-size: 13px; letter-spacing: 0.1em; color: var(--dim); margin-bottom: 5px; }
.field input {
  width: 100%; padding: 12px; font-size: 19px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(5, 3, 9, 0.7); color: var(--text);
  border: 1px solid var(--arcane-dim); border-radius: 4px; outline: none;
  font-family: var(--serif); text-align: center;
}
.field input:focus { border-color: var(--arcane); box-shadow: 0 0 12px rgba(127, 212, 255, 0.35); }

/* PARITY BUILD 5 (audit finding 12): the market family header is a
   flex row — family name on the left, its RESHUFFLE chip pinned to
   the right end of the SAME line. The old float wrapped onto its own
   line at phone widths, away from the family it reshuffles. */
.mktcol .famhead, p.famhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; margin: 8px 2px 4px; font-family: var(--serif); letter-spacing: 0.08em; }
p.famhead .famname { min-width: 0; }
p.famhead .btn { flex: none; width: auto; }
/* PARITY BUILD 5 (audit finding 7): the stream advance bar — a fixed
   thumb bar shown while a reveal / commentary card waits on the big
   screen, so the seat involved can tap through from their phone.
   Below the card overlay (z 40), above the scrolling states. */
.streambar { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 30; }
.streambar .btn { width: 100%; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6); }

/* ————— Overlays (inspect / zoom / disconnect) ————— */
.overlay {
  position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
  background: rgba(4, 3, 10, 0.94); padding: 10px; gap: 10px;
}
.overlay .scroll { flex: 1; }
.champcard-host { max-width: 430px; margin: 0 auto; width: 100%; }
.champcard-host .cf-chcard { width: 100%; }
.zoomhost { max-width: 300px; margin: 0 auto; width: 100%; }
.tagline { text-align: center; color: var(--gold); font-family: var(--serif); letter-spacing: 0.06em; font-size: 15px; }
.mut { color: var(--dim); }
.small-note { font-size: 13.5px; color: var(--dim); text-align: center; }
.kv { display: flex; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid rgba(61, 106, 143, 0.25); font-size: 15.5px; }
.kv b { color: var(--arcane); font-weight: 600; }