/* Thousandvale — play-test 5 interface (stream D-UI): the starting-equipment step, crate / gift reveal, the event
   tracker, the Character menu beside the bag, feedback + reports, angling (bite, tug, cooking, the Catch tab),
   the "heals go to" note and the raise-you prompt. Uses the tokens from client.css. */

/* ---------------------------------------------------------------- shared rarity colours for the new pieces */
.r-common, .r-normal { --rc: #e8e0c8; } .r-magic, .r-uncommon { --rc: #8fb4ff; } .r-rare { --rc: #ffe17a; } .r-epic { --rc: #d8a8ff; }
.r-legendary, .r-unique { --rc: #ffb36a; } .r-set { --rc: #8ff0a0; }

/* ---------------------------------------------------------------- T9 / T20: opening a crate or a gift */
.tv-reveal { position: absolute; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: auto; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.15) 70%); animation: rv-fade 0.2s ease-out; }
.tv-reveal[hidden] { display: none; }
.rv-card { position: relative; width: min(340px, calc(100vw - 32px)); padding: 22px 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center;
  background: var(--panel-solid); border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: var(--shadow), 0 0 40px rgba(0, 0, 0, 0.6); }
.tv-reveal.open .rv-card { border-color: var(--rc, var(--edge-strong)); box-shadow: var(--shadow), 0 0 46px -6px var(--rc, transparent); animation: rv-pop 0.42s cubic-bezier(0.2, 1.5, 0.4, 1); }
.rv-title { font-family: var(--serif); font-size: 19px; color: var(--gold-hi); letter-spacing: 0.06em; }
.rv-sub { font-size: 13px; color: var(--ink-dim); } .rv-sub.dim { color: var(--ink-faint); font-size: 12px; }
/* the box that rattles while the server rolls */
.rv-box { position: relative; width: 84px; height: 76px; margin: 4px 0 10px; animation: rv-rattle 0.5s ease-in-out infinite; }
.rv-box .rv-body { position: absolute; left: 6px; right: 6px; bottom: 0; height: 50px; border-radius: 4px 4px 7px 7px; background: linear-gradient(180deg, #7a5632, #4a321c); border: 2px solid #2c1d10; }
.rv-box .rv-lid { position: absolute; left: 0; right: 0; top: 8px; height: 22px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #96693c, #6a4826); border: 2px solid #2c1d10; transform-origin: 8% 100%; animation: rv-lid 0.5s ease-in-out infinite; }
.rv-box .rv-band { position: absolute; left: 50%; top: 8px; bottom: 0; width: 14px; margin-left: -7px; background: linear-gradient(180deg, #d9b26a, #8a6a34); border: 1px solid #2c1d10; }
.tv-reveal.gift .rv-box .rv-body { background: linear-gradient(180deg, #8a2f4a, #5a1c30); } .tv-reveal.gift .rv-box .rv-lid { background: linear-gradient(180deg, #a83c5c, #7a2a44); }
.rv-box .rv-bow { position: absolute; left: 50%; top: -6px; width: 34px; height: 18px; margin-left: -17px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 25% 60%, #ffd56a 0 34%, transparent 36%), radial-gradient(circle at 75% 60%, #ffd56a 0 34%, transparent 36%); }
.tv-reveal.gift .rv-box::after { content: ''; position: absolute; left: 50%; top: 8px; bottom: 0; width: 12px; margin-left: -6px; background: #ffd56a; opacity: 0.9; }
/* what was inside */
.rv-from { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.rv-item.islot { width: 92px; height: 92px; margin: 8px 0 6px; border-width: 2px; border-color: var(--rc, #8a8a8a); box-shadow: 0 0 26px -2px var(--rc, transparent), inset 0 0 14px rgba(0, 0, 0, 0.5); cursor: help; animation: rv-rise 0.5s ease-out; }
.rv-item.islot .glyph { font-size: 38px; font-family: var(--serif); color: var(--rc, #ddd); }
.rv-name { font-family: var(--serif); font-size: 19px; line-height: 1.2; color: var(--rc, #eee); }
.rv-kind { font-size: 13px; color: var(--ink-dim); } .rv-facts { font-size: 14px; color: var(--ink); }
.rv-card button.primary { margin-top: 10px; }
.rv-burst { position: absolute; left: 50%; top: 96px; width: 0; height: 0; pointer-events: none; }
.rv-burst i { position: absolute; left: -1.5px; top: -46px; width: 3px; height: 46px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--rc, #ffe7b0)); transform-origin: 50% 100%; transform: rotate(var(--a)) translateY(-40px) scaleY(0.2); opacity: 0; animation: rv-ray 0.7s ease-out forwards; }
@keyframes rv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-pop { from { transform: scale(0.82); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes rv-rattle { 0%, 100% { transform: rotate(-3deg) translateY(0); } 25% { transform: rotate(4deg) translateY(-3px); } 50% { transform: rotate(-4deg); } 75% { transform: rotate(3deg) translateY(-2px); } }
@keyframes rv-lid { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes rv-rise { from { transform: translateY(26px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rv-ray { 0% { opacity: 0.95; transform: rotate(var(--a)) translateY(-30px) scaleY(0.2); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-96px) scaleY(1.2); } }
@media (prefers-reduced-motion: reduce) { .rv-box, .rv-box .rv-lid, .rv-burst i, .rv-item.islot, .tv-reveal.open .rv-card { animation: none; } }
/* the card lines for a crate */
.itemtip .ic-crate { margin: 4px 0; padding: 5px 0; border-top: 1px solid rgba(109, 83, 38, 0.6); border-bottom: 1px solid rgba(109, 83, 38, 0.6); }
.itemtip .ic-crate-what { color: #fff; } .itemtip .ic-crate-min { font-weight: 700; color: var(--rc, #eee); }
.tipbox .tip-who { color: #9fd0ff; font-size: 12px; margin-top: 2px; }

/* ---------------------------------------------------------------- T11 / T12: the event tracker */
.tv-evtrack { display: flex; flex-direction: column; gap: 6px; }
.tv-evtrack[hidden] { display: none; }
.right-col > .tv-evtrack { pointer-events: auto; }
.et-card { position: relative; padding: 8px 12px 9px; background: var(--panel); border: 1px solid rgba(255, 150, 90, 0.55); border-left: 4px solid #ff9a5a; border-radius: 8px; box-shadow: var(--shadow); backdrop-filter: blur(5px); font-size: 13px; line-height: 1.35; }
.et-card.soon { border-color: var(--edge); border-left-color: var(--warn); } .et-card.outside { border-color: var(--edge); border-left-color: var(--ink-faint); }
.et-card.won { border-color: rgba(127, 224, 138, 0.6); border-left-color: var(--good); } .et-card.lost { border-color: rgba(255, 106, 85, 0.5); border-left-color: var(--bad); }
.et-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.et-state { color: #ffb36a; font-weight: 700; } .et-card.won .et-state { color: var(--good); } .et-card.lost .et-state { color: var(--bad); } .et-card.outside .et-state, .et-card.soon .et-state { color: var(--warn); }
.et-time { margin-left: auto; color: var(--ink); letter-spacing: 0.04em; text-transform: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.et-time.urgent { color: var(--bad); font-weight: 700; }
.et-x { margin-left: auto; padding: 0 7px !important; font-size: 14px; line-height: 1.3; } .et-time + .et-x { margin-left: 0; }
.et-name { display: block; font-family: var(--serif); font-size: 15px; color: var(--gold-hi); margin: 1px 0 2px; }
.et-card.folded .et-name { font-size: 13px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-what, .et-players, .et-stage { margin: 0 0 4px; color: var(--ink-dim); } .et-what.dim, .et-players { color: var(--ink-faint); font-size: 12px; margin-bottom: 0; }
.et-stage { color: var(--ink); font-size: 12px; }
.et-obj, .et-reward { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; margin-top: 3px; }
.et-label { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); flex: 0 0 auto; }
.et-objtext { color: var(--ink); flex: 1 1 60%; } .et-count { color: var(--gold-hi); font-variant-numeric: tabular-nums; margin-left: auto; }
.et-bar { height: 7px; margin: 4px 0 2px; background: rgba(0, 0, 0, 0.55); border-radius: 4px; overflow: hidden; }
.et-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c7682f, #ffb36a); transition: width 0.4s; }
.et-reward span:last-child { color: #ffd56a; flex: 1 1 60%; }
.et-result { margin: 2px 0; color: var(--ink); font-weight: 700; } .et-got { margin: 0; color: #ffd56a; }
.et-go { margin-top: 4px; }

/* ---------------------------------------------------------------- T18: the Character menu */
.sheet-panel .tvp-body { padding-top: 8px; }
.sh-top { display: flex; gap: 6px; margin-bottom: 4px; }
.sh-note { margin: 2px 0 4px !important; font-size: 12px; color: var(--ink-faint); } .sh-note.changed { color: var(--gold-hi); } .sh-note.basic { margin-top: 8px !important; font-style: italic; }
.sheet-panel h4 { margin: 8px 0 3px; }
.sh-list { list-style: none; margin: 0; padding: 0; }
.sh-row { display: grid; grid-template-columns: 1fr auto 66px; align-items: baseline; gap: 8px; padding: 3px 6px; border-radius: 5px; cursor: help; outline: none; }
.sh-row:nth-child(odd) { background: rgba(217, 178, 106, 0.05); } .sh-row:hover, .sh-row:focus { background: rgba(217, 178, 106, 0.14); }
.sh-label { color: var(--ink-dim); min-width: 0; } .sh-label small { display: block; color: var(--ink-faint); font-size: 11.5px; line-height: 1.25; }
.sh-value { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sh-diff { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .sh-diff.up { color: var(--good); } .sh-diff.down { color: var(--bad); }
.sh-row.sh-ab { grid-template-columns: 20px 1fr auto 66px; } .sh-ab.none .sh-value { color: var(--ink-faint); } .sh-ab.locked { opacity: 0.6; }
.sh-key { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--edge); border-radius: 4px; font-size: 11px; font-weight: 700; color: var(--gold-hi); }
.sh-adv { display: flex; align-items: center; gap: 7px; margin: 8px 0 3px; color: var(--gold); cursor: pointer; font-family: var(--serif); font-size: 13px; letter-spacing: 0.06em; }
.sh-adv input { width: auto; margin: 0; accent-color: var(--gold); }
.sh-angbar, .jc-bar { position: relative; height: 16px; background: rgba(0, 0, 0, 0.5); border: 1px solid var(--edge); border-radius: 8px; overflow: hidden; }
.sh-angbar i, .jc-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #2f6f8c, #58b4d8); }
.sh-angbar span { position: relative; display: block; text-align: center; font-size: 11.5px; line-height: 14px; color: #fff; text-shadow: 0 1px 2px #000; }
.sh-angling small { color: var(--ink-faint); font-size: 12px; }
.inv-stats { margin-left: 4px; }
/* side by side with the bag: the bag narrows, the sheet docks to its left */
@media (min-width: 761px) {
  body.sheet-with-bag .bag.inv { width: min(780px, calc(100vw - 100px - 322px)); }
  body.sheet-with-bag .tv-panel.sheet-panel:not(.placed) { right: calc(70px + min(780px, 100vw - 422px) + 10px) !important; top: 64px !important; left: auto; }
  body.sheet-with-bag .tv-panel.sheet-panel { max-height: calc(100vh - 110px); }
}
@media (max-width: 760px) {
  body.sheet-with-bag .bag.inv { top: 50px; max-height: 46vh; }
  body.sheet-with-bag .tv-panel.sheet-panel { left: 8px !important; right: 8px !important; top: calc(50px + 46vh + 6px) !important; bottom: auto; width: auto !important; max-height: calc(54vh - 66px); z-index: 37 !important; }
  .tv-panel.sheet-panel:not(.placed) { left: 8px; right: 8px; width: auto !important; }
}

/* ---------------------------------------------------------------- T19 / T21: feedback and reports */
.fb-kind { margin-bottom: 8px; } .feedback-panel textarea { width: 100%; min-height: 110px; }
.feedback-panel .count { display: block; text-align: right; color: var(--ink-faint); font-size: 11.5px; }
.fb-ctx { margin: 4px 0 8px; padding: 4px 9px; border: 1px dashed var(--edge); border-radius: 6px; }
.fb-ctx summary { margin: 2px 0 !important; }
.fb-lines { list-style: none; margin: 6px 0; padding: 0; font-size: 12.5px; color: var(--ink-dim); } .fb-lines li { padding: 1px 0; overflow-wrap: anywhere; }
.fb-log { margin: 4px 0 6px; padding: 6px 6px 6px 30px; max-height: 150px; overflow-y: auto; font: 11.5px/1.4 ui-monospace, Menlo, Consolas, monospace; color: var(--ink-dim); background: rgba(0, 0, 0, 0.4); border-radius: 5px; }
.fb-log li { overflow-wrap: anywhere; }
.fb-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 12px 0 6px; }
.fb-tick { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--good); color: var(--good); font-size: 24px; }
.fb-done strong { font-family: var(--serif); font-size: 17px; color: var(--gold-hi); } .fb-gift { color: #ffd56a; }
.rp-filters { flex-wrap: wrap; gap: 6px; } .rp-filter { display: flex; align-items: center; gap: 5px; color: var(--ink-dim); } .rp-filter select { margin: 0; width: auto; }
.rp-list { list-style: none; margin: 4px 0 0; padding: 0; max-height: 56vh; overflow-y: auto; }
.rp-row { display: grid; grid-template-columns: 46px 1fr auto; grid-template-areas: 'kind line state' 'kind who state'; gap: 0 9px; padding: 6px 8px; border-bottom: 1px solid rgba(217, 178, 106, 0.12); cursor: pointer; border-radius: 6px; outline: none; }
.rp-row:hover, .rp-row:focus { background: rgba(217, 178, 106, 0.08); }
.rp-kind { grid-area: kind; align-self: center; text-align: center; padding: 2px 0; border-radius: 4px; font-size: 11px; font-weight: 700; background: rgba(88, 180, 216, 0.2); color: #9fd8f0; } .rp-kind.bug { background: rgba(255, 106, 85, 0.2); color: #ffb0a2; }
.rp-line { grid-area: line; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rp-who { grid-area: who; font-size: 12px; color: var(--ink-faint); }
.rp-state { grid-area: state; align-self: center; font-size: 11.5px; padding: 1px 8px; border-radius: 9px; border: 1px solid var(--edge); color: var(--ink-dim); } .rp-state.new { color: var(--gold-hi); border-color: var(--gold); } .rp-state.approved { color: var(--good); border-color: var(--good); } .rp-state.declined, .rp-state.trash { color: var(--ink-faint); }
.rp-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--ink-faint); margin: 4px 0 8px; } .rp-meta .rp-kind { padding: 2px 8px; }
.rp-text { white-space: pre-wrap; padding: 10px 12px; border-radius: 6px; background: rgba(240, 225, 190, 0.06); border: 1px solid rgba(217, 178, 106, 0.18); overflow-wrap: anywhere; }
.reports-panel .row.end { flex-wrap: wrap; gap: 6px; }

/* ---------------------------------------------------------------- T5: the starting-equipment step */
.tv-panel.kits-panel.title-mode:not(.placed) { left: max(16px, 6vw) !important; right: auto !important; top: 8vh !important; }
.kits-panel { max-height: calc(100vh - 12vh) !important; }
.kit-intro { color: var(--ink-dim); font-size: 13px; }
.kit-body { display: flex; flex-direction: column; gap: 4px; }
.kit-group h4 { margin: 6px 0 4px; }
.kit-choice { margin-bottom: 5px; padding: 7px 10px; border: 1px solid var(--edge); border-radius: 8px; background: rgba(0, 0, 0, 0.3); cursor: pointer; outline: none; transition: border-color 0.15s, background 0.15s; }
.kit-choice:hover, .kit-choice:focus-visible { border-color: var(--gold); }
.kit-choice.on { border-color: var(--gold-hi); background: linear-gradient(180deg, rgba(91, 66, 32, 0.55), rgba(40, 29, 14, 0.55)); }
.kit-head { display: flex; align-items: baseline; gap: 8px; } .kit-head strong { font-family: var(--serif); color: var(--ink); letter-spacing: 0.03em; } .kit-choice.on .kit-head strong { color: var(--gold-hi); }
.kit-head em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.kit-radio { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--edge-strong); align-self: center; } .kit-choice.on .kit-radio { border-color: var(--gold-hi); background: radial-gradient(circle, var(--gold-hi) 0 45%, transparent 50%); }
.kit-blurb { margin: 2px 0 0 20px !important; font-size: 12.5px; color: var(--ink-dim); } .kit-short { margin: 2px 0 0 20px !important; font-size: 12px; color: var(--ink-faint); }
.kit-items { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; }
.kit-item { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: help; outline: none; border-radius: 6px; } .kit-item:focus-visible { box-shadow: 0 0 0 1px var(--gold); }
.kit-item .islot { width: 38px; height: 38px; flex: 0 0 auto; padding: 2px; } .kit-item .islot img { width: 100%; height: 100%; object-fit: contain; }
.kit-itemtext { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .kit-itemtext b { font-size: 13px; color: var(--rc, #eee); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-itemtext small { font-size: 11.5px; color: var(--ink-dim); }
.kit-foot { margin-top: 6px; margin-bottom: 0 !important; }
@media (max-width: 760px) {
  .tv-panel.kits-panel.title-mode:not(.placed) { left: 8px !important; right: 8px !important; top: auto !important; bottom: 8px; width: auto !important; }
  .kits-panel { max-height: 50vh !important; } .kit-intro { display: none; } .kit-items { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- T25: angling */
.tv-fish { position: absolute; left: 50%; bottom: 152px; transform: translateX(-50%); z-index: 34; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.tv-fish[hidden] { display: none; } .tv-fish > * { pointer-events: auto; }
.fish-pill { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--panel); border: 1px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow); color: var(--ink); white-space: nowrap; }
.fish-pill small { color: var(--ink-faint); margin-left: 4px; } .fish-pill.miss { color: var(--warn); border-color: rgba(242, 195, 90, 0.5); }
.fish-dot { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e0483a 60%); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25); }
.fish-dot.bob { animation: fish-bob 1.6s ease-in-out infinite; }
.fish-bite { position: relative; width: 190px; height: 190px; border-radius: 50%; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #fff;
  background: radial-gradient(circle, rgba(34, 96, 128, 0.92), rgba(14, 40, 58, 0.92) 70%); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5), 0 0 40px rgba(88, 180, 216, 0.7); animation: fish-jolt 0.28s ease-in-out infinite alternate; touch-action: none; }
.fish-bite strong { font-family: var(--serif); font-size: 30px; letter-spacing: 0.05em; text-shadow: 0 2px 6px #000; } .fish-bite span:last-child { font-size: 13px; max-width: 140px; line-height: 1.25; }
.fish-ring { position: absolute; inset: -9px; border-radius: 50%; border: 5px solid #ffe17a; animation: fish-ring var(--ms, 1500ms) linear forwards; }
.fish-tug { width: min(330px, calc(100vw - 24px)); padding: 10px 14px 12px; background: var(--panel-solid); border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: var(--shadow); touch-action: none; user-select: none; cursor: pointer; }
.fish-tug.holding { border-color: var(--gold-hi); }
.tug-title { display: block; text-align: center; font-family: var(--serif); font-size: 16px; color: var(--rc, var(--gold-hi)); margin-bottom: 6px; }
.tug-row { display: flex; gap: 14px; align-items: stretch; }
.tug-bar { position: relative; flex: 0 0 46px; height: 190px; border-radius: 8px; border: 1px solid var(--edge); overflow: hidden; background: linear-gradient(180deg, #0f3044, #071a26); }
.tug-band { position: absolute; left: 0; right: 0; background: rgba(110, 220, 130, 0.42); border-top: 2px solid #8ff0a0; border-bottom: 2px solid #8ff0a0; }
.tug-float { position: absolute; left: 50%; width: 22px; height: 22px; margin: 0 0 -11px -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e0483a 62%); border: 2px solid #fff; box-shadow: 0 0 8px rgba(0, 0, 0, 0.7); }
.fish-tug.in .tug-float { box-shadow: 0 0 12px 2px #8ff0a0; } .fish-tug:not(.in) .tug-float { border-color: #ffb0a2; }
.tug-side { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; font-size: 13.5px; color: var(--ink-dim); } .tug-side b { color: var(--gold-hi); }
.tug-keys { font-size: 12px; color: var(--ink-faint); } .tug-need { font-size: 12px; color: var(--ink-faint); }
.tug-meter { position: relative; height: 10px; background: rgba(0, 0, 0, 0.55); border-radius: 5px; overflow: hidden; cursor: help; }
.tug-meter i { display: block; height: 100%; background: linear-gradient(90deg, #a84a2a, #e08a4a); } .tug-meter i.ok { background: linear-gradient(90deg, #3f9a52, #8ff0a0); }
.tug-meter em { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: 0.8; }
.tug-time { height: 5px; margin-top: 9px; background: rgba(0, 0, 0, 0.55); border-radius: 3px; overflow: hidden; } .tug-time i { display: block; height: 100%; background: var(--gold); }
.fish-card { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 220px; padding: 10px 18px 9px; text-align: center; background: var(--panel-solid); border: 1px solid var(--rc, var(--edge-strong)); border-radius: 12px; box-shadow: var(--shadow), 0 0 28px -8px var(--rc, transparent); animation: rv-pop 0.35s cubic-bezier(0.2, 1.5, 0.4, 1); }
.fish-card strong { font-family: var(--serif); font-size: 19px; color: var(--rc, #eee); } .fish-card em { font-style: normal; font-size: 12px; color: var(--rc, var(--ink-dim)); }
.fish-card span { font-size: 13px; color: var(--ink-dim); } .fish-from { font-size: 11px !important; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint) !important; } .fish-card small { margin-top: 3px; font-size: 11.5px; color: var(--ink-faint); }
.fish-card.legend { border-width: 2px; }
.fish-btn { margin-left: 6px; } .fish-btn[hidden] { display: none; } .fish-btn.on { border-color: var(--gold-hi); }
.fish-glyph { width: 26px; height: 26px; border: 3px solid var(--gold-hi); border-top-color: transparent; border-left-color: transparent; border-radius: 0 0 14px 0; transform: rotate(45deg) translate(-3px, -3px); filter: drop-shadow(0 1px 1px #000); }
@keyframes fish-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
@keyframes fish-jolt { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(4px) rotate(1.5deg); } }
@keyframes fish-ring { from { transform: scale(1); opacity: 1; } to { transform: scale(0.52); opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .fish-bite, .fish-dot.bob { animation: none; } }
@media (max-width: 760px) { .tv-fish { bottom: 132px; } .fish-bite { width: 160px; height: 160px; } .tug-bar { height: 150px; } }
/* cooking */
.ck-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 56vh; overflow-y: auto; }
.ck-row { display: flex; gap: 10px; align-items: center; padding: 7px 4px; border-bottom: 1px solid rgba(217, 178, 106, 0.12); } .ck-row.no .ck-main b { color: var(--ink-dim); }
.ck-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .ck-main b { color: var(--gold-hi); } .ck-main small { color: var(--ink-dim); font-size: 12px; }
.ck-needs { display: flex; flex-wrap: wrap; gap: 3px 8px; font-size: 12px; } .ck-needs .ok { color: var(--good); } .ck-needs .lack { color: var(--bad); } .ck-why { color: var(--warn) !important; }
.ck-btns { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; } .ck-btns button:disabled { opacity: 0.45; cursor: default; }
/* the Catch tab */
.jc-top { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 8px; }
.jc-skill { flex: 1 1 200px; display: flex; flex-direction: column; gap: 3px; } .jc-skill b { font-family: var(--serif); color: var(--gold-hi); } .jc-skill small { color: var(--ink-faint); font-size: 12px; } .jc-bar { height: 8px; }
.jc-sum { display: flex; flex-direction: column; gap: 1px; font-size: 13px; color: var(--ink-dim); } .jc-sum b { color: var(--ink); }
.jc-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 16px; max-height: 54vh; overflow-y: auto; padding-right: 4px; }
.jc-group h4 { margin: 6px 0 3px; } .jc-group h4 small { color: var(--ink-faint); font-family: var(--sans); letter-spacing: 0; }
.jc-group ul { list-style: none; margin: 0; padding: 0; }
.jc-fish { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; padding: 2px 5px; border-radius: 4px; font-size: 13px; } .jc-fish:nth-child(odd) { background: rgba(217, 178, 106, 0.05); }
.jc-fish b { color: var(--ink-faint); font-weight: 600; } .jc-fish.known b { color: var(--rc, var(--ink)); } .jc-fish span { color: var(--ink-dim); text-align: right; } .jc-fish .dim { color: var(--ink-faint); font-size: 12px; }
.jc-fish em { grid-column: 1 / -1; font-style: normal; font-size: 11.5px; color: var(--ink-faint); }
.jc-fish.legend.known b { color: #ffb36a; } .jc-group.legends { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- T3: who a heal lands on · T4: an offer to raise you */
.ally-note { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); padding: 3px 12px; background: var(--panel); border: 1px solid rgba(127, 224, 138, 0.55); border-radius: 12px; font-size: 13px; color: var(--ink-dim); white-space: nowrap; pointer-events: none; z-index: 5; }
.ally-note[hidden] { display: none; } .ally-note b { color: var(--good); } .ally-note small { color: var(--ink-faint); }
.unitframe.target.friendly { border-color: rgba(127, 224, 138, 0.7); }
#self-frame { cursor: pointer; pointer-events: auto; }   /* a click on your own frame clears the target: heals go to you */ .pmember { cursor: pointer; }
.revive-ask { margin: 0 auto 18px; max-width: 420px; padding: 14px 18px; background: var(--panel-solid); border: 1px solid var(--gold-hi); border-radius: 12px; box-shadow: var(--shadow), 0 0 30px -6px var(--gold); pointer-events: auto; text-align: center; }
.revive-ask[hidden] { display: none; }
.revive-ask strong { display: block; font-family: var(--serif); font-size: 19px; color: var(--gold-hi); } .revive-ask p { margin: 6px 0 10px; color: var(--ink); font-size: 15px; }
.revive-ask .row { display: flex; gap: 10px; justify-content: center; } .revive-ask .row button { width: auto; padding: 9px 22px; } .revive-ask small { display: block; margin-top: 8px; color: var(--ink-faint); font-size: 12px; }

/* ---------------------------------------------------------------- T20: mail */
.ml-items .islot.gift, .ml-items .islot.crate { box-shadow: 0 0 10px rgba(255, 213, 106, 0.6); animation: mail-gift 1.8s ease-in-out infinite; }
.ml-names { margin: 5px 0 0 !important; font-size: 12.5px; color: var(--ink-dim); } .ml-gifthint { margin: 4px 0 0 !important; font-size: 12.5px; color: #ffd56a; }
.ml-tag.sys { color: var(--gold-hi); } .ml-att.gift { color: #ffd56a; } .ml-room { margin-top: 8px; }
.tvp-body button:disabled { opacity: 0.5; cursor: default; }
@keyframes mail-gift { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }

/* ---------------------------------------------------------------- C's slots addendum (back, waist, light) + attack lines on cards */
.itemtip .ic-attack { color: #9fd8f0; margin: 2px 0; }
.sh-ab.pending .sh-value { color: var(--ink-faint); font-style: italic; font-weight: 400; }
@media (min-width: 761px) { .inv-doll .doll-col { gap: 6px; } .doll-figure { min-height: 330px; } }

/* ---------------------------------------------------------------- T28: staged perk and talent picks (undo / redo / accept) */
.stage-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; padding: 6px 10px; border: 1px dashed var(--edge); border-radius: 8px; font-size: 13px; color: var(--ink-faint); }
.stage-bar.has { border: 1px solid #8fd0ff; background: rgba(60, 120, 170, 0.16); color: var(--ink-dim); }
.stage-bar .stage-text { flex: 1 1 220px; min-width: 0; } .stage-bar b { color: var(--ink-dim); } .stage-bar.has b { color: #8fd0ff; } .stage-bar small { display: block; color: var(--ink-faint); font-size: 12px; }
.stage-bar .grow { flex: 0 0 0; } .stage-bar button:disabled { opacity: 0.4; cursor: default; } .stage-bar button.primary.small { width: auto; }
.pf-stage .stage-bar { margin-bottom: 6px; }
.pf-points .pf-staged { font-style: normal; color: #8fd0ff; }
.tvt-node.staged { border: 2px dashed #8fd0ff; background: linear-gradient(180deg, rgba(50, 90, 130, 0.6), rgba(24, 44, 66, 0.6)); cursor: pointer; }
.tvt-tick.staged { color: #8fd0ff; }
.tvt-tier.spent .tvt-node.open { opacity: 1; }