/* ============================================================================
   Rami: the table. Loaded after game.css (Chkobba's shell: frames, pills, cards,
   overlays, themes) and replaces its game board with Rami's: opponents in a row,
   the deck and the discard pile, the melds on the table, and a hand of 14-15 cards
   in one row (wide screens) or two overlapping rows (phones). No sideways scroll
   down to 320 px.
   ========================================================================== */
:root { --pile-w: clamp(46px, 6.4vw, 74px); --mini-w: clamp(30px, 3.6vw, 44px); }

/* ---- small cards: melds, the discard pile, the round-end hands ---- */
.card.mini { --card-w: var(--mini-w); }
.card.mini .card__inner { box-shadow: 0 2px 4px rgba(0,0,0,.45); border-radius: calc(var(--card-radius) * .7); }
.mini-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 3px 0 0 3px; color: var(--suit-color); background: var(--card-face); }
.mini-face b { font-family: var(--font-num); font-weight: 800; font-size: calc(var(--card-w) * .42); line-height: .95; letter-spacing: -.02em; }
.mini-face .pip { position: static; transform: none; width: calc(var(--card-w) * .34); height: calc(var(--card-w) * .34); }
.card[data-suit="joker"] { --suit-color: var(--card-red); }
.card[data-joker="black"] { --suit-color: var(--card-ink); }
.card.mini[data-suit="joker"] .mini-face { background: linear-gradient(160deg, var(--card-face) 55%, color-mix(in srgb, var(--gold) 35%, var(--card-face))); }

/* the flat / pixel joker */
.card__joker { display: grid; place-items: center; background: linear-gradient(160deg, var(--card-face) 40%, color-mix(in srgb, var(--gold) 30%, var(--card-face))); }
.card__joker .card__idx { display: flex; background: none; }
.joker-word { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); font-family: var(--font-display); font-weight: 900; letter-spacing: .12em; font-size: calc(var(--card-w) * .2); color: var(--suit-color); }
.joker-star { position: absolute; right: 8%; bottom: 6%; left: auto; top: auto; transform: none; width: calc(var(--card-w) * .3); height: calc(var(--card-w) * .3); }

/* a readable corner on small photo cards (the scan's own index is tiny there) */
.card__idx { position: absolute; left: 0; top: 0; z-index: 2; display: none; flex-direction: column; align-items: center; gap: 1px; min-width: 34%;
  padding: 3px 2px 4px; color: var(--suit-color); background: var(--card-face); border-bottom-right-radius: 7px; }
.card__idx b { font-family: var(--font-num); font-weight: 800; font-size: calc(var(--card-w) * .3); line-height: .95; letter-spacing: -.03em; }
.card__idx .pip { position: static; transform: none; width: calc(var(--card-w) * .22); height: calc(var(--card-w) * .22); }
html[data-cards="photo"] #hand-cards.compact .card__idx,
html[data-cards="photo"] .discard-pile .card__idx,
html[data-cards="photo"] .rules-cards .card__idx { display: flex; }

/* ============================================================================
   THE BOARD
   ========================================================================== */
