/* Card hunt: HUD pill, panel, found-cards showcase, reveal, team controls. */
/* Card Hunt keeps its own dark navy/lilac pack identity. A slim gold accent and very occasional glint give it a little
   prize energy without turning it into another Blitz/Island travel capsule. */
.hunt-pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box; height: 34px; padding: 0 12px 0 7px; border-radius: 11px; background: linear-gradient(180deg, rgba(25, 38, 91, 0.96), rgba(6, 12, 40, 0.97)); border: 1.5px solid rgba(196, 139, 255, 0.68); color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap; cursor: pointer; pointer-events: auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 0 #040a28, 0 0 8px rgba(179, 107, 255, 0.18); text-shadow: 0 1px 0 #000; }
.hunt-pill::before { content: ""; position: absolute; z-index: -1; left: 9px; right: 9px; bottom: 0; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(196, 139, 255, 0.68), rgba(255, 210, 63, 0.62), transparent); }
.hunt-pill::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 22px; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.2), transparent); transform: translateX(-42px) skewX(-20deg); animation: huntGlint 12s 1.2s ease-in-out infinite; }
/* The taller sealed pack is the feature's visual anchor, as it was before the premium HUD pass. */
.hunt-pill i { position: relative; flex: none; display: grid; place-items: center; width: 22px; height: 36px; margin: -5px 1px -5px -4px; }
.hunt-pill i img { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.62)) drop-shadow(0 0 3px rgba(196, 139, 255, 0.24)); }
.hunt-pill > span { display: block; line-height: 1; }
.hunt-pill b { color: var(--gold); font-family: var(--display); font-weight: 400; font-size: 18px; font-variant-numeric: tabular-nums; text-shadow: 0 2px 0 #000a2e, 0 0 10px rgba(255, 210, 63, 0.32); }
.hunt-pill[hidden] { display: none; }
.hunt-pill:hover { border-color: #d9b7ff; filter: brightness(1.08); }
.hunt-pill:active { translate: 0 1px; }
.hunt-pill.pulse { animation: huntPulse 1.2s ease-out 3; }
@keyframes huntGlint { 0%, 88% { transform: translateX(-42px) skewX(-20deg); } 100% { transform: translateX(290px) skewX(-20deg); } }
/* The live hunt (real cards hidden right now): a green edge and a live dot (hunt-ui.js huntPhase "live"). */
.hunt-pill.live { border-color: #4fe08a; }
.hunt-pill.live i::after { content: ""; position: absolute; right: -3px; top: -2px; width: 6px; height: 6px; border-radius: 50%; background: #4fe08a; box-shadow: 0 0 6px #4fe08a; animation: huntLive 1.6s ease-in-out infinite; }
@keyframes huntLive { 50% { opacity: 0.35; } }
/* Drop time (hunt-ui.js updateBadge, launchPack): how many packs are still to come out of the pill, on its pack; the pack
   gives a small shake now and then while they're being hidden, and a kick as each one flies out. */
.hunt-pill i em { position: absolute; right: -9px; bottom: -3px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; border-radius: 8px; background: var(--gold); color: #0a1440; font: 700 11px/15px system-ui, sans-serif; font-style: normal; text-align: center; box-shadow: 0 1px 0 #000a2e; }
.hunt-pill i em[hidden] { display: none; }
.hunt-pill.hiding i img { animation: huntShake 2.4s ease-in-out infinite; }
.hunt-pill.kick i img { animation: huntKick 0.32s ease-out; }
/* The league packs' line under the clock (hunt-ui.js leagueLine; owner, 2026-10-16: "keep both", "make it clear if i can
   do the league drop or not"): smaller, gold with a key, pale without. */
.hunt-pill.lg, .hud-tr .hunt-pill.lg { height: auto; min-height: 32px; padding-top: 5px; padding-bottom: 6px; }
.hunt-pill small.hunt-lg { display: block; margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.1; color: #c9cff5; }
.hunt-pill small.hunt-lg.key { color: #ffe08a; }
.hunt-pill small.hunt-lg b { display: inline; margin: 0; font-size: inherit; color: #fff; text-shadow: none; }
.hunt-pill small.hunt-lg.key b { color: var(--gold); }
@keyframes huntShake { 0%, 72%, 100% { transform: rotate(-8deg); } 78% { transform: rotate(-17deg); } 84% { transform: rotate(2deg); } 90% { transform: rotate(-13deg); } 95% { transform: rotate(-5deg); } }
@keyframes huntKick { 40% { transform: rotate(-8deg) translateY(-3px) scale(1.18); } }
/* A pack on its way out into the world (one per pack hidden; .ghost: its trail), and the twinkle as it vanishes. */
.hunt-fly { position: fixed; left: 0; top: 0; z-index: 8; display: block; pointer-events: none; will-change: transform, opacity; }
.hunt-fly img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.75)) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.55)); }
.hunt-fly.ghost img { filter: none; }
.hunt-twinkle { position: fixed; z-index: 8; width: 0; height: 0; pointer-events: none; }
.hunt-twinkle::before, .hunt-twinkle::after { content: ""; position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0); }
.hunt-twinkle::before { width: 34px; height: 34px; background: radial-gradient(circle, #fff 0 8%, #ffd23f 9% 22%, transparent 23%), conic-gradient(from 0deg, transparent 0 40deg, #fff6c8 45deg, transparent 50deg 130deg, #fff6c8 135deg, transparent 140deg 220deg, #fff6c8 225deg, transparent 230deg 310deg, #fff6c8 315deg, transparent 320deg); border-radius: 50%; animation: huntTwinkle 0.7s ease-out forwards; }
.hunt-twinkle::after { width: 26px; height: 26px; border: 2px solid rgba(255, 210, 63, 0.9); border-radius: 50%; animation: huntRing 0.7s ease-out forwards; }
@keyframes huntTwinkle { 30% { transform: translate(-50%, -50%) scale(1.25) rotate(25deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0.2) rotate(70deg); opacity: 0; } }
@keyframes huntRing { 0% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; } }
@keyframes huntPulse { 0% { box-shadow: 0 0 0 0 rgba(179, 107, 255, 0.8); } 100% { box-shadow: 0 0 0 14px rgba(179, 107, 255, 0); } }
#chatLog p.m-hunt { color: #e3c2ff; font-weight: 700; }
/* A card hunt hint on screen (hunt-ui.js hintPop): a pack's area as you walk in, or one very close, for 5 s above the hero,
   as well as in the chat (a closed chat hid them). Clicks go through to the map. */
.hud > .hunt-hint { position: absolute; left: 50%; top: 33%; z-index: 9; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: max-content; max-width: min(600px, calc(100vw - 24px)); padding: 8px 18px 9px 10px; border-radius: 12px; background: linear-gradient(180deg, rgba(25, 38, 91, 0.96), rgba(6, 12, 40, 0.97)); border: 2px solid rgba(196, 139, 255, 0.85); box-shadow: 0 0 18px rgba(179, 107, 255, 0.45), 0 3px 0 #040a28; color: #fff; text-shadow: 0 1px 0 #000; pointer-events: none; opacity: 0; visibility: hidden; transform: translate(-50%, -10px); transition: opacity 0.25s, transform 0.25s, visibility 0s linear 0.25s; }
.hud > .hunt-hint.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.hunt-hint i { flex: none; display: grid; place-items: center; width: 26px; height: 40px; font-size: 24px; font-style: normal; line-height: 1; }
.hunt-hint i img { display: block; width: 100%; height: 100%; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6)); }
.hunt-hint b { display: block; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.15; color: var(--gold); }
.hunt-hint small { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; color: #e3c2ff; }
.hunt-hint.k-near { border-color: var(--gold); box-shadow: 0 0 22px rgba(255, 210, 63, 0.55), 0 3px 0 #040a28; }
@media (max-width: 760px), (max-height: 500px) { .hud > .hunt-hint { top: 24%; } .hunt-hint b { font-size: 17px; } .hunt-hint small { font-size: 13px; } }
/* Desktop: at the top centre, right under the "N online" counter (owner, 2026-10-03: "on desktop put the card countdown
   under the online, on the middle so it pops more"). Under the online list when that's open (.hud-tl
   is z 7); the area banner and the team's announcements drop below it. Phones have it under the left Level box. */
@media (min-width: 761px) and (min-height: 501px) {
  .hud-tr .hunt-pill { position: fixed; left: 50%; top: 44px; z-index: 6; transform: translateX(-50%); }
  .area-banner { top: 92px; }
  .hud:is(.fold-quests, .hide-drop) .area-banner { top: 44px; } /* no clock (hud-pick.js ticks, ui.js foldHud): up to where it sat, under "N online" (it ends at 37), or with the vote button up under that (its 40 px of room, awards-campaign.css) */
  .hud:is(.fold-quests, .hide-drop) .quest-banner { top: 116px; } /* …and "New quest" under the name (65 px tall): both can come up as the World opens */
  .announce-bar { top: 90px; }
}
/* …and with the league line under its clock (.lg, hunt-ui.js leagueLine), what hangs under it moves down by that line;
   phones keep enough room below the left Level box. */
@media (min-width: 761px) and (min-height: 501px) {
  body:has(.hud:not(.fold-quests, .hide-drop) #huntPill.lg:not([hidden])) .quest-banner { top: 108px; }
  body:has(.hud:not(.fold-quests, .hide-drop) #huntPill.lg:not([hidden])) .announce-bar { top: 112px; }
  body:has(.hud:not(.fold-quests, .hide-drop) #huntPill.lg:not([hidden])) .area-banner { top: 114px; }
  body:has(.hud:not(.fold-quests, .hide-drop) #huntPill.lg:not([hidden])) .hud-tr .xlive-box { top: 104px; }
}
@media (min-width: 900px) and (min-height: 501px) { body:has(.hud:not(.fold-quests, .hide-drop) #huntPill.lg:not([hidden])) .hud-tr .xlive-box { top: 110px; } }
/* The banners at the top (the team's announcement, ZAZA's new X post, ZAZA RADIO's song: world.css .hud-bars) hang under
   the clock, and its league line, where the announcement sat before them; folded or with no clock they go up to 44 px
   (owner, 2026-11-03: "the radio text of the music still displaying over the next drop countdown on desktop... should be
   well under that"). */
@media (min-width: 761px) and (min-height: 501px) {
  body:has(.hud:not(.fold-quests, .hide-drop) #huntPill:not([hidden])) .hud > .hud-bars { top: 90px; }
  body:has(.hud:not(.fold-quests, .hide-drop) #huntPill.lg:not([hidden])) .hud > .hud-bars { top: 112px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .hud:not(.fold-quests, .hide-drop) .hud-panel:has(> .hud-under > .hunt-pill:not([hidden])) { --clock-space: 38px; }
  .hud:not(.fold-quests, .hide-drop) .hud-panel:has(> .hud-under > .hunt-pill.lg:not([hidden])) { --clock-space: 64px; }
  .hud-panel.clock-under:not(.is-minimized) > .hud-under { right: auto; width: calc(50% + 2px); }
  .hud-panel.clock-under:not(.is-minimized) > .hud-under:has(> .hero-xp:not([hidden])) { right: -2px; width: auto; }
}
/* … a size up where there's room; a size down on narrow windows, clear of the ZAZA box (264 px from the left). */
@media (min-width: 900px) and (min-height: 501px) {
  .hud-tr .hunt-pill { height: 38px; gap: 8px; padding-right: 15px; font-size: 17px; }
  .hud-tr .hunt-pill i { width: 25px; height: 41px; }
  .hud-tr .hunt-pill i img { width: 100%; }
  .hud-tr .hunt-pill b { font-size: 21px; }
}
@media (min-width: 761px) and (max-width: 899px) and (min-height: 501px) {
  .hud-tr .hunt-pill { font-size: 14px; }
  .hud-tr .hunt-pill b { font-size: 19px; }
}
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .hunt-pill { height: 26px; gap: 5px; padding: 0 9px 0 6px; border-width: 1px; border-radius: 9px; font-size: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 0 #040a28, 0 0 5px rgba(179, 107, 255, 0.14); }
  .hunt-pill::before { left: 7px; right: 7px; height: 1px; }
  .hunt-pill i { width: 17px; height: 28px; margin: -4px 1px -4px -3px; }
  .hunt-pill i img { width: 100%; }
  .hunt-pill b { font-size: 15px; }
  /* A clock goes under its words ("Next drop in" / 3d 22h 03m 12s): half as wide (owner, 2026-10-05). */
  .hunt-pill.timer { height: auto; min-height: 26px; padding: 3px 9px 3px 6px; }
  .hunt-pill.timer > span { font-size: 11px; }
  .hunt-pill.timer b { display: block; margin-top: 2px; font-size: 16px; }
  .hunt-pill.lg { padding-bottom: 4px; }
  .hunt-pill small.hunt-lg { margin-top: 3px; font-size: 10px; white-space: normal; }
  /* The stack under the Level box keeps two lines (owner, 2026-11-07, circling them: "format better"): ZAZA's ring, the
     hero's Lv, the pack and the trophy all centred on one, and the words starting on the other. */
  .hud-under .hunt-pill { justify-content: flex-start; width: 100%; padding-left: 7px; text-align: left; }
  .hud-under .hunt-pill i { width: 28px; margin-inline: 0; }
  .hud-under .hunt-pill i img { width: 17px; }
  /* Every state stands as the clock does, the words over the big line: "Hiding cards… Get ready!" ran off the card's end. */
  .hud-under .hunt-pill:not(.live) { height: auto; min-height: 26px; padding-block: 3px; }
  .hud-under .hunt-pill:not(.live) > span { font-size: 11px; }
  .hud-under .hunt-pill:not(.live) > span > b { display: block; margin-top: 2px; font-size: 16px; }
  .hud:not(.fold-quests, .hide-drop) .hud-panel:has(> .hud-under > .hunt-pill:not([hidden])) { --clock-space: 38px; }
  .hud:not(.fold-quests, .hide-drop) .hud-panel:has(> .hud-under > .hunt-pill.lg:not([hidden])) { --clock-space: 64px; }
}
/* Title screen (hunt-ui.js titleLine): three sealed ZAZA World packs fanned out over turning gold rays and twinkles, the
   middle one bobbing, beside the countdown in four gold tiles (days, hrs, min, sec), or the real cards left. Owner,
   2026-10-07: "instead of showing cards on the pokemon countdown, show gacha packs, and make the countdown even cooler
   and make it pop more". */
.title-hunt { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px 10px 8px; border-radius: 14px; background: radial-gradient(120% 150% at 14% 50%, #5c26b8 0%, #2c1274 38%, #0e1450 78%); border: 2px solid #c48bff; color: #fff; box-shadow: 0 0 0 3px #000a2e, 0 0 26px rgba(179, 107, 255, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.title-hunt[hidden] { display: none; }
.title-hunt::before { content: ""; position: absolute; z-index: -1; left: 66px; top: 50%; width: 640px; height: 640px; margin: -320px 0 0 -320px; pointer-events: none; background: repeating-conic-gradient(rgba(255, 210, 63, 0.2) 0 6deg, transparent 6deg 18deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 30%); mask-image: radial-gradient(circle, #000 0, transparent 30%); animation: hxSpin 50s linear infinite; }
.title-hunt::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(1.5px 1.5px at 8% 20%, #fff, transparent), radial-gradient(2px 2px at 26% 84%, #ffe27a, transparent), radial-gradient(1.5px 1.5px at 58% 12%, #e3c2ff, transparent), radial-gradient(2px 2px at 94% 26%, #ffe27a, transparent), radial-gradient(1.5px 1.5px at 84% 88%, #fff, transparent); animation: hxTwinkle 3.2s ease-in-out infinite; }
.title-hunt-packs { position: relative; flex: none; width: 116px; height: 92px; }
.title-hunt-packs img { position: absolute; left: 39px; top: 4px; width: 38px; height: auto; transform-origin: 50% 120%; filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)); }
.title-hunt-packs img:nth-child(1) { transform: translateX(-24px) rotate(-17deg); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)) brightness(0.85) hue-rotate(-24deg); }
.title-hunt-packs img:nth-child(3) { transform: translateX(24px) rotate(17deg); filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6)) brightness(0.85) hue-rotate(205deg); }
.title-hunt-packs img:nth-child(2) { z-index: 1; left: 33px; top: -2px; width: 50px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 12px rgba(255, 210, 63, 0.6)); animation: thBob 2.8s ease-in-out infinite; }
@keyframes thBob { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
.title-hunt > span { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.title-hunt small { font: 400 17px/1.1 var(--display); color: #fff; text-shadow: 0 2px 0 #000a2e; }
.title-hunt strong { font: 400 22px/1.15 var(--display); color: var(--gold); text-shadow: 0 3px 0 #000a2e, 0 0 16px rgba(255, 210, 63, 0.45); }
.title-hunt strong em { font-style: normal; font-size: 30px; color: #7dffa0; }
.title-hunt[data-phase="live"] { border-color: #4fe08a; }
.th-clock { display: flex; gap: 6px; }
.th-clock i { display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 6px 4px 4px; box-sizing: border-box; border-radius: 10px; font-style: normal; background: linear-gradient(180deg, #23136a, #0b0a33); border: 1.5px solid rgba(196, 139, 255, 0.75); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 3px 0 #000a2e; }
.th-clock em { font: 400 30px/1 var(--display); font-style: normal; color: var(--gold); text-shadow: 0 2px 0 #8a6410, 0 0 14px rgba(255, 210, 63, 0.55); font-variant-numeric: tabular-nums; }
.th-clock s { margin-top: 3px; text-decoration: none; font-size: 14px; line-height: 1; color: #d3c2ff; }
@media (max-width: 480px) { /* phones: the fan and the tiles a size down, side by side from 320 px */
  .title-hunt { gap: 6px; padding: 8px 8px 8px 4px; }
  .title-hunt::before { left: 50px; }
  .title-hunt-packs { width: 86px; height: 76px; }
  .title-hunt-packs img { left: 29px; width: 29px; }
  .title-hunt-packs img:nth-child(1) { transform: translateX(-18px) rotate(-17deg); }
  .title-hunt-packs img:nth-child(3) { transform: translateX(18px) rotate(17deg); }
  .title-hunt-packs img:nth-child(2) { left: 24px; width: 38px; }
  .title-hunt small { font-size: 15px; }
  .title-hunt strong { font-size: 18px; }
  .th-clock { gap: 4px; }
  .th-clock i { min-width: 0; width: min(50px, calc((100vw - 214px) / 4)); padding: 5px 2px 3px; border-radius: 8px; }
  .th-clock em { font-size: min(24px, calc((100vw - 214px) / 6.6)); }
  .th-clock s { font-size: 12px; }
}
@media (max-width: 350px) { /* the smallest phones: the side packs tuck in behind the middle one */
  .title-hunt-packs { width: 54px; }
  .title-hunt-packs img { left: 12px; }
  .title-hunt-packs img:nth-child(1) { transform: translateX(-9px) rotate(-14deg); }
  .title-hunt-packs img:nth-child(3) { transform: translateX(9px) rotate(14deg); }
  .title-hunt-packs img:nth-child(2) { left: 8px; }
  .title-hunt::before { left: 34px; }
  .th-clock i { width: calc((100vw - 182px) / 4); }
  .th-clock em { font-size: calc((100vw - 182px) / 6.6); }
}
.tut-soon b { color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 19px; }

/* The tutorial's card-hunt numbers (the window has its own, .hx-stats below). */
.hunt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.hunt-stats > div { background: rgba(20, 16, 50, 0.7); border: 1.5px solid #3a3470; border-radius: 10px; padding: 8px; text-align: center; }
.hunt-stats b { display: block; font-size: 24px; color: #ffd23f; }
.hunt-stats span { font-size: 13px; opacity: 0.85; }
.hunt-note, .hunt-bot { font-size: 14px; margin: 6px 0; }

/* ---------- The card hunt window (hunt-ui.js render): the website's look with a touch of RuneScape (owner, 2026-10-10:
   "improve this layout.. make it fit well with the rest of website.. and still keep a touch of runescape"). The spotlight
   hero stays as it was (rays turning behind the sealed pack and two real cards, the gold Titan One title, the LIVE chip),
   with its brass trim. Under it every part is a card from the website (/hunt/ .stat and .find): navy with a thin edge,
   Titan One names and numbers, worth in gold, chips as pills, calm light words. RuneScape stays as ornament: brass studs
   on the corners of the window's panels, section names in RuneScape orange, the found-cards count as a gold pill, the
   clue riddles on parchment, and the found cards set in a sunken board. Your hunt is one card (your state and clock, the
   drop you hunt in next, your pulls beside it); the three numbers and the vault meter are one row of four tiles (two by
   two on phones); each found card is the website's, its slab in a pit glowing in its rarity's colour, the most valuable
   wearing a gold Top pull plate. A mouse tilts the slab and runs a holo shine over it, and a tap plays its pull
   (/hunt/reveal.js). Labels sit around the card pictures, never on them (only the hover hint). */
.modal-x { z-index: 3; } /* above any popup's own header art, like the card hunt's hero below */
.modal-backdrop:has(> .hunt-modal) { background: radial-gradient(ellipse at 50% 12%, rgba(42, 67, 166, 0.5), rgba(2, 5, 26, 0.88) 68%); backdrop-filter: blur(3px); }
.modal.hunt-modal { border: 2px solid #d9ac31; border-radius: 18px; background: radial-gradient(ellipse 90% 36% at 50% 0, rgba(92, 51, 188, 0.34), transparent 76%), linear-gradient(180deg, #111b51, #080f36 58%, #060c2d); box-shadow: inset 0 0 0 1px rgba(255, 244, 180, 0.22), 0 0 0 3px #03081f, 0 22px 70px rgba(0, 0, 0, 0.72), 0 0 36px rgba(179, 107, 255, 0.24); scrollbar-color: #d9ac31 #091039; }
.modal.hunt-modal > .modal-x { top: 10px; right: 10px; width: 34px; height: 34px; border: 1px solid #ffcf5a; border-radius: 50%; background: linear-gradient(180deg, #b9364a, #711f35); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #250510; }
.modal {
  --hx-stud: radial-gradient(circle at 42% 38%, #fff6c8 0 1px, #ffd23f 1.4px 2.4px, #b07d12 2.6px 3.6px, #2a1a00 3.8px 4.6px, transparent 5px);
  --hx-studs: var(--hx-stud) left 3px top 3px / 10px 10px no-repeat, var(--hx-stud) right 3px top 3px / 10px 10px no-repeat, var(--hx-stud) left 3px bottom 3px / 10px 10px no-repeat, var(--hx-stud) right 3px bottom 3px / 10px 10px no-repeat;
  --hx-card: linear-gradient(180deg, #1a2663, #141e52); /* the website's card (/hunt/ --card-2 → --card) */
  --hx-edge: #34468a;
  --hx-line: rgba(124, 142, 214, 0.28);
  --hx-soft: #bcc5ea;
}
.hx-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 22px; margin: -22px -22px 16px; padding: 24px 56px 24px 30px; background: radial-gradient(120% 150% at 16% 50%, #5626bd 0%, #251672 34%, #0b154d 70%); border-bottom: 3px solid #8a6410; box-shadow: inset 0 -1px 0 #ffe066, inset 0 -30px 40px -30px rgba(0, 0, 0, 0.6); }
.hx-rays { position: absolute; left: 13%; top: 50%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; pointer-events: none; background: repeating-conic-gradient(rgba(190, 140, 255, 0.17) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 46%); mask-image: radial-gradient(circle, #000 0, transparent 46%); animation: hxSpin 80s linear infinite; }
.hx-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(1.5px 1.5px at 62% 22%, #fff, transparent), radial-gradient(1.5px 1.5px at 84% 70%, #ffe27a, transparent), radial-gradient(2px 2px at 92% 18%, #e3c2ff, transparent), radial-gradient(1.5px 1.5px at 40% 84%, #fff, transparent), radial-gradient(2px 2px at 6% 16%, #ffe27a, transparent); animation: hxTwinkle 3.2s ease-in-out infinite; }
.hx-art { position: relative; z-index: 1; flex: none; width: 168px; height: 176px; }
.hx-pack { position: absolute; left: 36px; top: 0; z-index: 1; width: 100px; height: auto; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 24px rgba(255, 210, 63, 0.4)); animation: hxBob 3.2s ease-in-out infinite; }
.hx-fan { position: absolute; top: 34px; width: 78px; height: auto; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.55); }
.hx-fan.a { left: 0; transform: rotate(-17deg); }
.hx-fan.b { right: 0; transform: rotate(15deg); }
.hx-head { position: relative; z-index: 1; min-width: 0; }
.hx-eyebrow { display: block; margin-top: 9px; color: #82d9ff; font: 700 12px/1.1 var(--ui); letter-spacing: 0.16em; text-transform: uppercase; text-shadow: 0 1px 0 #000; }
.hx-phase { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.hx-phase small { font-size: 15px; color: #c9c0f5; }
.modal .hx-head h2 { margin: 8px 0 8px; font-size: 46px; line-height: 1; letter-spacing: 0.01em; color: var(--gold); text-shadow: 3px 3px 0 #000a2e, 0 0 26px rgba(255, 210, 63, 0.5); }
.modal .hx-head p { margin: 0; max-width: 540px; font-size: 17px; line-height: 1.35; color: #ddd6ff; }
.hx-promise { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.hx-promise span { display: inline-flex; align-items: center; height: 27px; padding: 0 10px; border: 1px solid rgba(127, 212, 255, 0.38); border-radius: 999px; background: rgba(5, 17, 65, 0.58); color: #eef6ff; font-size: 14px; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.hx-promise .hx-i { width: 14px; height: 14px; margin-right: 5px; color: var(--gold); }
/* The window's line icons (hunt-ui.js ico): the site's .ico style, in the colour of the words around them. */
.hx-i { flex: none; width: 1.1em; height: 1.1em; margin-right: 0.35em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hx-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; box-sizing: border-box; padding: 0 12px; border-radius: 999px; background: rgba(179, 107, 255, 0.2); border: 1.5px solid #b36bff; color: #fff; font-size: 17px; line-height: 1; white-space: nowrap; }
.hx-chip b { font-size: 21px; font-variant-numeric: tabular-nums; }
.hx-chip.live { background: rgba(20, 70, 50, 0.55); border-color: #4fe08a; color: #c9ffdc; letter-spacing: 0.02em; }
.hx-chip.live b { color: #fff; }
.hx-chip .hx-i { margin: 0; }
.hx-emo { flex: none; display: inline-block; margin-right: 0.35em; font-size: 1.1em; font-style: normal; line-height: 1; vertical-align: -0.12em; }
.hx-chip .hx-emo { margin: 0; }
.hx-chip.live i { width: 9px; height: 9px; border-radius: 50%; background: #4fe08a; animation: hxPing 1.6s ease-out infinite; }

/* Your hunt (hunt-ui.js mineHTML), right under the hero: one navy card with a faint gold trim, pinned with four studs.
   Where you stand in RuneScape orange and white, a ring that fills as your cooldown (or your first half hour of play)
   runs out, your own clock in gold, the drop you can hunt in next on a gold note, and your pulls beside it (under it on
   phones) as small cards in their rarity's colour; a tap on one plays it again. The ring's colour says the state (purple
   cooldown, green ready, blue play, grey locked). */
.hx-mine { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px 22px; margin: 0 0 12px; padding: 16px 20px 18px; border-radius: 12px; border: 1px solid var(--hx-edge); color: #fff; background: var(--hx-studs), var(--hx-card); box-shadow: inset 0 0 0 1px rgba(255, 210, 63, 0.14), inset 0 2px 0 rgba(255, 255, 255, 0.06), 0 3px 0 #000a2e; }
.hx-mine.solo { grid-template-columns: minmax(0, 1fr); }
.hy-state { align-self: center; display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.hy-ring { --p: 0; --c: #b36bff; position: relative; flex: none; display: grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--p) * 1turn), rgba(3, 10, 44, 0.9) 0); box-shadow: 0 0 0 1px var(--hx-edge), 0 0 18px color-mix(in srgb, var(--c) 35%, transparent); }
.hy-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2c3d8c, #0d1546 74%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 -4px 8px rgba(0, 0, 0, 0.35); }
.hy-ring i { position: relative; display: grid; color: var(--c); filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.5)); }
.hy-ring .hx-i { width: 32px; height: 32px; margin: 0; stroke-width: 2.4; }
.k-ready .hy-ring { --c: #4fe08a; }
.k-play .hy-ring { --c: #4fb3ff; }
.k-hold .hy-ring { --c: var(--gold); }
.k-lock .hy-ring, .k-team .hy-ring, .k-signin .hy-ring, .k-off .hy-ring { --c: #8d9ac8; }
.hy-main { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.hy-kick { font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rs-orange); text-shadow: 1px 1px 0 #000; }
.hy-head { font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 1.1; color: #fff; text-shadow: 0 2px 0 #000a2e; }
.hy-clock { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1.05; color: var(--gold); text-shadow: 0 2px 0 #000a2e, 0 0 16px rgba(255, 210, 63, 0.3); font-variant-numeric: tabular-nums; }
.hy-sub { font-size: 16px; color: var(--hx-soft); }
.modal .hy-next { margin: 8px 0 0; padding: 7px 12px; border-radius: 10px; border: 1px solid rgba(255, 210, 63, 0.45); background: rgba(255, 210, 63, 0.1); font-size: 17px; line-height: 1.3; color: #eef1ff; text-wrap: balance; }
.hy-next b { color: var(--gold); font-weight: 400; white-space: nowrap; }
.hy-next .hx-i { color: var(--gold); }
.modal .hy-text { margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--muted); }
/* Your hunt's League pack box (hunt-ui.js leagueBox): can you hunt the league pack, in a word, then why. */
.hy-lg { align-self: stretch; margin: 10px 0 0; padding: 9px 12px 10px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); border-left-width: 4px; background: rgba(255, 255, 255, 0.05); }
.hy-lg.is-yes { border-color: #4fe08a; background: rgba(79, 224, 138, 0.1); }
.hy-lg.is-wait { border-color: var(--gold); background: rgba(255, 210, 63, 0.1); }
.hy-lg.is-no { border-color: #ff7a6b; background: rgba(255, 122, 107, 0.08); }
.hy-egg .hy-eggs { display: inline-block; margin-top: 4px; padding: 0; font-size: 15px; } /* 🥚 Your eggs (hunt-ui.js eggBox): the Bag */
.hy-lg-head { display: block; font-family: "Titan One", system-ui, sans-serif; font-weight: 400; font-size: 17px; color: #fff; }
.modal .hy-lg p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: #dfe4ff; }
.hy-lg p b { color: var(--gold); font-weight: 700; }
.hy-go { margin-top: 10px; }
.hy-pulls { min-width: 0; padding-left: 22px; border-left: 1px solid var(--hx-line); }
.hy-pulls-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; margin-bottom: 10px; }
.hy-pulls-head strong { font-family: var(--display); font-weight: 400; font-size: 20px; color: #fff; text-shadow: 0 2px 0 #000a2e; }
.hy-pulls-head span { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; line-height: 1; color: var(--hx-soft); white-space: nowrap; }
/* The money pops (owner, 2026-10-11: "make the money given pop out more"): every card's worth, and your pulls' total,
   on the website's gold plate (as the Top pull crown and the order switch), navy Titan One on gold. */
.hy-pulls-head span b, .hy-pull b, .hx-val { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 28px; padding: 0 11px; border-radius: 99px; background: linear-gradient(180deg, #ffe680, var(--gold) 55%, var(--gold-2)); color: var(--navy-900); font-family: var(--display); font-weight: 400; font-size: 19px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); box-shadow: inset 0 0 0 1px #fff3b0, 0 2px 0 var(--gold-dark), 0 0 14px rgba(255, 210, 63, 0.45); }
.hy-pulls-head span b { height: 26px; font-size: 18px; }
.hy-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px 8px; }
.hy-pull { --c: #8d9ac8; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 6px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 50%, #2c3b78); background: radial-gradient(70% 45% at 50% 34%, color-mix(in srgb, var(--c) 32%, transparent), transparent 75%), rgba(3, 10, 44, 0.6); color: #fff; text-align: center; box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c) 65%, transparent), 0 3px 0 #000a2e; transition: transform 0.15s ease, border-color 0.15s; }
.hy-pull:hover { transform: translateY(-2px); border-color: var(--c); }
.hy-pull:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hy-pull.r-uncommon { --c: #4fb3ff; }
.hy-pull.r-rare { --c: #b36bff; }
.hy-pull.r-epic { --c: #ffd23f; }
.hy-pic { display: block; width: 100%; aspect-ratio: 3 / 5; margin-bottom: 5px; }
.hy-pic img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55)); }
.hy-pic .hunt-noimg { height: 100%; font-size: 28px; }
.hy-pull b { max-width: 100%; margin: 2px 0 4px; padding: 0 9px; }
.hy-pull small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 1.25; color: var(--muted); }
.modal .hy-none { margin: 0; font-size: 15px; line-height: 1.35; color: var(--muted); }
.hy-all { margin-top: 8px; font-size: 15px; }
.hx-mine .hy-all { color: var(--cyan); }
/* The same in one line in the Card collection tab (mineLine): a tap opens the card hunt window. */
.hy-line { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; box-sizing: border-box; margin: 2px 0 10px; padding: 8px 12px; border-radius: 10px; background: linear-gradient(90deg, rgba(179, 107, 255, 0.24), rgba(179, 107, 255, 0.05)); border: 1.5px solid rgba(179, 107, 255, 0.6); color: #fff; font-size: 15px; line-height: 1.3; text-align: left; }
.hy-line.k-ready { background: linear-gradient(90deg, rgba(79, 224, 138, 0.2), rgba(79, 224, 138, 0.04)); border-color: rgba(79, 224, 138, 0.6); }
.hy-line.k-lock { background: rgba(141, 154, 200, 0.12); border-color: rgba(141, 154, 200, 0.5); }
.hy-line.k-hold { background: rgba(255, 210, 63, 0.1); border-color: rgba(255, 210, 63, 0.55); }
.hy-line [data-hunt-mine] { color: var(--gold); font-variant-numeric: tabular-nums; }
.hy-line small { font-size: 13.5px; color: #c3bdf0; }
.hy-line small b { color: var(--gold); font-weight: 400; }

/* The numbers and the vault meter, one row of four tiles as on the website (/hunt/ .stat): navy with a thin edge, the
   number in Titan One (white, the value in gold) over a calm light word, sized to fit its tile (--n: its width in
   digits, hunt-ui.js fitN), and the vault's tile with the website's smooth gold bar under its words. The brass studs
   stay so the tiles still belong to the window (owner, 2026-10-10: "make this part a bit easier to read more like the
   website"). */
.hx-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 10px; margin: 0 0 18px; }
.hx-stats:not(:has(.hx-vault)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr); }
.hx-stat { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px 13px 16px; border-radius: 10px; border: 1px solid var(--hx-edge); background: var(--hx-studs), var(--hx-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 #000a2e; }
.hx-stat > div { flex: 1 1 0; min-width: 0; container-type: inline-size; }
.hx-ico { flex: none; display: grid; place-items: center; width: 30px; height: 44px; font-style: normal; font-size: 27px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.5)); }
.hx-ico img { width: 100%; height: auto; }
.hx-ico img.card { width: 30px; border-radius: 3px; transform: rotate(-8deg); }
.hx-ico .hx-i { width: 32px; height: 32px; margin: 0; color: var(--gold); fill: rgba(255, 210, 63, 0.25); filter: drop-shadow(0 0 6px rgba(255, 210, 63, 0.35)); }
.hx-ico .i-bolt { fill: currentColor; }
.hx-stat b { display: block; font-family: var(--display); font-weight: 400; font-size: min(var(--num, 30px), 100cqi / (var(--n, 4) * 0.66)); line-height: var(--num, 30px); color: #fff; text-shadow: 0 2px 0 #000a2e; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The money given away: the brightest tile in the row (gold edge, a warm glow behind the gem, a light sweeping over it
   now and then), its number a size up in glowing gold. */
.hx-stat.value { position: relative; overflow: hidden; border-color: var(--gold); background: var(--hx-studs), radial-gradient(80% 130% at 14% 50%, rgba(255, 210, 63, 0.32), transparent 70%), linear-gradient(180deg, #2b2a6c, #1a1f57); box-shadow: inset 0 1px 0 rgba(255, 240, 180, 0.4), inset 0 0 0 1px rgba(255, 210, 63, 0.3), 0 3px 0 #000a2e, 0 0 22px rgba(255, 210, 63, 0.35); }
.hx-stat.value::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 200, 0.28) 50%, transparent 62%) no-repeat; background-size: 250% 100%; animation: hxGleam 5s ease-in-out infinite; }
.hx-stat.value b { --num: 36px; color: var(--gold); text-shadow: 0 2px 0 #8a6410, 0 3px 0 #000a2e, 0 0 18px rgba(255, 210, 63, 0.65); }
.hx-stat.value span { color: #ffe9a8; }
/* The gem's box is as wide as the gem, so it never spills onto the number (a phone showed it touching the "$"). */
.hx-stat.value .hx-ico { width: 36px; }
.hx-stat.value .hx-ico .hx-i { width: 36px; height: 36px; fill: rgba(255, 210, 63, 0.4); filter: drop-shadow(0 0 9px rgba(255, 210, 63, 0.7)); }
.hx-stat span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.1; color: var(--hx-soft); text-wrap: balance; }
.hx-stat .hx-bar { height: 8px; margin-top: 8px; border-radius: 99px; background: rgba(255, 210, 63, 0.16); overflow: hidden; }
.hx-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 10px rgba(255, 210, 63, 0.45); transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }

.modal .hx-note { margin: 0 0 10px; font-size: 16px; color: #e3c2ff; }

/* Found cards: the name in RuneScape orange, the count as a gold pill (as Your pulls' count), the order as the website's pill switch
   (gold when on). */
.hx-found-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 4px; }
.modal .hx-found-head h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--rs-orange); text-shadow: 2px 2px 0 #000; }
.hx-count { display: inline-flex; align-items: center; gap: 6px; height: 30px; box-sizing: border-box; padding: 0 12px 0 9px; border-radius: 99px; border: 1px solid rgba(255, 210, 63, 0.5); background: rgba(255, 210, 63, 0.1); color: var(--gold); font-family: var(--display); font-size: 18px; line-height: 1; text-shadow: 0 2px 0 #000a2e; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.hx-count .hx-i { width: 17px; height: 17px; margin: 0; stroke-width: 2.2; filter: drop-shadow(0 2px 0 #000a2e); }
.hx-sort { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; border: 1px solid #2c3b78; background: rgba(3, 10, 44, 0.6); }
.hx-sort button { display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 99px; border: 0; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; transition: background 0.12s, color 0.12s; }
.hx-sort button:hover { color: #fff; }
.hx-sort button.on { background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); box-shadow: inset 0 0 0 1px #fff3b0, 0 2px 0 var(--gold-dark); }
.modal .hx-tip { margin: 0 0 10px; font-size: 15px; color: var(--muted); }

/* The board: a sunken navy pit with studded corners, and on it each card as the website draws a find (/hunt/ .find). */
.hx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px 14px; padding: 18px 16px; border-radius: 12px; border: 1px solid #26357a; background: var(--hx-studs), linear-gradient(180deg, #0a1238, #060c2c); box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 210, 63, 0.1), 0 1px 0 rgba(255, 255, 255, 0.06); }
.hx-card { --c: #8d9ac8; --g: rgba(141, 154, 200, 0.3); position: relative; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 10px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 40%, #2c3b78); background: var(--hx-card); box-shadow: inset 0 2px 0 color-mix(in srgb, var(--c) 65%, transparent), 0 6px 18px rgba(0, 0, 0, 0.35); transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; }
.hx-card.r-uncommon { --c: #4fb3ff; --g: rgba(79, 179, 255, 0.38); }
.hx-card.r-rare { --c: #b36bff; --g: rgba(179, 107, 255, 0.42); }
.hx-card.r-epic { --c: #ffd23f; --g: rgba(255, 210, 63, 0.42); }
.hx-card.top { --g: rgba(255, 210, 63, 0.45); border-color: var(--gold); box-shadow: inset 0 2px 0 var(--gold), 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 22px rgba(255, 210, 63, 0.4); }
.hx-card:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: inset 0 2px 0 var(--c), 0 10px 24px rgba(0, 0, 0, 0.45), 0 0 20px var(--g); }
.hx-card.top:hover { border-color: var(--gold); }
.hx-crown { position: absolute; left: 50%; top: -13px; z-index: 2; transform: translateX(-50%); display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 99px; background: linear-gradient(180deg, #ffe066, var(--gold-2)); color: var(--navy-900); font-size: 16px; line-height: 1; white-space: nowrap; box-shadow: inset 0 0 0 1px #fff3b0, 0 2px 0 var(--gold-dark), 0 0 14px rgba(255, 210, 63, 0.55); }
.hx-crown .hx-i { width: 15px; height: 15px; fill: currentColor; stroke-width: 1.5; }
.hx-slab { position: relative; display: grid; place-items: center; width: 100%; padding: 14px 11%; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 10px; background: radial-gradient(58% 54% at 50% 46%, var(--g), transparent 74%), radial-gradient(rgba(127, 212, 255, 0.1) 1.2px, transparent 1.7px) 0 0 / 14px 14px, rgba(3, 10, 44, 0.65); transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.3s ease; }
.hx-slab:hover { transition: transform 0.08s linear; }
.hx-slab:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.hx-slab img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 5; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 4, 24, 0.6)); }
.hx-slab .hunt-noimg { width: 100%; }
.hx-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.5), transparent 42%), linear-gradient(115deg, transparent 28%, rgba(255, 110, 220, 0.4) 40%, rgba(110, 220, 255, 0.4) 50%, rgba(255, 240, 110, 0.4) 60%, transparent 72%); background-size: 100% 100%, 260% 260%; background-position: 0 0, var(--mx, 50%) var(--my, 50%); transition: opacity 0.2s; }
.hx-slab:hover .hx-shine, .hx-slab:focus-visible .hx-shine { opacity: 0.85; }
.hx-card.r-epic .hx-shine, .hx-card.top .hx-shine { opacity: 0.55; animation: hxSweep 4s ease-in-out infinite; }
.hx-card.r-epic .hx-slab:hover .hx-shine, .hx-card.top .hx-slab:hover .hx-shine { opacity: 0.85; animation: none; }
.hx-play { position: absolute; left: 50%; bottom: 10px; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 99px; background: rgba(3, 10, 44, 0.9); border: 1px solid var(--c); color: #fff; font-size: 15px; line-height: 1; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity 0.2s, transform 0.2s; }
.hx-slab:hover .hx-play, .hx-slab:focus-visible .hx-play { opacity: 1; transform: translate(-50%, 0); }
.hx-card figcaption { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 2px 2px; }
.hx-card figcaption > b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1.2; color: #fff; text-shadow: 0 2px 0 #000a2e; }
.hx-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.hx-tags { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.hx-tags em { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; font-style: normal; font-size: 14px; line-height: 1; white-space: nowrap; }
.hx-tags em.g { background: #fff; color: #c8102e; font-weight: 700; }
.hx-tags em.t { border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); }
.hx-val { flex: none; }
.hx-card small { font-size: 14px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.hx-card small b { color: #fff; font-weight: 400; }
.hx-card small.hx-gift { color: #7dffb0; } /* sent back by a hunter to be found again (2026-10-12) */
/* Who found it: their hero as they look in the World, on a little stage lit in the card's colour, beside their name and
   when (owner, 2026-10-29: "instead of showing where it was found.. show cartoon of who found it"). */
.hx-by { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hx-finder { position: relative; flex: none; display: grid; place-items: end center; width: 48px; height: 74px; padding-bottom: 6px; box-sizing: border-box; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 35%, #26357a); background: radial-gradient(70% 34% at 50% 92%, var(--g), transparent 72%), linear-gradient(180deg, #0a1238, #060c2c); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5); }
.hx-finder::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 28px; height: 6px; border-radius: 50%; background: rgba(0, 4, 24, 0.55); transform: translateX(-50%); }
.hx-finder img { position: relative; z-index: 1; display: block; max-width: 44px; max-height: 64px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #000a2e); }
.hx-by small { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hx-by small b { font-size: 16px; line-height: 1.15; }
.hx-by time { font-size: 13px; }
/* In the live World the finder is a button to their profile (hunt-ui.js cardHTML): the name lights gold on hover, a ›
   badge on their stage's corner says it opens (owner, 2026-11-04: "allow to click on players and see their profiles"). */
button.hx-by { width: 100%; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.hx-by:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.hx-pf { position: absolute; z-index: 2; right: -8px; bottom: -6px; display: grid; place-items: center; width: 20px; height: 20px; box-sizing: border-box; padding-bottom: 2px; border-radius: 50%; border: 1px solid var(--cyan); background: #0a1238; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); color: var(--cyan); font-style: normal; font-size: 18px; line-height: 1; transition: background 0.15s, color 0.15s, border-color 0.15s; }
button.hx-by:hover .hx-finder, button.hx-by:focus-visible .hx-finder { border-color: var(--gold); }
button.hx-by:hover small b, button.hx-by:focus-visible small b { color: var(--gold); text-decoration: underline; }
button.hx-by:hover .hx-pf, button.hx-by:focus-visible .hx-pf { border-color: var(--gold); background: var(--gold); color: var(--navy-900); }
.hx-card figcaption a { align-self: flex-start; font-size: 14px; color: var(--cyan); text-decoration: none; }
.hx-card figcaption a:hover { text-decoration: underline; }
.hx-grid.intro .hx-card { animation: hxDeal 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards; animation-delay: calc(var(--i) * 55ms + 150ms); }

/* No cards yet: an empty card slot, as on the website. */
.hx-empty { display: flex; align-items: center; gap: 16px; margin: 8px 0 0; padding: 14px 18px; border-radius: 12px; border: 1px dashed #3b4c80; background: rgba(20, 30, 82, 0.5); }
.hx-empty img { width: 54px; height: auto; transform: rotate(-7deg); filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5)); }
.modal .hx-empty p { margin: 0; font-size: 17px; color: var(--hx-soft); }
.hx-more { display: block; margin: 16px 0 4px; text-align: center; font-size: 16px; color: var(--cyan); }

@keyframes hxSpin { to { transform: rotate(1turn); } }
@keyframes hxBob { 50% { transform: translateY(-8px) rotate(-1.5deg); } }
@keyframes hxTwinkle { 50% { opacity: 0.35; } }
@keyframes hxPing { 0% { box-shadow: 0 0 0 0 rgba(79, 224, 138, 0.75); } 100% { box-shadow: 0 0 0 9px rgba(79, 224, 138, 0); } }
@keyframes hxSweep { 0%, 100% { background-position: 0 0, 0% 0%; } 50% { background-position: 0 0, 100% 100%; } }
@keyframes hxDeal { from { opacity: 0; transform: translateY(18px) scale(0.92); } }
@keyframes hxGleam { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hunt-pill::after, .hx-rays, .hx-hero::after, .hx-pack, .hx-chip.live i, .hx-shine, .hx-grid.intro .hx-card, .hx-stat.value::after { animation: none !important; }
}
/* Phones and small windows (the popup's own phone padding, world.css): a smaller hero, Your hunt stacked, the four tiles
   two by two, and smaller cards (two a row upright). */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  .hx-hero { gap: 12px; margin: -20px -18px 14px; padding: 18px 44px 16px 14px; }
  .hx-art { width: 104px; height: 118px; }
  .hx-pack { left: 22px; width: 64px; }
  .hx-fan { top: 24px; width: 50px; }
  .modal .hx-head h2 { margin: 6px 0; font-size: 32px; text-shadow: 2px 2px 0 #000a2e, 0 0 26px rgba(255, 210, 63, 0.5); }
  .modal .hx-head p { font-size: 15px; }
  .hx-eyebrow { margin-top: 7px; font-size: 10px; }
  .hx-promise { margin-top: 9px; }
  .hx-promise span { height: 24px; padding: 0 8px; font-size: 12px; }
  .hx-chip { height: 26px; padding: 0 10px; font-size: 15px; }
  .hx-chip b { font-size: 18px; }
  .hx-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px 10px; padding: 14px 10px; }
  .hx-card { gap: 8px; padding: 8px; }
  .hx-slab { padding: 10px 8%; }
  .hx-card figcaption > b { font-size: 15px; }
  .hx-val { height: 26px; padding: 0 9px; font-size: 17px; }
  .hx-mine { grid-template-columns: minmax(0, 1fr); padding: 14px 16px 16px; }
  .hy-pulls { padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--hx-line); }
  .hy-ring { width: 62px; height: 62px; }
  .hy-ring::before { inset: 6px; }
  .hy-ring .hx-i { width: 26px; height: 26px; }
  .hy-head { font-size: 21px; }
  .hy-clock { font-size: 26px; }
  .modal .hy-next { font-size: 16px; }
  .hy-strip { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
  .modal .hx-found-head h3 { font-size: 22px; }
  .hx-count { height: 27px; padding: 0 10px 0 8px; font-size: 16px; }
  .hx-count .hx-i { width: 15px; height: 15px; }
  .hx-sort button { height: 28px; padding: 0 12px; font-size: 15px; }
  .hx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hx-stats:not(:has(.hx-vault)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hy-pull b { height: 25px; font-size: 17px; }
  .hx-stat { gap: 10px; padding: 10px 12px 11px 14px; }
  .hx-stat b { --num: 27px; }
  .hx-stat.value b { --num: 31px; }
  .hx-stat span { font-size: 15px; }
}
@media (max-width: 560px) { /* upright phones: the tiles a size down */
  .hx-stat { gap: 8px; padding: 9px 10px 10px 12px; }
  .hx-ico { width: 24px; height: 36px; font-size: 21px; }
  .hx-ico img.card { width: 24px; }
  .hx-ico .hx-i { width: 26px; height: 26px; }
  .hx-stat b { --num: 24px; }
  .hx-stat.value b { --num: 28px; }
  .hx-stat.value .hx-ico { width: 28px; }
  .hx-stat.value .hx-ico .hx-i { width: 28px; height: 28px; }
  .hx-stat span { font-size: 14px; }
  .hx-stat .hx-bar { margin-top: 6px; }
  .hx-stats:not(:has(.hx-vault)) .hx-stat { flex-direction: column; gap: 4px; padding: 9px 6px 12px; text-align: center; }
}
@media (max-width: 400px) { /* the art steps back behind the words */
  .hx-art { position: absolute; right: 6px; bottom: -34px; z-index: 0; opacity: 0.24; }
  .hx-hero { padding-left: 16px; }
}

.hunt-noimg { display: grid; place-items: center; aspect-ratio: 3 / 5; font-size: 40px; background: #080616; border-radius: 6px; }
.hunt-noimg.big { width: 200px; font-size: 70px; }
.hunt-noimg .hx-i { margin: 0; color: #3b4c80; stroke-width: 1.5; }
.hunt-reveal { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.hunt-reveal img { width: min(240px, 100%); border-radius: 8px; background: #080616; animation: huntFlip 0.9s ease-out; }
.hunt-reveal > div { flex: 1; min-width: 200px; }
.hunt-reveal .val { font-size: 22px; font-weight: 800; color: #7dffa0; }
@keyframes huntFlip { 0% { transform: perspective(600px) rotateY(90deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.hunt-admin { display: flex; flex-direction: column; gap: 8px; background: rgba(255, 210, 63, 0.06); border: 1.5px dashed #6b5a1f; border-radius: 10px; padding: 10px; }
.hunt-admin label { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.hunt-admin label.knob { flex-direction: column; align-items: stretch; }
.hunt-admin label.check { justify-content: flex-start; }
.hunt-admin input[type="number"] { width: 90px; }
.hunt-admin input[type="range"] { width: 100%; accent-color: #b36bff; }
@media (max-width: 560px) { .hunt-stats b { font-size: 19px; } }
.pack-tag { display: inline-block; padding: 1px 6px; border-radius: 4px; background: #5b1f99; color: #f1e0ff; font-size: 11px; font-weight: 800; letter-spacing: 0.03em; }

/* Tutorial: card-hunt pages. The first page is one framed hero instead of five equally loud rows: title first, the
   team's real pack mix in the spotlight, a quiet partner credit, then one unmistakable live-status chip. */
.tut-hunt-hero { position: relative; isolation: isolate; overflow: hidden; max-width: 600px; margin: 0 auto; padding: 12px 18px 13px; border: 1.5px solid rgba(127, 212, 255, 0.28); border-radius: 18px; background: radial-gradient(ellipse at 50% 42%, rgba(43, 83, 177, 0.42), transparent 64%), linear-gradient(180deg, rgba(27, 43, 102, 0.78), rgba(8, 18, 65, 0.9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 5px 0 rgba(0, 0, 0, 0.2); }
.tut-hunt-hero::after { content: ""; position: absolute; z-index: -3; inset: 0; opacity: 0.16; background: linear-gradient(115deg, transparent 0 46%, rgba(127, 212, 255, 0.3) 47% 48%, transparent 49% 100%); background-size: 34px 34px; }
.tut-hunt-hero .tut-kicker { margin-bottom: 7px !important; padding: 4px 11px 3px; font-size: 11px !important; }
.tut-hunt-hero h2 { max-width: 480px; margin: 0 auto 1px; font-size: 25px; line-height: 1.08; text-wrap: balance; }
.tut-packs { position: relative; z-index: 0; height: 162px; max-width: 460px; margin: 8px auto 0; }
.tut-packs::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 54%; width: 300px; height: 190px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 210, 63, 0.42), rgba(255, 138, 31, 0.14) 55%, transparent); }
.tut-rays {
  position: absolute; z-index: -2; left: 50%; top: 54%; width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(91, 158, 255, 0.32) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.55) 48%, transparent 74%);
  mask: radial-gradient(closest-side, #000 22%, rgba(0, 0, 0, 0.55) 48%, transparent 74%);
  animation: tutRays 60s linear infinite;
}
@keyframes tutRays { to { transform: rotate(1turn); } }
.tut-pk { position: absolute; left: 50%; bottom: 8px; width: 82px; margin-left: -41px; transform-origin: 50% 130%; transform: translateX(calc(var(--at) * 92px)) rotate(calc(var(--at) * 12deg)); filter: brightness(0.8) saturate(0.86) drop-shadow(0 7px 7px rgba(0, 0, 0, 0.3)); }
.tut-pk.is-main { z-index: 1; bottom: 0; width: 104px; margin-left: -52px; filter: drop-shadow(0 0 16px rgba(255, 210, 63, 0.55)); }
.tut-pk .zpack { width: 100%; animation: tutPkIn 0.6s 0.12s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards; }
.tut-pk.is-main .zpack { animation: tutPkIn 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.25) backwards, tutPackBob 2.6s 0.6s ease-in-out infinite; }
.tut-pk.is-main .zpack-sheen { animation-duration: 3.4s; }
@keyframes tutPkIn { from { opacity: 0; transform: translateY(34px) scale(0.86); } }
@keyframes tutPackBob { 50% { transform: translateY(-7px); } }
/* four-point sparkles around the middle pack */
.tut-spark { position: absolute; z-index: 2; width: 16px; height: 16px; background: #fff6c8; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 4px #ffd23f); animation: tutTwinkle 2.4s ease-in-out infinite; }
.tut-spark.s1 { left: calc(50% - 82px); top: 18px; }
.tut-spark.s2 { left: calc(50% + 70px); top: 6px; width: 11px; height: 11px; animation-delay: 0.8s; }
.tut-spark.s3 { left: calc(50% + 74px); top: 118px; width: 13px; height: 13px; animation-delay: 1.5s; }
.tut-spark.s4 { left: calc(50% - 90px); top: 132px; width: 10px; height: 10px; animation-delay: 1.1s; }
@keyframes tutTwinkle { 0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 45%, 55% { opacity: 1; transform: scale(1) rotate(45deg); } }
/* Powered by Collector Crypt: one slim badge under the packs (the three-point plate went 2026-10-13, owner: "more clean visually"). */
.tut-cc-mini { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: -1px auto 0 !important; padding: 3px 10px 3px 4px; border: 1px solid rgba(255, 210, 63, 0.4); border-radius: 999px; background: rgba(3, 10, 44, 0.62); line-height: 1; }
.tut-cc-mini img { width: 18px; height: auto; border-radius: 3px; transform: rotate(-4deg); }
.tut-cc-mini small { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.tut-cc-mini b { font-family: var(--display); font-weight: 400; font-size: 14px; color: #fff; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tut-rays, .tut-spark, .tut-pk .zpack, .tut-pk.is-main .zpack { animation: none; } .tut-spark { opacity: 0.8; } }
/* a real card as a list icon (How to play: the card hunt pill) */
.tut-callout img.tut-callout-card { width: 38px; height: auto; border-radius: 3px; transform: rotate(-6deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 3px 8px rgba(0, 0, 0, 0.45); }
.tut-list i.tut-i-card img { display: block; width: 18px; height: auto; margin: 1px auto 0; border-radius: 2px; transform: rotate(-8deg); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.tut-hunt-stats { margin: 4px 0 8px; }
.tut-soon { text-align: center; font-weight: 700; color: #e3c2ff; margin: 4px 0 8px; }
.tut-hunt-status { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; max-width: 100%; margin: 8px auto 0 !important; padding: 5px 11px 4px; border: 1px solid rgba(95, 232, 111, 0.48); border-radius: 999px; background: rgba(9, 54, 42, 0.58); color: #caffd0; font-size: 15px !important; line-height: 1.15 !important; }
.tut-hunt-status i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(95, 232, 111, 0.16), 0 0 8px rgba(95, 232, 111, 0.7); }
.tut-hunt-status span { min-width: 0; }
.tut-hunt-status.is-next, .tut-hunt-status.is-wait { border-color: rgba(255, 210, 63, 0.46); background: rgba(72, 53, 10, 0.5); color: #fff0ae; }
.tut-hunt-status.is-next i, .tut-hunt-status.is-wait i { background: var(--gold); box-shadow: 0 0 0 3px rgba(255, 210, 63, 0.14); }
.tut-hunt-status.is-soon, .tut-hunt-status.is-starting, .tut-hunt-status.is-dropping { border-color: rgba(127, 212, 255, 0.48); background: rgba(17, 49, 91, 0.58); color: #d6f0ff; }
.tut-hunt-status.is-soon i, .tut-hunt-status.is-starting i, .tut-hunt-status.is-dropping i { background: var(--cyan); box-shadow: 0 0 0 3px rgba(127, 212, 255, 0.14), 0 0 8px rgba(127, 212, 255, 0.55); }
.tut-steps { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; counter-reset: tut; }
.tut-steps li { display: flex; gap: 10px; align-items: center; background: rgba(179, 107, 255, 0.1); border-radius: 8px; padding: 6px 10px; font-size: 16px; line-height: 1.3; text-align: left; }
.tut-steps li i { font-style: normal; font-size: 20px; }
.tut-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 12px; }
/* Level 10's card hunt reminder (hunt-ui.js levelTenPanel): the one step they're missing, under the four rules. */
.l10 .tut-list { margin-top: 8px; }
.l10-need { display: grid; gap: 3px; max-width: 560px; margin: 10px auto 0; padding: 9px 12px; border-radius: 10px; text-align: left; background: rgba(255, 210, 63, 0.1); border: 1px solid rgba(255, 210, 63, 0.55); }
.l10-need b { color: var(--gold); font-size: 18px; }
.l10-need span { color: #dfe6ff; font-size: 16px; line-height: 1.3; }
@media (max-width: 560px) { /* upright phones: the rules a size down, so Connect wallet shows without scrolling */
  .l10 h2 { font-size: 23px; }
  .l10 .tut-list { gap: 4px; }
  .l10 .tut-list li { gap: 8px; padding: 5px 9px; font-size: 16px; line-height: 1.25; }
  .l10-need { padding: 7px 10px; }
  .l10-need b { font-size: 16px; }
  .l10-need span { font-size: 14px; }
  .l10 .tut-row { margin-top: 10px; }
}
.tut-row .btn { text-decoration: none; }
.tut-inside { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 14px; align-items: start; margin: 6px 0 10px; }
.tut-slab { margin: 0; text-align: center; }
.tut-slab img { width: 100%; aspect-ratio: 3 / 5; object-fit: contain; background: #080616; border-radius: 8px; }
.tut-slab figcaption { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; opacity: 0.85; margin-top: 4px; }
.tut-odds { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.tut-odds > b { font-size: 15px; color: #ffd23f; }
.tut-odds .odd { display: grid; grid-template-columns: 76px 1fr 40px 70px; align-items: center; gap: 6px; }
.tut-odds .odd i { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.tut-odds .odd em { display: block; height: 100%; background: #8a93b8; }
.tut-odds .odd.r-uncommon em { background: #4fb3ff; }
.tut-odds .odd.r-rare em { background: #b36bff; }
.tut-odds .odd.r-epic em { background: #ffd23f; }
.tut-odds .odd b { text-align: right; }
.tut-odds .odd small { opacity: 0.75; }
.tut-odds .odd-note { opacity: 0.75; font-size: 11px; line-height: 1.35; }
@media (max-width: 560px) {
  .tut-inside { grid-template-columns: 1fr; }
  .tut-slab { max-width: 170px; margin: 0 auto; }
  .tut-hunt-hero { padding: 10px 10px 11px; border-radius: 14px; }
  .tut-hunt-hero h2 { font-size: 23px; }
  .tut-packs { height: 154px; }
  .tut-pk { width: 78px; margin-left: -39px; transform: translateX(calc(var(--at) * 74px)) rotate(calc(var(--at) * 12deg)); }
  .tut-pk.is-main { width: 98px; margin-left: -49px; }
  .tut-hunt-status { font-size: 14px !important; }
  .tut-odds .odd { grid-template-columns: 70px 1fr 36px 62px; }
}
/* shorter phones (360×740 and the like): a smaller fan and slimmer pictures, so the page still fits */
@media (max-width: 560px) and (max-height: 799px) {
  .tut-hunt-hero { padding-top: 8px; padding-bottom: 9px; }
  .tut-hunt-hero .tut-kicker { margin-bottom: 4px !important; }
  .tut-hunt-hero h2 { font-size: 21px; }
  .tut-packs { height: 124px; }
  .tut-pk { width: 68px; margin-left: -34px; bottom: 8px; transform: translateX(calc(var(--at) * 58px)) rotate(calc(var(--at) * 14deg)); }
  .tut-pk.is-main { width: 82px; margin-left: -41px; }
  .tut-spark.s1 { left: calc(50% - 62px); top: 10px; }
  .tut-spark.s2 { left: calc(50% + 50px); top: 2px; }
  .tut-spark.s3 { left: calc(50% + 54px); top: 86px; }
  .tut-spark.s4 { left: calc(50% - 66px); top: 96px; }
  .tut-hunt-hero ~ .tut-tiles .tut-pic { aspect-ratio: 2 / 1; }
  .tut-hunt-hero ~ .tut-rule { font-size: 14px; }
}

/* Cards in the chat (chat-cards.js; owner, 2026-10-06): the card a find's news is about, under the news, and a real card
   shown from a bag in place of words. Its picture, name, grade and worth, edged in its rarity's colour; a tap shows it big
   (.ccv below). */
#chatLog .chat-card { --c: #8d9ac8; --g: rgba(141, 154, 200, 0.22); display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; box-sizing: border-box; margin: 3px 0 4px; padding: 4px 12px 4px 4px; border: 2px solid var(--c); border-radius: 9px; background: radial-gradient(120% 160% at 0% 50%, var(--g), transparent 70%), rgba(10, 16, 42, 0.94); color: #fff; font: inherit; font-weight: 400; text-align: left; text-shadow: none; cursor: pointer; box-shadow: 0 2px 0 #000a2e; }
#chatLog .chat-card.r-uncommon { --c: #4fb3ff; --g: rgba(79, 179, 255, 0.3); }
#chatLog .chat-card.r-rare { --c: #b36bff; --g: rgba(179, 107, 255, 0.36); }
#chatLog .chat-card.r-epic { --c: #ffd23f; --g: rgba(255, 210, 63, 0.36); }
#chatLog .chat-card:hover, #chatLog .chat-card:focus-visible { outline: none; box-shadow: 0 2px 0 #000a2e, 0 0 0 2px var(--gold), 0 0 14px rgba(255, 210, 63, 0.4); }
#chatLog .chat-card img, #chatLog .chat-card i { flex: none; display: grid; place-items: center; width: 34px; height: 56px; object-fit: contain; font-style: normal; font-size: 22px; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.6)); }
#chatLog .chat-card span { display: grid; gap: 1px; min-width: 0; color: #fff; }
#chatLog .chat-card b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.15; }
#chatLog .chat-card small { color: #e3c2ff; font-size: 15px; line-height: 1.2; }
#chatLog p.m-hunt > span { display: block; }
/* Phones (layout.js PHONE): the chat is short there, so the card is a size down. */
@media (max-width: 760px), (orientation: landscape) and (max-height: 500px) and (min-width: 561px) {
  #chatLog .chat-card { gap: 7px; padding: 3px 10px 3px 3px; }
  #chatLog .chat-card img, #chatLog .chat-card i { width: 25px; height: 42px; font-size: 18px; }
  #chatLog .chat-card b { font-size: 15px; }
  #chatLog .chat-card small { font-size: 13px; }
}
/* A card from the chat, big (chat-cards.js openChatCard; owner, 2026-10-06: "allow to either do reveal or just see the card
   in bigger"): its photo in its rarity's colour beside its facts, and ▶ Watch the pull for the reveal. Upright phones:
   one column. */
.ccv { --c: #8d9ac8; --g: rgba(141, 154, 200, 0.22); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.ccv.r-uncommon { --c: #4fb3ff; --g: rgba(79, 179, 255, 0.3); }
.ccv.r-rare { --c: #b36bff; --g: rgba(179, 107, 255, 0.36); }
.ccv.r-epic { --c: #ffd23f; --g: rgba(255, 210, 63, 0.36); }
.ccv-pic { display: grid; place-items: center; padding: 12px; border: 2px solid var(--c); border-radius: 14px; background: radial-gradient(90% 70% at 50% 30%, var(--g), transparent 75%), #0a102a; box-shadow: 0 4px 0 #000a2e, 0 0 22px var(--g); }
.ccv-pic img { display: block; height: min(56vh, 430px); aspect-ratio: 3 / 5; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55)); }
.ccv-pic i { font-size: 64px; font-style: normal; }
.ccv-info h2 { margin: 0 0 6px; }
.ccv-facts { margin: 0 0 8px; color: var(--gold); font-size: 18px; }
.ccv-name { margin: 0 0 10px; color: var(--muted); font-size: 15px; line-height: 1.3; }
.ccv-who { margin: 0; font-size: 17px; }
.ccv-who b { color: #fff; }
@media (max-width: 560px), (max-width: 760px) and (min-height: 501px) {
  .ccv { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; text-align: center; }
  .ccv-pic img { height: min(44vh, 340px); }
  .ccv .actions { justify-content: center; }
}
/* Your own card: 💬 Chat beside ▶ Watch the pull, and the Sell box under them (card-sell.js) in the reveal's buttons
   (/hunt/reveal.css keeps their font on .zrv, so the view names it). */
.ccv .zsell { --ui: var(--ui-font); }
#ccvChat { min-width: 120px; }
/* …and Post on X (hunt-ui.js postX, the reveal's own), its note under the buttons once there's something to say. */
#ccvX { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ccv-xnote { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.3; }
.ccv-xnote:empty { display: none; }
.ccv-xnote b { color: var(--gold); font-weight: 400; }
.ccv-xnote a { color: #7fd4ff; }
/* 💬 on a real card in your Card collection (ui.js): shows it in the chat, then ticks for a moment. Inside the card's
   top left corner, as its worth sits in the top right (owner, 2026-10-06: "over the card on the left, not overalp other
   stuff"): never out over the next card or the heading. */
.card-slot { position: relative; display: grid; min-width: 0; }
.card-slot > .real-card { width: 100%; }
.card-chat { position: absolute; left: 4px; top: 4px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid var(--gold); border-radius: 50%; background: #0a102a; color: var(--gold); cursor: pointer; box-shadow: 0 1px 0 #000; }
.card-chat:hover, .card-chat:focus-visible { outline: none; background: var(--gold); color: #06124f; }
.card-chat.done { border-color: #4fe08a; background: #4fe08a; color: #06124f; }
.card-chat.done svg { display: none; }
.card-chat svg { width: 12px; height: 12px; }
/* 💬 Chat in a card's own view (hunt-ui.js replay → /hunt/reveal.js chat): Post on X across, ⬇ Save | 💬 Chat under it. */
.zrv-share.has-pic .zrv-actions.has-chat { grid-template-columns: 1fr 1fr; }
.zrv-share.has-pic .zrv-actions.has-chat .zrv-x { grid-column: 1 / -1; }
.zrv-share.has-pic .zrv-actions.has-chat .zrv-btn:not(.zrv-x) { min-width: 0; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.zrv-share .zrv-btn.zrv-chat:disabled { opacity: 1; cursor: default; color: #7dffb0; }
.card-chat.done::after { content: "✓"; font-size: 13px; font-weight: 700; line-height: 1; }
/* Sell it, powered by Collector Crypt (world/js/card-sell.js; owner, 2026-10-07): under one of your own real cards' buttons in
   its reveal: Sell back now (their instant buyback) or List it on their marketplace, each confirmed before your wallet
   opens, and since 2026-10-12 🎁 Hide it again. A row of buttons and a line, so the panel only grows a little. */
.zsell { display: grid; gap: 6px; margin-top: 8px; }
.zrv-panel > .zsell { margin-bottom: 10px; } /* in the reveal, above ▶ Keep hunting */
.zsell-note, .zsell-ask, .zsell-listed, .zsell-done, .zsell-status { margin: 0 2px; font-size: 16px; line-height: 1.25; color: #a9b3d6; }
.zsell-ask, .zsell-listed { color: #f1ecd8; font-size: 17px; }
.zsell-done { color: #7dffb0; font-size: 17px; }
.zsell b { color: #ffd23f; font-weight: 400; }
.zsell a { color: #7fd4ff; }
/* Each button as wide as its words and the row shared out from there (owner, 2026-10-09, "💵 Sell back $20.40" cut off at
   both ends in half of a card view's narrow column: "this is a bit off"); a row too narrow for both puts them one under
   the other, so a label is never cut. */
.zsell-row { display: flex; flex-wrap: wrap; gap: 8px; }
.zsell-row .zrv-btn { flex: 1 1 auto; padding: 8px 10px; white-space: nowrap; }
.zsell-row .zrv-btn.is-gold { font-size: 15px; }
.zsell .zrv-btn:disabled { opacity: 0.6; cursor: progress; }
/* 🎁 Hide it again (owner, 2026-10-12): send the card back to the vault to be hidden for another hunter. A row of its own
   under Collector Crypt's line, with a green edge for the gift. */
.zsell-row .zsell-back { border-color: #2f8f63; color: #c9ffe2; background: rgba(8, 54, 40, 0.55); }
.zsell-row .zsell-back.is-gold { border: 2px solid #3a2a00; color: #06124f; background: linear-gradient(180deg, #ffe066, #e8b52a); } /* the card deposit's one button */
/* The big choice (owner, 2026-11-01: "put a big option to either hide it again, or sell for $ZAZA ... make the sell for
   $zaza option the biggest"): 🪙 Sell for $ZAZA across the box, two lines and a slow glow; 🎁 Hide it again across under
   it, a size smaller; Take USDC, List it and X drop small in one row. Meanwhile the reveal's ▶ Keep hunting is plain. */
/* A won card's big choices, in the $CARDS rewards window's filled buttons (cards-rewards.css; owner, 2026-11-08, on its
   demo: "i like it, but make sure they all fit without having to scroll down on desktop. and give more importance to the
   one to share on x. its the second most important"): 🪙 Sell for $ZAZA in gold, the biggest; 𝕏 Post on X second, with
   its picture (card-sell.js moves the reveal's share box into .zsell-xslot); 🎁 Hide it again in violet; USDC, List it
   and X drop small under them. */
.zsell .zs-pick {
  --c1: #ffe680; --c2: #ffc928; --c3: #e89a0c; --edge: #6e4a06; --ledge: #4a3004; --glow: 255, 205, 50;
  --ink: #1b1440; --ink2: #3d2c06; --hi: #1b1440; --ring: rgba(110, 74, 6, 0.85);
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 0; margin: 0; padding: 9px 14px 10px;
  border: 2px solid var(--edge); border-radius: 10px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); letter-spacing: 0;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 48%, var(--c3) 100%);
  box-shadow: 0 5px 0 var(--ledge), 0 12px 24px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.55), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.zsell .zs-pick:hover:not(:disabled), .zsell .zs-pick:focus-visible { transform: translateY(-3px); filter: brightness(1.08) saturate(1.08); box-shadow: 0 8px 0 var(--ledge), 0 16px 30px rgba(0, 0, 0, 0.5), 0 0 26px rgba(var(--glow), 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.6), inset 0 -3px 0 rgba(0, 0, 0, 0.18); outline: 0; }
.zsell .zs-pick:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 var(--ledge), 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.zsell .zs-violet { --c1: #c49bff; --c2: #9257f5; --c3: #6a2fd6; --edge: #36157a; --ledge: #230d52; --glow: 170, 110, 255; --ink: #fff; --ink2: #f1e8ff; --ring: rgba(255, 255, 255, 0.85); padding: 6px 14px 7px; }
.zsell .zs-ico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font-size: 26px; line-height: 1; border: 2px solid var(--ring); background: radial-gradient(circle at 40% 32%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.12) 55%, rgba(0, 0, 0, 0.18)); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22); }
.zsell .zs-gold .zs-ico { background: radial-gradient(circle at 40% 32%, #2a2364, #120d38); }
.zsell .zs-ico img { width: 46px; height: 46px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.3)); }
.zsell .zs-violet .zs-ico { width: 38px; height: 38px; font-size: 19px; }
.zsell .zs-txt { display: grid; gap: 1px; min-width: 0; }
.zsell .zs-txt > b { color: var(--ink); font: 400 27px/1.05 var(--display); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.zsell .zs-violet .zs-txt > b { font-size: 19px; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.zsell .zs-txt > small { font: 400 15px/1.15 var(--ui); color: var(--ink2); }
.zsell .zs-line { font: 400 18px/1.15 var(--ui); color: var(--hi); }
.zsell .zs-line b { color: inherit; font-weight: 400; text-decoration: underline 2px rgba(27, 20, 64, 0.35); text-underline-offset: 3px; }
.zsell .zs-pick:disabled { opacity: 0.75; cursor: progress; }
/* 𝕏 Post on X, second: the picture beside a big black X button, Save (and 💬 Chat) small under it. */
.zsell-xslot:empty { display: none; }
.zsell .zrv-share { margin: 2px 0 0; gap: 6px; }
.zsell .zrv-share.has-pic { grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; }
.zsell .zrv-share-pic { width: 84px; border-radius: 8px; }
.zsell .zrv-share.has-pic .zrv-actions, .zsell .zrv-share.has-pic .zrv-actions.has-chat { grid-template-columns: 1fr 1fr; gap: 6px; }
.zsell .zrv-share .zrv-x, .zsell .zrv-share > .zrv-btn { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 6px 12px; border: 2px solid #000; border-radius: 10px; background: linear-gradient(180deg, #3a3f4d, #14161c 55%, #050608); color: #fff; font: 400 24px/1 var(--display); letter-spacing: 0.01em; box-shadow: 0 5px 0 #000, 0 12px 22px rgba(0, 0, 0, 0.45), inset 0 2px 0 rgba(255, 255, 255, 0.22); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.zsell .zrv-share .zrv-x:hover, .zsell .zrv-share .zrv-x:focus-visible { transform: translateY(-2px); box-shadow: 0 7px 0 #000, 0 14px 26px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 255, 255, 0.18), inset 0 2px 0 rgba(255, 255, 255, 0.26); outline: 0; }
.zsell .zrv-share .zrv-x:active { transform: translateY(3px); box-shadow: 0 2px 0 #000, inset 0 2px 0 rgba(255, 255, 255, 0.2); }
.zsell .zrv-share .zrv-actions .zrv-btn:not(.zrv-x) { min-height: 30px; padding: 2px 6px; font-size: 15px; }
.zsell .zrv-share-note { font-size: 15px; }
.zsell .zrv-share-note:empty { display: none; }
.zsell-more .zrv-btn { min-height: 32px; padding: 3px 8px; font-size: 15px; color: #a9b3d6; }
.zrv-panel.has-zchoice > .zrv-actions .zrv-btn.is-gold { min-height: 34px; padding: 4px 10px; border: 1px solid #3b4c80; background: rgba(3, 10, 44, 0.55); box-shadow: none; color: #f1ecd8; font: 400 18px var(--ui); letter-spacing: 0; }
/* While the big choices show, the panel tightens so it all fits a computer screen without scrolling (1536x782). */
/* The top gets shorter (owner, 2026-11-08: "can reduce that upper text details so you no longer need to scroll down and
   it all fits on desktop"): no "Your pull" line (the banner says YOU FOUND IT!), the name and set smaller, and the
   details that matter on your own fresh pull as two small tiles: Insured value, and Finder with the wallet it went to.
   Found in and When go ("dont need to put the found in town", "that just now its useless"); the card's own view, opened
   again later, still has all four. reveal.js names the rows (.r-value, .r-area, .r-finder, .r-when). */
.zrv-panel.has-zchoice { padding: 14px 16px; }
.zrv-panel.has-zchoice .zrv-kicker { display: none; }
.zrv-panel.has-zchoice .zrv-name { margin: 0; font-size: 1.35rem; }
.zrv-panel.has-zchoice .zrv-set { font-size: 16px; }
.zrv-panel.has-zchoice .zrv-chips { margin: 6px 0 8px; }
.zrv-panel.has-zchoice .zrv-rows { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-bottom: 8px; }
.zrv-panel.has-zchoice .zrv-rows .r-value { min-width: 104px; }
.zrv-panel.has-zchoice .zrv-rows .r-finder { grid-column: span 2; }
.zrv-panel.has-zchoice .zrv-rows .r-area, .zrv-panel.has-zchoice .zrv-rows .r-when { display: none; }
.zrv-panel.has-zchoice .zrv-rows div { display: grid; justify-items: start; align-content: center; gap: 3px; min-width: 0; padding: 6px 8px; border: 1px solid rgba(59, 76, 128, 0.7); border-radius: 8px; background: rgba(3, 10, 44, 0.35); }
.zrv-panel.has-zchoice .zrv-rows dt { font: 400 10px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; color: #a9b3d6; }
.zrv-panel.has-zchoice .zrv-rows dd { max-width: 100%; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; line-height: 1.1; }
.zrv-panel.has-zchoice .zrv-rows dd.is-value { font-size: 1.35rem; }
.zrv-panel.has-zchoice > .zsell { gap: 8px; margin-bottom: 8px; }
/* A shorter computer screen (a 1366x680 laptop): the same, tighter still. */
@media (min-width: 821px) and (max-height: 740px) {
  .zrv-panel.has-zchoice { padding: 12px 14px; }
  .zrv-panel.has-zchoice .zrv-name { font-size: 1.25rem; }
  .zrv-panel.has-zchoice .zrv-chips { margin: 4px 0 6px; }
  .zrv-panel.has-zchoice .zrv-rows div { padding: 4px 10px; }
  .zrv-panel.has-zchoice .zrv-rows dd.is-value { font-size: 1.2rem; }
  .zrv-panel.has-zchoice > .zsell { gap: 6px; }
  .zsell .zs-pick { padding: 6px 12px 7px; }
  .zsell .zs-gold .zs-ico { width: 46px; height: 46px; }
  .zsell .zs-gold .zs-ico img { width: 40px; height: 40px; }
  .zsell .zrv-share.has-pic { grid-template-columns: 72px minmax(0, 1fr); }
  .zsell .zrv-share-pic { width: 72px; }
  .zsell .zrv-share .zrv-x, .zsell .zrv-share > .zrv-btn { min-height: 42px; font-size: 22px; }
  .zsell .zrv-share-note, .zrv-panel.has-zchoice .zsell-note { font-size: 14px; line-height: 1.15; }
  .zs-hero { height: 76px; }
  .zs-coin { width: 64px; height: 64px; }
  .zsell .zs-amt b { font-size: 34px; }
}
/* The sale landed: the $ZAZA coin flips in, the amount counts up, coins shower, and the stamp (as the rewards window's). */
.zs-win { position: relative; display: grid; justify-items: center; gap: 2px; padding: 2px 0; text-align: center; }
.zs-hero { position: relative; width: 150px; height: 96px; display: grid; place-items: center; }
.zs-rays { position: absolute; inset: -30px -46px; background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, 0.42) 0deg 7deg, rgba(255, 222, 140, 0) 7deg 20deg); -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%); mask: radial-gradient(closest-side, #000 18%, transparent 100%); animation: zs-spin 7s linear infinite; }
.zs-glow { position: absolute; width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 140, 0.7), rgba(255, 190, 60, 0.16) 55%, transparent 72%); animation: zs-breathe 2.2s ease-in-out infinite; }
.zs-coin { position: relative; width: 78px; height: 78px; filter: drop-shadow(0 5px 0 rgba(5, 8, 28, 0.6)) drop-shadow(0 0 12px rgba(255, 210, 63, 0.5)); animation: zs-flip 1.1s cubic-bezier(0.2, 1.3, 0.4, 1) both, zs-bob 2.6s ease-in-out 1.1s infinite; }
.zs-amt { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 0; }
.zsell .zs-amt b { font: 400 40px/1.05 var(--display); color: transparent; background: linear-gradient(180deg, #fff6c8, #ffd23f 52%, #dc9a1c); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 3px 0 rgba(40, 20, 0, 0.9)); font-variant-numeric: tabular-nums; }
.zs-amt span { color: #e8c46a; font: 400 13px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.zs-stamp { display: inline-block; margin: 4px 0 2px; padding: 4px 14px; border: 3px solid #5fe86f; border-radius: 6px; color: #5fe86f; background: rgba(5, 8, 28, 0.55); font: 400 18px/1.2 var(--display); letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-6deg); opacity: 0; }
.zs-stamp.on { opacity: 1; animation: zs-stamp 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.zs-fly { position: fixed; z-index: 60; width: 30px; height: 30px; pointer-events: none; animation: zs-fly 1.7s cubic-bezier(0.25, 0.6, 0.4, 1) both; }
@keyframes zs-spin { to { transform: rotate(360deg); } }
@keyframes zs-breathe { 50% { transform: scale(1.12); opacity: 0.8; } }
@keyframes zs-bob { 50% { transform: translateY(-6px); } }
@keyframes zs-flip { 0% { transform: scale(0) rotateY(0); } 60% { transform: scale(1.18) rotateY(540deg); } 100% { transform: scale(1) rotateY(720deg); } }
@keyframes zs-stamp { 0% { transform: rotate(-6deg) scale(2.6); opacity: 0; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
@keyframes zs-fly { 0% { transform: translate(0, 0) rotate(0) scale(0.6); opacity: 0; } 10% { opacity: 1; } 40% { transform: translate(var(--dx), var(--dy)) rotate(calc(var(--spin) * 0.5)) scale(1); } 100% { transform: translate(calc(var(--dx) * 1.25), var(--fall)) rotate(var(--spin)) scale(0.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .zsell .zs-pick, .zsell .zrv-share .zrv-x { transition: none; } .zs-win *, .zs-fly { animation: none !important; } .zs-stamp.on { opacity: 1; } }
/* The Whale Room's card deposit (deposit-ui.js; 2026-10-12): your real cards (the Card collection's tiles), the one you pick
   lit in gold, and under them its give-back-only Sell box. A card that can't go back any more is dimmed. */
.dp-cards { margin: 10px 0 0; }
.dp-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.dp-grid .real-card:disabled { opacity: 0.45; cursor: default; box-shadow: none; }
.dp-grid .real-card.is-picked { border-color: #ffd23f; box-shadow: 0 0 0 2px #ffd23f, 0 0 16px rgba(255, 210, 63, 0.55); }
.dp-empty { margin: 8px 0; color: #a9b3d6; }
.dp-pick { margin-top: 12px; padding: 10px 12px 12px; border: 1px solid #c9a227; border-radius: 12px; background: linear-gradient(180deg, rgba(40, 30, 8, 0.55), rgba(10, 14, 40, 0.65)); }
.dp-pick { --ui: var(--ui-font); }
.dp-pick .zsell { margin-top: 6px; }
.dp-name { margin: 0; font: 400 20px/1.2 var(--display); color: #fff; }
.zsell-status:empty { display: none; }
.zsell-status.is-err { color: #ffb38a; }
.zsell-price { display: flex; align-items: center; gap: 6px; margin: 0 2px; font-size: 17px; color: #f1ecd8; }
.zsell-price span { color: #a9b3d6; }
.zsell-price input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid #3b4c80; border-radius: 10px; background: #0a102a; color: #fff; font: 400 19px var(--ui); }
.zsell-price input:focus { outline: 2px solid #ffd23f; outline-offset: 1px; }
/* With a Sell box the panel is taller: "YOU FOUND IT!" a size smaller stays over the card instead of the panel's top
   (hunt-ui.js puts .has-sell on the reveal), and on a short window the panel scrolls rather than lose its bottom. */
.zrv.has-sell .zrv-banner b { font-size: clamp(2.2rem, 5vw, 3.4rem); }
@media (min-width: 821px) {
  .zrv.has-sell.is-done .zrv-panel { max-height: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; }
}
/* A card you listed, in your Card collection: its price on the card (cards.js realCardHTML). */
.real-card.listed .rc-state { border-color: #ffd23f; color: #ffd23f; }
/* Clue scrolls (hunt-ui.js cluesHTML / cluePopup; world-server/hunt-clues.mjs): each riddle on a slip of parchment, brown
   ink, its state under it, on a navy card in the card hunt window under Your hunt; a new one pops up on a scroll with
   rolled ends. The riddle's words can be selected (the page otherwise can't be), to copy one. */
.hx-clue-tip { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; background: rgba(240, 220, 170, 0.1); border: 1.5px dashed rgba(240, 220, 170, 0.45); }
.modal .hx-clue-tip { font-size: 16px; line-height: 1.35; color: #e6dcc0; }
.hx-clue-tip i { flex: none; display: grid; color: #f6e3ae; }
.hx-clue-tip .hx-i { width: 22px; height: 22px; margin: 0; }
.hx-clue-tip b { color: #f6e3ae; font-weight: 400; }
.hx-clues { margin: 0 0 12px; padding: 14px 16px 12px; border-radius: 12px; border: 1px solid var(--hx-edge); background: var(--hx-studs), var(--hx-card); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 0 #000a2e; }
.hc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-bottom: 8px; }
.hc-head strong { font-family: var(--display); font-weight: 400; font-size: 20px; color: var(--rs-orange); text-shadow: 2px 2px 0 #000; }
.hc-head .hx-i { filter: drop-shadow(2px 2px 0 #000); }
.hc-head span { font-size: 15px; color: var(--muted); }
.modal .hc-more { margin: -2px 2px 9px; font-size: 15px; line-height: 1.3; color: #f6e3ae; }
.modal .hc-more.none { color: var(--muted); }
.hc-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hc-clue { position: relative; padding: 10px 14px 9px; border-radius: 4px 10px 4px 10px; background: linear-gradient(90deg, #d9bf86, #f4e4bb 10%, #f7ead0 50%, #f4e4bb 90%, #d9bf86); color: #3b2a14; box-shadow: inset 0 0 0 1px rgba(90, 60, 20, 0.35), 0 2px 0 #1a1006; }
.hc-clue.new { animation: clueNew 1.6s ease-out 2; }
@keyframes clueNew { 0% { box-shadow: inset 0 0 0 1px rgba(90, 60, 20, 0.35), 0 2px 0 #1a1006, 0 0 0 0 rgba(255, 210, 63, 0.9); } 100% { box-shadow: inset 0 0 0 1px rgba(90, 60, 20, 0.35), 0 2px 0 #1a1006, 0 0 0 12px rgba(255, 210, 63, 0); } }
.hc-text { display: block; font-size: 18px; line-height: 1.3; quotes: "“" "”"; user-select: text; -webkit-user-select: text; }
.hc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; margin-top: 6px; padding-top: 5px; border-top: 1px dashed rgba(90, 60, 20, 0.4); }
.hc-state { font-size: 15px; line-height: 1.25; color: #6a4a1c; }
.s-here .hc-state { color: #17703a; }
.s-solved .hc-state { color: #2f6a3a; }
.s-here { box-shadow: inset 0 0 0 2px #2fae5e, 0 2px 0 #1a1006, 0 0 14px rgba(79, 224, 138, 0.35); }
.s-found, .s-gone { opacity: 0.72; }
.s-found .hc-text, .s-gone .hc-text { text-decoration: line-through; text-decoration-color: rgba(90, 60, 20, 0.45); }
.s-found .hc-state { color: #7a4a10; }
.hc-share { flex: none; padding: 3px 10px; border: 1.5px solid #6a4a1c; border-radius: 999px; background: #3b2a14; color: #f6e3ae; font: 400 15px var(--ui-font); cursor: pointer; }
.hc-share .hx-i { margin-right: 0.3em; }
.hc-share:hover, .hc-share:focus-visible { outline: none; background: #6a4a1c; }
.hc-share.done { border-color: #2f6a3a; background: #2f6a3a; color: #eafff0; }
.modal .hc-tip { margin: 8px 2px 0; font-size: 14px; line-height: 1.3; color: var(--muted); }
.clue-pop { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding-top: 8px; }
.clue-paper { position: relative; margin: 10px 6px 12px; padding: 18px 22px 16px; border-radius: 4px; background: radial-gradient(120% 90% at 50% 40%, #fbf1d6, #f1dfae 70%, #e2c68a); color: #3b2a14; text-align: center; box-shadow: inset 0 0 22px rgba(120, 80, 20, 0.35), 0 4px 0 #1a1006; }
.clue-paper::before, .clue-paper::after { content: ""; position: absolute; left: -10px; right: -10px; height: 16px; border-radius: 8px; background: linear-gradient(180deg, #c99a52, #8a5e24 55%, #5a3a12); box-shadow: 0 2px 0 #1a1006; }
.clue-paper::before { top: -10px; }
.clue-paper::after { bottom: -10px; }
.modal .clue-kick { margin: 2px 0 0; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a5e24; }
.modal h2.clue-title { margin: 2px 0 10px; font-size: 26px; color: #5a3a12; text-shadow: none; }
.clue-text { display: block; font-size: 21px; line-height: 1.35; quotes: "“" "”"; user-select: text; -webkit-user-select: text; }
.modal .clue-note { margin: 12px 0 0; font-size: 15px; line-height: 1.35; color: #6a4a1c; }
.modal .clue-more { margin: 8px 0 0; padding-top: 7px; border-top: 1px dashed rgba(90, 60, 20, 0.4); font-size: 15px; line-height: 1.35; color: #3b2a14; }
.clue-row { margin-top: 4px; }
@media (max-width: 560px) {
  .hc-text { font-size: 17px; }
  .clue-paper { margin: 10px 4px 12px; padding: 16px 14px 14px; }
  .modal h2.clue-title { font-size: 23px; }
  .clue-text { font-size: 19px; }
  .clue-row .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { .hc-clue.new { animation: none; } }