/* House Controls (/admin): admin mode (Jesse, 2026-10-09; carmack's mockup, desktop first). Neon
   blue, purple and white on deep navy; Silkscreen labels, VT323 numbers and body, the Yellowtail
   sign. Amber only where something wants attention (needs you, drafts, money warnings). Tokens
   live on the frame and on .hc (the staff Floor page uses .hc without the frame). */

.hc-frame, .hc {
  --hc-deep: #070a14; --hc-rail: #0a0f1f; --hc-panel: #0b1124; --hc-panel2: #0f1630; --hc-raise: #111933;
  --hc-line: #22305a; --hc-line2: #2a3762; --hc-row: #18213f; --hc-rail-line: #1d2747;
  --hc-blue: #53e0ff; --hc-blue-soft: #bff3ff; --hc-link: #7fe8ff; --hc-purple: #b48cff; --hc-violet: #8a5cff;
  --hc-white: #eef3ff; --hc-body: #c8d2f0; --hc-muted: #9aa6c8; --hc-dim: #7d89ad;
  --hc-amber: #ffbf3f; --hc-amber-soft: #ffd27a; --hc-pink: #ff7aa8; --hc-mint: #9ff0c0;
  /* older names, kept for the pages not yet redrawn */
  --hc-cream: var(--hc-white); --hc-cyan: var(--hc-blue); --hc-red: var(--hc-pink); --hc-green: var(--hc-mint);
  --hc-pixel: 'Silkscreen', monospace; --hc-lcd: 'VT323', monospace; --hc-sign: 'Yellowtail', cursive;
}
.hc { color: var(--hc-white); display: grid; font-family: var(--hc-lcd); gap: 1.1rem; min-width: 0; width: 100%; }
.hc a { color: inherit; text-decoration: none; }
.hc-frame :focus-visible, .hc :focus-visible { outline: 2px solid var(--hc-blue); outline-offset: 2px; }