#game-board { display: flex; flex-direction: column; gap: 6px; min-height: 0; height: 100%; padding: 4px 10px 8px; }
#opponents { display: flex; gap: 8px; justify-content: center; flex: none; min-width: 0; }
#opponents .opp { min-width: 0; flex: 0 1 auto; padding: 6px 10px; gap: 8px; }
#opponents .opp .av { width: 30px; height: 30px; font-size: 11px; }
#opponents .opp .name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.opp-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.opp .cnt { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-num); }
.opp .cnt .card-back.mini { width: 13px; height: 18px; box-shadow: none; }
.opp .cnt .card-back.mini::after { inset: 2px; }
.opp .cnt b { font-size: 15px; }
.badge.open-badge { background: var(--green); }
.badge.dealer { background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--panel-rim); }
.opp .spy { font-size: 11px; font-family: 'IBM Plex Mono', monospace; max-width: 16em; line-height: 1.3; color: var(--text); }
.opp .spy .hearts, .opp .spy .diamonds { color: #ff8a80; }
.opp.controlled { box-shadow: inset 0 0 0 2px var(--orange), 0 var(--drop) 0 var(--drop-color); }
.opp .ctrl { font-size: 9px; padding: 1px 4px; background: var(--orange); color: #1a1408; border-radius: 3px; }

#table-area { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; position: relative; padding: 0; }
#piles { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 26px); flex: none; padding-bottom: 16px; }
.pile { position: relative; width: var(--pile-w); height: calc(var(--pile-w) * 1.42); flex: none; --card-w: var(--pile-w); border-radius: var(--card-radius); }
.pile .card-back { position: absolute; inset: 0; width: 100%; height: 100%; }
.deck-pile .card-back:nth-child(2) { transform: translate(-3px, -3px); } .deck-pile .card-back:nth-child(3) { transform: translate(-6px, -6px); }
.discard-pile .pile-card { position: absolute; left: 0; top: 0; transform: translate(calc(var(--k) * -6px), calc(var(--k) * -2px)) rotate(calc(var(--k) * -5deg)); }
.discard-pile .pile-card .card__inner { animation: none; }
.pile-empty { position: absolute; inset: 0; border-radius: var(--card-radius); border: 2px dashed var(--panel-rim); }
.pile-count { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); font-family: var(--font-display); font-size: 10px; letter-spacing: .08em; color: var(--text-dim); white-space: nowrap; text-transform: var(--ui-case); }
.pile.can-draw { cursor: pointer; }
.pile.can-draw::after { content: ""; position: absolute; inset: -5px; border-radius: calc(var(--card-radius) + 4px); box-shadow: 0 0 0 2px var(--gold), var(--glow-gold); animation: pileGlow 1.1s ease-in-out infinite alternate; pointer-events: none; }
.discard-pile.can-throw::after { content: ""; position: absolute; inset: -5px; border-radius: calc(var(--card-radius) + 4px); box-shadow: 0 0 0 2px var(--orange); pointer-events: none; }
@keyframes pileGlow { from { opacity: .55; } to { opacity: 1; } }
.pile-card.drop-in .card__inner { animation: dropIn .38s var(--spring); }
@keyframes dropIn { from { transform: translateY(-26px) rotate(8deg) scale(1.1); opacity: .3; } }
#table-msg { font-family: var(--font-display); text-transform: var(--ui-case); letter-spacing: .05em; font-size: 12px; color: var(--gold-hi); max-width: 13em; line-height: 1.3; }
#table-msg:empty { display: none; }

#melds { flex: 1 1 auto; min-height: 64px; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: var(--radius-sm); background: rgba(0,0,0,.16); box-shadow: inset 0 0 0 1px var(--panel-rim); }
.melds-empty { margin: auto; color: var(--text-mut); font-family: var(--font-display); text-transform: var(--ui-case); letter-spacing: .1em; font-size: 12px; text-align: center; }
.meld-row { display: flex; flex-direction: column; align-items: stretch; gap: 3px; min-width: 0; }
.meld-owner { align-self: flex-start; max-width: 12em; font-family: var(--font-display); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--team1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meld-row.t2 .meld-owner { color: var(--team2); }
.meld-list { display: flex; flex-wrap: wrap; gap: 6px 10px; min-width: 0; flex: 1; }
.meld { position: relative; display: flex; padding: 3px 4px; border-radius: 8px; background: rgba(0,0,0,.22); transition: box-shadow .2s, transform .15s; }
.meld .card.mini + .card.mini { margin-left: calc(var(--mini-w) * -.5); }
.meld.can-add { box-shadow: 0 0 0 2px var(--green), 0 0 14px color-mix(in srgb, var(--green) 60%, transparent); cursor: pointer; }
.meld.can-swap { box-shadow: 0 0 0 2px var(--gold), var(--glow-gold); cursor: pointer; }
.meld.can-add:hover, .meld.can-swap:hover { transform: translateY(-2px); }
.meld-tag { position: absolute; top: -9px; right: -6px; z-index: 3; font-family: var(--font-display); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 5px; background: var(--green); color: #fff; box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.meld.can-swap .meld-tag { background: var(--gold); color: #1a1408; }
.meld.pop { animation: meldPop .5s var(--spring); }
@keyframes meldPop { from { transform: scale(.6) translateY(14px); opacity: 0; } }

/* ---- my hand ---- */
#hand-area { flex: none; position: relative; z-index: 3; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 2px; }
#hand-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; }
#player-label { font-size: 12px; gap: 6px; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; }
#player-label .badge { font-size: 10px; padding: 2px 6px 3px; }
#sel-info { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
#sel-info .pill { padding: 4px 8px; font-size: 11px; }
.verdict { font-family: var(--font-display); font-size: 13px; letter-spacing: .06em; text-transform: var(--ui-case); color: var(--text-dim); white-space: nowrap; }
.verdict.ok { color: var(--green); } .verdict.bad { color: var(--mult); }
.sort-btns { display: flex; gap: 4px; flex: none; }
.sort-btns .pill { padding: 6px 9px; font-size: 12px; min-height: 34px; min-width: 40px; }

#opening-bar { display: flex; flex-direction: column; gap: 4px; }
#opening-bar[hidden] { display: none; }
.op-meter { position: relative; height: 26px; border-radius: 999px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px var(--panel-rim); overflow: hidden; }
.op-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 60%, transparent), var(--gold)); transition: width .3s var(--ease-out); }
#opening-bar.ready .op-fill { background: linear-gradient(90deg, color-mix(in srgb, var(--green) 60%, transparent), var(--green)); }
.op-text { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 100%; font-size: 12px; letter-spacing: .04em; color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.8); white-space: nowrap; }
.op-text .term b { font-size: 12px; }
.op-text .num { font-size: 15px; }
#op-groups { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#op-groups:empty { display: none; }
.op-group { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 4px 8px; border-radius: 6px; background: var(--plate); color: var(--plate-ink); box-shadow: 0 2px 0 rgba(0,0,0,.4); }
.op-group .hearts, .op-group .diamonds, .op-group .joker { color: var(--card-red); }
.op-group b { margin-left: 4px; }

#hand-cards { position: relative; width: 100%; height: 150px; touch-action: none; user-select: none; -webkit-user-select: none; }
#hand-cards .card { position: absolute; left: 0; top: 0; cursor: grab; touch-action: none; transition: transform .22s var(--ease-out); }
#hand-cards .card.dragging { transition: none; cursor: grabbing; }
#hand-cards .card.dragging .card__inner { box-shadow: 0 18px 30px rgba(0,0,0,.55), 0 0 0 2px var(--gold); }
#hand-cards .card .card__inner { animation: none; }
#hand-cards .card.selected { --lift-now: -14px; }
#hand-area:not(.my-turn) #hand-cards .card.selected { --lift-now: -8px; }
#hand-cards .card.must-use .card__inner { box-shadow: var(--card-shadow), 0 0 0 3px var(--orange), 0 0 16px var(--orange); }
#hand-cards .card.arrive .card__inner { animation: arriveIn .45s var(--spring) both; }
@keyframes arriveIn { from { transform: translateY(-40px) scale(.8); opacity: 0; } }
#hand-cards .card:hover { --holo: 0; }
#hand-cards .card.is-interactive:hover .card__inner { box-shadow: var(--card-shadow), 0 0 0 2px color-mix(in srgb, var(--gold) 60%, transparent); }
#hand-cards .card.selected .card__inner, #hand-cards .card.selected:hover .card__inner { box-shadow: 0 12px 22px rgba(0,0,0,.5), 0 0 0 3px var(--gold), var(--glow-gold); }

#hand-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 46px; align-items: center; }
#hand-actions .pill { min-height: 44px; padding: 10px 16px; font-size: 15px; }
#hand-actions .pill.sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
#btn-open .fill { font-size: 16px; }
#btn-open:disabled { opacity: .7; }
#btn-open:disabled .fill { --fill-color: var(--gold); }