/* ---------------------------------------------------------------- the mode: rail, top bar */
body.hc-mode { background: radial-gradient(1200px 500px at 70% -10%, rgba(138,92,255,.18), transparent 70%), #070a14; }
body.hc-mode .loyalty-main { margin: 0; max-width: none; padding: 0; }
.hc-frame { color: var(--hc-white); display: flex; font: 400 1.1rem/1.2 var(--hc-lcd); min-height: 100vh; }
.hc-frame a { color: var(--hc-link); text-decoration: none; }
.hc-frame a:hover { color: #fff; }
.hc-rail { background: var(--hc-rail); border-right: 1px solid var(--hc-rail-line); box-sizing: border-box; display: flex; flex: 0 0 240px; flex-direction: column; gap: 1.2rem; min-height: 100vh; padding: 1.2rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.hc-brand { align-items: baseline; display: flex; gap: .55rem; }
.hc-frame .hc-sign { color: #f3f0ff; font: 400 2.55rem/1 var(--hc-sign); text-shadow: 0 0 10px var(--hc-violet), 0 0 26px rgba(138,92,255,.6); }
.hc-brand-sub { color: var(--hc-muted); font: 400 .56rem var(--hc-pixel); letter-spacing: .16em; }
.hc-rail-links { display: flex; flex-direction: column; gap: .22rem; }
.hc-frame .hc-rail-link { align-items: center; border-radius: 10px; color: #b9c4e4; display: flex; font: 400 .67rem var(--hc-pixel); justify-content: space-between; letter-spacing: .12em; min-height: 2.6rem; padding: 0 .7rem; }
.hc-frame .hc-rail-link:hover { background: rgba(83,224,255,.06); color: #fff; }
.hc-frame .hc-rail-link[aria-current] { background: rgba(83,224,255,.12); box-shadow: inset 3px 0 0 var(--hc-blue); color: #fff; }
.hc-rail-badge { color: var(--hc-blue); font: 400 1rem var(--hc-lcd); letter-spacing: 0; }
.hc-rail-badge.is-attention { color: var(--hc-amber); }
.hc-rail-foot { display: flex; flex-direction: column; gap: .55rem; margin-top: auto; }
/* PAGES (phones only; see the phone section at the end) */
.hc-nav-check, .hc-nav-button { display: none; }
.hc-body { box-sizing: border-box; display: flex; flex: 1 1 0; flex-direction: column; gap: 1.1rem; min-width: 0; padding: 1.2rem 1.55rem 2.4rem; }
.hc-body > .hc { max-width: none; }
.hc-top { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; }
.hc-title { color: #fff; font: 400 1.22rem var(--hc-pixel); letter-spacing: .12em; margin: 0; text-shadow: 0 0 10px rgba(83,224,255,.6); text-transform: uppercase; }
.hc-when { color: var(--hc-muted); }
.loyalty-main .hc-frame .hc-search { align-items: center; background: var(--hc-panel); border: 1.5px solid var(--hc-line2); border-radius: 999px; color: var(--hc-muted); display: flex; flex: 1 1 280px; gap: .55rem; margin: 0; max-width: none; min-height: 2.45rem; padding: 0 .8rem; position: relative; }
.loyalty-main .hc-frame .hc-search:focus-within { border-color: var(--hc-blue); box-shadow: 0 0 12px rgba(83,224,255,.3); color: #fff; }
.hc-search svg { flex: none; height: 18px; width: 18px; }
/* The :not() chain outranks house.css's global field rule. */
.loyalty-main .hc-frame .hc-search input:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]) { background: none; border: 0; border-radius: 0; box-shadow: none; color: #fff; display: block; flex: 1; font: 400 1.15rem var(--hc-lcd); height: auto; margin: 0; min-height: 0; min-width: 0; outline: none; padding: 0; width: 100%; }
.hc-frame .hc-search input::placeholder { color: var(--hc-muted); }
.hc-frame .hc-action { align-items: center; border: 1.5px solid var(--hc-blue); border-radius: 999px; color: var(--hc-blue-soft); display: inline-flex; font: 400 .67rem var(--hc-pixel); letter-spacing: .1em; min-height: 2.45rem; padding: 0 1rem; }
.hc-frame .hc-action.is-primary { background: var(--hc-blue); border-color: var(--hc-blue); box-shadow: 0 0 16px rgba(83,224,255,.5); color: #04121a; }
.hc-frame .hc-action:hover { background: rgba(83,224,255,.12); color: #fff; }
.hc-frame .hc-action.is-primary:hover { background: #8ff0ff; color: #04121a; }

/* search results */
.hc-drop { background: #0b1124; border: 1.5px solid var(--hc-blue); border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.65); display: grid; gap: .1rem; left: 0; min-width: min(20rem, 88vw); padding: .3rem; position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30; }
.hc-drop[hidden] { display: none; }
.hc-drop h3 { color: var(--hc-dim); font: 400 .5rem var(--hc-pixel); letter-spacing: .1em; margin: 0; padding: .35rem .35rem .1rem; }
.hc-hit { align-items: center; border-radius: 8px; display: grid; gap: .55rem; grid-template-columns: 2.2rem 1fr auto; padding: .25rem .35rem; }
.hc-hit[aria-selected="true"], .hc-hit:hover { background: rgba(83,224,255,.12); }
.hc-hit img, .hc-hit .hc-dot { border-radius: 50%; height: 2.2rem; object-fit: cover; width: 2.2rem; }
.hc-hit strong { color: #fff; display: block; font-size: 1.2rem; font-weight: 400; line-height: 1; }
.hc-hit small { color: var(--hc-muted); font-size: .95rem; line-height: 1; }
.hc-drop p { color: var(--hc-muted); font-size: 1.05rem; margin: 0; padding: .3rem .4rem; }

/* ---------------------------------------------------------------- shared pieces */
.hc-alarm { align-items: center; background: rgba(255,191,63,.07); border: 1.5px solid var(--hc-amber); border-radius: 12px; color: var(--hc-amber-soft); display: flex; flex-wrap: wrap; gap: .4rem .8rem; line-height: 1.1; padding: .6rem .85rem; }
.hc-alarm b { background: var(--hc-amber); border-radius: 4px; color: #2a1a00; font: 700 .55rem var(--hc-pixel); padding: .2rem .35rem; }
.hc-alarm span { flex: 1 1 14rem; }
.hc .hc-alarm a { border: 1px solid var(--hc-amber); border-radius: 999px; color: var(--hc-amber); font: 400 .55rem var(--hc-pixel); padding: .35rem .6rem; }
.hc-banner { background: rgba(83,224,255,.08); border: 1px solid rgba(83,224,255,.4); border-radius: 12px; color: var(--hc-blue-soft); margin: 0; padding: .6rem .85rem; }
.hc-mini { border: 1px solid var(--hc-blue); border-radius: 999px; color: var(--hc-blue); font: 400 .55rem var(--hc-pixel); padding: .35rem .6rem; white-space: nowrap; }

.hc-kpis { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.hc-kpi { background: linear-gradient(180deg, #0e1530, #0a0f22); border: 1px solid var(--hc-line); border-radius: 14px; display: flex; flex-direction: column; gap: .22rem; padding: .8rem .9rem; }
.hc-kpi span { color: #8fa0cc; font: 400 .56rem var(--hc-pixel); letter-spacing: .14em; }
.hc-kpi b { color: #fff; font: 400 2.45rem/1 var(--hc-lcd); font-variant-numeric: tabular-nums; text-shadow: 0 0 12px rgba(83,224,255,.5); }
.hc-kpi b.is-down { color: var(--hc-pink); text-shadow: 0 0 12px rgba(255,122,168,.5); }
.hc-kpi small { color: var(--hc-muted); font-size: 1rem; line-height: 1.1; }

.hc-two, .hc-grid3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
/* NOW's middle: ON THE FLOOR down the left, the house's night and credits in and out stacked right. */
.hc-grid2 { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
/* Laptop widths: the floor table runs across the top, the two graphs side by side under it. */
@media (max-width: 1500px) { .hc-grid2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hc-floor { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 1050px) { .hc-grid2 { grid-template-columns: minmax(0, 1fr); } }
.hc-panel { align-content: start; background: var(--hc-panel); border: 1px solid var(--hc-line); border-radius: 16px; display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .9rem 1rem; }
.hc-panel.is-attention { border-color: #3b2f12; }
.hc-panel.is-attention h2 { color: var(--hc-amber-soft); }
.hc-ph { align-items: baseline; display: flex; flex-wrap: wrap; gap: .3rem .7rem; }
.hc-ph h2, .hc-ph b { color: #fff; font: 400 .72rem var(--hc-pixel); letter-spacing: .16em; margin: 0; }
.hc-ph em { color: var(--hc-muted); font-style: normal; }
.hc-ph > em:last-child { margin-left: auto; }
.hc-ph form { margin: 0; }
.hc-ph-num { font: 400 1.65rem/1 var(--hc-lcd) !important; letter-spacing: 0 !important; margin-left: auto; }
.hc .hc-ph-link { color: var(--hc-link); font: 400 .56rem var(--hc-pixel); letter-spacing: .12em; margin-left: auto; }
.hc-quiet { color: var(--hc-muted); margin: 0; }
.hc-foot { color: #8fa0cc; font-size: 1rem; margin: .2rem 0 0; }
.hc-tag { border: 1px solid var(--hc-line2); border-radius: 6px; color: var(--hc-body); font: 400 .56rem var(--hc-pixel); letter-spacing: .12em; padding: .22rem .45rem; }
.hc-tag.is-demo { border-color: var(--hc-purple); color: #d9c6ff; margin-left: auto; }
.is-up { color: var(--hc-mint); }
.is-down { color: var(--hc-pink); }
.hc-ph .is-up { color: var(--hc-mint); }
.hc-ph .is-down { color: var(--hc-pink); }

.hc-feed { display: grid; gap: .3rem; }
.hc-row { align-items: center; border-radius: 8px; display: grid; gap: .5rem; grid-template-columns: 1.8rem 1fr auto; line-height: 1.05; padding: .15rem .2rem; }
.hc-row:hover { background: rgba(83,224,255,.06); }
.hc-row img, .hc-dot { border-radius: 50%; height: 1.8rem; object-fit: cover; width: 1.8rem; }
.hc-dot { background: #172350; color: var(--hc-blue-soft); display: grid; font: 400 .6rem var(--hc-pixel); place-items: center; }
.hc-row em { color: var(--hc-dim); font-size: 1rem; font-style: normal; }

.hc-chips { align-items: center; display: flex; flex-wrap: wrap; gap: .35rem; }
.hc-chip { background: var(--hc-panel); border: 1px solid var(--hc-line2); border-radius: 999px; color: var(--hc-blue-soft); font: 400 .56rem var(--hc-pixel); letter-spacing: .06em; padding: .45rem .7rem; }
.hc .hc-chip { color: var(--hc-blue-soft); }
.hc .hc-chip[aria-current] { background: rgba(83,224,255,.12); border-color: var(--hc-blue); color: #fff; }
.hc-aside { color: var(--hc-muted); font-size: 1.1rem; margin-left: auto; }
.hc-pill { border-radius: 4px; font: 700 .48rem var(--hc-pixel); letter-spacing: .06em; padding: .15rem .3rem; }
.hc-pill.is-here { background: rgba(83,224,255,.14); color: var(--hc-blue); }
.hc-pill.is-demo { background: rgba(180,140,255,.12); box-shadow: inset 0 0 0 1px rgba(180,140,255,.6); color: #d9c6ff; }
.hc-pill.is-staff { background: #1c2a52; color: var(--hc-blue-soft); }
.hc-pill.is-owner { background: rgba(180,140,255,.22); color: #e9ddff; }
.hc-pill.is-private { background: #2a1a3e; color: #e0a8ff; }
.hc-avatar { background: #172350; border-radius: 50%; color: var(--hc-blue-soft); display: grid; flex: none; font-style: normal; height: 2.2rem; object-fit: cover; place-items: center; width: 2.2rem; }
/* house.css sizes images to their content; avatars keep their circle. */
.hc img.hc-avatar { height: 2.2rem; min-width: 2.2rem; }
.hc .hc-people img.hc-avatar { height: 1.8rem; min-width: 1.8rem; }
.hc-avatar.is-wifi { box-shadow: 0 0 0 2px var(--hc-blue); }
.hc-avatar.is-demo { box-shadow: 0 0 0 2px var(--hc-purple); }
.hc-initial { background: #172350; border-radius: 50%; color: var(--hc-blue-soft); display: inline-grid; flex: none; font-style: normal; height: 1.6rem; place-items: center; width: 1.6rem; }

/* the line graph (admin/marks.html `line`): lines, not bars (Jesse, 2026-10-09) */
.hc-chart { height: auto; overflow: visible; width: 100%; }
.hc-chart text { fill: var(--hc-dim); font: 400 9px var(--hc-pixel); }
.hc-grid { stroke: var(--hc-row); stroke-width: 1; }
.hc-grid.is-zero { stroke: var(--hc-line2); stroke-dasharray: 4 6; }
.hc-line { fill: none; stroke: var(--hc-blue); stroke-linejoin: round; stroke-width: 2.5; }
.hc-line.is-house { filter: drop-shadow(0 0 4px rgba(83,224,255,.6)); }
.hc-line.is-minted { stroke: #fff; }
.hc-line.is-spent { stroke: var(--hc-purple); }
.hc-pt { fill: var(--hc-blue); }
.hc-pt.is-minted { fill: #fff; }
.hc-pt.is-spent { fill: var(--hc-purple); }
.hc-legend { color: var(--hc-body); display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0; }
.hc-legend span::before { border-top: 2.5px solid var(--hc-blue); content: ""; display: inline-block; margin-right: .4rem; vertical-align: middle; width: 1.1rem; }
.hc-legend .is-minted::before { border-color: #fff; }
.hc-legend .is-spent::before { border-color: var(--hc-purple); }
.hc-legend .hc-legend-text::before { display: none; }

/* ---------------------------------------------------------------- NOW */
.hc-floor { grid-row: span 2; }
.hc-floor-table { display: flex; flex-direction: column; overflow-x: auto; }
.hc-fr { align-items: center; display: grid; gap: .7rem; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr) 15rem; min-width: 38rem; padding: .55rem .2rem; border-top: 1px solid var(--hc-row); color: #dfe6ff; }
.hc-fr.is-head { border: 0; color: var(--hc-dim); font: 400 .56rem var(--hc-pixel); letter-spacing: .12em; padding: .3rem .2rem; }
.hc-who-cell { align-items: center; display: flex; gap: .7rem; min-width: 0; }
.hc-who-cell .hc-avatar { font-size: 1.2rem; }
.hc-who-cell > span { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.hc-who-cell b { color: #fff; font-size: 1.22rem; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-who-cell small { font: 400 .5rem var(--hc-pixel); letter-spacing: .12em; }
.hc-who-cell small.is-wifi { color: var(--hc-blue); }
.hc-who-cell small.is-demo { color: var(--hc-purple); }
.hc-row-actions { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: flex-end; }
.hc .hc-btn { align-items: center; border: 1.5px solid var(--hc-blue); border-radius: 999px; color: var(--hc-blue-soft); display: inline-flex; font: 400 .56rem var(--hc-pixel); letter-spacing: .08em; min-height: 2rem; padding: 0 .6rem; white-space: nowrap; }
.hc .hc-btn.is-quiet { border-color: #3a4778; color: var(--hc-body); }
.hc .hc-btn:hover { background: rgba(83,224,255,.12); color: #fff; }
.hc-inout { display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-inout div { display: flex; flex-direction: column; gap: .2rem; color: var(--hc-body); }
.hc-key { font: 400 .56rem var(--hc-pixel); letter-spacing: .12em; }
.hc-key::before { content: "━ "; }
.hc-key.is-minted { color: #fff; }
.hc-key.is-spent { color: var(--hc-purple); }
.hc-sales { align-items: center; border: 1px dashed #3a4778; border-radius: 10px; color: var(--hc-body); display: flex; flex-wrap: wrap; gap: .3rem .7rem; padding: .55rem .7rem; }
.hc-sales b { color: var(--hc-amber); font: 400 .56rem var(--hc-pixel); letter-spacing: .12em; }
.hc-need { align-items: center; background: var(--hc-raise); border-radius: 10px; color: var(--hc-white); display: flex; gap: .6rem; justify-content: space-between; padding: .55rem .7rem; }
.hc .hc-need { color: var(--hc-white); }
.hc-need img { border-radius: 50%; flex: none; height: 1.8rem; object-fit: cover; width: 1.8rem; }
.hc-need > span { flex: 1; }
.hc-need em { color: var(--hc-muted); font-style: normal; }
.hc-need > b { color: var(--hc-amber); font: 400 .56rem var(--hc-pixel); letter-spacing: .08em; white-space: nowrap; }
.hc-quick { display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc .hc-quick a { border: 1px solid var(--hc-line2); border-radius: 10px; color: var(--hc-blue-soft); display: grid; font: 400 .6rem var(--hc-pixel); letter-spacing: .08em; min-height: 2.7rem; padding: .3rem; place-items: center; text-align: center; }
.hc .hc-quick a:hover { background: rgba(83,224,255,.08); border-color: var(--hc-blue); color: #fff; }
.hc-line-text { color: var(--hc-body); margin: 0; }
.hc .hc-person { color: var(--hc-white); display: block; padding-left: .6rem; }
.hc-person b { font-weight: 400; }
.hc-person em { color: var(--hc-muted); font-style: normal; }
.hc-people { display: grid; gap: .45rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.hc .hc-people a { align-items: center; background: var(--hc-panel2); border-radius: 10px; color: var(--hc-white); display: flex; gap: .55rem; padding: .45rem .55rem; }
.hc .hc-people a:hover { background: #142047; }
.hc-people .hc-avatar { height: 1.8rem; width: 1.8rem; }
.hc-people span { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.hc-people b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-people small { color: #8fa0cc; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- tables (economy, players) */
.hc-table { display: grid; gap: .1rem; overflow-x: auto; }
.hc-tr { align-items: center; border-radius: 8px; display: grid; gap: .5rem; grid-template-columns: minmax(9rem, 1.4fr) 1fr 1fr minmax(8rem, 1.3fr); min-width: 30rem; padding: .3rem .35rem; color: #dfe6ff; }
.hc-tr span:first-child { align-items: center; display: flex; gap: .45rem; }
.hc-tr img { border-radius: 50%; height: 1.6rem; object-fit: cover; width: 1.6rem; }
.hc-tr.is-head { color: var(--hc-dim); font: 400 .52rem var(--hc-pixel); letter-spacing: .12em; }
.hc-tr.is-warn { background: rgba(255,191,63,.07); color: var(--hc-amber-soft); }
a.hc-tr:hover { background: rgba(83,224,255,.06); }
.hc-flows .hc-tr { grid-template-columns: minmax(0, 1fr) 4.5rem 3rem; min-width: 0; }
.hc-flows .hc-tr span:not(:first-child) { color: #fff; font-variant-numeric: tabular-nums; text-align: right; }
.hc-flows .hc-tr span:last-child { color: var(--hc-muted); }
.hc-roster .hc-tr { border-top: 1px solid var(--hc-row); border-radius: 0; grid-template-columns: minmax(16rem, 3fr) 6rem 7rem 9rem; }
.hc-roster .hc-tr.is-head { border: 0; }
.hc-roster .hc-tr span:first-child { flex-wrap: wrap; }
.hc-roster b { color: #fff; font-weight: 400; }
.hc-roster em { color: var(--hc-dim); font-style: normal; }
.hc-go-cell { color: var(--hc-link); font: 400 .52rem var(--hc-pixel); letter-spacing: .08em; text-align: right; }
.loyalty-main .hc form.hc-inline-search { display: flex; gap: .4rem; margin: 0 0 0 auto; max-width: 22rem; }

/* ---------------------------------------------------------------- narrow screens: the rail becomes a top bar */
@media (max-width: 900px) {
  .hc-frame { flex-direction: column; }
  .hc-rail { border-bottom: 1px solid var(--hc-rail-line); border-right: 0; flex: none; flex-flow: row wrap; align-items: center; gap: .5rem .8rem; height: auto; min-height: 0; padding: .6rem .8rem; position: static; }
  .hc-frame .hc-sign { font-size: 2rem; }
  .hc-rail-links { flex-flow: row wrap; gap: .2rem; }
  .hc-frame .hc-rail-link { min-height: 2.3rem; padding: 0 .55rem; }
  .hc-frame .hc-rail-link[aria-current] { box-shadow: inset 0 -3px 0 var(--hc-blue); }
  .hc-rail-badge { margin-left: .35rem; }
  .hc-rail-foot { flex-direction: row; align-items: center; margin: 0 0 0 auto; }
  .hc-body { padding: .9rem .8rem 2rem; }
  .hc-grid2 { grid-template-columns: minmax(0, 1fr); }
  .hc-floor { grid-row: auto; }
}
@media (max-width: 40rem) {
  .loyalty-main .hc-frame .hc-search { flex-basis: 100%; }
  .hc-inout, .hc-quick { grid-template-columns: minmax(0, 1fr); }
}

/* rules ledger */
.hc-filters { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem .8rem; }
.hc-ledger { display: grid; gap: .3rem; }
.hc-ledger h2 { color: var(--hc-purple); font: 400 .62rem var(--hc-pixel); letter-spacing: .12em; margin: .7rem 0 .1rem; }
.hc-ledger h2 em { color: var(--hc-dim); font-style: normal; }
.hc-lrow { align-items: center; border-bottom: 1px solid var(--hc-line); color: #d8dfeb; display: grid; font-size: 1.25rem; gap: .6rem; grid-template-columns: 1.9rem 1fr auto; line-height: 1.1; padding: .25rem 0; }
.hc-lrow img { border-radius: 5px; height: 1.9rem; object-fit: cover; width: 1.9rem; }
.hc-lrow .hc-dot { height: 1.9rem; width: 1.9rem; }
.hc-lrow b { color: var(--hc-cream); font-weight: 400; }
.hc-lrow i { color: var(--hc-dim); font-style: normal; }
.hc-lrow em { color: var(--hc-muted); font-size: 1.05rem; font-style: normal; text-align: right; }
.hc-lrow em.r { color: #ff9aa6; }
.hc-lrow.is-off { opacity: .7; }

@media (max-width: 40rem) {
  .hc-lrow { grid-template-columns: 1.9rem 1fr; }
  .hc-lrow em { grid-column: 2; text-align: left; }
}

/* player card */
.hc-col { align-content: start; display: grid; gap: .8rem; min-width: 0; }
.hc-card { background: var(--hc-panel); border: 1px solid var(--hc-line); border-radius: 12px; display: grid; gap: .8rem; padding: .8rem .9rem; }
.hc-who { align-items: center; display: grid; gap: .8rem; grid-template-columns: 5rem 1fr; }
.hc-who > img, .hc-who > .hc-dot { border-radius: 12px; box-shadow: 0 0 0 2px #172350, 0 0 0 3px rgba(180,140,255,.6); height: 5rem; object-fit: cover; width: 5rem; font-size: 1.2rem; }
.hc .hc-who h1 { color: #f3f0ff; font: 400 2.2rem/1 var(--hc-sign); margin: 0; text-shadow: 0 0 8px var(--hc-violet); }
.hc-who small { color: var(--hc-cyan); display: block; font-size: 1.1rem; line-height: 1.1; overflow-wrap: anywhere; }
.hc-pills { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.hc-stats { display: grid; gap: .3rem; grid-template-columns: repeat(4, 1fr); text-align: center; }
.hc-stats div { border-right: 1px solid var(--hc-line); }
.hc-stats div:last-child { border: 0; }
.hc-stats b { color: #fff; display: block; font: 400 1.7rem/1 var(--hc-lcd); font-variant-numeric: tabular-nums; }
.hc-stats b.g, .hc-row b.g { color: var(--hc-mint); }
.hc-stats b.r, .hc-row b.r { color: #ff6b7d; }
.hc-stats span { color: var(--hc-muted); font: 400 .48rem var(--hc-pixel); letter-spacing: .08em; }
.hc-act { background: linear-gradient(180deg, #0e1530, #0a0f22); border: 1.5px solid var(--hc-line2); border-radius: 10px; padding: 0 .75rem; }
.hc-act[open] { padding-bottom: .75rem; }
.hc-act summary { align-items: baseline; cursor: pointer; display: flex; gap: .6rem; list-style: none; padding: .7rem 0; }
.hc-act summary::-webkit-details-marker { display: none; }
.hc-act summary::after { color: var(--hc-cyan); content: "▸"; margin-left: auto; }
.hc-act[open] summary::after { content: "▾"; }
.hc-act summary b { color: var(--hc-cream); font: 400 .62rem var(--hc-pixel); letter-spacing: .08em; }
.hc-act summary small { color: var(--hc-muted); font-size: 1.05rem; }
.loyalty-main .hc .hc-form, .loyalty-main .hc .hc-form form { display: grid; gap: .55rem; margin: 0; }
.loyalty-main .hc .hc-field:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]) { background: #060912; border: 1.5px solid var(--hc-line2); border-radius: 8px; color: var(--hc-cream); font: 400 1.25rem var(--hc-lcd); margin: 0; min-height: 0; padding: .35rem .6rem; width: 100%; }
.loyalty-main .hc .hc-field:focus { border-color: var(--hc-cyan); outline: none; }
.loyalty-main .hc textarea.hc-field { resize: vertical; }
.loyalty-main .hc .hc-field.is-num:not([type=hidden]) { font-size: 1.8rem; max-width: 9rem; text-align: right; }
.loyalty-main .hc .hc-field.is-short:not([type=hidden]) { flex: 1 1 8rem; font-size: 1.05rem; padding: .25rem .55rem; width: auto; }
.hc-amount { align-items: center; display: flex; gap: .6rem; }
.hc-amount span { color: var(--hc-muted); font-size: 1.15rem; }
.hc-pick { cursor: pointer; position: relative; }
.loyalty-main .hc .hc-pick input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.hc-pick span { background: var(--hc-panel); border: 1px solid var(--hc-line2); border-radius: 999px; color: #b8f3ff; display: inline-block; font: 400 .52rem var(--hc-pixel); letter-spacing: .05em; padding: .4rem .6rem; }
.hc-pick input:checked + span { background: rgba(83,224,255,.12); border-color: var(--hc-blue); box-shadow: 0 0 8px rgba(83,224,255,.3); color: #fff; }
.hc-pick input:focus-visible + span { outline: 2px solid var(--hc-cyan); outline-offset: 2px; }
.hc-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.loyalty-main .hc .hc-go { background: var(--hc-blue); border: 0; border-radius: 999px; box-shadow: 0 0 14px rgba(83,224,255,.45); color: #04121a; cursor: pointer; flex: 1 1 8rem; font: 400 .62rem var(--hc-pixel); letter-spacing: .1em; padding: .7rem 1rem; text-align: center; text-shadow: none; }
.loyalty-main .hc .hc-go.is-ghost { background: transparent; border: 1.5px solid var(--hc-cyan); box-shadow: 0 0 6px rgba(83,224,255,.3); color: var(--hc-cyan); text-shadow: none; }
.loyalty-main .hc button.hc-mini, .loyalty-main .hc form button.hc-mini { background: transparent; border: 1px solid var(--hc-cyan); border-radius: 999px; box-shadow: none; color: var(--hc-cyan); cursor: pointer; font: 400 .55rem var(--hc-pixel); letter-spacing: .04em; margin: 0; min-height: 0; padding: .35rem .6rem; text-shadow: none; width: auto; }
.hc-ph form { margin: 0; }
.hc-note { background: #120f22; border-left: 3px solid var(--hc-purple); border-radius: 0 6px 6px 0; color: #e9ddff; font-size: 1.1rem; line-height: 1.15; margin-top: .45rem; padding: .4rem .6rem; white-space: pre-wrap; }
.hc-note b { color: var(--hc-purple); display: block; font: 400 .48rem var(--hc-pixel); letter-spacing: .08em; margin-bottom: .2rem; }
.hc-stack { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); }
.hc-stack span { aspect-ratio: 1; background: #070b16; border: 1px solid var(--hc-line2); border-radius: 6px; overflow: hidden; position: relative; }
.hc-stack img { height: 100%; object-fit: cover; width: 100%; }
.hc-stack i { color: var(--hc-muted); display: grid; font-size: .8rem; font-style: normal; height: 100%; line-height: 1; padding: .2rem; place-items: center; text-align: center; }
.hc-stack b { bottom: 1px; color: #fff; font: 400 1.05rem/1 var(--hc-lcd); position: absolute; right: 3px; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.hc-stack .rarity-rare { border-color: rgba(50,231,255,.6); }
.hc-stack .rarity-epic { border-color: rgba(201,120,255,.7); }
.hc-stack .rarity-legendary { border-color: rgba(255,211,90,.8); }
.hc-row.is-off { opacity: .55; }
.hc-row form { margin: 0; }
.hc-row.is-player > span:nth-child(2) { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; }
@media (max-width: 40rem) {
  .hc-who { grid-template-columns: 4rem 1fr; }
  .hc-who > img, .hc-who > .hc-dot { height: 4rem; width: 4rem; }
}

/* store */
.loyalty-main .hc button.hc-chip { cursor: pointer; font-weight: 400; margin: 0; min-height: 0; width: auto; }
.loyalty-main .hc button.hc-chip:hover { border-color: var(--hc-blue); color: #fff; }
.hc-row > form { margin: 0; }
.hc-quiet.is-small { font-size: 1rem; }
.hc-wares { display: grid; gap: .25rem; }
.loyalty-main .hc form.hc-ware { align-items: center; border-bottom: 1px solid var(--hc-line); display: grid; gap: .3rem .6rem; grid-template-columns: 2.2rem minmax(0, 1fr) 7.5rem auto auto auto; margin: 0; padding: .3rem 0; }
.hc-ware > img, .hc-ware > .hc-dot { border-radius: 6px; height: 2.2rem; object-fit: cover; width: 2.2rem; }
.hc-ware-name { color: var(--hc-cream); font-size: 1.2rem; line-height: 1.05; }
.hc-ware-name em { color: var(--hc-dim); display: block; font-size: .95rem; font-style: normal; }
.hc-ware-value { align-items: center; display: grid; gap: 0; }
.loyalty-main .hc .hc-ware-value .hc-field.is-num:not([type=hidden]) { font-size: 1.35rem; max-width: none; padding: .15rem .45rem; }
.hc-ware-value small { color: var(--hc-dim); font-size: .85rem; text-align: right; }
@media (max-width: 40rem) {
  .loyalty-main .hc form.hc-ware { grid-template-columns: 2.2rem minmax(0, 1fr) auto auto auto; }
  .hc-ware-name { grid-column: 2 / -1; }
  .hc-ware-value { grid-column: 2; }
}

/* Buttons: undo house.css's global pill (.loyalty-main button), then each kind sets its own look. */
.loyalty-main .hc button, .loyalty-main .hc button:hover, .loyalty-main .hc button:active { background: none; border: 0; border-radius: 0; box-shadow: none; color: inherit; cursor: pointer; letter-spacing: inherit; margin: 0; min-height: 0; padding: 0; text-shadow: none; text-transform: none; transform: none; width: auto; }
.loyalty-main .hc button.hc-chip { background: var(--hc-panel); border: 1px solid var(--hc-line2); border-radius: 999px; color: #b8f3ff; font: 400 .55rem var(--hc-pixel); letter-spacing: .05em; padding: .45rem .7rem; }
.loyalty-main .hc button.hc-chip:hover { border-color: var(--hc-blue); color: #fff; }
.loyalty-main .hc button.hc-mini { border: 1px solid var(--hc-cyan); border-radius: 999px; color: var(--hc-cyan); font: 400 .55rem var(--hc-pixel); letter-spacing: .04em; padding: .35rem .6rem; }
.loyalty-main .hc button.hc-mini:hover { background: rgba(83,224,255,.12); }
.loyalty-main .hc button.hc-go { background: var(--hc-blue); border-radius: 999px; box-shadow: 0 0 14px rgba(83,224,255,.45); color: #04121a; flex: 1 1 8rem; font: 400 .62rem var(--hc-pixel); letter-spacing: .1em; padding: .75rem 1rem; text-shadow: none; }
.loyalty-main .hc button.hc-go:hover { background: #8ff0ff; }
.loyalty-main .hc button.hc-go.is-ghost { background: transparent; border: 1.5px solid var(--hc-cyan); box-shadow: 0 0 6px rgba(83,224,255,.3); color: var(--hc-cyan); text-shadow: none; }
.loyalty-main .hc button.hc-go.is-ghost:hover { background: rgba(83,224,255,.1); }
.loyalty-main .hc form.hc-chips { display: flex; margin: 0; max-width: none; }
.loyalty-main .hc form.hc-ware { max-width: none; width: 100%; }

/* paint booth */
.hc-tiles { display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(min(46%, 9rem), 1fr)); }
.hc-tile { background: var(--hc-panel); border: 1px solid var(--hc-line); border-radius: 10px; display: grid; gap: .2rem; padding: .4rem; }
.hc-tile:hover { border-color: var(--hc-cyan); }
.hc-tile img, .hc-tile-blank { aspect-ratio: 1; border-radius: 7px; object-fit: cover; width: 100%; }
.hc-tile-blank { background: #070b16; color: var(--hc-dim); display: grid; font: 400 1.6rem var(--hc-lcd); place-items: center; }
.hc-tile strong { color: var(--hc-cream); font-size: 1.1rem; font-weight: 400; line-height: 1.05; }
.hc-tile em { color: var(--hc-dim); font-size: .95rem; font-style: normal; }
.hc-tile small { color: var(--hc-amber); font: 400 .48rem var(--hc-pixel); letter-spacing: .06em; }
.hc-tile.rarity-rare { border-color: rgba(50,231,255,.35); }
.hc-tile.rarity-epic { border-color: rgba(201,120,255,.45); }
.hc-tile.rarity-legendary { border-color: rgba(255,211,90,.55); }
.hc-crumb { margin: 0; }
.hc-crumb a { color: #7fd8ec; font: 400 .55rem var(--hc-pixel); letter-spacing: .08em; }
.hc-booth { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
.hc-booth-art { display: grid; gap: .7rem; }
.hc-booth-picture { aspect-ratio: 1; border: 1px solid var(--hc-line2); border-radius: 12px; object-fit: cover; width: 100%; }
.hc-booth-picture.is-blank { background: #070b16; color: var(--hc-dim); display: grid; font: 400 .6rem var(--hc-pixel); place-items: center; }
.hc-drafts { display: grid; gap: .5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-draft { display: grid; gap: .35rem; }
.hc-draft img, .hc-draft-blank { aspect-ratio: 1; border: 1px solid var(--hc-amber); border-radius: 9px; object-fit: cover; width: 100%; }
.hc-draft-blank { background: #070b16; color: var(--hc-muted); display: grid; font: 400 .5rem var(--hc-pixel); place-content: center; text-align: center; }
.hc-draft-blank.is-failed { border-color: var(--hc-red); color: #ff9aa6; }
.hc-draft-blank small { color: var(--hc-dim); display: block; font: 400 .85rem var(--hc-lcd); padding: .3rem; }
.loyalty-main .hc .hc-draft button.hc-go { font-size: .5rem; padding: .55rem .4rem; width: 100%; }
.hc-tipbox { background: #0b1122; border: 1px solid var(--hc-line2); border-radius: 8px; padding: .4rem .6rem; }
.hc-tipbox summary { color: #7fd8ec; cursor: pointer; font: 400 .52rem var(--hc-pixel); letter-spacing: .08em; list-style: none; }
.hc-tipbox summary::-webkit-details-marker { display: none; }
.hc-tipbox p { color: #d8dfeb; font-size: 1.05rem; line-height: 1.2; margin: .45rem 0 0; }
.hc-tipbox b { color: var(--hc-cyan); display: block; font: 400 .48rem var(--hc-pixel); letter-spacing: .1em; margin-bottom: .2rem; }
.hc-tipbox u { color: var(--hc-amber); text-decoration: none; }
.hc-frow { display: grid; gap: .3rem; }
.hc-frow > span:first-child { color: var(--hc-dim); font: 400 .52rem var(--hc-pixel); letter-spacing: .1em; }
.hc-frow > span:first-child em { color: var(--hc-muted); font: 400 1rem var(--hc-lcd); font-style: normal; letter-spacing: 0; margin-left: .4rem; }
.loyalty-main .hc .hc-field.is-flavor:not([type=hidden]) { color: #ffe2a6; font-style: italic; }
.hc-earned { color: #d8dfeb; font-size: 1.2rem; margin: 0; }
.loyalty-main .hc button.hc-go:disabled { cursor: wait; opacity: .6; }
.hc-booth-form { background: var(--hc-panel); border: 1px solid var(--hc-line); border-radius: 12px; padding: .9rem; }
@media (max-width: 44rem) { .hc-booth { grid-template-columns: 1fr; } .hc-booth-art { max-width: 24rem; } }
.loyalty-main .hc form.hc-booth-form, .loyalty-main .hc .hc-booth-art form { max-width: none; width: 100%; }
.hc-decide { display: flex; gap: .25rem; margin: 0; }
.loyalty-main .hc button.hc-mini.is-no { border-color: var(--hc-line2); color: var(--hc-muted); }

/* staff view */
.hc-staff { max-width: 32rem; }
.hc-staffbar { align-items: center; background: rgba(255,191,63,.08); border-radius: 8px; color: #ffe2a6; display: flex; font: 400 .52rem var(--hc-pixel); gap: .5rem; justify-content: space-between; letter-spacing: .06em; padding: .55rem .7rem; }
.hc-staffbar.is-wifi { background: rgba(101,255,154,.1); color: #9ff3c0; }
.hc-staffbar b { font-weight: 400; opacity: .8; }
.hc-tiles4 { display: grid; gap: .4rem; grid-template-columns: repeat(4, 1fr); }
.hc-tiles4 a { background: var(--hc-panel); border: 1px solid var(--hc-line); border-radius: 8px; display: grid; justify-items: center; padding: .4rem .1rem; }
.hc-tiles4 b { color: var(--hc-amber); font: 400 1.7rem/1 var(--hc-lcd); }
.hc-tiles4 b.g { color: var(--hc-green); }
.hc-tiles4 span { color: var(--hc-muted); font: 400 .45rem var(--hc-pixel); letter-spacing: .05em; text-align: center; }
.hc-awards { display: grid; gap: .4rem; grid-template-columns: 1fr 1fr; }
.hc-awards.is-four { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); }
.hc-award { cursor: pointer; position: relative; }
.loyalty-main .hc .hc-award input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.hc-award span { align-items: center; background: #0b1122; border: 1.5px solid var(--hc-line2); border-radius: 9px; color: var(--hc-cream); display: grid; font: 400 .48rem var(--hc-pixel); gap: .25rem; justify-items: center; letter-spacing: .04em; padding: .45rem .2rem; text-align: center; }
.hc-award img { aspect-ratio: 1; border-radius: 6px; object-fit: cover; width: 100%; }
.hc-award em { color: var(--hc-green); font-size: .44rem; font-style: normal; }
.hc-award input:checked + span { border-color: var(--hc-amber); box-shadow: 0 0 10px rgba(255,191,63,.35); }
.hc-award input:focus-visible + span { outline: 2px solid var(--hc-cyan); outline-offset: 2px; }
.hc-award input:disabled + span { opacity: .45; }
.hc-star { color: #ffd35a; font-family: system-ui, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif; font-size: 2rem; font-style: normal; line-height: 1; text-shadow: 0 0 10px rgba(255,211,90,.7); }
.hc-star.is-mvp { color: #53e0ff; text-shadow: 0 0 10px rgba(83,224,255,.7); }
.hc-who-pick { display: grid; gap: .4rem; grid-template-columns: 1fr 1fr; }
.loyalty-main .hc select.hc-field { appearance: auto; }
.loyalty-main .hc form.hc-special { align-items: center; border-bottom: 1px solid var(--hc-line); display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 0; max-width: none; padding: .3rem 0; }
.hc-special-name { color: var(--hc-cream); flex: 1 1 12rem; font-size: 1.15rem; }
.hc-special label { align-items: center; color: var(--hc-muted); display: flex; font-size: 1rem; gap: .25rem; }
.loyalty-main .hc .hc-special .hc-field.is-num:not([type=hidden]) { font-size: 1.2rem; padding: .1rem .4rem; width: 4rem; }
.hc-act-link { align-items: baseline; display: flex; gap: .6rem; padding: .7rem .75rem; }
.hc-act-link b { color: var(--hc-cream); font: 400 .62rem var(--hc-pixel); letter-spacing: .08em; }
.hc-act-link small { color: var(--hc-muted); font-size: 1.05rem; }
.hc-act-link::after { color: var(--hc-cyan); content: "›"; margin-left: auto; }
/* Economy: house W/L, Top Shelf counts, and GIVE CREDITS (2026-10-09). */
.hc-wl .hc-tr { grid-template-columns: minmax(7rem, 1.4fr) 1fr 1fr 1fr .8fr; min-width: 26rem; }
.hc-stats { display: grid; gap: .6rem; grid-template-columns: 1fr 1fr; }
.hc-stats div { display: flex; flex-direction: column; }
.hc-stats b { color: #fff; font-size: 2rem; font-weight: 400; line-height: 1; }
.hc-stats span { color: var(--hc-dim); font: 400 .5rem var(--hc-pixel); letter-spacing: .1em; }
.hc-alert { border-left: 3px solid #ff4a5e; color: #ffd6db; font-size: 1.15rem; margin: 0 0 .5rem; padding: .2rem .5rem; }
.hc-review { font-size: 1.3rem; margin: 0; }
.hc-review-names, .hc-review-msg { color: var(--hc-muted); font-size: 1.15rem; margin: 0; }
.hc-wl .hc-tr.is-total { border-top: 1px solid var(--hc-line2); font-weight: 700; margin-top: .2rem; padding-top: .35rem; }

/* ---------------------------------------------------------------- the mode switcher (Jesse, 2026-10-09)
   Your picture, name and mode; "See it as" lists the modes you may open. Used on House Controls'
   rail, on Home, in the staff screens' bottom bar and on the kitchen board, so it carries its own
   colors. Hidden until opened (mode_switch.js); without JS it opens while it has focus. */
.mode-switch { color: #eef3ff; font-family: 'VT323', monospace; position: relative; }
.mode-menu { background: #0e1430; border: 1.5px solid #b48cff; border-radius: 14px; box-shadow: 0 0 24px rgba(180,140,255,.35), 0 18px 40px rgba(0,0,0,.6); display: none; flex-direction: column; gap: .2rem; min-width: 15rem; padding: .45rem; position: absolute; z-index: 60; }
.mode-switch.is-open .mode-menu, .mode-switch:not(.is-scripted):focus-within .mode-menu { display: flex; }
.mode-menu-title { color: #8fa0cc; font: 400 .5rem 'Silkscreen', monospace; letter-spacing: .14em; padding: .3rem .45rem .2rem; }
.mode-switch .mode-menu a { align-items: flex-start; border-radius: 10px; box-shadow: none; color: #dfe6ff; display: flex; flex-direction: column; font: 400 1rem/1.1 'VT323', monospace; gap: .05rem; justify-content: flex-start; letter-spacing: 0; min-height: 0; padding: .45rem .6rem; text-decoration: none; }
.mode-switch .mode-menu a > span { font: 400 .6rem 'Silkscreen', monospace; letter-spacing: .1em; }
.mode-switch .mode-menu a small { color: #9aa6c8; font-size: .95rem; }
.mode-switch .mode-menu a:hover, .mode-switch .mode-menu a:focus-visible { background: rgba(83,224,255,.08); color: #fff; outline: none; }
.mode-switch .mode-menu a[aria-checked="true"] { background: rgba(83,224,255,.12); color: #fff; }
.mode-switch .mode-menu a.is-last { border-top: 1px solid #22305a; border-radius: 0 0 10px 10px; }
.loyalty-main .mode-switch button.mode-button, .mode-switch button.mode-button { align-items: center; background: #0e1430; border: 1.5px solid #b48cff; border-radius: 999px; box-shadow: 0 0 14px rgba(180,140,255,.35); color: #fff; cursor: pointer; display: flex; font: 400 1rem 'VT323', monospace; gap: .45rem; letter-spacing: 0; margin: 0; min-height: 44px; padding: .15rem .65rem .15rem .15rem; text-align: left; text-shadow: none; text-transform: none; width: auto; }
.loyalty-main .mode-switch button.mode-button:hover { background: #141c40; transform: none; }
.mode-face { background: radial-gradient(circle at 40% 35%, #3a4f9a, #141b3a); border-radius: 50%; box-shadow: 0 0 0 2px #53e0ff; color: #fff; display: grid; flex: none; font-size: 1rem; height: 2rem; object-fit: cover; place-items: center; width: 2rem; }
img.mode-face { height: 2rem; }
.mode-who { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
/* One compact switcher everywhere (Jesse, 2026-10-10): face and mode, no name; face only on phones. */
.mode-who b { display: none; }
@media (max-width: 700px) { .mode-switch .mode-who { display: none; } .loyalty-main .mode-switch button.mode-button, .mode-switch button.mode-button { justify-content: center; min-width: 44px; padding: .15rem; } }
.mode-who small { color: #d9c6ff; font: 400 .5rem 'Silkscreen', monospace; letter-spacing: .14em; }
/* where it sits */
.mode-switch.is-rail .mode-menu { bottom: calc(100% + .5rem); left: 0; min-width: 15rem; }
.player-shell-bar .mode-switch.is-player { left: .75rem; position: absolute; top: .45rem; z-index: 6; }
.mode-switch.is-player .mode-menu, .mode-switch.is-kitchen .mode-menu { top: calc(100% + .4rem); }
.mode-switch.is-player .mode-menu { left: 0; }
.mode-switch.is-kitchen .mode-menu { right: 0; }
.mode-switch.is-player .mode-who small span, .mode-switch.is-kitchen .mode-who small span { display: inline-block; transform: rotate(180deg); }
.staff-nav:has(.mode-switch) { grid-template-columns: repeat(4, 1fr) auto; }
.mode-switch.is-staff { align-self: center; padding: 0 .5rem; }
.mode-switch.is-staff .mode-menu { bottom: calc(100% + .5rem); right: 0; }
@media (max-width: 40rem) {
}
@media (max-width: 900px) {
  .mode-switch.is-rail .mode-menu { bottom: auto; left: auto; right: 0; top: calc(100% + .4rem); min-width: 15rem; }
}

/* ---------------------------------------------------------------- Store: RUN A SALE (Jesse, 2026-10-09) */
.hc-label { color: #8fa0cc; font: 400 .56rem var(--hc-pixel); letter-spacing: .12em; }
.hc-sale-grid { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(14rem, .8fr) minmax(0, 2fr); }
.hc-presets { display: flex; flex-direction: column; gap: .45rem; }
.hc .hc-preset { border: 1px solid var(--hc-line2); border-radius: 12px; color: #dfe6ff; display: flex; flex-direction: column; gap: .1rem; min-height: 3.2rem; padding: .45rem .8rem; }
.hc-preset b { font: 400 .62rem var(--hc-pixel); letter-spacing: .08em; }
.hc-preset small { color: var(--hc-muted); font-size: .95rem; }
.hc .hc-preset:hover { border-color: var(--hc-blue); color: #fff; }
.hc .hc-preset[aria-current] { background: rgba(83,224,255,.12); border: 1.5px solid var(--hc-blue); color: #fff; }
.loyalty-main .hc form.hc-sale-form { background: var(--hc-panel2); border: 1px solid var(--hc-line2); border-radius: 14px; display: flex; flex-direction: column; gap: .8rem; margin: 0; max-width: none; padding: .8rem .9rem; }
.hc-sale-form fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
.hc-sale-form legend { margin-bottom: .35rem; padding: 0; }
.hc-kinds { display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-kinds legend { grid-column: 1 / -1; }
.hc-kind { cursor: pointer; position: relative; }
.loyalty-main .hc .hc-kind input { height: 1px; margin: 0; opacity: 0; position: absolute; width: 1px; }
.hc-kind span { border: 1.5px solid var(--hc-line2); border-radius: 12px; display: flex; flex-direction: column; gap: .1rem; height: 100%; padding: .55rem .75rem; box-sizing: border-box; }
.hc-kind b { color: #fff; font-size: 1.15rem; font-weight: 400; }
.hc-kind small { color: var(--hc-muted); font-size: .95rem; }
.hc-kind input:checked + span { background: rgba(180,140,255,.12); border-color: var(--hc-purple); box-shadow: 0 0 12px rgba(180,140,255,.3); }
.hc-kind input:focus-visible + span { outline: 2px solid var(--hc-blue); outline-offset: 2px; }
.hc-sale-fields { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-sale-field { display: flex; flex-direction: column; gap: .35rem; }
.hc-inline { align-items: center; color: var(--hc-body); display: flex; gap: .6rem; }
.loyalty-main .hc .hc-sale-field .hc-field.is-num:not([type=hidden]) { font-size: 1.4rem; max-width: 6rem; }
.hc-sale-field.hc-start { align-items: center; flex-flow: row wrap; gap: .4rem; }
.hc-start legend { width: 100%; }
.loyalty-main .hc .hc-start input[type=datetime-local].hc-field { color-scheme: dark; flex: 1 1 12rem; height: 2.5rem; min-height: 0; width: auto; }
.hc-preview { color: var(--hc-body); margin: 0; }
.hc-warn { color: var(--hc-amber-soft); margin: 0; }
.hc-warn[hidden] { display: none; }
.hc-alert p { margin: 0; }
.hc-event { align-items: center; border-top: 1px solid var(--hc-row); display: grid; gap: .4rem .8rem; grid-template-columns: 13rem minmax(0, 1fr) auto; padding: .55rem 0; }
.hc-event:first-of-type { border-top: 0; }
.hc-event .hc-tag { justify-self: start; }
.hc-tag.is-live { border-color: var(--hc-blue); color: var(--hc-blue); }
.hc-event-what { color: var(--hc-body); display: flex; flex-direction: column; gap: .05rem; }
.hc-event-what b { color: #fff; font-weight: 400; }
.hc-event-what em { color: var(--hc-muted); font-style: normal; }
.hc-event-what small { font-size: .95rem; }
.hc-event form { margin: 0; }
.hc h2.hc-section-title { color: #fff; font: 400 .72rem var(--hc-pixel); letter-spacing: .16em; margin: .4rem 0 0; }
@media (max-width: 60rem) {
  .hc-sale-grid, .hc-sale-fields, .hc-kinds { grid-template-columns: minmax(0, 1fr); }
  .hc-event { grid-template-columns: minmax(0, 1fr) auto; }
  .hc-event .hc-tag { grid-column: 1 / -1; }
}
.hc-void { border-top: 1px solid var(--hc-line, #22305a); color: var(--hc-cream); font-size: 1.1rem; margin: 0; padding: .35rem 0; }

/* ---------------------------------------------------------------- MENU and TAXES (the bar's settings, 2026-10-09) */
.hc-menu-head { align-items: center; display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: space-between; }
.hc-menu-head .hc-quiet { font-size: 1.15rem; }
.hc-menu-count { color: #fff; font-weight: 400; }
.hc-menu-count.is-out { color: var(--hc-amber); }
.hc-menu-count.is-off { color: var(--hc-dim); }
.hc .hc-menu-link { color: var(--hc-link); }
.hc .hc-menu-add { background: var(--hc-blue); border-radius: 999px; box-shadow: 0 0 14px rgba(83,224,255,.45); color: #04121a; font: 400 .6rem var(--hc-pixel); letter-spacing: .1em; padding: .7rem 1.1rem; white-space: nowrap; }
.hc .hc-menu-add:hover { background: #8ff0ff; }
.hc-menu-section .hc-ph .hc-menu-link { font: 400 1rem var(--hc-lcd); margin-left: auto; }
.hc-menu-table { display: grid; gap: .1rem; }
.hc-menu-tr { align-items: center; border-radius: 8px; color: #dfe6ff; display: grid; gap: .6rem; grid-template-columns: minmax(9rem, 1.5fr) 4.6rem 4rem minmax(9rem, 2.2fr) 6rem 8.4rem 10.2rem; padding: .35rem .45rem; }
/* tablet-width desks: the tax (it's on the item) and EDIT (the name is the link) step aside */
@media (max-width: 1300px) {
  .hc-menu-tr { grid-template-columns: minmax(8rem, 1.4fr) 4.4rem 3.6rem minmax(8rem, 2fr) 8.2rem 6.6rem; }
  .hc-menu-tr > :nth-child(5), .hc-menu-acts a.hc-mini { display: none; }
}
@media (max-width: 760px) {
  .hc-menu-tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .hc-menu-tr.is-head { display: none; }
  .hc-menu-tr > :nth-child(3) { display: none; }
  .hc-menu-opts { grid-column: 1 / -1; grid-row: 2; }
}
.hc-menu-tr:not(.is-head):hover { background: rgba(83,224,255,.05); }
.hc-menu-tr.is-head { color: var(--hc-dim); font: 400 .52rem var(--hc-pixel); letter-spacing: .12em; padding-bottom: .1rem; }
.hc-menu-tr.is-off .hc-menu-name a, .hc-menu-tr.is-off .hc-menu-price { color: var(--hc-dim); text-decoration: line-through; }
.hc-menu-tr.is-out { background: rgba(255,191,63,.05); }
.hc-menu-name { display: flex; flex-direction: column; min-width: 0; }
.hc .hc-menu-name a { color: #fff; font-size: 1.2rem; }
.hc .hc-menu-name a:hover { color: var(--hc-blue); }
.hc-menu-name small { color: var(--hc-muted); font-size: .95rem; }
.hc-menu-price { color: #fff; font-size: 1.3rem; text-align: right; }
.hc-menu-yes { color: var(--hc-mint); font: 400 .52rem var(--hc-pixel); letter-spacing: .08em; }
.hc-menu-no { color: var(--hc-dim); }
.hc-menu-opts { color: var(--hc-body); font-size: 1rem; line-height: 1.15; }
.hc-menu-tax { color: var(--hc-body); }
.hc-menu-status { border: 1px solid var(--hc-line2); border-radius: 6px; display: inline-block; font: 400 .5rem var(--hc-pixel); letter-spacing: .08em; padding: .25rem .45rem; white-space: nowrap; }
.hc-menu-status.is-on { border-color: rgba(159,240,192,.5); color: var(--hc-mint); }
.hc-menu-status.is-out { border-color: var(--hc-amber); color: var(--hc-amber); }
.hc-menu-status.is-off { color: var(--hc-dim); }
.hc-menu-acts { align-items: center; display: flex; gap: .35rem; justify-content: flex-end; }
.hc-menu-acts form { margin: 0; }
.loyalty-main .hc-menu button.hc-mini.is-amber { border-color: var(--hc-line2); color: var(--hc-blue-soft); }
.loyalty-main .hc-menu button.hc-mini.is-amber:hover { background: rgba(255,191,63,.1); border-color: var(--hc-amber); color: var(--hc-amber); }
.hc-menu a.hc-mini.is-quiet { border-color: var(--hc-line2); color: var(--hc-blue-soft); }
.hc-menu a.hc-mini.is-quiet:hover { background: rgba(83,224,255,.1); color: #fff; }

/* the item editor */
.hc-menu-edit { align-items: start; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem); }
.hc-menu-form { display: grid; gap: .9rem; }
.hc-menu-fields { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hc-menu-fields .is-wide { grid-column: 1 / -1; }
.hc-menu-money { align-items: center; display: flex; gap: .3rem; }
.hc-menu-money > span { color: var(--hc-muted); font-size: 1.6rem; }
.loyalty-main .hc .hc-menu-form .hc-field.is-num:not([type=hidden]) { font-size: 1.5rem; max-width: 8rem; text-align: left; }
.hc-menu-group { background: var(--hc-panel2); border: 1px solid var(--hc-line); border-radius: 12px; display: grid; gap: .7rem; margin: 0; min-width: 0; padding: .8rem .9rem; }
.hc-menu-group legend { color: #fff; font: 400 .62rem var(--hc-pixel); letter-spacing: .12em; padding: 0 .4rem; }
.hc-menu-group.is-new { border-style: dashed; }
.hc-menu-group.is-new summary { color: var(--hc-link); cursor: pointer; font: 400 .58rem var(--hc-pixel); letter-spacing: .1em; list-style: none; }
.hc-menu-group.is-new summary::-webkit-details-marker { display: none; }
.hc-menu-group.is-new[open] summary { margin-bottom: .2rem; }
.hc-menu-group-top { align-items: end; display: grid; gap: .6rem .8rem; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) auto; }
.hc-menu-choices { display: grid; gap: .3rem; max-width: 34rem; }
.hc-menu-choice { align-items: center; display: grid; gap: .6rem; grid-template-columns: minmax(0, 1fr) 8.5rem; }
.hc-menu-choice.is-head { color: var(--hc-dim); font: 400 .5rem var(--hc-pixel); letter-spacing: .1em; }
.hc-menu-plus { align-items: center; color: var(--hc-muted); display: flex; font-size: 1.15rem; gap: .2rem; }
.loyalty-main .hc .hc-menu-choice .hc-field:not([type=hidden]) { font-size: 1.1rem; padding: .2rem .5rem; }
.loyalty-main .hc .hc-menu-form .hc-field::placeholder { color: #4e5a80; }
.hc-menu-remove span { border-color: rgba(255,122,168,.45); color: #ffb3cc; }
.hc-menu-remove input:checked + span { background: rgba(255,122,168,.15); border-color: var(--hc-pink); box-shadow: none; color: #fff; }
.hc-menu-remove { justify-self: start; }
.hc-menu-save { position: sticky; bottom: .8rem; }
.hc-menu-side { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.hc-menu-side .hc-panel p { margin: 0; }
.hc-menu-status-acts { display: grid; gap: .45rem; }
.hc-menu-status-acts form { display: flex; margin: 0; }
.loyalty-main .hc .hc-menu-status-acts button.hc-go { flex: 1 1 auto; }
.loyalty-main .hc button.hc-go.is-ghost.is-amber { border-color: var(--hc-amber); box-shadow: 0 0 6px rgba(255,191,63,.25); color: var(--hc-amber); }
.hc-menu-side .hc-menu-status { font-size: .6rem; padding: .35rem .6rem; }
.hc-menu-log { border-top: 1px solid var(--hc-row); display: grid; gap: .1rem; padding: .45rem 0 .2rem; }
.hc-menu-log:first-of-type { border-top: 0; }
.hc-menu-log span { color: var(--hc-muted); font-size: 1rem; }
.hc-menu-log b { color: var(--hc-blue-soft); font-weight: 400; }
.hc-menu-log p { color: var(--hc-white); margin: 0; }

/* taxes */
.hc-taxes > .hc-quiet { font-size: 1.15rem; max-width: 60rem; }
/* one grid for the whole table; each row (a form) lays its cells straight into it */
.hc-tax-table { align-items: center; display: grid; grid-template-columns: minmax(13rem, 1.3fr) 4.5rem minmax(8rem, .9fr) minmax(24rem, 1.8fr); overflow-x: auto; row-gap: .15rem; }
.hc-tax-tr, .loyalty-main .hc form.hc-tax-tr { display: contents; }
.hc-tax-tr > span { align-self: stretch; align-items: center; display: flex; min-width: 0; padding: .45rem .6rem; }
.hc-tax-tr.is-head > span { color: var(--hc-dim); font: 400 .52rem var(--hc-pixel); letter-spacing: .12em; padding-bottom: .1rem; }
.hc-tax-tr.is-editing > span { background: rgba(255,191,63,.06); }
.hc-tax-tr.is-editing > span:first-of-type { box-shadow: inset 3px 0 0 var(--hc-amber); }
.hc-tax-tr > .hc-tax-name { align-items: flex-start; flex-direction: column; justify-content: center; }
.hc-tax-name b { color: #fff; font-weight: 400; font-size: 1.2rem; }
.hc-tax-name small { color: var(--hc-muted); font-size: .95rem; }
.hc-tax-rate { color: #fff; font-size: 1.7rem; }
.hc-tax-on { color: var(--hc-body); }
.hc-tax-change { align-items: center; display: flex; gap: .45rem; }
.loyalty-main .hc .hc-tax-change .hc-field:not([type=hidden]) { flex: 1 1 10rem; font-size: 1.05rem; padding: .25rem .5rem; }
.hc-tax-pct { align-items: center; color: var(--hc-muted); display: flex; flex: 0 0 5.5rem; gap: .2rem; }
.loyalty-main .hc .hc-tax-pct .hc-field:not([type=hidden]) { text-align: right; width: 4.2rem; }
.hc-tax-words { color: #fff; font-size: 1.45rem; margin: 0; }
.loyalty-main .hc .hc-tax-confirm form.hc-buttons { display: flex; margin: 0; max-width: 32rem; }
.hc-tax-confirm a.hc-go { border-radius: 999px; flex: 1 1 8rem; font: 400 .62rem var(--hc-pixel); letter-spacing: .1em; padding: .75rem 1rem; text-align: center; }
@media (max-width: 1200px) { .hc-menu-edit { grid-template-columns: minmax(0, 1fr); } .hc-menu-side { position: static; } }
@media (max-width: 44rem) { .hc-menu-fields, .hc-menu-group-top { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- phones (≤700px; 2026-10-10)
   House Controls is desk-first, but it has to work in a hand: the rail becomes one slim sticky bar
   (sign, PAGES, your face) with the pages in a drop-down drawer; the top bar is the title, the
   search and the two GIVE buttons as an even pair; wide tables restack as cards; controls are at
   least 44px tall. Desktop and tablet rules above are untouched. */
@media (max-width: 700px) {
  /* the bar */
  .hc-rail { align-items: center; background: rgba(10,15,31,.97); flex-flow: row nowrap; gap: .5rem; min-height: 3.6rem; overflow: visible; padding: .35rem .7rem; position: sticky; top: 0; z-index: 40; }
  .hc-brand { flex: none; gap: .4rem; }
  .hc-frame .hc-sign { font-size: 1.85rem; }
  .hc-brand-sub { font-size: .48rem; }
  .hc-nav-check { display: block; height: 1px; margin: 0; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; width: 1px; }
  .hc-nav-button { align-items: center; border: 1.5px solid var(--hc-line2); border-radius: 999px; color: var(--hc-blue-soft); cursor: pointer; display: inline-flex; font: 400 .6rem var(--hc-pixel); gap: .45rem; letter-spacing: .12em; margin-left: auto; min-height: 44px; padding: 0 .95rem 0 .8rem; position: relative; user-select: none; -webkit-tap-highlight-color: transparent; }
  .hc-nav-button svg { height: 18px; width: 18px; }
  .hc-nav-check:focus-visible + .hc-nav-button { outline: 2px solid var(--hc-blue); outline-offset: 2px; }
  .hc-nav-check:checked + .hc-nav-button { background: rgba(83,224,255,.12); border-color: var(--hc-blue); color: #fff; }
  /* something in there wants you (drafts to review…): an amber dot on PAGES */
  .hc-rail:has(.hc-rail-badge.is-attention) .hc-nav-button::after { background: var(--hc-amber); border-radius: 50%; box-shadow: 0 0 8px var(--hc-amber); content: ""; height: 8px; position: absolute; right: 3px; top: 3px; width: 8px; }
  .hc-rail-foot { flex: none; margin: 0; }
  /* the drawer */
  .hc-rail-links { background: var(--hc-rail); border-bottom: 1px solid var(--hc-line2); box-shadow: 0 22px 40px rgba(0,0,0,.6); box-sizing: border-box; display: none; flex-flow: column nowrap; gap: .15rem; left: 0; max-height: calc(100dvh - 3.6rem); overflow-y: auto; overscroll-behavior: contain; padding: .45rem .7rem .9rem; position: absolute; right: 0; top: 100%; }
  .hc-nav-check:checked ~ .hc-rail-links { display: flex; }
  .hc-rail:has(.hc-nav-check:checked)::after { background: rgba(3,5,12,.62); content: ""; inset: 0; position: fixed; z-index: -1; }
  .hc-frame .hc-rail-link { font-size: .7rem; min-height: 48px; padding: 0 .9rem; }
  .hc-frame .hc-rail-link[aria-current] { box-shadow: inset 3px 0 0 var(--hc-blue); }
  .hc-rail-badge { font-size: 1.15rem; margin-left: .5rem; }
  /* the mode switcher: just your face */
  .mode-switch.is-rail .mode-menu { max-width: calc(100vw - 1.4rem); right: -.2rem; }
  /* …and on the kitchen board too */
  .mode-switch.is-kitchen .mode-menu { max-width: calc(100vw - 1.4rem); }

  /* the top bar */
  .hc-body { gap: .9rem; padding: .85rem .75rem 2.4rem; }
  .hc-top { display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hc-title { font-size: 1.05rem; grid-column: 1 / -1; line-height: 1.25; overflow-wrap: anywhere; }
  .hc-when { font-size: 1rem; grid-column: 1 / -1; margin-top: -.45rem; }
  .loyalty-main .hc-frame .hc-search { grid-column: 1 / -1; min-height: 44px; }
  .hc-frame .hc-action { justify-content: center; min-height: 44px; padding: 0 .4rem; text-align: center; }
  .hc-drop { max-height: 60vh; overflow-y: auto; }
  .hc-hit { min-height: 44px; }

  /* touch sizes */
  .hc .hc-btn, .hc .hc-mini, .loyalty-main .hc button.hc-mini, .loyalty-main .hc form button.hc-mini, .hc .hc-chip, .loyalty-main .hc button.hc-chip { align-items: center; box-sizing: border-box; display: inline-flex; justify-content: center; min-height: 44px; }
  .hc .hc-chip, .loyalty-main .hc button.hc-chip, .hc .hc-mini, .loyalty-main .hc button.hc-mini, .loyalty-main .hc form button.hc-mini { min-width: 3.6rem; padding: 0 .95rem; }
  .hc-pick span { align-items: center; box-sizing: border-box; display: inline-flex; justify-content: center; min-height: 44px; min-width: 3.6rem; padding: 0 .95rem; }
  .hc-tipbox summary { align-items: center; display: flex; min-height: 44px; }
  .loyalty-main .hc .hc-field:not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=hidden]) { min-height: 44px; }
  .loyalty-main .hc button.hc-go, .loyalty-main .hc .hc-go { min-height: 48px; }
  .hc-act summary { align-items: center; min-height: 44px; padding: .55rem 0; }
  .hc .hc-ph-link, .hc-crumb a { align-items: center; display: inline-flex; min-height: 44px; }
  .hc-chips { gap: .45rem; }
  .hc-aside { flex-basis: 100%; margin-left: 0; }

  /* RIGHT NOW: who's playing as cards (name and won/lost, the game and the bet, then the buttons) */
  .hc-kpis { gap: .6rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-kpi { padding: .7rem .75rem; }
  .hc-kpi b { font-size: 2.2rem; }
  .hc-kpis > .hc-kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .hc-ph > .hc-tag.is-demo { margin-left: 0; }
  .hc-floor-table { overflow: visible; }
  .hc-fr { gap: .25rem .7rem; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: .75rem .1rem; }
  .hc-fr.is-head { display: none; }
  .hc-fr > :nth-child(2) { color: var(--hc-body); grid-column: 1; grid-row: 2; }
  .hc-fr > :nth-child(3) { color: var(--hc-muted); grid-column: 2; grid-row: 2; text-align: right; }
  .hc-fr > :nth-child(3)::before { content: "bet "; }
  .hc-fr > :nth-child(4) { font-size: 1.25rem; grid-column: 2; grid-row: 1; text-align: right; }
  .hc-fr .hc-row-actions { display: grid; gap: .45rem; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: .35rem; }
  .hc .hc-fr .hc-btn { white-space: normal; }

  /* tables: the roster and FASTEST GROWING restack; W/L squeezes to fit */
  .hc-table { overflow: visible; }
  .hc-roster .hc-tr { gap: .15rem .7rem; grid-template-columns: minmax(0, 1fr) auto; min-width: 0; padding: .6rem .15rem; }
  .hc-roster .hc-tr.is-head { display: none; }
  .hc-roster .hc-tr > :nth-child(1) { grid-column: 1; grid-row: 1 / span 2; line-height: 1.15; }
  .hc-roster .hc-tr > :nth-child(2) { color: #fff; font-size: 1.3rem; grid-column: 2; grid-row: 1; text-align: right; }
  .hc-roster .hc-tr > :nth-child(3) { color: var(--hc-muted); font-size: 1rem; grid-column: 2; grid-row: 2; text-align: right; }
  .hc-roster .hc-go-cell { display: none; }
  .loyalty-main .hc form.hc-inline-search { margin: 0; max-width: none; width: 100%; }
  .hc-wl .hc-tr { font-size: 1.05rem; gap: .35rem; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); min-width: 0; padding: .3rem .1rem; }
  .hc-wl .hc-tr.is-head { font-size: .44rem; letter-spacing: .06em; }
  .hc-wl .hc-tr > span:not(:first-child) { text-align: right; }
  .hc-table:not(.hc-wl):not(.hc-roster):not(.hc-flows) .hc-tr { gap: .1rem .7rem; grid-template-columns: minmax(0, 1fr) auto auto; min-width: 0; padding: .45rem .2rem; }
  .hc-table:not(.hc-wl):not(.hc-roster):not(.hc-flows) .hc-tr.is-head > :nth-child(4) { display: none; }
  .hc-table:not(.hc-wl):not(.hc-roster):not(.hc-flows) .hc-tr > :nth-child(4) { color: var(--hc-muted); font-size: 1rem; grid-column: 1 / -1; padding-left: 2.05rem; }

  /* player card: the four numbers in one row */
  .hc-who ~ .hc-stats { gap: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hc-who ~ .hc-stats div { border-right: 1px solid var(--hc-line); }
  .hc-who ~ .hc-stats div:last-child { border-right: 0; }
  .hc-who ~ .hc-stats b { font-size: 1.75rem; }
  .hc .hc-who h1 { font-size: 2rem; overflow-wrap: anywhere; }

  /* store: the item, then its price and BUYS / SHELF / SAVE */
  .loyalty-main .hc form.hc-ware { gap: .35rem .6rem; padding: .55rem 0; }

  /* paint booth */
  .hc-booth-art { max-width: none; }
  .hc-tiles { gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* MENU */
  .hc .hc-menu-add, .hc-menu-section .hc-ph .hc-menu-link { align-items: center; display: inline-flex; min-height: 44px; }
  .hc-menu-acts { flex-wrap: wrap; grid-column: 1 / -1; justify-content: flex-start; }
  .hc-menu-acts form { display: flex; }

  /* TAXES: each tax is a card (name and rate, what it's charged on, then the change row) */
  .hc-tax-table { grid-template-columns: minmax(0, 1fr) auto; overflow: visible; row-gap: 0; }
  .hc-tax-tr.is-head { display: none; }
  .hc-tax-tr > span { padding: .25rem .1rem; }
  .hc-tax-tr > .hc-tax-name, .hc-tax-tr > .hc-tax-rate { border-top: 1px solid var(--hc-row); padding-top: .75rem; }
  .hc-tax-tr > .hc-tax-rate { justify-content: flex-end; }
  .hc-tax-tr > .hc-tax-on { color: var(--hc-muted); grid-column: 1 / -1; }
  .hc-tax-tr > .hc-tax-change { flex-wrap: wrap; grid-column: 1 / -1; padding-bottom: .8rem; }
  .loyalty-main .hc .hc-tax-change .hc-field:not([type=hidden]) { flex: 1 1 9rem; font-size: 1.15rem; }
  .hc-tax-pct { flex: 0 0 5.2rem; }
}
/* The character maker has no portrait hero to float over: the switcher gets its own row above the steps. */
body.maker-page .player-shell-bar:has(.mode-switch) { height: auto; justify-content: flex-start; padding-bottom: .4rem; padding-top: .45rem; }
body.maker-page .player-shell-bar .mode-switch.is-player { left: auto; position: relative; top: auto; }

/* LOG IN AS at the top of a player's card (Jesse, 2026-10-21: he didn't find it in DEVICES). */
.hc-who:has(.hc-view-as) { grid-template-columns: 5rem minmax(0, 1fr) auto; }
.loyalty-main .hc-frame form.hc-view-as { margin: 0; width: auto; }
.loyalty-main .hc-frame .hc-view-as button.hc-action { background: rgba(255,48,72,.12); border-color: #ff4a5e; box-shadow: none; color: #ffd0d6; cursor: pointer; text-shadow: none; text-transform: none; transform: none; white-space: nowrap; }
@media (max-width: 700px) {
  .hc-who:has(.hc-view-as) { grid-template-columns: 4rem minmax(0, 1fr); }
  .loyalty-main .hc-frame form.hc-view-as { grid-column: 1 / -1; }
  .loyalty-main .hc-frame .hc-view-as button.hc-action { width: 100%; }
}
.loyalty-main .hc-frame .hc-view-as button.hc-action { align-items: center; border: 1.5px solid #ff4a5e; border-radius: 999px; display: inline-flex; font: 400 .72rem var(--hc-pixel); letter-spacing: .1em; min-height: 2.7rem; padding: 0 1.2rem; }
.loyalty-main .hc-frame .hc-view-as button.hc-action:hover { background: rgba(255,48,72,.24); color: #fff; }

/* The paint booth's icon row (Jesse, 2026-10-22): rarity, staff can give, flavor lock, value as
   icon + drop-down, left to right; hints are ⓘ tips (hover, or tap to focus). */
.hc-iconrow { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 .4rem; }
.hc-iconpick { align-items: center; background: var(--hc-panel, #0b1124); border: 1.5px solid var(--hc-line, #2a3762); border-radius: 999px; color: var(--hc-blue-soft, #bff3ff); display: inline-flex; gap: .4rem; min-height: 2.6rem; padding: 0 .55rem 0 .7rem; }
.hc-iconpick svg { flex: none; height: 20px; width: 20px; }
.loyalty-main .hc-iconpick select, .loyalty-main .hc-iconpick input { appearance: none; background: transparent; border: 0; box-shadow: none; color: #fff; cursor: pointer; font: 400 .62rem var(--hc-pixel); letter-spacing: .08em; margin: 0; min-height: 2.4rem; padding: 0 .2rem; width: auto; }
.loyalty-main .hc-iconpick select option { background: #0b1124; color: #fff; }
.loyalty-main .hc-iconpick input.is-num { cursor: text; font: 400 1.3rem var(--hc-lcd, 'VT323', monospace); letter-spacing: 0; text-align: right; width: 4.5rem; }
.hc-iconpick small { color: var(--hc-muted, #8fa0cc); font: 400 .5rem var(--hc-pixel); letter-spacing: .1em; }
.hc-iconpick:focus-within { border-color: var(--hc-blue, #53e0ff); }
.hc-tip { color: var(--hc-blue, #53e0ff); cursor: help; font-style: normal; margin-left: .25rem; position: relative; }
.hc-tip:hover::after, .hc-tip:focus::after { background: #0f1633; border: 1px solid var(--hc-blue, #53e0ff); border-radius: 8px; color: #e9f4ff; content: attr(data-tip); font: 400 .95rem/1.2 var(--hc-lcd, 'VT323', monospace); left: 0; letter-spacing: 0; padding: .35rem .55rem; position: absolute; top: 1.4rem; white-space: nowrap; z-index: 20; }

/* Paint booth: tap an option to see it in the big frame, LOCK IT IN to keep it (2026-10-22). */
.hc-booth-frame { display: grid; }
.hc-booth-frame > * { grid-area: 1 / 1; }
.hc-frame-draft, .hc-lock { display: none; }
.hc-draft-radio { height: 1px; opacity: 0; position: absolute; width: 1px; }
label.hc-draft { cursor: pointer; position: relative; }
label.hc-draft img, label.hc-draft .hc-draft-blank { border-color: var(--hc-line2); }
label.hc-draft b { color: var(--hc-dim); font: 400 .5rem var(--hc-pixel); text-align: center; }
label.hc-draft:has(.hc-draft-radio:checked) img, label.hc-draft:has(.hc-draft-radio:checked) .hc-draft-blank { border-color: var(--hc-amber); box-shadow: 0 0 0 2px var(--hc-amber); }
label.hc-draft:has(.hc-draft-radio:checked) b { color: var(--hc-amber); }
label.hc-draft:has(.hc-draft-radio:focus-visible) img { outline: 2px solid var(--hc-cyan, #5ee7ff); outline-offset: 2px; }
.loyalty-main .hc .hc-lock button.hc-go { width: 100%; }