/* ---- HUD: one score chip per player (or team) ---- */
#hud-scores { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
#hud-scores .hud-team { display: flex; align-items: baseline; gap: 6px; padding: 5px 9px; }
#hud-scores .hud-team .val { font-size: 18px; }
#hud-scores .hud-team.me { box-shadow: 0 0 0 2px var(--gold), 0 3px 0 rgba(0,0,0,.4); }
#hud-scores .hud-team .lbl { max-width: 6.5em; }

/* ---- waiting room ---- */
.w-rules { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 12px; }
.w-rules .badge { background: var(--panel-hi); box-shadow: inset 0 0 0 1px var(--panel-rim); text-transform: none; font-family: var(--font-ui); font-weight: 600; }
.slot.t1 .av { background: var(--team1); }

/* ---- rules ---- */
.rules-body { display: flex; flex-direction: column; gap: 14px; align-items: center; min-width: 0; }
.rules-cards { display: flex; justify-content: center; padding: 6px 0 0; min-height: 90px; --card-w: clamp(52px, 9vw, 74px); }
.rules-cards .card + .card { margin-left: calc(var(--card-w) * -.38); }
.rules-body .plate { width: 100%; }
#rules-text { line-height: 1.55; font-size: 15px; }

/* ---- round end ---- */
.cer-head { flex-wrap: wrap; gap: 6px; }
.cer-why { font-family: var(--font-display); text-transform: var(--ui-case); letter-spacing: .06em; font-size: 14px; color: var(--gold-hi); display: flex; align-items: center; gap: 6px; }
.rs-rows { display: flex; flex-direction: column; gap: 6px; }
.rs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name pts" "hand pts"; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm); background: rgba(0,0,0,.25); box-shadow: inset 3px 0 0 var(--team1); }
.rs-row.t2 { box-shadow: inset 3px 0 0 var(--team2); }
.rs-row.me { background: rgba(255,255,255,.06); }
.rs-name { grid-area: name; font-family: var(--font-display); font-size: 14px; letter-spacing: .04em; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rs-name .badge { font-size: 10px; padding: 2px 6px 3px; }
.rs-hand { grid-area: hand; display: flex; flex-wrap: wrap; gap: 3px; min-width: 0; }
.rs-card { font-family: 'IBM Plex Mono', monospace; font-size: 12px; padding: 1px 5px; border-radius: 4px; background: var(--plate); color: var(--plate-ink); }
.rs-card.hearts, .rs-card.diamonds, .rs-card.joker { color: var(--card-red); }
.rs-none { color: var(--text-mut); font-size: 12px; }
.rs-pts { grid-area: pts; font-size: 26px; font-weight: 700; min-width: 2.4em; text-align: right; color: var(--text); }
.rs-totals { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--panel-rim); }
.rs-label { width: 100%; text-align: center; font-family: var(--font-display); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.rs-total { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--team1); color: #fff; box-shadow: 0 var(--drop) 0 var(--drop-color); min-width: 5.5em; }
.rs-total.t2 { background: var(--team2); }
.rs-total span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-total b { font-family: var(--font-num); font-size: 28px; line-height: 1; }
.rs-total b.bump { animation: bump .4s var(--spring); }
@keyframes bump { 50% { transform: scale(1.25); } }

/* ---- match end ---- */
.match-score { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; font-size: clamp(32px, 7vw, 56px); }
.match-score .ms { display: flex; flex-direction: column; align-items: center; color: var(--team1); }
.match-score .ms.t2 { color: var(--team2); }
.match-score .ms small { font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.match-score .ms.win small { color: var(--gold); }

/* the debug banners sit above the hand */
#possess-banner { margin-bottom: 2px; }

/* ============================================================================
   PHONES
   ========================================================================== */
@media (max-width: 640px) {
  #game-view #hud { gap: 6px; padding: 6px 8px 2px; }
  #hud-scores .hud-team { padding: 4px 7px; gap: 4px; }
  #hud-scores .hud-team .val { font-size: 16px; }
  #hud-scores .hud-team .lbl { max-width: 4.6em; font-size: 9px; }
  #game-view .hud-box { padding: 5px 8px; }
  #game-board { padding: 2px 8px 6px; gap: 5px; }
  #opponents { gap: 5px; }
  #opponents .opp { padding: 4px 7px; gap: 6px; }
  #opponents .opp .av { width: 24px; height: 24px; font-size: 9px; }
  #opponents .opp .name { font-size: 11px; max-width: 6.5em; }
  #game-view[data-players="4"] #opponents .opp .av { display: none; }
  #game-view[data-players="4"] #opponents .opp .name { max-width: 5.2em; }
  .opp-row { gap: 4px; }
  .opp-row .badge { font-size: 9px; padding: 1px 4px 2px; }
  #piles { padding-bottom: 14px; gap: 12px; }
  #table-msg { font-size: 11px; max-width: 10em; }
  .meld-owner { font-size: 9px; }
  .meld-list { gap: 5px 7px; }
  #hand-actions { gap: 6px; }
  #hand-actions .pill { flex: 1 1 auto; padding: 10px 12px; font-size: 14px; }
  #hand-actions .pill.sm { flex: 0 0 auto; }
  .rs-pts { font-size: 22px; }
  .rules-cards { --card-w: 46px; }
  #rules-text { font-size: 14px; }
}
@media (max-width: 380px) {
  :root { --pile-w: 42px; --mini-w: 28px; }
  #hand-bar { min-height: 30px; }
  .sort-btns .pill { min-width: 34px; padding: 4px 6px; font-size: 11px; }
  #player-label { font-size: 11px; max-width: 34%; }
  #game-view .hud-box { display: none; }
}

/* a short landscape screen: the opponents and piles on one line, the hand in one row */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --pile-w: 40px; --mini-w: 28px; }
  #game-board { padding: 0 10px 4px; gap: 4px; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "opps piles" "melds piles" "hand hand"; }
  #opponents { grid-area: opps; justify-content: flex-start; }
  #table-area { display: contents; }
  #piles { grid-area: piles; flex-direction: row; align-self: start; gap: 12px; padding: 4px 0 16px; }
  #table-msg { display: none; }
  #melds { grid-area: melds; min-height: 0; }
  #hand-area { grid-area: hand; display: flex; flex-direction: column; }
  #hand-bar { min-height: 28px; }
  #hand-actions { min-height: 40px; }
  #hand-actions .pill { min-height: 40px; padding: 6px 14px; flex: none; }
}

/* Chkobba's phone rules give the hand rows a flex-basis; Rami's hand is a column */
#hand-area > #hand-cards, #hand-area > #hand-actions, #hand-area > #possess-banner { flex-basis: auto; }

/* ---------------- House rules ---------------- */
/* the short summary line: main menu, waiting room */
.house-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; width: 100%; text-align: left; padding: 9px 12px; border-radius: var(--radius-sm); background: rgba(0,0,0,.24); box-shadow: inset 0 0 0 1px var(--panel-rim); color: var(--text-dim); font-size: 12.5px; line-height: 1.35; transition: background .15s; }
.house-line:hover { background: rgba(0,0,0,.34); color: var(--text); }
.house-line__tag { flex: none; }
.house-line__tag .term b, .house-line__tag { font-family: var(--font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.house-line__tag .term small { display: block; font-size: 9px; color: var(--text-mut); }
.house-line__text { flex: 1 1 12em; min-width: 0; overflow-wrap: anywhere; }
.house-line__go { flex: none; margin-left: auto; font-family: var(--font-display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--chip); }
.w-rules { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.w-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.house-row { flex-wrap: wrap; }
.house-row__text { flex: 1 1 10em; min-width: 0; font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }

/* the editor */
#ov-house { z-index: 56; }
.hr-frame { width: min(100%, 720px); }
.hr-summary { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--radius-sm); background: rgba(0,0,0,.26); box-shadow: inset 0 0 0 1px var(--panel-rim); font-size: 13px; color: var(--text-dim); margin-bottom: 10px; }
.hr-summary b { color: var(--text); font-size: 14px; }
.hr-presets { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.hr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hr-chip { display: inline-flex; align-items: stretch; border-radius: 999px; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px var(--panel-rim); overflow: hidden; max-width: 100%; }
.hr-chip button { padding: 6px 11px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16em; }
.hr-chip button:hover { color: var(--text); }
.hr-chip.on { background: var(--gold); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.hr-chip.on button { color: #1a1408; font-weight: 700; }
.hr-chip .hr-del { padding: 6px 9px 6px 4px; opacity: .7; }
.hr-save { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hr-save .input { flex: 1 1 10em; min-width: 0; width: auto; padding: 8px 10px; font-size: 14px; text-transform: none; letter-spacing: .02em; }
.hr-save .pill { flex: none; }
.hr-notes { padding: 8px 12px; border-radius: var(--radius-sm); background: rgba(200,100,45,.18); box-shadow: inset 0 0 0 1px rgba(200,100,45,.5); color: var(--text); font-size: 13px; margin-bottom: 8px; }
.hr-notes p { margin: 2px 0; }
.hr-group { margin-top: 14px; }
.hr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 9px 0; border-bottom: 1px solid var(--panel-rim); }
.hr-row:last-child { border-bottom: 0; }
.hr-row.is-off { opacity: .45; }
.hr-lbl { min-width: 0; }
.hr-lbl .term b { font-family: var(--font-display); text-transform: var(--ui-case); letter-spacing: var(--ui-tracking); font-size: 13.5px; color: var(--text); font-weight: 400; }
.hr-lbl .term small { display: block; font-size: 10.5px; color: var(--text-mut); letter-spacing: .04em; }
.hr-lbl > small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.35; color: var(--text-dim); }
.hr-row.is-changed .hr-lbl .term b::after { content: ' •'; color: var(--gold); }
.hr-ctl { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; justify-self: end; max-width: 100%; }
.hr-ctl .seg { flex-wrap: wrap; justify-content: flex-end; }
.hr-ctl .seg button { padding: 6px 10px; font-size: 12px; }
.stepper { display: inline-flex; align-items: stretch; border-radius: var(--radius-sm); background: rgba(0,0,0,.28); padding: 3px; gap: 3px; }
.stepper button { width: 34px; min-height: 34px; border-radius: 6px; background: var(--panel-hi); color: var(--text); font-size: 18px; line-height: 1; touch-action: none; user-select: none; }
.stepper button:disabled { opacity: .35; }
.stepper input { width: 4.2em; text-align: center; background: transparent; border: 0; color: var(--text); font-family: var(--font-display); font-size: 16px; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus { outline: 2px solid var(--gold); border-radius: 4px; }
.stepper.is-view button { display: none; }
.hr-range { font-size: 10px; color: var(--text-mut); letter-spacing: .04em; }
.hr-actions { position: sticky; bottom: 0; z-index: 2; padding: 12px 0 4px; margin-top: 10px; background: linear-gradient(transparent, var(--panel) 14px); box-shadow: 0 26px 0 0 var(--panel); }

/* in the game menu */
.gm-house { padding: 8px 0 10px; border-bottom: 1px solid var(--panel-rim); }
.gm-house p { margin: 4px 0; font-size: 13px; line-height: 1.4; color: var(--text-dim); }
.gm-house .gm-house__open { color: var(--text); }
.gm-house .pill { margin-top: 4px; }
.gtitle-line { font-size: 12px; }

@media (max-width: 520px) {
  .hr-row { grid-template-columns: minmax(0, 1fr); }
  .hr-ctl { align-items: flex-start; justify-self: start; }
  .hr-ctl .seg { justify-content: flex-start; }
  .hr-frame { padding-left: 14px; padding-right: 14px; }
}
.hr-lbl .term, .house-line__tag .term, .hr-group .gtitle .term, #hr-title .term { align-items: flex-start; line-height: 1.15; }