/* Generic colour scheme. Field themes (admin-approved images a player unlocks with gold coins) will override these variables. */
[hidden] { display: none !important; }
/* owner 2026-10-11: a Windows contrast theme made the browser repaint the game black and yellow (Android was fine). The game keeps its own colours. */
:root { forced-color-adjust: none; }   /* anything hidden stays hidden, whatever its class says (a hidden leaderboard pop-up showed as an empty box) */
:root { --field:#25384a; --field2:#1b2a38; --rim:#4b6a85; --ink:#e9eef3; --muted:#9db0c0; --accent:#6cb4ee; --good:#4cc38a; --bad:#e5645a; --void:#7b5cff; --card:#f3ead7; --cardink:#2b2b2b; --back:#5a3f7a;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; background: #10161d; color: var(--ink); font: 14px/1.3 system-ui, sans-serif; overscroll-behavior: none; touch-action: manipulation; }
body { display: flex; flex-direction: column; padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l); }
button { font: inherit; color: var(--ink); background: #2c3e50; border: 1px solid var(--rim); border-radius: 8px; padding: 8px 14px; min-height: 40px; }
button:active { background: #3b5368; } button:disabled { opacity: .4; }
#bar { display: flex; gap: 12px; align-items: center; padding: 6px 12px; background: #151d26; border-bottom: 1px solid #2a3948; }
#status { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#coins { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); }
.coinLabel { font-weight: 400; color: var(--muted); }
/* the 3D field: a tilted plane in perspective, cards standing on it */
#scene { flex: 1; min-height: 0; perspective: 900px; perspective-origin: 50% 0%; overflow: hidden; display: flex; justify-content: center; align-items: flex-start; }
#board { transform-style: preserve-3d; transform: rotateX(54deg); transform-origin: 50% 100%; width: 90%; flex: none; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: radial-gradient(ellipse at 50% 40%, var(--field), var(--field2)); border: 2px solid var(--rim); border-radius: 16px; box-shadow: 0 30px 60px #000a; }
.side { display: flex; gap: 8px; justify-content: center; } .side .field { flex: 1; }
.field { display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: 10px; background: var(--fieldimg, #0003); border: 1px solid #ffffff14; min-width: 0; }
.field.out { opacity: .35; filter: grayscale(1); }
.fieldHead { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--muted); }
.fieldHead b { color: var(--ink); } .life { color: var(--accent); font-weight: 700; }
.row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; transform-style: preserve-3d; }
.slot { position: relative; aspect-ratio: 5 / 7; border: 1px dashed #ffffff26; border-radius: 6px; background: #ffffff08; transform-style: preserve-3d; }
.slot.mine.free { cursor: pointer; } .slot.mine.free:hover { background: #ffffff1c; }
.rowLabel { grid-column: 1 / -1; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 2px; }
.card { position: absolute; inset: 0; border-radius: 6px; transform-style: preserve-3d; transform: translateZ(4px); transition: transform .15s; cursor: pointer; overflow: hidden; border: 1px solid #0007; box-shadow: 0 6px 10px #0008; }
.card:hover { transform: translateZ(30px) scale(1.07); z-index: 5; }
.card.def { transform: translateZ(4px) rotate(90deg) scale(.7); } .card.def:hover { transform: translateZ(30px) rotate(90deg) scale(.78); }
.card.void { box-shadow: 0 0 0 2px var(--void), 0 0 14px var(--void); } .card.revealed { outline: 2px solid var(--accent); }
.card.selected { outline: 3px solid var(--good); } .card.target { outline: 3px solid var(--bad); }
.face { position: absolute; inset: 0; background: var(--card); color: var(--cardink); padding: 3%; display: flex; flex-direction: column; justify-content: space-between; font-size: clamp(5px, calc(var(--cw, 80px) * .15), 12px); }
.face .nm { font-weight: 700; line-height: 1.05; } .face .lv { color: #8a6508; } .face .st { display: flex; justify-content: space-between; font-weight: 700; }
.face.spell { background: #e6dcf3; } .face.blood { background: #f0d2cf; }
.back { position: absolute; inset: 0; background: var(--backimg, url('card-back.jpg') center / cover no-repeat, repeating-linear-gradient(45deg, var(--back), var(--back) 6px, #6b4b8f 6px, #6b4b8f 12px)); border: 3px solid #2d1b3d; border-radius: 6px; }   /* owner 2026-10-11 19:11: the owner's card back is the default everywhere (an admin or a bought back replaces it) */
.card.fd .face { display: none; } .card:not(.fd) .back { display: none; }
.center { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 2px; }
.center .slot { width: 56px; } .pile { font-size: 11px; color: var(--muted); }
.notice { text-align: center; font-size: 12px; color: var(--accent); min-height: 16px; }
#hand { display: flex; gap: 6px; justify-content: center; align-items: flex-end; padding: 6px 8px 2px; min-height: 96px; overflow-x: auto; }
#hand .card { position: relative; flex: 0 0 auto; width: 62px; aspect-ratio: 5 / 7; inset: auto; transform: none; } #hand .card:hover { transform: translateY(-12px) scale(1.12); }
.oppHand { display: flex; gap: 2px; justify-content: center; } .oppHand .card { position: relative; inset: auto; width: 34px; aspect-ratio: 5 / 7; transform: none; }
#controls { display: flex; gap: 8px; justify-content: center; padding: 6px 8px 8px; }
#inspect, #store { position: fixed; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; padding: calc(12px + var(--safe-t)) calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) calc(12px + var(--safe-l)); z-index: 20; }
#inspect[hidden], #store[hidden] { display: none; }
.sheet { background: #17212c; border: 1px solid var(--rim); border-radius: 14px; max-width: 760px; width: 100%; max-height: 100%; overflow: auto; padding: 14px; }
.sheet h2 { margin: 0 0 8px; } .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.item { background: #101820; border: 1px solid #2a3948; border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.item .price { display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 700; } .item .fear .card { position: relative; inset: auto; width: 84px; aspect-ratio: 5 / 7; transform: none; margin: 0 auto; }
.item details { font-size: 12px; color: var(--muted); } .item ul { margin: 4px 0 0; padding-left: 16px; max-height: 120px; overflow: auto; }
#toast { position: fixed; left: 50%; bottom: calc(60px + var(--safe-b)); transform: translateX(-50%); background: #000d; border: 1px solid var(--rim); border-radius: 10px; padding: 8px 14px; max-width: 90vw; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 30; } #toast.on { opacity: 1; }
/* landscape phones: reclaim vertical space, keep targets thumb-sized */
@media (max-height: 460px) { #bar { padding: 2px 10px; } #hand { min-height: 60px; padding-top: 2px; } #hand .card { width: 40px; } button { min-height: 30px; padding: 2px 10px; } #controls { padding: 2px 8px 4px; } .rowLabel { display: none; } .fieldHead { font-size: 10px; } }
@media (max-width: 560px) and (orientation: portrait) { .rowLabel { display: none; } .fieldHead { font-size: 10px; flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
.card.fd.peek .face { display: flex; opacity: .55; } .card.fd.peek .back { display: block; opacity: .4; }
.fieldHead.targetable { cursor: pointer; outline: 1px dashed var(--bad); border-radius: 6px; } .opts { display: inline-flex; gap: 6px; } .opts button.on { background: #2f6f55; }

.fieldBody { display: flex; gap: 6px; align-items: stretch; } .zones { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
/* seen from the owner's side: grave in front of the deck, face-up exile right of the grave, face-down exile in front of the face-up exile */
.piles { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; width: 17%; min-width: 54px; align-content: stretch; }
.piles.mine { grid-template-areas: '. fd' 'g fu' 'd .'; } .piles.opp { grid-template-areas: 'd .' 'g fu' '. fd'; }
.pile.deck { grid-area: d; } .pile.grave { grid-area: g; } .pile.exileUp { grid-area: fu; } .pile.exileDown { grid-area: fd; }
.pile { cursor: pointer; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .pileLabel { font-size: clamp(5px, calc(var(--cw, 80px) * .11), 10px); color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; }
.pileCard { position: relative; aspect-ratio: 5 / 7; border: 1px dashed #ffffff26; border-radius: 5px; transform-style: preserve-3d; } .pileCard .card { position: absolute; inset: 0; transform: translateZ(3px); } .pileEmpty { position: absolute; inset: 0; }
.pile:hover .pileCard { border-color: var(--accent); }
.browse { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 8px 0; } .bcard { position: relative; aspect-ratio: 5 / 7; } .bcard .card { position: absolute; inset: 0; transform: none; } .bcard .face { font-size: 10px; }
#clock { font-weight: 700; color: var(--ink); white-space: nowrap; } #clock.late { color: var(--bad); }

/* big hands: more than 7 cards fan out to fit the width; touch-action none lets a finger slide across the fan to read each card */
#hand.many { overflow: visible; justify-content: flex-start; touch-action: none; padding-inline: 8px; } #hand.many .card { flex: 0 0 auto; transition: transform .12s; } #hand.many .card:hover { transform: translateY(-14px); }
#hand .card { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#zoom { position: fixed; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); z-index: 40; pointer-events: none; background: #000c; border: 1px solid var(--rim); border-radius: 12px; padding: 8px; } #zoom[hidden] { display: none; }
#zoom .card.big { position: relative; inset: auto; width: min(46vw, 230px); aspect-ratio: 5 / 7; transform: none; --cw: min(46vw, 230px); } #zoom .card.big .face { font-size: clamp(11px, 3.2vw, 17px); }
.overlay { position: fixed; inset: 0; background: #000b; display: flex; align-items: center; justify-content: center; padding: 12px; z-index: 25; } .overlay[hidden] { display: none; }
.chatlist { max-height: 40vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin: 8px 0; } .chatrow { font-size: 13px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chatrow b { color: var(--accent); }
.chatform { display: flex; gap: 6px; margin: 8px 0; } .chatform input { flex: 1; min-width: 0; min-height: 36px; background: #101820; color: var(--ink); border: 1px solid var(--rim); border-radius: 8px; padding: 4px 8px; } .chatform select { background: #101820; color: var(--ink); border: 1px solid var(--rim); border-radius: 8px; }
button.tiny { min-height: 24px; padding: 0 8px; font-size: 11px; } button.danger { background: #7a2f2f; } #chatBtn[data-unread]:not([data-unread=""])::after { content: ' (' attr(data-unread) ')'; color: var(--accent); }
[dir="rtl"] #hand.many { justify-content: flex-end; } [dir="rtl"] .chatrow { direction: rtl; }
/* the header must never be wider than the screen (a wider header makes phones zoom the whole page out) */
#bar { flex-wrap: wrap; gap: 6px 8px; max-width: 100vw; box-sizing: border-box; } #bar button { min-height: 34px; padding: 4px 10px; } #clock { font-size: 13px; }
@media (max-width: 560px) { .coinLabel { display: none; } #bar { padding: 4px 8px; } #status { flex-basis: 100%; order: -1; font-size: 12px; } }
#controls { flex-wrap: wrap; } html, body { max-width: 100vw; overflow-x: hidden; }

/* text that must be copyable (errors, status, report) */
#toast, #status, #reportbox, #reportbox textarea { -webkit-user-select: text; user-select: text; }
#reportbox textarea { width: 100%; min-height: 40vh; font: 12px/1.4 monospace; box-sizing: border-box; }

/* login, menu, game selection, admin screen */
.screen { position: fixed; inset: 0; z-index: 50; background: #0c1218; display: flex; align-items: flex-start; justify-content: center; padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)); overflow: auto; }
.screen[hidden] { display: none; }
.loginSheet, .menuSheet, .adminSheet { max-width: 860px; width: 100%; margin: auto; }
.loginSheet h1 { margin: 0 0 4px; font-size: 24px; } .muted { color: var(--muted); } .err { color: var(--bad); } .ok { color: var(--good); }
.primary { background: #2e6b4f; border-color: #4cc38a; font-weight: 700; }
.menuItem { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; margin: 6px 0; padding: 10px 14px; min-height: 56px; }
.screenHead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .screenHead h2 { margin: 0; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-bottom: 10px; }
.choice { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; } .choice.on { outline: 3px solid var(--good); }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .tab.on { background: #3b5368; outline: 2px solid var(--accent); }
.fld { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; } .fld input, .fld select, .fld textarea, #menu input[type=search] { font: inherit; padding: 8px; background: #0f1720; color: var(--ink); border: 1px solid var(--rim); border-radius: 6px; width: 100%; }
.cardList { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .cardRow { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; width: 100%; } .cardRow .txt { font-size: 12px; opacity: .85; }
.formMsg { white-space: pre-wrap; word-break: break-word; margin: 8px 0; padding: 8px; background: #0f1720; border-radius: 6px; font: 12px/1.4 monospace; -webkit-user-select: text; user-select: text; max-height: 50vh; overflow: auto; }
.formMsg.err { color: var(--bad); } .formMsg.ok { color: var(--good); } .loginMsg { min-height: 1.3em; }
.rolebadge { font-weight: 700; color: var(--accent); }
/* pile bar: readable, tappable deck / grave / exile / face-down for every player */
#pilebar { display: flex; gap: 8px; overflow-x: auto; padding: 4px 8px; background: #101820; border-top: 1px solid #2a3948; }
#pilebar .pp { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 8px; background: #17212c; }
#pilebar .pp.me { outline: 1px solid var(--good); } #pilebar .pn { font-weight: 700; font-size: 12px; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pilebar button { min-height: 34px; padding: 2px 8px; font-size: 12px; line-height: 1.1; text-align: left; } #pilebar button small { display: block; color: var(--muted); max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grp { border: 1px solid #2a3948; border-radius: 10px; margin: 10px 0; padding: 4px 10px 10px; } .grp legend { padding: 0 6px; font-weight: 700; color: var(--accent); }
.subtabs { margin-top: -4px; } .artPrev { display: block; max-width: 160px; max-height: 224px; margin: 8px 0; border-radius: 6px; border: 1px solid var(--rim); }
.cardRow.static { cursor: default; } details summary { cursor: pointer; margin: 6px 0; }

/* uploaded card art fills the card face; the name, level and stats stay readable on dark strips */
.face { overflow: hidden; } .face .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.face.hasArt .nm, .face.hasArt .lv, .face.hasArt .st { position: relative; z-index: 1; background: #000b; color: #fff; padding: 1px 3px; border-radius: 3px; }
.face.hasArt .lv { color: #ffd76a; }

.frontFrame { width: 200px; max-width: 60%; aspect-ratio: 825 / 1125; margin: 8px 0; border: 2px dashed var(--rim); border-radius: 8px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; overflow: hidden; }
.frontFrame .artPrev { max-width: 100%; max-height: 100%; width: 100%; height: 100%; margin: 0; object-fit: cover; border: 0; }
.poolLine { font-weight: 600; margin: 6px 0; } .chk { display: block; margin: 8px 0; }
.artPrev[hidden], .frontFrame span[hidden] { display: none !important; }

.field.hasImg .fieldHead { background: #000a; border-radius: 6px; padding: 2px 6px; }
.frontFrame.loadFrame, .frontFrame.fieldFrame { aspect-ratio: 16 / 9; width: 260px; } .fieldGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
#loadscreen { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: radial-gradient(circle at 50% 40%, #2a1a3f, #0b0712 70%); color: #f3e9ff; text-align: center; padding: 16px; transition: opacity .45s; }
#loadscreen[hidden] { display: none; } #loadscreen.fade { opacity: 0; }
.loadTitle { font-size: clamp(24px, 6.4vw, 72px); font-weight: 800; letter-spacing: .08em; line-height: 1.05; max-width: calc(100vw - 32px); padding: 0 16px; box-sizing: border-box; overflow-wrap: break-word; text-wrap: balance; }   /* never wider than the screen: the title used to touch or pass both edges */ .loadArena { font-size: clamp(22px, 5vw, 44px); font-weight: 700; letter-spacing: .6em; padding-left: .6em; color: #e7c46a; }
#loadImg { max-width: min(70vw, 420px); max-height: 42vh; border-radius: 12px; margin-top: 12px; animation: heartbeat 2.6s ease-in-out infinite; transform-origin: center; } #loadImg[hidden] { display: none; }
#loadscreen.noimg .loadTitle { animation: heartbeat 2.6s ease-in-out infinite; } .loadHint { opacity: .6; font-size: 14px; margin-top: 8px; }
@keyframes heartbeat { 0% { transform: scale(1); } 12% { transform: scale(1.08); } 24% { transform: scale(1); } 38% { transform: scale(1.05); } 55%, 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { #loadImg, #loadscreen.noimg .loadTitle { animation: none; } }

.brandWrap { display: flex; flex-direction: column; align-items: center; animation: heartbeat 4.8s ease-in-out infinite; transform-origin: center; } .brandWrap[hidden] { display: none; }
#loadBrand, #loadMirror { max-width: min(80vw, 520px); max-height: 26vh; } #loadBrand[hidden], #loadMirror[hidden] { display: none; }
#loadMirror { transform: scaleY(-1); opacity: .35; margin-top: 2px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); mask-image: linear-gradient(to bottom, #000 0%, transparent 70%); }
#loadscreen.mirror-side .brandWrap { flex-direction: row; gap: 14px; } #loadscreen.mirror-side #loadMirror { transform: scaleX(-1); opacity: .85; -webkit-mask-image: none; mask-image: none; }
#loadChecks { list-style: none; margin: 14px 0 0; padding: 0; max-width: 90vw; font-size: 14px; text-align: left; } #loadChecks li { margin: 4px 0; padding-left: 20px; position: relative; opacity: .95; }
#loadChecks li::before { content: '\2022'; position: absolute; left: 4px; color: #e7c46a; } #loadChecks li.good::before { content: '\2713'; color: #7ddc8a; } #loadChecks li.bad::before { content: '!'; color: #ff9a8a; font-weight: 700; } #loadChecks li.bad { color: #ffd2c9; }
@media (prefers-reduced-motion: reduce) { .brandWrap { animation: none; } }

/* ---- main menu: the core screen after the loading screen ---- */
.overlay { z-index: 80; } #store.storeScreen { z-index: 70; background: #0c1218; display: block; padding: calc(8px + var(--safe-t)) 10px calc(8px + var(--safe-b)); } #store.storeScreen[hidden] { display: none; }
.homeScreen { background-color: #0b0712; background-image: var(--menubg, radial-gradient(circle at 50% 30%, #2a1a3f, #0b0712 75%)); background-size: cover; background-position: center; background-repeat: no-repeat; align-items: stretch; }
.homeWrap { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; min-height: 100%; gap: 12px; }
.homeTop { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; background: #000a; border-radius: 12px; padding: 8px 12px; }
.homeBrand { display: flex; flex-direction: column; line-height: 1.05; } .homeBrand b { font-size: 18px; letter-spacing: .08em; } .homeBrand span { font-size: 13px; letter-spacing: .5em; color: #e7c46a; }
.homeTools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chip { padding: 4px 12px; min-height: 34px; border-radius: 999px; } .rolechip { font-weight: 700; color: var(--accent); padding: 0 6px; }
.coinChip { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.homeGrid { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: clamp(12px, 2.2vw, 24px); flex: 1; padding: 18px 8px; }
.bigBtn { width: 100%; max-width: 210px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center; border: 2px solid #8fb0cc; border-radius: 20px; background: #17212ccc; color: var(--ink); box-shadow: 0 6px 18px #0008; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.bigBtn:hover, .bigBtn:focus-visible, .bigBtn.held, .bigBtn:active { transform: scale(1.14); z-index: 3; background: radial-gradient(circle at 50% 18%, var(--btn-hi), var(--btn-main) 75%); border-color: #fff9; box-shadow: 0 10px 28px #000a, 0 0 0 3px color-mix(in srgb, var(--btn-ring) 60%, transparent); }
.bigGlyph { font-size: clamp(34px, 6vw, 56px); line-height: 1; } .bigLabel { font-size: clamp(15px, 2.4vw, 20px); } .bigSub { font-size: 11px; color: var(--muted); line-height: 1.2; }
.homeNote { text-align: center; color: var(--muted); font-size: 12px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .bigBtn { transition: none; } }
.wideSheet { max-width: 1100px; } .panel { background: #0f1720cc; border: 1px solid var(--rim); border-radius: 10px; padding: 10px 12px; margin: 10px 0; } .panel h3 { margin: 0 0 6px; }
.modesLayout { display: grid; grid-template-columns: minmax(250px, 320px) 1fr; gap: 16px; align-items: start; } @media (max-width: 760px) { .modesLayout { grid-template-columns: 1fr; } }
.mmPanel { background-color: #17212c; background-image: linear-gradient(#000b, #0008), var(--mmbg, none); background-size: cover; background-position: center; border: 2px solid var(--accent); border-radius: 14px; padding: 14px; align-self: start; } .mmPanel h3 { margin: 0 0 4px; color: var(--accent); } .mmStatus { min-height: 1.4em; }
.modeGrid { padding-top: 0; } .good { color: var(--good); } .bad { color: var(--bad); }
.deckList { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; } .deckRow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 8px 10px; background: #0f1720cc; border: 1px solid var(--rim); border-radius: 8px; }
.deckBar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; } .deckTotal { font-weight: 600; margin: 6px 0; }
.deckCols { display: grid; grid-template-columns: 1fr minmax(220px, 320px); gap: 12px; } @media (max-width: 700px) { .deckCols { grid-template-columns: 1fr; } }
.poolGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; max-height: 52vh; overflow-y: auto; margin-top: 6px; } .poolCard { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; }
.deckCards { display: flex; flex-direction: column; gap: 4px; max-height: 52vh; overflow-y: auto; } .deckCard { display: flex; gap: 8px; text-align: left; min-height: 34px; padding: 4px 10px; }
/* store */
.storeSheet { width: 100%; max-width: 1100px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; } .storeHead { display: flex; align-items: center; gap: 12px; } .storeHead h2 { margin: 0; flex: 1; } .storeBal { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.storeTabs { display: flex; flex-wrap: wrap; gap: 6px; } .storeScroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 2px 20px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .tile { display: flex; flex-direction: column; gap: 6px; background: #17212c; border: 1px solid var(--rim); border-radius: 14px; padding: 10px; transition: transform .15s, border-color .15s; } .tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.tileArt { position: relative; aspect-ratio: 5 / 4; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #3a2a58, #14202c); } .tileArt-deck { background: linear-gradient(135deg, #5a2a2a, #14202c); } .tileArt-cardback { background: #0f1720; } .tileArt-profile { background: #0f1720; }
.tileImg { width: 100%; height: 100%; object-fit: contain; } .tileArt-profile .tileImg { object-fit: cover; } .tileGlyph { font-size: 54px; } .tileName { font-size: 15px; } .tileDesc { font-size: 12px; color: var(--muted); } .tile .fear { transform: scale(.7); } .tile .price { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.newBadge { position: absolute; top: 6px; right: 6px; background: var(--accent); color: #111; font-weight: 800; font-size: 11px; padding: 2px 8px; border-radius: 999px; } .weekBanner { display: flex; flex-direction: column; gap: 2px; background: linear-gradient(90deg, #3a2a58, #17212c); border: 1px solid var(--accent); border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; }
/* profile, admin lists */
.lookList, .cosList { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; } .lookRow, .cosRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 10px; background: #0f1720cc; border: 1px solid var(--rim); border-radius: 8px; } .lookRow b { flex: 1; } .lookImg { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; background: #222; display: inline-flex; align-items: center; justify-content: center; } .cosList { max-height: none; }
.adminGrid { grid-template-columns: repeat(auto-fit, minmax(clamp(120px, 17vw, 170px), 1fr)); } .adminTile { max-width: 180px; } .adminTile .bigGlyph { font-size: clamp(28px, 5vw, 44px); } .adminTile .bigLabel { font-size: clamp(13px, 2vw, 16px); }
/* in-game life frames: opponent top left, you bottom right */
#scene { position: relative; } #lifehud { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.lifeStack { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; gap: 6px; } .lifeBox { display: flex; align-items: center; gap: 8px; min-width: 150px; padding: 6px 12px; background: linear-gradient(135deg, #1d2a38f2, #0d141cf2); border: 2px solid var(--accent); border-radius: 12px; box-shadow: 0 4px 14px #000a; }
.lifeBox.br { position: absolute; right: 6px; bottom: 6px; border-color: var(--good); } .lifeBox.out { opacity: .45; } .lifeText { display: flex; flex-direction: column; line-height: 1.1; } .lifeName { font-size: 14px; } .lifeNum { font-size: 22px; font-weight: 800; letter-spacing: .02em; } .lifeBox .avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid #fff4; }
@media (max-height: 460px) { .lifeBox { min-width: 110px; padding: 3px 8px; } .lifeNum { font-size: 17px; } .lifeBox .avatar { width: 26px; height: 26px; } }
/* phones: two big buttons per row instead of one */
@media (max-width: 520px) { .homeGrid .bigBtn { width: calc(50% - 10px); max-width: 190px; } }

/* ---- opening a purchase: glowing pack, rip, cards dance into a box-shaped row ---- */
.packOverlay { position: fixed; inset: 0; z-index: 95; background: radial-gradient(ellipse at 50% 35%, #1b2230, #05070b 75%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 12px 14px; overflow: hidden; }
.packHead { width: 100%; max-width: 980px; display: flex; gap: 8px; align-items: center; } .packHead .packTitle { flex: 1; font-size: 1.05rem; }
.packStage { position: relative; flex: 1 1 auto; min-height: 250px; width: 100%; display: flex; align-items: center; justify-content: center; }
.packStage.done { flex: 0 0 0; min-height: 0; overflow: hidden; }
.packItem { position: relative; width: 160px; height: 280px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; touch-action: manipulation; }
.packItem:hover, .packItem:focus-visible { transform: scale(1.06); transition: transform .18s ease; outline: none; }
.packBody, .packTop { position: absolute; inset: 0; }
.packBody { clip-path: polygon(0 20%, 8% 22%, 17% 19%, 27% 22%, 37% 19%, 48% 22%, 58% 19%, 69% 22%, 79% 19%, 90% 22%, 100% 20%, 100% 100%, 0 100%); }
.packTop { clip-path: polygon(0 0, 100% 0, 100% 20%, 90% 22%, 79% 19%, 69% 22%, 58% 19%, 48% 22%, 37% 19%, 27% 22%, 17% 19%, 8% 22%, 0 20%); transform-origin: 0 20%; }
.packArt { position: absolute; inset: 0; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; border: 4px solid #e3e9f0; box-shadow: inset 0 0 0 3px #0a0a0a, inset 0 0 30px #000a, 0 0 0 1px #fff8; }
.goldArt { background: linear-gradient(125deg, #6b4a00, #ffe27a 22%, #b07d00 40%, #fff6c4 52%, #9a6b00 68%, #ffd24d 86%, #7a5400); background-size: 260% 260%; animation: goldShift 5s ease-in-out infinite; }
.deckArt { background: linear-gradient(125deg, #3a0d12, #c0392b 30%, #5b1018 55%, #e8c4a0 70%, #4a0c12); background-size: 260% 260%; animation: goldShift 6s ease-in-out infinite; }
@keyframes goldShift { 0%, 100% { background-position: 0% 40%; } 50% { background-position: 100% 60%; } }
.packName { color: #0a0a0a; font-size: 1.15rem; text-align: center; padding: 0 12px; text-shadow: 0 0 3px #fff, 0 0 8px #e9eef5, 1px 1px 0 #fff; letter-spacing: .5px; }
.packKind { color: #0a0a0a; font-size: .66rem; letter-spacing: 2px; text-shadow: 0 0 4px #fff; } .packCrest { font-size: 2.6rem; color: #0a0a0a; text-shadow: 0 0 6px #fff, 0 0 14px #dfe6ee; }
/* the negative image of light: a band that INVERTS what is under it, so black becomes white and silver and the gold becomes dark */
.packSweep { position: absolute; top: -10%; bottom: -10%; width: 38%; left: -50%; background: linear-gradient(105deg, transparent, #fff 50%, transparent); mix-blend-mode: difference; animation: negSweep 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes negSweep { 0% { left: -50%; } 55%, 100% { left: 130%; } }
.packGlow { position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, #ffe9a066 0%, #ffd56a33 35%, transparent 68%); animation: aroma 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes aroma { 0%, 100% { transform: scale(.85); opacity: .65; } 50% { transform: scale(1.1); opacity: 1; } }
.wisp { position: absolute; left: 50%; bottom: 40%; width: 18px; height: 54px; margin-left: -9px; border-radius: 50%; background: radial-gradient(ellipse, #fff3c8aa, transparent 70%); filter: blur(4px); opacity: 0; animation: wisp 4.2s ease-in infinite; animation-delay: var(--wd); transform: translateX(var(--wx)); pointer-events: none; }
@keyframes wisp { 0% { opacity: 0; transform: translate(var(--wx), 40px) scale(.6); } 25% { opacity: .85; } 100% { opacity: 0; transform: translate(calc(var(--wx) * 1.6), -190px) scale(1.5); } }
.packHint { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; color: #cfd6df; font-size: .85rem; animation: hint 1.6s ease-in-out infinite; } @keyframes hint { 50% { opacity: .4; } }
.packFlash { position: absolute; inset: -20px; background: radial-gradient(circle, #fff, #fff0 65%); opacity: 0; pointer-events: none; }
.packItem.ripping .packTop { animation: ripTop .7s ease-in forwards; } .packItem.ripping .packFlash { animation: flash .7s ease-out forwards; } .packItem.ripping .packHint, .packItem.ripping .wisp { display: none; }
.packItem.ripping .packGlow { animation: aroma .5s ease-out 2; } .packItem.ripping { cursor: default; transform: none; }
.packItem.empty .packBody, .packItem.empty .packTop, .packItem.empty .packGlow { opacity: .15; transition: opacity .8s; }
@keyframes ripTop { 0% { transform: none; opacity: 1; } 100% { transform: translate(90px, -120px) rotate(32deg); opacity: 0; } }
@keyframes flash { 0% { opacity: 0; } 35% { opacity: .95; } 100% { opacity: 0; } }
.cardBox { width: 100%; max-width: 1000px; border: 3px solid #b7c2d0; border-radius: 14px; background: linear-gradient(#0b0f16, #131a25); box-shadow: inset 0 10px 30px #000d, 0 0 24px #0009; padding: 8px 10px 12px; flex: 0 1 auto; }
.boxLabel { margin: 0 0 6px; color: #cfd6df; font-size: .85rem; }
.cardRow3d { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 10px 6px 12px; perspective: 900px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.cardRow3d .boxCard { flex: 0 0 auto; width: 104px; height: 146px; position: relative; scroll-snap-align: start; }
.cardRow3d .boxCard.dancing { animation: cardOut 1.9s cubic-bezier(.3, .8, .3, 1) var(--delay) backwards; }
@keyframes cardOut {
  0% { transform: translate(var(--fx), var(--fy)) scale(.25) rotateY(0) rotate(0); opacity: 0; z-index: 5; }
  15% { opacity: 1; }
  45% { transform: translate(calc(var(--fx) * .35 + var(--wx)), calc(var(--fy) * .35 + var(--wy))) scale(1.15) rotateY(540deg) rotate(var(--wr)); z-index: 5; }
  70% { transform: translate(calc(var(--wx) * -.25), -22px) scale(1.05) rotateY(900deg) rotate(calc(var(--wr) * -.5)); }
  100% { transform: none; z-index: 1; }
}
.packFoot { min-height: 44px; } .packFoot button { min-width: 180px; min-height: 44px; font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .goldArt, .deckArt, .packSweep, .packGlow, .wisp, .packHint { animation: none; } }
@media (max-width: 520px) { .packItem { width: 150px; height: 214px; } .cardRow3d .boxCard { width: 88px; height: 124px; } .packGlow { width: 280px; height: 280px; margin: -140px 0 0 -140px; } }
.qtyRow { display: flex; align-items: center; gap: 8px; margin: 4px 0; } .qtyBtn { min-width: 36px; min-height: 36px; font-size: 1.2rem; } .qtyNum { min-width: 28px; text-align: center; font-weight: 700; }
.cardRow3d.flying { overflow: visible; } .packOverlay .cardBox { position: relative; z-index: 3; }

/* ---- the Shuffle button: thin, red, raised (3D) bar on the side of the player's own field; never covers the zones ---- */
.field { position: relative; }
.shuffleBtn { position: absolute; left: -2px; top: 22%; bottom: 22%; width: 15px; min-height: 60px; padding: 0; border: 0; border-radius: 4px 2px 2px 4px; cursor: pointer; z-index: 6;
  background: linear-gradient(90deg, #ff6b5e 0%, #d11a1a 35%, #8e0c0c 100%); box-shadow: 0 3px 0 #4d0505, 3px 0 0 #6d0808, 0 6px 10px #000b, inset 1px 1px 0 #ffb3ab, inset -1px 0 2px #0006; transition: transform .08s ease, box-shadow .08s ease; touch-action: manipulation; opacity: .78; }
.shuffleBtn::before { content: ''; position: absolute; inset: 0 -10px; }
.shuffleBtn:hover, .shuffleBtn:focus-visible { opacity: 1; outline: none; box-shadow: 0 3px 0 #4d0505, 3px 0 0 #6d0808, 0 6px 12px #000b, 0 0 0 2px #ffd0cc88, inset 1px 1px 0 #ffb3ab; }
.shuffleBtn:active { transform: translate(1px, 3px); box-shadow: 0 0 0 #4d0505, 0 1px 3px #000b, inset 1px 1px 0 #ff8c82; }
.shuffleBtn.ready { opacity: 1; animation: shufGlow 1.6s ease-in-out infinite; } @keyframes shufGlow { 50% { box-shadow: 0 3px 0 #4d0505, 3px 0 0 #6d0808, 0 0 14px 3px #ff3b30aa, inset 1px 1px 0 #ffb3ab; } }
.shuffleTxt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .52rem; letter-spacing: 1.5px; font-weight: 800; color: #fff3f1; text-shadow: 0 1px 0 #5a0505; pointer-events: none; }
@media (max-width: 520px) { .shuffleBtn { width: 12px; left: -1px; } .shuffleTxt { font-size: .46rem; letter-spacing: 1px; } }
@media (prefers-reduced-motion: reduce) { .shuffleBtn.ready { animation: none; } }
.field.mineField { padding-left: 19px; } @media (max-width: 520px) { .field.mineField { padding-left: 15px; } }

/* language chooser (loading screen, settings, in-game settings) */
.langPick { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .langSelect { min-height: 38px; max-width: 70vw; }
.langNote { font-size: .78rem; color: #c9a95c; } #loadLang { position: absolute; top: 12px; right: 12px; z-index: 3; } [dir=rtl] #loadLang { right: auto; left: 12px; }
#loadscreen .langPick { background: #0008; padding: 6px 10px; border-radius: 10px; }

/* ---- the tracing emblem: a yellow light follows the outline and leaves a fading line ---- */
.traceCanvas { width: 120px; height: 120px; display: block; margin: 4px auto; filter: drop-shadow(0 0 8px #ffd40066); } #loadscreen .traceCanvas { width: min(230px, 30vh); height: min(230px, 30vh); margin-top: 10px; flex-shrink: 0; }
.traceCanvas.small { width: 84px; height: 84px; margin: 0; }
.slideLoad { position: fixed; z-index: 120; top: 76px; right: 14px; padding: 8px; border-radius: 16px; background: #0b0f16dd; border: 1px solid #ffd40044; box-shadow: 0 6px 20px #000a; pointer-events: none; animation: slideInRight .32s ease-out both; }
[dir=rtl] .slideLoad { right: auto; left: 14px; } .slideLoad.out { animation: slideOutRight .36s ease-in both; }
@keyframes slideInRight { from { transform: translateX(120%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes slideOutRight { to { transform: translateX(120%); opacity: 0; } }
.screen > .sheet, .screen > .homeWrap { animation: screenSlide .34s ease-out both; } @keyframes screenSlide { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .screen > .sheet, .screen > .homeWrap, .slideLoad, .slideLoad.out { animation: none; } }
/* people: friends, card pool, trades, invitations, add-friend */
.friendRow{display:flex;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid #2a3544}.linkBtn{background:none;border:0;color:#8cc8ff;text-decoration:underline;font-size:1em;cursor:pointer;padding:4px}
.recordPanel .switchRow{display:flex;gap:8px;align-items:center;margin:8px 0}.poolGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;max-height:52vh;overflow:auto;padding:4px}
.poolCard{position:relative;display:flex;flex-direction:column;gap:3px;padding:8px;border:1px solid #3a4a60;border-radius:8px;background:#141c27;font-size:.85em}.poolCard.noTrade{opacity:.6;border-style:dashed}.poolCard.starred{border-color:#e8c34a}
.poolQty{position:absolute;top:4px;right:6px;font-style:normal;color:#e8c34a}.miniBtn{padding:3px 8px;font-size:.8em;border-radius:6px}.miniBtn.on{background:#e8c34a;color:#111}.offerN{display:inline-block;min-width:1.4em;text-align:center}
.tradeBoxes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}.cardBoxT{min-height:120px;border:2px solid #4a5d78;border-radius:10px;padding:8px;background:#0e141c;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}.cardBoxT h4,.cardBoxT h5{flex:0 0 100%;margin:0}.emptyBox{flex:0 0 100%;text-align:center;padding:20px 0}
.tradePicker{margin-top:10px;border-top:1px solid #2a3544;padding-top:8px}.inviteBar{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 4px);z-index:60;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}.inviteBar[hidden]{display:none}
.invite{pointer-events:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#1b2430;border:1px solid #e8c34a;border-radius:10px;padding:8px 12px;max-width:94vw}
.addFriendBtn{margin-inline-start:8px}@media (max-width:600px){.tradeBoxes{grid-template-columns:1fr}}

/* ---- hand dock: the hand and the turn buttons share ONE row (no menu under the hand) ---- */
#handDock { display: flex; align-items: flex-end; gap: 6px; padding: 0 6px; --handh: 110px; }
#handDock #hand { flex: 1; min-width: 0; }
#handDock #controls { flex: 0 0 auto; display: grid; grid-template-columns: 1fr; gap: 3px; padding: 4px 0 2px; align-content: end; }
#handDock #controls button { min-height: 26px; padding: 1px 8px; font-size: 12px; line-height: 1.1; }
#hand .card { touch-action: none; }
#actionPrompt { position: fixed; z-index: 60; background: #121c27f2; border: 1px solid var(--accent); border-radius: 12px; padding: 8px 10px; max-width: min(92vw, 420px); box-shadow: 0 8px 24px #000a; }
#actionPrompt[hidden] { display: none; } .apTitle { font-size: 13px; margin-bottom: 6px; } .apTitle b { color: var(--accent); }
.apRow { display: flex; flex-wrap: wrap; gap: 6px; } .apBtn { min-height: 34px; padding: 4px 10px; font-size: 13px; } .apBtn.on { background: #2f6f55; outline: 2px solid var(--good); } .apBtn.ghost { background: transparent; }
.apNote { font-size: 12px; color: var(--muted); margin: 0 0 6px; }
#dragGhost { position: fixed; z-index: 90; width: 62px; aspect-ratio: 5 / 7; pointer-events: none; transform: translate(-50%, -60%) rotate(-4deg); filter: drop-shadow(0 10px 8px #000a); }
#dragGhost .card { position: relative; inset: auto; width: 100%; height: 100%; transform: none; }
.slot.dropOk { outline: 2px dashed var(--good); background: #4cc38a26; box-shadow: 0 0 12px #4cc38a88 inset; } body.handDragging { cursor: grabbing; -webkit-user-select: none; user-select: none; }
.lifeMark { vertical-align: -3px; color: var(--accent); }
@media (max-height: 460px) { #handDock #controls { padding: 1px 0; } #handDock #controls button { min-height: 22px; font-size: 11px; } #handDock { --handh: 70px; } }

/* ---- screen direction: when the device does not turn, the page is turned with CSS (see screen.js) ---- */
html[data-rot="land"] body, html[data-rot="port"] body { position: fixed; top: 0; width: 100vh; height: 100vw; width: 100dvh; height: 100dvw; overflow: hidden; transform-origin: 0 0; max-width: none; }
html[data-rot="land"] body { left: 100vw; left: 100dvw; transform: rotate(90deg); }
html[data-rot="port"] body { left: 0; top: 100vh; top: 100dvh; transform: rotate(-90deg); }
html[data-rot] { overflow: hidden; }
.orientPick { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; max-width: 360px; } .orientPick select { font: inherit; padding: 8px; background: #0f1720; color: var(--ink); border: 1px solid var(--rim); border-radius: 6px; }

/* owner 2026-10-11 19:11: REAL FOIL boosters. The face is a rendered picture per metal; the depth layer sits 7px behind it (visible as the pack tilts), with the back foil. */
.packArt.realFoil { background: none !important; box-shadow: none; transform-style: preserve-3d; }
.packArt.foilArt.realFoil .packFace, .packArt.foilArt.realFoil .packDepth { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; pointer-events: none; }
.packArt.foilArt.realFoil .packFace { z-index: 1; filter: drop-shadow(0 6px 8px #0009); }
.packArt.foilArt.realFoil .packDepth { z-index: 0; transform: translateZ(-7px); filter: brightness(.55); }
.packItem .packBody, .packItem .packTop { transform-style: preserve-3d; }
.packArt.foilArt.realFoil .packName { position: absolute; left: 8%; right: 8%; top: 13%; z-index: 2; text-align: center; font-family: Georgia, serif; font-weight: 800; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.packArt.foilArt.realFoil .packSweep { z-index: 3; opacity: .35; mix-blend-mode: screen; }
.packItem:not(.ripping):not(:hover) .packBody, .packItem:not(.ripping):not(:hover) .packTop { animation: packSway 7s ease-in-out infinite; }   /* a slow idle sway so the thickness shows */
@keyframes packSway { 0%, 100% { transform: rotateX(4deg) rotateY(-10deg); } 50% { transform: rotateX(-3deg) rotateY(10deg); } }
@media (prefers-reduced-motion: reduce) { .packItem .packBody, .packItem .packTop { animation: none !important; } }
/* ---- metal booster packs (gold / silver / bronze) with the game emblem mirrored; crimped top and bottom like a real foil pack ---- */
.foilArt { border-color: #00000055; box-shadow: inset 0 0 0 2px #0006, inset 0 0 38px #0008, 0 0 0 1px #fff6; background-size: 260% 260%; animation: goldShift 5s ease-in-out infinite; }
.foil-gold { background: linear-gradient(125deg, #6b4a00, #ffe27a 18%, #b07d00 34%, #fff6c4 48%, #9a6b00 62%, #ffd24d 80%, #7a5400), repeating-linear-gradient(90deg, #fff1 0 2px, #0001 2px 5px); background-blend-mode: normal, overlay; }
.foil-silver { background: linear-gradient(125deg, #5b6470, #f4f7fb 20%, #9aa5b3 38%, #ffffff 50%, #858f9c 64%, #e3e9f0 82%, #626b77), repeating-linear-gradient(90deg, #fff1 0 2px, #0001 2px 5px); background-blend-mode: normal, overlay; }
.foil-bronze { background: linear-gradient(125deg, #4a2610, #d98a4e 20%, #8a4a1d 38%, #f2b27d 50%, #74391a 64%, #cf8247 82%, #4d2811), repeating-linear-gradient(90deg, #fff1 0 2px, #0001 2px 5px); background-blend-mode: normal, overlay; }
.packCrimp { position: absolute; left: 0; right: 0; height: 15%; background: repeating-linear-gradient(90deg, #0000002e 0 3px, #ffffff40 3px 6px); box-shadow: 0 0 6px #0007; pointer-events: none; }
.packCrimp.top { top: 0; } .packCrimp.bottom { bottom: 0; }
.packEmblem { width: 54%; max-height: 38%; object-fit: contain; transform: scaleX(-1); filter: grayscale(1) contrast(1.4) drop-shadow(0 1px 0 #fff8) drop-shadow(0 -1px 0 #0008); mix-blend-mode: multiply; opacity: .88; }
.packEmblemGlyph { font-size: 3rem; line-height: 1; color: #1a1205; filter: drop-shadow(0 1px 0 #fff8); mix-blend-mode: normal; text-align: center; }
.foil-silver .packEmblem, .foil-bronze .packEmblem { opacity: .85; }
.packMini { position: relative; width: 80px; height: 140px; margin: 0 auto; } .packMini .packArt { border-radius: 8px; border-width: 2px; } .packMini .packName { font-size: .7rem; padding: 0 6px; } .packMini .packKind { font-size: .45rem; letter-spacing: 1px; } .packMini .packEmblemGlyph { font-size: 1.6rem; }
.gemIcon { vertical-align: middle; } .gemChip { margin-left: 10px; } .gemBal { font-size: 1.3rem; margin: 6px 0; } .gemPrice { color: #ff8aa0; }
.modalBack { position: fixed; inset: 0; z-index: 120; background: #000b; display: flex; align-items: center; justify-content: center; padding: 12px; overflow: auto; }
.modalBox { background: #121820; border: 1px solid #3a4658; border-radius: 12px; padding: 16px; max-width: 460px; width: 100%; max-height: 92vh; overflow: auto; } .modalBox.wide { max-width: 620px; }
.modalBox .fld { display: block; margin: 6px 0; } .modalBox .fld span { display: block; font-size: .8rem; color: #aab4c3; } .modalBox .fld input, .modalBox .fld select, .modalBox .fld textarea { width: 100%; box-sizing: border-box; min-height: 40px; }
.modalBox .row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .modalBox button { min-height: 44px; }
.warnText { max-height: 46vh; overflow: auto; border: 1px solid #5a6a80; border-radius: 8px; padding: 8px 12px; background: #0b0f15; } .warnText p { margin: .6em 0; } .warnText .big, .modalBox .big { font-weight: 700; }
.bundleTile .price, .gemTile .price { margin: 6px 0; } .notice { color: #ffcf6b; }

/* ---- admin: player reports, level chooser, miniature board ---- */
.nameBtn { background: #1d2530; border: 1px solid #4a5870; color: #e9eef5; border-radius: 6px; padding: 4px 10px; min-height: 36px; cursor: pointer; font-weight: 700; }
.nameBtn.lvl-light { border-color: #d9b43c; } .nameBtn.lvl-mild { border-color: #e8833a; } .nameBtn.lvl-banned { border-color: #d6455d; }
.reportTable { width: 100%; border-collapse: collapse; } .reportTable th, .reportTable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #2b3442; font-size: .9rem; }
.lvlOpt { display: block; margin: 6px 0; } .reportDetail .explain p { margin: .5em 0; } .restrictedList li { margin: 6px 0; list-style: none; }
.miniBoard { display: flex; flex-direction: column; gap: 8px; border: 1px solid #3a4658; border-radius: 8px; padding: 8px; background: #0b0f15; }
.mbSide { border-radius: 6px; padding: 6px; background: #121820; } .mbSide.reported { outline: 2px solid #d6455d; } .mbHead { display: block; margin-bottom: 4px; }
.mbRow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0; font-size: .8rem; } .mbZone { width: 64px; color: #8c98aa; text-transform: uppercase; font-size: .65rem; }
.mbSlot { min-width: 66px; min-height: 26px; border: 1px dashed #3a4658; border-radius: 4px; display: inline-flex; padding: 1px; } .mbCard { background: #2a3a55; border-radius: 3px; padding: 2px 4px; font-size: .72rem; } .mbCard.def { background: #44385a; } .mbCard.down { background: #222; color: #888; }
.evList { max-height: 180px; overflow: auto; font-size: .8rem; } .evList .byReported { color: #ff8aa0; }

/* ---- forfeit: hold ring, waving flags, the A.I.'s speech bubbles ---- */
.holdRing { position: fixed; z-index: 90; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s; background: conic-gradient(#ffd24d var(--p, 0deg), #ffffff22 0); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); }
.holdRing.on { opacity: 1; } .holdTxt { position: absolute; left: 50%; top: 110%; transform: translateX(-50%); white-space: nowrap; font-size: .75rem; color: #ffe9a0; text-shadow: 0 0 4px #000; -webkit-mask: none; }
.flagOverlay { position: fixed; inset: 0; z-index: 140; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #000a; pointer-events: none; transition: opacity .6s; } .flagOverlay.out { opacity: 0; }
.flagPole { position: relative; width: 240px; height: 170px; border-left: 8px solid #8a6a3a; border-radius: 4px; } .flagCloth { position: absolute; left: 0; top: 6px; width: 220px; height: 130px; display: flex; }
.flagStrip { flex: 1; height: 100%; animation: flagWave 1.1s ease-in-out infinite; animation-delay: calc(var(--i) * -90ms); }
.flagOverlay.white .flagStrip { background: #fafafa; box-shadow: inset 0 -10px 12px #0002; } .flagOverlay.black .flagStrip { background: #0b0b0b; box-shadow: inset 0 -10px 12px #fff2; } .flagOverlay.black .flagCloth { filter: drop-shadow(0 0 5px #ffffffcc); }
@keyframes flagWave { 0%, 100% { transform: translateY(-7px) scaleY(.97); } 50% { transform: translateY(7px) scaleY(1.03); } }
.flagText { font-size: 2rem; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px #000; text-align: center; padding: 0 12px; } .flagOverlay.black .flagText { color: #ff6b81; }
.aiBubble { position: fixed; z-index: 130; left: 50%; top: 14%; transform: translateX(-50%); max-width: min(560px, 92vw); background: #1b2230ee; border: 1px solid #6a7a96; border-radius: 14px; padding: 8px 14px; color: #eef2f8; box-shadow: 0 6px 24px #000a; pointer-events: none; transition: opacity .7s; } .aiBubble.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .flagStrip { animation: none; } }

/* region picker + logo split tool */
.regionPicker { margin: 8px 0; }
.rpTools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.rpPart { border: 2px solid; background: transparent; color: inherit; padding: 4px 10px; border-radius: 6px; cursor: pointer; }
.rpPart.on { background: rgba(255,255,255,.14); font-weight: 700; }
.rpPart[data-set="1"] { box-shadow: inset 0 -4px 0 currentColor; }   /* marks a part that has a box, without changing the size of the button (the picture below must not move while dragging) */
.rpStage { position: relative; display: inline-block; max-width: 100%; touch-action: none; cursor: crosshair; background: repeating-conic-gradient(#2a2a2a 0 25%, #333 0 50%) 0 0 / 16px 16px; }
.rpStage img { display: block; max-width: 100%; max-height: 50vh; user-select: none; -webkit-user-drag: none; }
.rpBox { position: absolute; border: 2px solid; box-sizing: border-box; pointer-events: none; background: rgba(255,255,255,.08); }
.rpBox.active { background: rgba(255,255,255,.16); }
.rpBox > span { position: absolute; left: -2px; top: -1.4em; font-size: 11px; color: #000; padding: 0 5px; border-radius: 3px 3px 0 0; white-space: nowrap; }

/* card scanner */
.scanWarn { margin: 8px 0; padding-left: 18px; color: #f0c36b; font-size: 13px; }
.scanQ { border: 1px solid #55b6ff; border-radius: 8px; padding: 10px; margin: 10px 0; }
.scanQRow { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0; font-size: 14px; }
.scanSame { color: #f0c36b; }

/* one field at a time (phones held sideways, 3+ players, or chosen in Settings): flat board, swipe or arrows to change player */
#scene.flatScene { perspective: none; touch-action: pan-y; align-items: flex-start; }
#board.focus { gap: 3px; }
#board.focus .offFocus, #board.focus .allHidden { display: none; }
#board.focus .center .pile { display: none; }
.focusBar { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 4px; }
.focusArrow { min-width: 40px; min-height: 36px; font-size: 24px; line-height: 1; padding: 0 8px; border-radius: 10px; }
.focusDots { display: flex; flex: 1; gap: 4px; justify-content: center; flex-wrap: wrap; }
.focusDot { font-size: 12px; padding: 4px 8px; border-radius: 999px; opacity: .7; min-height: 30px; }
.focusDot.on { opacity: 1; outline: 2px solid var(--accent, #e0b84a); }
.focusDot.turn::before { content: "\25B6 "; color: var(--accent, #e0b84a); }
.focusDot.out { text-decoration: line-through; opacity: .4; }

/* No game started yet: the menu has nothing running behind it */
body.noGame #scene, body.noGame #handDock, body.noGame #actionPrompt, body.noGame #chatBtn, body.noGame #reportBtn, body.noGame #clock, body.noGame #timerBtn, body.noGame #status { display: none; }

/* Phone held sideways: the play area uses the full width (borders widened, no side gutters) and cards keep their standard size and artwork instead of shrinking to thumbnails */
@media (orientation: landscape) and (max-height: 520px) {
  #hand { min-height: 96px; padding: 3px 6px 2px; } #hand .card { width: 62px; } #handDock { --handh: 98px; }
  #scene { padding: 0; } #board { max-width: none; }
  #board.focus .field { margin: 0; border-radius: 0; }
  .oppHand .card { width: 34px; }
}

/* Bans screen */
.banRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid #ffffff14; } .banCase { padding: 8px 0; border-bottom: 1px solid #ffffff14; } .banQuote { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--accent, #e0b84a); background: #0b0f15; white-space: pre-wrap; word-break: break-word; }
.banTag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: #243447; } .banTag.warn { background: #6a4a0c; } .banTag.bad { background: #6d1d1d; } .banTag.ok { background: #1d5a34; }

.infoList { max-height: 46vh; overflow: auto; } .infoCard { padding: 4px 0; border-bottom: 1px solid #ffffff14; } .infoCard summary { cursor: pointer; } .infoNeeds { margin: 6px 0 6px 18px; padding: 0; }

.subInfo { margin: 8px 0; } .subInfo h4 { margin: 4px 0; } .subGrid { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 3px 12px; margin: 0; } .subGrid dt { color: var(--muted, #9fb0c3); } .subGrid dd { margin: 0; word-break: break-word; white-space: pre-wrap; }

/* ===== BUTTONS: the CLASSIC slate look by default (the gold-and-black Byzantine scheme was removed on the owner's word, 2026-10-10); a player may choose a
   generated hue in Profile settings (profile.js then sets the --btn-* variables) ===== */
:root { --btn-main: #2c3e50; --btn-shade: #22313f; --btn-hi: #3b5368; --btn-ink: #e9eef3; --btn-edge: #4b6a85; --btn-glint: rgba(255,255,255,.08); --btn-sheen: 0; --btn-label: #e9eef3; --btn-ring: #4b6a85; }
button { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,var(--btn-sheen)) 50%, transparent 62%), linear-gradient(180deg, var(--btn-hi) 0%, var(--btn-main) 36%, var(--btn-shade) 100%); color: var(--btn-ink); border: 1px solid var(--btn-edge); font-weight: 700; text-shadow: none; box-shadow: inset 0 1px 0 var(--btn-glint), 0 2px 5px #0006; }
button:hover:not(:disabled) { filter: brightness(1.1); } button:active:not(:disabled) { background: linear-gradient(180deg, var(--btn-shade), var(--btn-main)); }
button.primary { box-shadow: inset 0 1px 0 var(--btn-glint), 0 0 0 2px var(--btn-ring), 0 2px 6px #0008; }
button.danger { background: linear-gradient(180deg, #b24a43, #5c1612); color: #fff; border-color: #000; text-shadow: 0 1px 0 #0008; box-shadow: inset 0 1px 0 #ffffff40, inset 0 0 0 2px #000a, 0 0 0 1px var(--btn-main); }
button.chip.on, button.on { box-shadow: 0 0 0 2px var(--btn-ring), 0 0 0 4px #fff6; }
.bigBtn { background: radial-gradient(circle at 50% 18%, var(--btn-hi), var(--btn-shade) 75%); color: var(--btn-label); border: 2px solid var(--btn-ring); text-shadow: 0 1px 0 #0008; box-shadow: 0 6px 18px #0009; }
.bigBtn .bigLabel { color: var(--btn-label); } .bigBtn .bigSub { color: var(--btn-label); opacity: .75; font-weight: 400; }
.bigBtn:hover, .bigBtn:focus-visible, .bigBtn.held, .bigBtn:active { transform: scale(1.14); z-index: 3; background: radial-gradient(circle at 50% 18%, var(--btn-hi), #0b1118 70%); border-color: var(--btn-hi); box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px var(--btn-main), 0 10px 28px #000c, 0 0 0 3px color-mix(in srgb, var(--btn-main) 40%, transparent); }
.bigBtn.sel { border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 0 14px var(--btn-ring); }
.chip, .tiny { font-weight: 700; }

/* ===== PROFILE: banner, picture, flag; settings pickers ===== */
.pHead { margin: 0 0 10px; border: 1px solid var(--btn-edge); border-radius: 12px; overflow: hidden; background: #0f1720; }
.pBanner { position: relative; height: 104px; background-size: cover; }
.pBanner.mini { display: block; height: 34px; border-radius: 4px; width: 100%; }
/* .b-byzantine removed with the Byzantine scheme (owner 2026-10-10) */
.b-purple { background: radial-gradient(ellipse at 30% 20%, #8a3fb5, #5b2a86 55%, #2f1448); box-shadow: inset 0 -3px 0 #c8102e, inset 0 3px 0 var(--btn-main); }
.b-crimson { background: linear-gradient(120deg, #7a0f1a, #b3141b 50%, #4d0a10); box-shadow: inset 0 -3px 0 var(--btn-main); }
.b-night { background: radial-gradient(circle at 80% 10%, #3a4f78, #121a2c 60%, #05070d); box-shadow: inset 0 -3px 0 var(--btn-main); }
.b-olive { background: linear-gradient(120deg, #4b5a22, #2e3a14 60%, #1a2208); box-shadow: inset 0 -3px 0 var(--btn-main); }
.pAvatar { position: absolute; left: 14px; bottom: -34px; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--btn-main); background: #17212c; display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 800; color: var(--btn-main); overflow: hidden; box-shadow: 0 3px 8px #000b; }
.pAvatar img { width: 100%; height: 100%; object-fit: cover; }
.pLine { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px 10px 102px; min-height: 48px; }
.pName { margin: 0; font-size: 20px; } .pSub { color: var(--muted); font-size: 12px; }
.pFlag { height: 22px; width: auto; border: 1px solid #000; border-radius: 2px; box-shadow: 0 1px 3px #0009; vertical-align: middle; }
.pFlagRow { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } .pFlagRow .pFlag { height: 30px; }
.flagGrid { gap: 12px; padding: 8px 0; } .flagTile { max-width: 130px; padding: 6px; gap: 3px; border-radius: 12px; }
.flagTile .bigLabel { font-size: 12px; line-height: 1.15; } .flagTile .bigSub { font-size: 10px; } .flagTileImg { width: 86%; height: auto; border: 1px solid #000; border-radius: 2px; }
.flagTile:hover, .flagTile:focus-visible, .flagTile:active { transform: scale(1.07); }
.bannerRow { display: flex; flex-wrap: wrap; gap: 8px; } .bannerPick { width: 112px; padding: 4px; display: flex; flex-direction: column; gap: 3px; align-items: center; } .bannerPick i { font-style: normal; font-size: 11px; } .bannerPick.sel { box-shadow: inset 0 0 0 2px #000, 0 0 0 3px #fff; }
.sliderRow { display: grid; grid-template-columns: 150px 1fr 40px; gap: 8px; align-items: center; margin: 6px 0; } .sliderRow input { width: 100%; }
.themePreview { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; } .swatch { width: 34px; height: 34px; border-radius: 6px; border: 1px solid #000; }
@media (max-width: 520px) { .sliderRow { grid-template-columns: 1fr 1fr 34px; } .pAvatar { width: 62px; height: 62px; font-size: 28px; bottom: -28px; } .pLine { padding-left: 88px; } }

/* ===== THE ENLARGED CARD (real size, printed-stock look, no scaling blur) ===== */
#zoom { left: 0; right: 0; margin-inline: auto; width: max-content; transform: none; background: #000d; padding: 10px; box-shadow: 0 10px 40px #000; }
#zoom .card.big.real { width: var(--cw); }
.card.real { position: relative; inset: auto; aspect-ratio: 5 / 7; transform: none; border: 0; border-radius: calc(var(--cw) * .045); overflow: hidden; background: #1a1209; font-size: calc(var(--cw) * .052); color: #231a0f; text-rendering: geometricPrecision; -webkit-font-smoothing: antialiased; box-shadow: 0 0 0 1px #000, 0 calc(var(--cw)*.03) calc(var(--cw)*.08) #000c, inset 0 0 0 1px #fff3; cursor: default; }
.card.real:hover { transform: none; }
.realFrame { position: absolute; inset: 0; padding: calc(var(--cw) * .035); background: linear-gradient(145deg, #3a2a10, #0e0a05 42%, #2d2010 60%, #080603); }
.r-uncommon .realFrame { background: linear-gradient(145deg, #5d6b74, #11171b 42%, #46535b 60%, #0a0e10); } .r-rare .realFrame { background: linear-gradient(145deg, #f2c94c, #6b4a00 36%, #e8c25a 58%, #4a3000); } .r-mythic .realFrame { background: linear-gradient(145deg, #c9a8ff, #3d1670 34%, #e6d0ff 56%, #22094a); }
.realInner { position: relative; height: 100%; display: flex; flex-direction: column; gap: calc(var(--cw) * .018); padding: calc(var(--cw) * .025); border-radius: calc(var(--cw) * .025); background: var(--grain), var(--fibre), linear-gradient(180deg, #f6eed9, #e7dcc0 60%, #dccfae); background-blend-mode: multiply, multiply, normal; box-shadow: inset 0 0 0 1px #6b4a0099, inset 0 2px 5px #0005; }
.card.isBlood .realInner { background-image: var(--grain), var(--fibre), linear-gradient(180deg, #f3d9d4, #e5c0b9 60%, #d8aaa2); } .t-spell .realInner { background-image: var(--grain), var(--fibre), linear-gradient(180deg, #ece4f6, #dbcdee 60%, #cdbce6); }
.realName { display: flex; align-items: center; justify-content: space-between; gap: .4em; padding: .28em .55em; border-radius: calc(var(--cw) * .02); background: linear-gradient(180deg, #fffbe9, #e9dcb4 55%, #d8c68e); box-shadow: inset 0 0 0 1px #6b4a00, 0 1px 2px #0006; min-height: 2.1em; }
.realNm { font-weight: 800; font-family: Georgia, 'Times New Roman', serif; letter-spacing: .01em; line-height: 1.05; font-size: 1.12em; color: #1b130a; text-shadow: 0 1px 0 #fff8; }
.realOrbs { display: flex; gap: .16em; flex: 0 0 auto; } .realOrbs .orb { width: 1em; height: 1em; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #cfe4ff 0 12%, #4f93ff 35%, #1450c8 70%, #0b2e80); box-shadow: 0 0 0 1px #06163e, 0 1px 2px #0008, inset 0 -1px 2px #0a2a7a; }
.realArt { position: relative; flex: 0 0 auto; height: 41%; border-radius: calc(var(--cw) * .012); overflow: hidden; background: radial-gradient(circle at 50% 35%, #5b4a2a, #1c140a); box-shadow: 0 0 0 calc(var(--cw)*.006) #6b4a00, 0 0 0 calc(var(--cw)*.011) #1b130a, inset 0 0 12px #000a; }
.realArt img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; } .realArtNone { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4.5em; color: #e8c25a66; }
.realType { font-size: .8em; font-style: italic; letter-spacing: .03em; padding: .1em .5em; color: #3b2d17; border-bottom: 1px solid #6b4a0066; }
.realText { flex: 1 1 auto; min-height: 0; padding: .45em .6em; border-radius: calc(var(--cw)*.015); background: #fff9e8cc; box-shadow: inset 0 0 0 1px #6b4a0055, inset 0 1px 3px #0003; overflow: hidden; display: flex; flex-direction: column; gap: .3em; }
.realTextBody { font-size: .95em; line-height: 1.28; } .realAbil { font-size: .72em; color: #6b4a00; font-variant: small-caps; letter-spacing: .06em; margin-top: auto; }
.realStats { display: flex; justify-content: space-around; gap: .3em; padding: .22em .3em; border-radius: calc(var(--cw)*.02); background: linear-gradient(180deg, #2b2013, #0e0a05); box-shadow: inset 0 0 0 1px #c9a24a, 0 1px 2px #0008; } .realStat { display: flex; gap: .35em; align-items: baseline; } .realStat .k { font-size: .7em; color: #c9a24a; letter-spacing: .08em; } .realStat .v { font-size: 1.15em; font-weight: 800; color: #fff3c4; font-variant-numeric: tabular-nums; }
.realFoot { display: flex; justify-content: space-between; font-size: .62em; color: #5b4a2a; letter-spacing: .06em; text-transform: uppercase; }
.realGrain { position: absolute; inset: 0; background: var(--grain); mix-blend-mode: overlay; opacity: .35; pointer-events: none; }
.realGloss { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 18%), #fffffff0 0, #fff7 14%, transparent 46%), linear-gradient(115deg, transparent 38%, #ffffff40 48%, transparent 58%); }
.r-rare .realGloss, .r-mythic .realGloss { mix-blend-mode: color-dodge; opacity: .5; background: radial-gradient(circle at var(--gx, 30%) var(--gy, 18%), #fff8, transparent 40%), conic-gradient(from 210deg at 50% 50%, #ff7ad955, #7affd955, #fff27a55, #7a9bff55, #ff7ad955); }
.realEdge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px #fff4, inset 1px 1px 0 #fff6, inset -1px -1px 0 #0009; }
.realBackFace { position: absolute; inset: 0; background: var(--backimg, repeating-linear-gradient(45deg, var(--back), var(--back) 6px, #6b4b8f 6px, #6b4b8f 12px)); border: calc(var(--cw)*.03) solid #2d1b3d; }

/* ===== METAL BOOSTER PACKS and SEALED DECKS: SVG foil, wrinkles, crimped seams, irregular edges, smoke, shadow ===== */
.packArt.foilArt { border: 0; border-radius: 0; box-shadow: none; background-color: #000; background-image: none; animation: none; }
.packArt .foilSvg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.packArt.foilArt > :not(.foilSvg) { position: relative; z-index: 2; } .packArt .packCrimp { display: none; }
.packArt.foilArt .packName { margin-top: 6%; font-family: Georgia, serif; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #120c02; text-shadow: 0 1px 0 #ffffff80, 0 -1px 0 #0006; mix-blend-mode: normal; }
.foil-gold .packName, .foil-bronze .packName { color: #1a0f00; } .foil-silver .packName { color: #0d1117; }
.packArt.foilArt .packKind { color: #120c02; letter-spacing: .3em; font-weight: 700; text-shadow: 0 1px 0 #fff8; }
.packArt.foilArt .packEmblem { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.5) drop-shadow(0 1px 0 #ffffff90); opacity: .85; }
.packArt.foilArt .packSweep { z-index: 3; opacity: .55; }
.packArt.deckArt { border: 0; border-radius: 6px; background: linear-gradient(135deg, #3a0d12, #8a1c20 35%, #4a0c12 62%, #1d0508); background-size: auto; animation: none; box-shadow: inset 0 0 0 3px #0a0a0a, inset 0 0 0 5px #c9a24a, inset 0 0 36px #000b; }
.packArt.deckArt .packCrest { color: #e8c25a; text-shadow: 0 2px 0 #000, 0 0 10px #e8c25a66; } .packArt.deckArt .packName { color: #fff3c4; text-shadow: 0 2px 0 #000; font-family: Georgia, serif; } .packArt.deckArt .packKind { color: #e8c25a; text-shadow: 0 1px 0 #000; }
.packArt.deckArt::before { content: ''; position: absolute; left: 0; right: 0; top: 14%; height: 4%; background: linear-gradient(180deg, #000a, #0000); z-index: 1; pointer-events: none; }
.packShadow { position: absolute; left: 6%; right: 6%; bottom: -14px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, #000d 0, #0007 45%, transparent 72%); filter: blur(5px); pointer-events: none; z-index: -1; }
.packSmoke { position: absolute; left: -40%; right: -40%; bottom: -14%; top: -20%; pointer-events: none; z-index: -2; opacity: 0; transition: opacity 1.4s ease; }
.packItem.landed .packSmoke, .packMini .packSmoke { opacity: 1; }
.smokePuff { position: absolute; width: 120%; aspect-ratio: 1; left: var(--sx); bottom: var(--sy); background: url(smoke.png) center / contain no-repeat; opacity: 1; transform: rotate(var(--srot, 0deg)); animation: smokeRise var(--sd) ease-in-out var(--sl) infinite alternate; will-change: transform; }
@keyframes smokeRise { 0% { transform: translate(0, 8%) scale(.9) rotate(var(--srot, 0deg)); } 100% { transform: translate(var(--sdx), -12%) scale(1.15) rotate(calc(var(--srot, 0deg) + 14deg)); } }
.packItem { overflow: visible; }
.packItem.falling { animation: packFall 3s cubic-bezier(.3, .05, .6, 1) both; pointer-events: auto; }
@keyframes packFall { 0% { transform: translateY(-115vh) rotate(-11deg); } 52% { transform: translateY(-3%) rotate(4deg); } 60% { transform: translateY(0) rotate(-1deg) scale(1.06, .93); } 70% { transform: translateY(-5%) rotate(1deg) scale(.99, 1.02); } 82% { transform: translateY(0) rotate(0) scale(1.02, .985); } 100% { transform: none; } }
.velvet.ripple .velvetCloth { animation: clothRipple 1.1s ease-out 1.55s 1, clothFlow 16s ease-in-out infinite alternate; }

/* ===== THE VELVET CLOTH (pack opening) ===== */
.packOverlay.onCloth { background: #2a0a3d; }
.velvet { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.velvet img { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; user-select: none; }
.velvet img.velvetEmblem { inset: auto 5% 6% auto; width: 17%; height: auto; object-fit: contain; filter: drop-shadow(1px 2px 1.5px rgba(20,0,4,.8)) drop-shadow(0 0 1px rgba(255,200,200,.35)); animation: clothSway 11s ease-in-out infinite alternate; transform-origin: 100% 100%; opacity: .96; }   /* the embroidered emblem, stitched in the corner of the cloth */
.velvetCloth { animation: clothFlow 16s ease-in-out infinite alternate; transform-origin: 50% 50%; will-change: transform; } .velvetThread { animation: clothSway 11s ease-in-out infinite alternate; }
@keyframes clothFlow { 0% { transform: translate(-1.2%, .6%) scale(1.03) skewX(0deg); } 100% { transform: translate(1.2%, -.8%) scale(1.06) skewX(.7deg); } }
@keyframes clothSway { 0% { transform: translate(.2%, 0) rotate(-.15deg); } 100% { transform: translate(-.2%, .3%) rotate(.15deg); } }
@keyframes clothRipple { 0% { transform: scale(1.03); } 30% { transform: scale(1.055) translateY(.8%); } 100% { transform: scale(1.03); } }
.packOverlay.onCloth .cardBox { background: none; border: 0; box-shadow: none; padding: 0; max-width: 1100px; }
.packOverlay.onCloth .boxLabel { color: #f3e6ff; text-shadow: 0 1px 3px #000; text-align: center; }
.packOverlay.onCloth .cardRow3d { flex-wrap: wrap; justify-content: center; overflow-x: hidden; overflow-y: auto; max-height: 52vh; gap: 12px; padding: 14px 8px 20px; }
.packOverlay.onCloth .cardRow3d .boxCard { width: clamp(84px, 13vw, 130px); height: auto; aspect-ratio: 5 / 7; box-shadow: 0 1px 2px #000c, 0 3px 6px #0008; cursor: pointer; touch-action: pan-y; }
.packOverlay.onCloth .cardRow3d .boxCard.settled, .packOverlay.onCloth .cardRow3d .boxCard.landed { box-shadow: 0 1px 1px #000d, 0 2px 4px #0009; }
.packOverlay.onCloth .cardRow3d .boxCard.dancing { animation: cardOut2 2s cubic-bezier(.3, .8, .3, 1) var(--delay) backwards; }
@keyframes cardOut2 {
  0% { transform: translate(var(--fx), var(--fy)) scale(.25) rotateY(0) rotate(0); opacity: 0; z-index: 5; box-shadow: 0 30px 40px #0000; }
  14% { opacity: 1; }
  40% { transform: translate(calc(var(--fx) * .3 + var(--wx)), calc(var(--fy) * .3 + var(--wy))) scale(1.2) rotateY(540deg) rotate(var(--wr)); z-index: 5; box-shadow: 0 34px 30px #0006; }
  72% { transform: translate(calc(var(--wx) * -.2), -26px) scale(1.08) rotateY(900deg) rotate(calc(var(--wr) * -.5)); box-shadow: 0 22px 20px #0005; }
  88% { transform: translateY(2px) scale(.985); box-shadow: 0 1px 2px #000d; }
  100% { transform: none; z-index: 1; box-shadow: 0 1px 1px #000d, 0 2px 4px #0009; }
}
.packZoom { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: #0008; pointer-events: none; } .packZoom[hidden] { display: none; }
.packStage.slideL { animation: packSlideL .4s ease-out both; } .packStage.slideR { animation: packSlideR .4s ease-out both; }
@keyframes packSlideL { from { transform: translateX(60%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes packSlideR { from { transform: translateX(-60%); opacity: 0; } to { transform: none; opacity: 1; } }
.packNav { color: #f3e6ff; font-size: .8rem; text-shadow: 0 1px 3px #000; text-align: center; }
@media (prefers-reduced-motion: reduce) { .smokePuff, .velvetCloth, .velvetThread { animation: none; } .packItem.falling { animation: none; } }

.packArt .foilSvg { object-fit: fill; user-select: none; -webkit-user-drag: none; }
.packArt .packSweep { left: 0; animation: sweepT 3.2s ease-in-out infinite; } @keyframes sweepT { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(330%); } }
.packOverlay.onCloth .cardRow3d.flying { overflow: visible; max-height: none; } .packItem.empty .packSmoke, .packItem.ripping .packSmoke { opacity: 0; transition: opacity .8s; }

/* ===== the forfeit flag: cloth folds and staff wood baked from the supplied flag model's textures (its artwork is NOT used: the cloth is plain white or black), weave, hem, cast shadows, polished staff ===== */
.flagPole { border-left: 0; perspective: 700px; }
.flagCloth { left: 12px; top: 10px; width: 200px; height: 155px;   /* 1.29 : 1, the proportions of the supplied flag model's cloth */
   filter: drop-shadow(14px 12px 9px #000b); transform-origin: 0 50%; animation: clothHang 3.4s ease-in-out infinite alternate; }
.flagCloth::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; opacity: .3; background: repeating-linear-gradient(0deg, #0000 0 1.5px, #00000026 1.5px 2.4px), repeating-linear-gradient(90deg, #0000 0 1.5px, #0000001f 1.5px 2.4px); }
.flagCloth::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 5px 0 -2px #00000030, inset 0 -5px 0 -2px #00000030, inset 0 0 0 1px #0004; background: linear-gradient(180deg, #fff4 0, #fff0 18%, #0000 70%, #0003 100%); }
.flagStrip { animation: clothWave 1.25s ease-in-out infinite; animation-delay: calc(var(--i) * -105ms); transform-origin: 0 50%; will-change: transform, filter; }
.flagStrip { background-size: 1200% 100%; background-position: calc(var(--i) * 100% / 11) 0; }   /* each of the 12 strips shows its slice of the folds map baked from the supplied flag's normal map (Flag_normal.png) */
.flagOverlay.white .flagStrip { background-color: #fbfbf9; background-image: url(flag-folds-white.jpg); background-blend-mode: multiply; box-shadow: none; }
.flagOverlay.black .flagStrip { background-color: #0a0a0b; background-image: url(flag-folds-black.jpg); background-blend-mode: screen; box-shadow: none; } .flagOverlay.black .flagCloth { filter: drop-shadow(14px 12px 9px #000b) drop-shadow(0 0 1.5px #ffffffcc); }
@keyframes clothWave { 0%, 100% { transform: translateY(calc(var(--i) * -.95px)) skewY(-5deg) scaleX(.985); filter: brightness(1.14); } 50% { transform: translateY(calc(var(--i) * .95px)) skewY(5deg) scaleX(1.01); filter: brightness(.78); } }
@keyframes clothHang { 0% { transform: rotateY(-5deg) rotateZ(-.6deg); } 100% { transform: rotateY(6deg) rotateZ(.7deg); } }
.flagWallShadow { position: absolute; left: 34px; top: 26px; width: 200px; height: 120px; background: #000; opacity: .38; filter: blur(14px); transform: skewX(-14deg); border-radius: 6px; animation: wallShadow 3.4s ease-in-out infinite alternate; z-index: -1; } @keyframes wallShadow { 0% { transform: skewX(-18deg) translateX(-4px); } 100% { transform: skewX(-10deg) translateX(7px); } }
.flagStaff { position: absolute; left: -2px; top: -22px; width: 14px; height: 232px; border-radius: 7px 7px 4px 4px; z-index: 4; box-shadow: 4px 6px 8px #000a, inset 0 0 0 1px #1d0904; background:
  linear-gradient(90deg, #000b 0, #0000 16%, #ffffff66 29%, #ffffff00 41%, #0000 63%, #000c 100%),
  url(staff-wood.jpg) center / 100% 100% no-repeat,   /* wood grain: the supplied pole's albedo texture; the polish is the highlight gradient above */
  linear-gradient(90deg, #6e2a12, #8e3a1a 35%, #5b2010 70%, #7a2f15); }
.staffGrain { position: absolute; inset: 0; border-radius: inherit; mix-blend-mode: multiply; opacity: .85; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.5 .014' numOctaves='3' seed='9'/><feColorMatrix values='0 0 0 0 .33  0 0 0 0 .1  0 0 0 0 .05  0 0 0 1.7 -.4'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>") center / 100% 100%; }
.staffShine { position: absolute; left: 22%; top: 4px; bottom: 6px; width: 16%; border-radius: 4px; background: linear-gradient(180deg, #fff0, #ffffffa8 12%, #ffffff40 45%, #ffffff90 80%, #fff0); filter: blur(.6px); }
.staffBall { position: absolute; left: -3px; top: -10px; width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff9c8, #e8b84a 38%, #8a5a00 78%, #3a2400); box-shadow: 2px 3px 5px #000a; }
.staffFoot { position: absolute; left: -1px; bottom: 0; width: 16px; height: 14px; border-radius: 2px 2px 5px 5px; background: linear-gradient(90deg, #5a3a00, #ffe28a 40%, #7a5200); box-shadow: 0 3px 4px #000a; }
@media (prefers-reduced-motion: reduce) { .flagCloth, .flagWallShadow { animation: none; } }


/* ===== IN-GAME TABLE: no menu / store / gold in a match, side zoom, deck menu, turn counter ===== */
body:not(.noGame) #menuBtn, body:not(.noGame) #storeBtn, body:not(.noGame) #coins { display: none !important; }
.shuffleBtn { display: none !important; }
#zoom { left: 8px; right: auto; top: 54px; bottom: auto; max-height: calc(100vh - var(--handh, 110px) - 70px); width: max-content; margin: 0; max-width: calc(100vw - 16px); display: flex; flex-direction: row; gap: 10px; align-items: center; justify-content: flex-start; background: #000d; border: 1px solid var(--btn-main, var(--rim)); border-radius: 12px; padding: 8px; z-index: 60; }
#zoom[hidden] { display: none; } #zoom .card.big { flex: 0 0 auto; margin: 0; }
.zoomInfo { width: min(34vw, 250px); max-height: 100%; overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--ink); } .zoomInfo h3 { margin: 0 0 4px; font-size: 14px; color: var(--btn-hi, var(--accent)); } .zoomInfo p { margin: 2px 0; } .zoomInfo b { color: var(--btn-main, var(--accent)); } .zoomText { margin-top: 6px !important; padding-top: 4px; border-top: 1px solid #ffffff26; }
@media (max-width: 640px) { #zoom { flex-direction: column; align-items: flex-start; overflow: hidden; } .zoomInfo { width: min(46vw, 230px); } }
.deckCount { position: absolute; right: -4px; top: -4px; min-width: 18px; padding: 0 4px; border-radius: 9px; background: #000d; border: 1px solid var(--btn-main, #d9a520); color: var(--btn-hi, #ffe28a); font-size: clamp(8px, calc(var(--cw, 80px) * .14), 13px); text-align: center; line-height: 1.5; pointer-events: none; z-index: 4; }
.pile.deck { position: relative; }
#deckMenu { position: fixed; z-index: 80; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: #0b0f16f2; border: 1px solid var(--btn-main, #d9a520); border-radius: 10px; box-shadow: 0 8px 24px #000c; min-width: 150px; } #deckMenu[hidden] { display: none; } #deckMenu small { color: var(--muted); max-width: 190px; }
.turnCounter { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 44px; padding: 2px 8px; border-radius: 10px; background: radial-gradient(circle at 50% 20%, #2a2110, #090806); border: 2px solid var(--btn-main, #d9a520); box-shadow: inset 0 0 0 2px #000, 0 2px 8px #000a; color: var(--btn-hi, #ffe28a); line-height: 1; }
.turnCounter small { font-size: 8px; letter-spacing: .2em; opacity: .85; } .turnCounter b { font-size: 20px; font-variant-numeric: tabular-nums; }
#board.focus .center .turnCounter { display: flex; }
.browseSheet { max-width: 900px; } .browseTools { display: flex; gap: 10px; align-items: center; margin: 6px 0; } .browseTools input { flex: 1; min-width: 0; }
.browse { display: flex; flex-wrap: wrap; gap: 8px; max-height: 56vh; overflow: auto; padding: 4px; } .browse .bcard { position: relative; width: 84px; aspect-ratio: 5 / 7; } .browse .bcard .card { position: absolute; inset: 0; transform: none; }
/* gold gifts, trade money, paid difficulty */
.giftRow, .tradeMoney { align-items: center; gap: 8px; margin: 8px 0; } .giftRow input, .tradeMoney input { width: 8.5em; padding: 8px; border-radius: 8px; border: 1px solid #c8a24a; background: #14091f; color: #f3e9ff; }
.moneyLine { font-weight: 700; color: #e7c46a; margin: 4px 0; } .diffChoices .choice.on { outline: 2px solid var(--accent); }

.packItem:not(.ripping) .packBody, .packItem:not(.ripping) .packTop { transform: rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg)); transition: transform .12s ease-out; }
.creditsPanel { margin: 12px 0; text-align: left; } .creditList { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 8px; } .creditList li { padding: 8px 10px; border: 1px solid #c8a24a55; border-radius: 8px; background: #0006; } .creditList small { display: block; opacity: .75; }

/* under-18 accounts: no text chat, friend chat or messages */
body.noSocial #chatBtn, body.noSocial #chatbox, body.noSocial .friendMsg { display: none !important; }

/* owner 2026-10-11 19:11: the coin is a 3D piece that slowly spins: HEADS (the cross) and TAILS (the dragon emblem struck in gold) back to back, three rim layers for thickness */
.coin3d { position: relative; display: inline-block; width: 22px; height: 22px; transform-style: preserve-3d; animation: coinSpin 7s linear infinite; }
.coin3d img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.coin3d .coinTails { transform: rotateY(180deg) translateZ(1.6px); } .coin3d .coinHeads { transform: translateZ(1.6px); }
.coin3d .coinRim { position: absolute; inset: 1px; border-radius: 50%; background: radial-gradient(circle, #c8921a 55%, #8a5d08 100%); transform: translateZ(0); } .coin3d .coinRim:nth-child(4) { transform: translateZ(1px); } .coin3d .coinRim:nth-child(5) { transform: translateZ(-1px); }
#coins .coin3d.coinTurn { animation: coinSpin 7s linear infinite, coinKick .36s ease-in-out 1; }
@keyframes coinSpin { from { transform: perspective(120px) rotateY(0); } to { transform: perspective(120px) rotateY(360deg); } }
@keyframes coinKick { 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) { .coin3d { animation: none; } #coins .coin3d.coinTurn { animation: none; } }

/* ---- who is who on the table: numbers, team numbers, and a slow light that paces the outline of each field ----
   Foes: red light, SOLID outline, "FOE" tag.  Allies: green (or blue, set in Profile settings), DASHED outline, "ALLY" tag.
   Colour is never the only cue (colour-blind players read the outline pattern, the symbol and the word). */
:root { --foeLight: #ff3b30; --allyLight: #2ecc71; }
:root[data-ally="blue"] { --allyLight: #3b9bff; }
@property --lightA { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes lightPace { to { --lightA: 360deg; } }
.field[data-rel="foe"], .field[data-rel="ally"] { position: relative; border-radius: 10px; }
.field[data-rel="foe"] { outline: 2px solid var(--foeLight); outline-offset: 1px; }
.field[data-rel="ally"] { outline: 2px dashed var(--allyLight); outline-offset: 1px; }
.field[data-rel="foe"]::after, .field[data-rel="ally"]::after { content: ""; position: absolute; inset: -4px; border-radius: 12px; padding: 4px; pointer-events: none; z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.field[data-rel="foe"]::after { background: conic-gradient(from var(--lightA, 0deg), transparent 0 62%, var(--foeLight) 80%, #fff 86%, var(--foeLight) 90%, transparent 100%); animation: lightPace 7s linear infinite; }
.field[data-rel="ally"]::after { background: conic-gradient(from var(--lightA, 0deg), transparent 0 62%, var(--allyLight) 80%, #fff 86%, var(--allyLight) 90%, transparent 100%); animation: lightPace 9s linear infinite reverse; }
.field.out::after { display: none; }
@media (prefers-reduced-motion: reduce) { .field[data-rel]::after { animation: none; background: none; } }
.seatTag { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.seatTag.foe { color: var(--foeLight); border-style: solid; } .seatTag.ally { color: var(--allyLight); border-style: dashed; } .seatTag.me { color: var(--accent, #e0b84a); }
.focusDot.foe { border-style: solid; } .focusDot.ally { border-style: dashed; }

/* forfeit hand-over: the screen fades to black, then the main menu; and the calm note before a hard reboot */
.menuFade { position: fixed; inset: 0; z-index: 160; background: #000; opacity: 0; transition: opacity 1s ease; pointer-events: none; } .menuFade.on { opacity: 1; }
.rebootNote { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 170; background: #000d; color: #fff; padding: 16px 22px; border-radius: 12px; max-width: 80vw; text-align: center; }
@media (prefers-reduced-motion: reduce) { .menuFade { transition: none; } }

/* one-field view: your own field is always shown full size, and the opponent you picked is shown beside it at half size so you can always see what they are doing */
/* the picker bar stays pinned at the top of the table, with the picked opponent's numbers, even when the table is scrolled to your own field */

/* the same pacing light goes round each player's STATS frame (name, number, life): red for opponents, green or blue for allies; solid vs dashed edge and the FOE / ALLY word keep it readable without colour */
.lifeBox { position: relative; }
.lifeBox[data-rel="foe"] { outline: 2px solid var(--foeLight); outline-offset: 2px; } .lifeBox[data-rel="ally"] { outline: 2px dashed var(--allyLight); outline-offset: 2px; }
.lifeBox[data-rel="foe"]::after, .lifeBox[data-rel="ally"]::after { content: ""; position: absolute; inset: -5px; border-radius: 16px; padding: 4px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.lifeBox[data-rel="foe"]::after { background: conic-gradient(from var(--lightA, 0deg), transparent 0 62%, var(--foeLight) 80%, #fff 86%, var(--foeLight) 90%, transparent 100%); animation: lightPace 7s linear infinite; }
.lifeBox[data-rel="ally"]::after { background: conic-gradient(from var(--lightA, 0deg), transparent 0 62%, var(--allyLight) 80%, #fff 86%, var(--allyLight) 90%, transparent 100%); animation: lightPace 9s linear infinite reverse; }
.lifeBox.out::after { display: none; } @media (prefers-reduced-motion: reduce) { .lifeBox[data-rel]::after { animation: none; background: none; } }
.lifeSeat { font-size: 11px; font-weight: 700; letter-spacing: .04em; display: block; }
.lifeBox[data-rel="foe"] .lifeSeat { color: var(--foeLight); } .lifeBox[data-rel="ally"] .lifeSeat { color: var(--allyLight); }

/* player names must always be readable: big in the framed stats, and a clear plate on each field even on the tilted board */
.lifeBox .lifeName { font-size: clamp(15px, 2.2vw, 22px); font-weight: 800; letter-spacing: .02em; max-width: 14em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; text-shadow: 0 1px 3px #000; }
.lifeBox.tl .lifeName, .lifeBox.br .lifeName { color: #fff; }
.field .fieldHead b { font-size: 15px; font-weight: 800; color: #fff; background: #000a; padding: 1px 8px; border-radius: 6px; text-shadow: 0 1px 2px #000; }
.field .fieldHead { min-height: 20px; }

/* turn, phase, pass and clock belong to a game: nothing of them shows while a menu screen is open (also when a game is running behind it) */
body:has(#menu:not([hidden])) #status, body:has(#menu:not([hidden])) #clock, body:has(#menu:not([hidden])) #timerBtn, body:has(#menu:not([hidden])) #handDock, body:has(#menu:not([hidden])) #controls, body:has(#menu:not([hidden])) #actionPrompt, body:has(#menu:not([hidden])) #nextBtn, body:has(#menu:not([hidden])) #endBtn, body:has(#menu:not([hidden])) #passBtn { display: none !important; }

/* 4 players: opponents 2 and 3 sit LEFT and RIGHT of the normal layout and FACE each other and you: each side field is turned a quarter turn so its front row (Creature zone) is the one nearest the middle, exactly like the field across from you. fit() sizes them to the open space. */
#board.wings { flex-direction: row; align-items: stretch; gap: 6px; }
#board.wings .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#board.wings .wing { position: relative; flex: 0 0 auto; width: 26%; }
#board.wings .wing .field { position: absolute; left: 50%; top: 50%; flex: none; margin: 0; }
#board.wings .wing.left .field { transform: translate(-50%, -50%) rotate(90deg); }
#board.wings .wing.right .field { transform: translate(-50%, -50%) rotate(-90deg); }

/* player settings (settings.js) */
:root { --ui-scale: 1; }
.screen, .sheet, .playerSettings { font-size: calc(1rem * var(--ui-scale)); }
.setRow { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.08); }
.setLabel { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.setRow select { max-width: 55%; }
.setRow input[type=checkbox] { width: 22px; height: 22px; flex: none; }
:root.calmMotion *, :root.calmMotion *::before, :root.calmMotion *::after { animation: none !important; transition: none !important; }
:root.hiContrast { --muted: #e8e8e8; }
:root.hiContrast .panel, :root.hiContrast button, :root.hiContrast select { border: 2px solid #fff; }
:root.hiContrast .muted { color: #e8e8e8 !important; }

/* tester menu (tester.js) */
.testList { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.testRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 8px; }
.testBack { position: fixed; left: 8px; bottom: 8px; z-index: 60; padding: 8px 12px; border-radius: 10px; border: 2px solid #e0b84a; background: #1a1f26; color: #fff; }
.testerScreen textarea, .testerScreen input[type=search] { width: 100%; box-sizing: border-box; }

/* settings preview pictures (settings.js) */
.pvCtl { display: inline-flex; align-items: center; gap: 8px; flex: none; max-width: 60%; }
.pvCtl select { max-width: 100%; min-width: 0; }
.pvEye { min-width: 40px; min-height: 40px; padding: 4px 8px; border-radius: 10px; font-size: 18px; line-height: 1; }
.setPreview { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(4, 6, 10, .72); }
.setPreviewBox { width: min(560px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: #121821; border: 2px solid #e0b84a; border-radius: 14px; padding: 14px 16px; box-shadow: 0 18px 50px rgba(0,0,0,.6); }
.setPreviewBox h3 { margin: 0 0 10px; }
.pvRow { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pvFig { margin: 0; padding: 6px; border: 2px solid transparent; border-radius: 10px; background: rgba(255,255,255,.04); text-align: center; }
.pvAll .pvFig { cursor: pointer; }
.pvAll .pvFig:hover, .pvAll .pvFig:focus-visible { border-color: rgba(224,184,74,.6); outline: none; }
.pvFig.pvNow { border-color: #e0b84a; }
.pvPic svg { display: block; width: 100%; height: auto; }
.pvFig figcaption { margin-top: 4px; font-size: .9em; }
.pvButtons { justify-content: flex-end; gap: 8px; margin-top: 12px; }
:root.calmMotion .pvPic animateMotion { display: none; }
.orientPick .pvEye { width: auto; flex: none; align-self: flex-start; margin-top: 6px; }
/* the card prompt moved to the top on short screens so your own field stays free to tap (hand.js) */
#actionPrompt.apTop { padding: 6px 8px; max-width: min(96vw, 760px); }
#actionPrompt.apTop .apNote { display: none; }
#actionPrompt.apTop .apTitle { display: inline-block; margin: 0 8px 0 0; vertical-align: middle; }
#actionPrompt.apTop .apRow { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: middle; }
#actionPrompt.apTop .apBtn { padding: 4px 8px; font-size: 12px; }
/* browsers without @property (older Firefox, Safari, Android WebView): the moving light cannot turn, so it shows standing still and pulses instead of vanishing */
@keyframes lightPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
:root.noProp .field[data-rel="foe"]::after, :root.noProp .field[data-rel="ally"]::after, :root.noProp .lifeBox[data-rel="foe"]::after, :root.noProp .lifeBox[data-rel="ally"]::after { animation: lightPulse 2.4s ease-in-out infinite; }
:root.calmMotion.noProp .field[data-rel]::after, :root.calmMotion.noProp .lifeBox[data-rel]::after { animation: none; opacity: 1; }
/* the one-frame answer (app.js showChoices) */
.respFrame { position: fixed; left: 50%; top: calc(var(--safe-t, 0px) + 54px); transform: translateX(-50%); z-index: 70; max-width: min(96vw, 720px); background: #121c27f2; border: 2px solid var(--accent, #e0b84a); border-radius: 12px; padding: 8px 10px; box-shadow: 0 10px 28px #000b; }
.respWhat { font-weight: 700; margin-bottom: 6px; }
.respRow { display: flex; flex-wrap: wrap; gap: 6px; }
.respRow button { padding: 6px 10px; }
body.noGame .respFrame { display: none; }
/* fields with a picture under them (admin field pictures and players' own field artwork): every position stays visible with no cards on it */
.field.hasImg .slot.free, .field.hasImg .slot:empty { background: rgba(8, 12, 18, .32); border: 1px dashed rgba(255, 255, 255, .55); }
.field.hasImg .zlabel, .field.hasImg .pile, .field.hasImg .zone > span { color: #fff; text-shadow: 0 1px 2px #000, 0 0 4px #000; }
.field.ownArt { border-color: rgba(224, 184, 74, .55); }
.artPreview { max-width: 420px; margin: 8px 0; pointer-events: none; }
.artPreview .zone { display: flex; flex-direction: column; gap: 2px; } .artPreview .slots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .artPreview .slot { aspect-ratio: 5 / 7; border-radius: 3px; }
.artPreview .zlabel { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.fieldArtTile { grid-column: 1 / -1; }
.pBanner.hasBg { background-size: cover; }
.dlLink { display: inline-block; text-decoration: none; padding: 8px 12px; margin: 4px 6px 4px 0; }
/* market and the notification bell (market.js) */
.mkRow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; margin: 2px 0; border-radius: 8px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); color: inherit; }
.mkUp { color: #3ad07a; } .mkDown { color: #ff6b6b; }
.mkBid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); }
.mkBid input[type=number] { width: 7em; } .linkBtn { background: none; border: none; color: #e0b84a; text-decoration: underline; padding: 0; font-weight: 700; box-shadow: none; }
.mkChart { width: 100%; height: auto; display: block; background: rgba(255,255,255,.02); border-radius: 8px; }
.bellBtn { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 80; border-radius: 999px; padding: 8px 12px; display: flex; gap: 4px; align-items: center; }
.bellBtn .bellCount:empty { display: none; } .bellBtn .bellCount { background: #c8102e; color: #fff; border-radius: 999px; padding: 0 6px; font-size: 12px; font-weight: 700; }
.bellBtn.hasNew .bellIcon { animation: bellRing 1.6s ease-in-out 2; } @keyframes bellRing { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(14deg); } 75% { transform: rotate(-14deg); } }
body:not(:has(#menu:not([hidden]))) .bellBtn, body:not(:has(#menu:not([hidden]))) .notesPanel { display: none; }
.notesPanel { position: fixed; right: 12px; bottom: 64px; z-index: 81; width: min(380px, calc(100vw - 24px)); max-height: 60vh; overflow: auto; background: #121821; border: 2px solid #e0b84a; border-radius: 12px; padding: 10px 12px; box-shadow: 0 12px 30px #000b; }
.noteRow { display: flex; flex-direction: column; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); } .noteRow.unseen span { font-weight: 700; }
.pFlags { display: inline-flex; gap: 4px; align-items: center; } .pFlags .pFlag { margin: 0; }
.flagTile { position: relative; } .flagOrder { position: absolute; top: 6px; right: 8px; background: #e0b84a; color: #1b1206; border-radius: 999px; min-width: 20px; height: 20px; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 12px; }
/* levels and the red XP bar (levels.js) */
.lvBadge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a2a10, #120d06 70%); border: 2px solid #e0b84a; flex: none; }
.lvBadge.hasEmblem { background: none; border: none; } .lvBadge .lvEmblem { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lvBadge .lvNum { position: relative; font-size: 14px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.lvBadge .lvRound { position: absolute; right: -6px; top: -4px; font-size: 10px; font-weight: 800; background: #c8102e; color: #fff; border-radius: 999px; padding: 0 4px; line-height: 14px; }
.xpWrap { padding: 6px 12px 10px; } .xpTop { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .xpText { font-size: 13px; font-weight: 700; }
.xpBar { height: 10px; border-radius: 999px; background: #2a1013; border: 1px solid #000; overflow: hidden; box-shadow: inset 0 1px 2px #000a; }
.xpFill { height: 100%; background: linear-gradient(180deg, #ff5a5a, #c8102e 60%, #8f0b20); border-radius: 999px; transition: width .6s ease; }
.botGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .botCard.stalled { border-color: #c8102e; } .botHead { margin-bottom: 4px; }
.lvEmblemPrev { width: 48px; height: 48px; object-fit: contain; }
/* market value explorer: correlation graph, search, every card, periods */
.mkScatterWrap svg, .mkBuckets, .mkChart { width: 100%; height: auto; max-width: 640px; display: block; }
.mkDot { cursor: pointer; } .mkDot:hover { fill-opacity: 1; }
.mkLegend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85em; margin: 4px 0; }
.mkKey { display: inline-flex; align-items: center; gap: 4px; } .mkKey::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--k); display: inline-block; }
.mkAll { max-height: 340px; overflow-y: auto; border: 1px solid rgba(255,255,255,.08); border-radius: 8px; padding: 4px; margin-top: 6px; }
.mkCardRow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 5px 8px; margin: 1px 0; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); border-radius: 6px; color: inherit; box-shadow: none; }
.mkCardRow .mkKey::before { margin: 0; } [data-role=mkSearch] { width: 100%; max-width: 420px; margin-top: 8px; }
.mkPeriods button.on { outline: 2px solid #e0b84a; } .mkPeriods button:disabled { opacity: .4; } .mkRotLine { font-weight: 700; color: #cfe3ff; }
.mkCustom input { width: 4em; } .mkHistBox { max-width: 640px; max-height: 92vh; overflow-y: auto; }
@media (max-width: 560px) { .mkCardRow { grid-template-columns: auto minmax(0, 1fr) auto; } .mkCardRow > span.muted { grid-column: 2 / -1; } }
/* safety reports (admin) */
.safetyAcct, .ipAcct { border-top: 1px solid rgba(255,255,255,.1); padding: 8px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.safetyFlag { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 8px; border-left: 3px solid #ff5a4f; background: rgba(255,90,79,.06); }
.safetyFlag.reported { border-left-color: #3a8bff; } .safetyFlag.dismissed { opacity: .6; border-left-color: #9aa6b5; }
.safetyFlag q { font-style: italic; overflow-wrap: anywhere; } .safetyFlag input { width: 14em; }
.ipAcct table { flex-basis: 100%; } .ipAcct td { overflow-wrap: anywhere; }
/* tournaments */
.tnList { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 8px 0 12px; }
.tnListing { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; padding: 14px; min-height: 120px; border-radius: 12px; }
.tnListing b { font-size: 1.15em; } .tnGlyph { font-size: 1.8em; }
.tnBar { height: 12px; margin: 8px 0; max-width: 520px; } .tnFill { height: 100%; width: 0; background: linear-gradient(90deg, #3a8bff, #5fc48a); border-radius: inherit; transition: width .3s; }
.tnBig { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; } .tnStat { flex: 1 1 140px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.05); display: flex; flex-direction: column; }
.tnStat b { font-size: 1.7em; } .tnStat.ok b { color: #5fc48a; } .tnStat.bad b { color: #ff5a4f; }
.tnScroll { max-height: 360px; overflow-y: auto; } .tnOpp { display: grid; grid-template-columns: 3em minmax(0, 1fr) minmax(80px, 160px) 3.5em 4em; gap: 8px; align-items: center; padding: 3px 0; font-size: .92em; }
.tnOppName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tnOppBar { height: 10px; background: rgba(255,90,79,.35); border-radius: 5px; overflow: hidden; } .tnOppBar i { display: block; height: 100%; background: #5fc48a; }
.tnPath li.won { color: #5fc48a; } .tnPath li.lost { color: #ff8a80; }
.tnBracketView { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0; } .tnRound { flex: 1 0 150px; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.tnGroup { border: 1px solid rgba(255,255,255,.15); border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.03); } .tnGroup.live { border-color: #e0b84a; box-shadow: 0 0 0 1px #e0b84a; } .tnGroup.champ { border-color: #e0b84a; font-weight: 700; }
.tnEntrant { padding: 2px 0; opacity: .75; } .tnEntrant.winner { opacity: 1; font-weight: 700; } .tnEntrant.you { color: #e0b84a; } .tnWon { padding: 10px; border-radius: 10px; background: rgba(224,184,74,.12); }
.tnRow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; } .tnRow select { flex: 1 1 200px; min-width: 0; max-width: 100%; }
@media (max-width: 560px) { .tnOpp { grid-template-columns: 2.5em minmax(0, 1fr) 3.5em 3em; } .tnOpp .tnOppBar { grid-column: 1 / -1; order: 5; } }
/* guild hub */
.gStats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; } .gStat { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); } .gStat b { overflow-wrap: anywhere; }
.gNav { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .gNav .chip.on { outline: 2px solid #e0b84a; }
.gOdds table { width: 100%; } .gOdds { overflow-x: auto; margin-top: 8px; }
.gFilters { display: flex; flex-wrap: wrap; gap: 6px; } .gFilters input { flex: 1 1 130px; min-width: 0; } .gFilters select { flex: 1 1 150px; min-width: 0; }
.gCard { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 8px 10px; margin: 6px 0; border-radius: 8px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .gCard p { flex-basis: 100%; margin: 0; } .gEmb { font-size: 1.5em; }
.gDiamond { padding: 10px; border-radius: 10px; background: rgba(120,200,255,.07); border: 1px solid rgba(120,200,255,.25); }
.gRulesForm { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 6px; } .gRule { display: flex; flex-direction: column; font-size: .9em; } .gRule input { min-width: 0; }
[data-role=guildCreate] input, [data-role=guildCreate] textarea, [data-role=guildCreate] select { display: block; width: 100%; max-width: 420px; margin: 4px 0; }
/* guild hub */
.gSummary { display: grid; gap: 4px; } .gFact { display: flex; flex-wrap: wrap; gap: 8px; } .gFact span { min-width: 12em; }
.gTabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .gTabs button { min-height: 40px; }
.gRow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid rgba(255,255,255,.08); } .gEmb { font-size: 1.4em; } .gRank { min-width: 2.5em; }
.gFilters, .gForm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gFilters input, .gForm input, .gForm select, .gFilters select { flex: 1 1 140px; min-width: 0; }
.gDiamond h3 { font-size: 1.3em; } .gOdds td, .gOdds th { padding: 2px 8px; } .gRules li { margin: 6px 0; }
.gAdminRules { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; } .gRule { display: flex; flex-direction: column; font-size: .9em; } .gRule input { width: 100%; }
/* attacking: outlined targets; the foe's hand as card backs on their frame */
.card.atkTarget { outline: 3px solid #ff3b3b; outline-offset: 2px; box-shadow: 0 0 14px #ff3b3baa; cursor: crosshair; }
.lifeBox.atkTarget { outline: 3px solid #ff3b3b; box-shadow: 0 0 18px #ff3b3b99; cursor: crosshair; }
.oppHand { display: flex; align-items: center; gap: 2px; margin-top: 4px; } .oppBack { width: 12px; height: 17px; border-radius: 2px; background: linear-gradient(135deg, #5b2a86, #2a1440); border: 1px solid #8fa9c0; box-shadow: 0 1px 2px #0008; }
.oppCount { margin-left: 4px; font-size: 12px; color: #f3e9ff; }
/* ---- the printed colour families of the real cards (owner's sample cards, 2026-10-09) ---- */
:root { --fam-earth: #e5952f; --fam-earth2: #b9601c; --fam-earth-plate: #f4bf55; --fam-earth-emb: #7a4a26;
  --fam-wind-emb: #2e5d57; --fam-blood-emb: #b3202a; --fam-war-emb: #8a1c1c; --fam-frost-emb: #3a78a8;
  --fam-fear: #c9629f; --fam-fear2: #8e3470; --fam-fear-plate: #ecc3de; --fam-fear-emb: #5a2c4f;
  --fam-light: #f2d548; --fam-light2: #d9a922; --fam-light-plate: #fff4b8; --fam-light-emb: #b5651d;
  --fam-shadow: #b4b7bb; --fam-shadow2: #6e7277; --fam-shadow-plate: #e3e4e6; --fam-shadow-emb: #a3121b;
  --fam-chaos: #8a5cc4; --fam-chaos2: #4f2a80; --fam-chaos-plate: #e2d4f4; --fam-chaos-emb: #3b1e63; --fam-foot: #a3121b; }
.face[class*=" fam-"] { border: 2px solid var(--f2, #6b4a1e); border-radius: 5px; background: linear-gradient(180deg, var(--fp, #f4e7cf) 0 22%, var(--fb, #fbf3e2) 22% 82%, var(--f1, #e5952f) 82% 100%); color: #20160a; }
.face.fam-earth, .face.fam-wind, .face.fam-blood, .face.fam-war, .face.fam-frost, .face.fam-fire, .face.fam-water, .face.fam-ice, .face.fam-inherit, .face.fam-thunder, .face.fam-dark, .face.fam-chaosattr { --f1: var(--fam-earth); --f2: var(--fam-earth2); --fp: var(--fam-earth-plate); --fb: #fbe9c8; }
.face.fam-fear { --f1: var(--fam-fear); --f2: var(--fam-fear2); --fp: var(--fam-fear-plate); --fb: #f6e1ee; }
.face.fam-light { --f1: var(--fam-light); --f2: var(--fam-light2); --fp: var(--fam-light-plate); --fb: #fff9d8; }
.face.fam-shadow { --f1: var(--fam-shadow); --f2: var(--fam-shadow2); --fp: var(--fam-shadow-plate); --fb: #f1f1f2; box-shadow: inset 0 -3px 0 var(--fam-foot); }
.face.fam-chaos { --f1: var(--fam-chaos); --f2: var(--fam-chaos2); --fp: var(--fam-chaos-plate); --fb: #efe7fa; }
.face .famEmb { position: absolute; right: 3%; top: 2%; font-size: .62em; font-weight: 800; letter-spacing: .04em; padding: 0 .35em; border-radius: 1em; color: #fff; background: var(--fe, #7a4a26); z-index: 2; line-height: 1.5; box-shadow: 0 0 0 1px #0004; }
.face.fam-earth { --fe: var(--fam-earth-emb); } .face.fam-wind { --fe: var(--fam-wind-emb); } .face.fam-blood { --fe: var(--fam-blood-emb); } .face.fam-war { --fe: var(--fam-war-emb); } .face.fam-frost { --fe: var(--fam-frost-emb); }
.face.fam-fear { --fe: var(--fam-fear-emb); } .face.fam-light { --fe: var(--fam-light-emb); } .face.fam-shadow { --fe: var(--fam-shadow-emb); } .face.fam-chaos { --fe: var(--fam-chaos-emb); }
.face[class*=" fam-"] .lv { color: #7a3d0b; } .face.fam-shadow .lv, .face.fam-fear .lv { color: #5a1d3d; }
.face.hasArt .famEmb { display: none; }
/* the table and menus carry the families' colours too: realm tints and coloured home tiles */
.zones > .row[data-zone=creature] { background: linear-gradient(90deg, #e5952f22, #e5952f0a); border-radius: 8px; } .zones > .row[data-zone=blood] { background: linear-gradient(90deg, #b3202a33, #b3202a10); border-radius: 8px; } .zones > .row[data-zone=spell] { background: linear-gradient(90deg, #8a5cc426, #b4b7bb0d); border-radius: 8px; }
.zones > .row[data-zone=blood] .rowLabel { color: #ff8a8a; } .zones > .row[data-zone=creature] .rowLabel { color: #f4bf55; } .zones > .row[data-zone=spell] .rowLabel { color: #cdb7f0; }
.homeGrid .bigBtn { --tile: #4b6a85; border-color: var(--tile); box-shadow: inset 0 0 0 1px #000, 0 0 18px color-mix(in srgb, var(--tile) 35%, transparent); background: radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--tile) 32%, #122030), #0b1118 72%); }
.homeGrid .home-settings { --tile: #b4b7bb; } .homeGrid .home-modes { --tile: #c7372f; } .homeGrid .home-friends { --tile: #3f8f82; } .homeGrid .home-decks { --tile: #e5952f; } .homeGrid .home-vsai { --tile: #c9629f; }
.homeGrid .home-pvp { --tile: #b3202a; } .homeGrid .home-market { --tile: #f2d548; } .homeGrid .home-tournaments { --tile: #d9a922; } .homeGrid .home-guild { --tile: #8a5cc4; } .homeGrid .home-tester { --tile: #3a78a8; }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .homeGrid .bigBtn { box-shadow: inset 0 0 0 1px #000, 0 0 14px var(--tile); background: radial-gradient(circle at 50% 18%, #2a2016, #0b1118 72%); } }
/* the zoomed card with an uploaded picture: the picture itself, not reframed */
.card.real.realPhoto { aspect-ratio: auto; background: transparent; border-radius: 0; overflow: visible; box-shadow: none; }
.card.real.realPhoto .realPhotoImg { display: block; width: 100%; height: auto; border-radius: calc(var(--cw) * .02); box-shadow: 0 10px 30px #000c; }
.face .dm { font-size: .78em; font-weight: 700; color: #8a1c1c; opacity: .9; }

/* deck editor and card pool: card pictures instead of names (owner 2026-10-09) */
.picTile { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; background: transparent; border: 1px solid transparent; position: relative; }
.picTile .tilePic { pointer-events: none; }
.picTile:disabled { opacity: .45; }
.picTile:not(:disabled):hover, .picTile:focus-visible { border-color: var(--btn-ring, #4b6a85); }
.picTile .picOwn { font-size: 12px; }
.picTile .picCount { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.8); color: #fff; padding: 1px 6px; border-radius: 8px; font-size: 13px; }
.deckCards { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
.deckCard.picTile { min-height: 0; padding: 2px; }
.poolCard.picTile { align-items: center; text-align: center; }

/* CR 104.4 mulligan bar */
.mullBar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(env(safe-area-inset-top, 0px) + 58px); max-width: calc(100vw - 32px); box-sizing: border-box;   /* under the top bar, so it never covers your hand or your deck */ z-index: 60; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center; padding: 8px 12px; background: rgba(16,22,30,.92); border: 1px solid var(--btn-ring, #4b6a85); border-radius: 10px; max-width: calc(100vw - 32px); }

/* flags enlarge on hover and open large on click / tap (owner 2026-10-09) */
.pFlag { transition: transform .18s ease; transform-origin: center; cursor: zoom-in; position: relative; }
.pFlag:hover, .pFlag:focus-visible { transform: scale(2.6); z-index: 30; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
.flagTile .flagTileImg { transition: transform .18s ease; }
.flagTile:hover .flagTileImg, .flagTile:focus-visible .flagTileImg { transform: scale(1.5); }
.flagZoom { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.flagZoomImg { width: min(86vw, 720px); height: auto; box-shadow: 0 8px 40px rgba(0,0,0,.8); }
@media (prefers-reduced-motion: reduce) { .pFlag, .flagTile .flagTileImg { transition: none; } }

/* leaderboards */
.lbBar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.lbBar input[type=search] { flex: 1 1 160px; min-width: 120px; }
.lbList { display: flex; flex-direction: column; gap: 4px; max-height: 58vh; overflow-y: auto; }
.lbRow { display: grid; grid-template-columns: 64px minmax(0, 1fr) repeat(4, auto); gap: 10px; align-items: center; text-align: left; padding: 6px 10px; transition: transform .12s ease; }
.lbRow:hover, .lbRow:focus-visible { transform: scale(1.02); }
.lbRow.mine { outline: 2px solid var(--btn-ring, #4b6a85); }
.lbRow.flash { animation: lbFlash 1.4s ease 2; }
@keyframes lbFlash { 50% { background: rgba(75,106,133,.45); } }
.lbName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbNum, .lbTier, .lbIq { font-variant-numeric: tabular-nums; font-size: 13px; }
.lbPop { position: fixed; z-index: 300; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 220px; background: #141b24; border: 1px solid var(--btn-ring, #4b6a85); border-radius: 8px; pointer-events: none; font-size: 14px; }
.lbTable { border-collapse: collapse; width: 100%; font-size: 13px; } .lbTable th, .lbTable td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; }
@media (max-width: 560px) { .lbRow { grid-template-columns: 48px minmax(0, 1fr) auto auto; } .lbRow .lbTier, .lbRow .lbIq { display: none; } }

/* charts (validated: players #a8821a circles, A.I. #3f8fd6 squares) */
.iqChart { width: 100%; max-width: 640px; height: auto; background: #0d0b07; border-radius: 8px; }
.iqChart .grid { stroke: rgba(255,255,255,.08); stroke-width: 1; } .iqChart .axisT { fill: #b9ad93; font-size: 11px; }
.iqChart .dot { stroke: #0d0b07; stroke-width: 2; } .iqChart .mineRing { stroke: #f2e6c4; stroke-width: 2; } .iqChart .cross { stroke: rgba(255,255,255,.35); stroke-width: 1; }
.chartLegend { display: flex; gap: 14px; font-size: 13px; } .chartKey { display: inline-flex; gap: 6px; align-items: center; } .chartSw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .chartSw.sq { border-radius: 2px; }
.chartTip { font-size: 13px; padding: 4px 0; min-height: 1.4em; }

/* the I.Q box at the table */
.iqBox { position: fixed; right: calc(8px + var(--safe-r, 0px)); top: calc(56px + var(--safe-t, 0px)); z-index: 40; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; min-width: 110px; background: rgba(14,20,28,.86); border: 1px solid var(--btn-ring, #4b6a85); border-radius: 8px; font-size: 12px; pointer-events: none; }
.iqHead { letter-spacing: .12em; color: var(--btn-ring, #4b6a85); }
.iqRow { display: flex; gap: 6px; justify-content: space-between; align-items: center; } .iqName { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iqVal { font-variant-numeric: tabular-nums; font-weight: 700; }
.iqVal.rolling { color: #fff; text-shadow: 0 0 8px var(--btn-ring, #4b6a85); }
.iqVal.rage { color: #ff6b5a; } .iqVal.excite { color: #ffd76a; } .iqVal.calm { color: #cfd6e0; }
.iqMood { font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 4px; } .iqMood.rage { background: #7a1610; } .iqMood.excitement { background: #6b5410; }
body.noGame .iqBox { display: none; }

/* Stalking Deck glitch */
.stalkGlitch { position: fixed; inset: 0; z-index: 350; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 2px, rgba(60,0,0,.28) 2px 4px); mix-blend-mode: multiply; animation: stalkFlick 1.5s steps(11) forwards; }
.stalkTear { position: absolute; left: -8%; width: 116%; height: 7px; background: linear-gradient(90deg, transparent, rgba(190,0,0,.8) 18%, rgba(0,190,190,.6) 21%, rgba(0,0,0,.85) 55%, rgba(0,190,190,.5) 70%, transparent); animation: stalkTear .35s steps(3) 4; filter: blur(.3px); }
.stalkScan { position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.14) 50%, transparent); animation: stalkScan 1.1s linear 1; mix-blend-mode: screen; }
.stalkFlash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: stalkFlash 1.5s steps(1) 1; mix-blend-mode: difference; }
/* the whole table jolts sideways in colour-split ghosts, then snaps back */
#board.stalkJolt { animation: stalkJolt 1.3s steps(14) 1; }
@keyframes stalkJolt { 0% { transform: translateX(0); filter: none; } 8% { transform: translateX(-7px) skewX(-2deg); filter: drop-shadow(4px 0 0 rgba(255,0,0,.7)) drop-shadow(-4px 0 0 rgba(0,255,255,.7)); } 16% { transform: translateX(6px); filter: drop-shadow(-6px 0 0 rgba(255,0,0,.6)) drop-shadow(6px 0 0 rgba(0,255,255,.6)) contrast(1.6); } 30% { transform: translateX(-3px) translateY(2px); filter: drop-shadow(3px 0 0 rgba(255,0,0,.5)) drop-shadow(-3px 0 0 rgba(0,255,255,.5)) brightness(.6); } 45% { transform: translateX(9px) skewX(3deg); filter: invert(.15) hue-rotate(140deg); } 60% { transform: translateX(-5px); filter: drop-shadow(5px 0 0 rgba(255,0,0,.6)) drop-shadow(-5px 0 0 rgba(0,255,255,.6)); } 75% { transform: translateX(2px); filter: contrast(2) brightness(.4); } 90% { transform: translateX(-1px); filter: none; } 100% { transform: none; filter: none; } }
@keyframes stalkScan { 0% { top: -20%; } 100% { top: 110%; } }
@keyframes stalkFlash { 0%, 11%, 23%, 100% { opacity: 0; } 10% { opacity: .5; } 22% { opacity: .3; } 47% { opacity: .35; } 48% { opacity: 0; } }
#hand .card.stalkerIn { animation: stalkerIn 1.5s steps(10) both; }
@keyframes stalkFlick { 0% { opacity: 0; } 10% { opacity: 1; } 22% { opacity: .2; } 30% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; } }
@keyframes stalkTear { 0% { transform: translateX(-8%) scaleY(1); } 50% { transform: translateX(6%) scaleY(2.5); } 100% { transform: translateX(-3%) scaleY(.6); } }
@keyframes stalkerIn { 0% { filter: brightness(.2) contrast(3) hue-rotate(160deg); transform: translateX(-6px) skewX(12deg); opacity: .3; } 30% { filter: brightness(1.6) contrast(2); transform: translateX(5px) skewX(-8deg); opacity: 1; } 60% { filter: invert(.3); transform: translateX(-2px); } 100% { filter: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stalkGlitch, .stalkTear, .stalkScan, .stalkFlash, #board.stalkJolt, #hand .card.stalkerIn { animation: none; } .stalkGlitch { opacity: .5; } .stalkFlash { display: none; } }


/* Sacrifice */
.sacBar { height: 10px; background: rgba(255,255,255,.08); border-radius: 5px; overflow: hidden; } .sacBar i { display: block; height: 100%; background: #8a1a14; }
.sacChoices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .sacOpt { display: flex; flex-direction: column; gap: 4px; } .sacOpt .sacChoice { width: 100%; }
.sacDisclosure { border-left: 3px solid #8a1a14; padding: 4px 10px; margin: 8px 0; }
.picTile.selected { border-color: var(--btn-ring, #4b6a85); outline: 2px solid var(--btn-ring, #4b6a85); }

/* Wandering Throne */
.crownGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.crownCard { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 10px; border: 1px solid rgba(75,106,133,.45); border-radius: 10px; background: rgba(0,0,0,.35); font-size: 13px; }
.crownCard.mine { border-color: var(--btn-ring, #4b6a85); box-shadow: 0 0 12px rgba(75,106,133,.45); }

/* drawn runes (runes.js) */
.runeText { display: inline-flex; align-items: center; gap: .05em; vertical-align: -0.15em; } .runeImg { width: .62em; height: 1em; }

.deviceBox { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 500; display: flex; flex-direction: column; gap: 8px; width: min(420px, calc(100vw - 32px)); padding: 16px; }
/* ---- the website front page (/site) ---- */
body.sitePage { overflow: auto; min-height: 100%; background: #10161d; color: var(--ink); }
.siteHead { display: flex; align-items: center; gap: 14px; padding: 16px; background: #151d26; border-bottom: 1px solid #2a3948; }
.siteEmblem { width: 64px; height: 64px; object-fit: contain; } .siteTitle { letter-spacing: .12em; font-weight: bold; } .siteArena { letter-spacing: .45em; color: var(--muted); } .siteHost { font-size: .8rem; color: var(--muted); }
.siteMain { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; max-width: 1100px; margin: 0 auto; padding: 16px; box-sizing: border-box; }
.siteCard { background: #17212c; border: 1px solid var(--rim); border-radius: 10px; padding: 14px 16px; } .siteCard[hidden] { display: none; }
.siteCard h2 { margin: 0 0 .5em; font-size: 1.15rem; } .siteCard label { display: block; margin: .5em 0; } .siteCard input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; }
.siteBtn { display: inline-block; padding: 9px 14px; border: 1px solid var(--btn-edge); border-radius: 8px; color: var(--btn-ink); background: var(--btn-shade); text-decoration: none; } .siteBtn.primary { background: var(--btn-main); box-shadow: 0 0 0 2px var(--btn-ring); }
.siteList { list-style: none; padding: 0; margin: 0; } .siteList li { margin: .6em 0; } .siteFoot { text-align: center; padding: 18px 16px 28px; }
/* ---- online / offline lights and the player's I.Q. box (owner 2026-10-10) ---- */
.onDot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; vertical-align: middle; margin-right: 6px; border: 1.5px solid #0d0b07; }
.onDot.on { background: #2fbf4a; box-shadow: 0 0 6px 1px rgba(47, 191, 74, .75); }
.onDot.off { background: #d23b2f; box-shadow: 0 0 6px 1px rgba(210, 59, 47, .6); }
.presenceBox { display: inline-flex; align-items: center; gap: 2px; padding: 4px 10px; border: 1px solid var(--btn-edge); border-radius: 8px; background: #151d26; font-size: .85rem; letter-spacing: .04em; }
.presenceBox[data-online="1"] .presenceText { color: #9fe2ab; } .presenceBox[data-online="0"] .presenceText { color: #f0a59d; }
.iqStat { display: inline-flex; flex-direction: column; gap: 2px; padding: 5px 10px; border: 1px solid var(--btn-edge); border-radius: 8px; background: #151d26; min-width: 96px; vertical-align: middle; }
.iqStatHead { display: flex; align-items: baseline; gap: 6px; } .iqStatLabel { font-size: .75rem; letter-spacing: .12em; color: var(--muted); } .iqStatValue { font-size: 1.25rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.iqStatChange { font-size: .75rem; font-variant-numeric: tabular-nums; } .iqStatChange.up { color: #9fe2ab; } .iqStatChange.down { color: #f0a59d; }
.iqStatSub { font-size: .68rem; color: var(--muted); } .iqSpark { width: 96px; height: 26px; display: block; }
.pHead > .iqStat { margin: 8px 0 0; } .pLine .onDot { width: 14px; height: 14px; } .friendRow { display: flex; align-items: center; }
.homeTools .presenceBox, .homeTools .iqStat { margin: 2px 4px; }
@media (max-width: 520px) { .homeTools .iqStat { min-width: 0; } .homeTools .iqSpark { display: none; } }
/* the mulligan bar never blocks the table: only its buttons take taps; on small screens it shrinks into the top-right corner */
.mullBar { pointer-events: none; } .mullBar button { pointer-events: auto; }
@media (max-width: 760px), (max-height: 520px) { .mullBar { left: auto; right: 8px; transform: none; max-width: 46vw; padding: 4px 6px; gap: 4px; font-size: .78rem; } .mullBar .apNote { display: none; } .mullBar button { padding: 4px 8px; font-size: .78rem; } }
.acctKey { font-family: ui-monospace, monospace; word-break: break-all; padding: 4px 8px; background: rgba(0,0,0,.35); border-radius: 6px; }
.mullBar .apBtn.ghost { color: var(--ink); background: #151d26; border: 1px solid var(--btn-edge); }   /* "Keep this hand" readable on the dark bar */
/* the sacrifice prompt for level 5+ creatures: centred above the hand, the field stays visible so creatures can be tapped there too */
#actionPrompt.sacrificeOpen { left: 50% !important; right: auto !important; top: auto !important; bottom: calc(var(--handh, 110px) + 64px) !important; transform: translateX(-50%); max-width: min(94vw, 560px); }
.sacList { flex-wrap: wrap; max-height: 34vh; overflow: auto; } .sacPick.on { outline: 2px solid var(--bad); outline-offset: 1px; }

/* I.Q. inside the life-point box (owner 2026-10-10): a small button under the life; touching it opens the graph below the box */
.lifeIq { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 3px; padding: 2px 8px; min-height: 26px; border-radius: 6px; font-size: 13px; background: var(--btn-shade); border: 1px solid var(--btn-edge); color: var(--ink); cursor: pointer; align-self: flex-start; }
.lifeIq[hidden] { display: none; } .lifeIq .iqLabel { color: var(--muted); letter-spacing: .08em; } .lifeIq .iqVal { font-weight: 800; min-width: 2ch; }
.lifeIq[aria-expanded="true"] { border-color: var(--accent); }
.iqGraphPop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 240px; padding: 8px; background: #141b24f5; border: 1px solid var(--btn-ring, #4b6a85); border-radius: 8px; box-shadow: 0 6px 18px #000a; }
.lifeBox.br .iqGraphPop { top: auto; bottom: calc(100% + 8px); left: auto; right: 0; }
.iqGraphHead { display: block; font-size: 12px; margin-bottom: 4px; } .iqGraph { width: 100%; height: auto; display: block; } .iqGraph .grid { stroke: #2a3948; stroke-width: 1; } .iqGraph .axisT { fill: var(--muted); font-size: 10px; }
.oppLabel { font-size: 11px; color: var(--muted); margin-right: 4px; }
.lifeIq, .iqGraphPop { pointer-events: auto; }   /* the life HUD lets touches through to the field; the I.Q. button and its graph take them */

/* ===== RED SILK + PURPLE BUTTONS (owner 2026-10-10 14:02): the create-account screens (website and in game) and the guild screen use the red texture of
   the upgrading page as their background, and their buttons are purple (the loading screen's purple). Set as local colour variables, so every button there follows. */
.sitePage, #menu.guildScreen, #menu:has(.signupPanel) {
  --btn-main:#5b2a86; --btn-shade:#3a1a58; --btn-hi:#7a44ad; --btn-ink:#f3e9ff; --btn-edge:#8e5cc4; --btn-glint:rgba(255,255,255,.12); --btn-label:#f3e9ff; --btn-ring:#a77bd6; --rim:#7a3a3a; --accent:#c9a0f0;
}
body.sitePage { background: #120807 url('silk-red.jpg') center / cover fixed; }
body.sitePage::before { content: ""; position: fixed; inset: 0; background: rgba(10, 4, 3, .62); pointer-events: none; z-index: 0; }
body.sitePage > * { position: relative; z-index: 1; }
.sitePage .siteHead { background: rgba(20, 8, 6, .72); border-bottom-color: #5a2a24; }
.sitePage .siteCard { background: rgba(24, 10, 8, .78); border-color: #6a3030; }
.sitePage .siteBtn, .sitePage button { background: linear-gradient(180deg, var(--btn-hi), var(--btn-shade)); border-color: var(--btn-edge); color: var(--btn-ink); }
.sitePage .siteBtn.primary { background: linear-gradient(180deg, #8a52c0, var(--btn-main)); }
#menu.guildScreen, #menu:has(.signupPanel) { background: #120807 url('silk-red.jpg') center / cover; }
#menu.guildScreen::before, #menu:has(.signupPanel)::before { content: ""; position: absolute; inset: 0; background: rgba(10, 4, 3, .6); pointer-events: none; }
#menu.guildScreen > *, #menu:has(.signupPanel) > * { position: relative; }
#menu.guildScreen .menuSheet, #menu:has(.signupPanel) .menuSheet { background: rgba(24, 10, 8, .8); border-color: #6a3030; }
#menu.guildScreen button, #menu:has(.signupPanel) button { background: linear-gradient(180deg, var(--btn-hi), var(--btn-shade)); border-color: var(--btn-edge); color: var(--btn-ink); }
#menu.guildScreen button.on, #menu.guildScreen button.primary, #menu:has(.signupPanel) button.primary { background: linear-gradient(180deg, #8a52c0, var(--btn-main)); box-shadow: 0 0 0 2px var(--btn-ring); }
body:has(#menu:not([hidden])) #mullBar { display: none; }   /* the mulligan bar never sits over a menu screen; it comes back with the table (owner 2026-10-10: no frozen pop-ups) */
/* admin: I.Q. by country (owner 2026-10-10) */
.countryIq .worldMap { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--rim); }
.worldMap .sea { fill: #0e1822; } .worldMap .grat { stroke: #1f3142; stroke-width: 1; } .worldMap .grat.eq { stroke: #2f4a63; stroke-dasharray: 4 3; }
.worldMap .landDot { fill: #3c5a74; } .worldMap .ctyRing { fill: none; stroke: #0e1822; stroke-width: 2; } .worldMap .ctyDot { stroke: #0e1822; stroke-width: 1; }
.worldMap .ctyVal { fill: var(--ink); font-size: 11px; font-weight: 700; paint-order: stroke; stroke: #0e1822; stroke-width: 3px; } .worldMap .ctyMark { cursor: pointer; outline: none; } .worldMap .ctyMark:focus .ctyRing { stroke: #fff; }
.mapKey { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 13px; } .mapRamp { display: inline-block; width: 140px; height: 10px; border-radius: 5px; }
.worldMap .land { fill: #1d2c3a; stroke: #33516b; stroke-width: 1; stroke-linejoin: round; } .worldMap .landDot { fill: #4b6a85; opacity: .55; }
.tableScroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* wide tables scroll sideways on a phone instead of running off the card */
.starterRow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--rim); border-radius: 8px; } .starterRow .lbName { flex: 1 1 12em; min-width: 0; } .starterRow .lbNum { color: var(--muted); }

/* the 12 real attributes (owner 2026-10-11): every element creature keeps the same frame; its attribute emblem has its own colour */
.face.fam-fire { --fe: #c2361b; } .face.fam-water { --fe: #1f5fa2; } .face.fam-ice { --fe: #3a78a8; } .face.fam-inherit { --fe: #8a6d1e; } .face.fam-thunder { --fe: #b8860b; } .face.fam-dark { --fe: #3b2a4f; } .face.fam-chaosattr { --fe: var(--fam-chaos-emb); }

/* mirror rebuilding (owner 2026-10-11): a real card's artwork crop sits in the picture window; name, level and stats stay on the drawn frame */
.face .crop { position: absolute; left: 6%; right: 6%; top: 30%; height: 36%; width: 88%; object-fit: cover; z-index: 0; pointer-events: none; border: 1px solid #0006; border-radius: 2px; }
.face.hasCrop .nm, .face.hasCrop .lv, .face.hasCrop .st, .face.hasCrop .dm { position: relative; z-index: 1; }
.realLore { margin-top: .4em; font-style: italic; font-size: .82em; opacity: .85; }

/* the deck builder's enlarged card (owner 2026-10-11) */
.deckPreview { position: sticky; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; margin-bottom: 8px; background: #0b1118e6; border: 1px solid var(--rim); border-radius: 10px; min-height: 60px; }
.deckPreview { cursor: pointer; } .deckPreview .deckPreviewCard { pointer-events: none; } .deckPreviewName { margin: 0; font-weight: 700; text-align: center; }
@media (max-width: 700px) { .deckPreview { position: fixed; left: 50%; bottom: 8px; top: auto; transform: translateX(-50%); width: auto; max-width: 92vw; } .deckPreview:has(p.muted:only-child) { display: none; } }

/* counters and tokens on cards (owner 2026-10-11) */
.face .counters { position: absolute; left: 2px; bottom: 18%; z-index: 3; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
.face .ctr { min-width: 1.5em; padding: 0 .3em; border-radius: 1em; font: 700 .7em/1.5 system-ui, sans-serif; text-align: center; color: #fff; box-shadow: 0 0 0 1.5px #000a, 0 2px 4px #000a; }
.face .ctr-death { background: radial-gradient(circle at 35% 30%, #6b6b6b, #111); } .face .ctr-fear { background: radial-gradient(circle at 35% 30%, #d86ab0, #5a1d4a); } .face .ctr-counter { background: radial-gradient(circle at 35% 30%, #5fa8ff, #123a73); }
.face .tokenTag { position: absolute; right: 3%; bottom: 3%; z-index: 3; font: 800 .55em/1.4 system-ui, sans-serif; letter-spacing: .08em; padding: 0 .4em; border-radius: .3em; background: #f2d548; color: #20160a; box-shadow: 0 0 0 1px #000a; }
/* THE DIE (owner 2026-10-11): a textured 3D bone die that tumbles and lands on the rolled number, seen by every player */
.dieStage { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; pointer-events: none; perspective: 900px; background: radial-gradient(circle, #0007, transparent 60%); }
.dieStage .dieCap { position: absolute; top: calc(50% + 90px); font: 700 15px system-ui, sans-serif; color: #fff; text-shadow: 0 2px 6px #000; text-align: center; }
.die3d { --s: 110px; width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; }
.die3d .f { position: absolute; inset: 0; border-radius: 16%; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; gap: 4%;
  background: radial-gradient(circle at 30% 25%, #fffdf6, #efe3c8 55%, #cdb98f); box-shadow: inset 0 0 0 2px #0002, inset 0 -6px 12px #0003, inset 0 6px 10px #fff8;
  background-image: radial-gradient(circle at 30% 25%, #fffdf6, #efe3c8 55%, #cdb98f), repeating-radial-gradient(circle at 70% 80%, #0000 0 3px, #0000000a 3px 4px); background-blend-mode: multiply; backface-visibility: hidden; }
.die3d .pip { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #7a1010, #2a0303 70%); box-shadow: inset 0 2px 3px #000a, 0 1px 0 #fff6; }
.die3d .f1 { transform: rotateY(0deg) translateZ(calc(var(--s) / 2)); } .die3d .f6 { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.die3d .f2 { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .die3d .f5 { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.die3d .f3 { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } .die3d .f4 { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
@media (prefers-reduced-motion: reduce) { .die3d { transition: none !important; } }
.toolsPanel .tokRow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* owner 2026-10-11 (X3 A): a card effect asks a choice; effect stat changes */
.modBadge { position: absolute; left: 2px; right: 2px; bottom: 18%; background: #1b5e20e6; color: #fff; font: 700 10px system-ui, sans-serif; text-align: center; border-radius: 4px; padding: 1px 2px; pointer-events: none; }
#choicePanel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 950; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 40px); overflow: auto; background: #17131c; color: #f3eee6; border: 2px solid #d4a017; border-radius: 12px; box-shadow: 0 10px 40px #000c; padding: 14px; forced-color-adjust: none; }
#choicePanel h3 { margin: 0 0 6px; font: 700 16px system-ui, sans-serif; color: #f5c84c; }
#choicePanel .chNote { font: 13px system-ui, sans-serif; color: #c9c0b4; margin-bottom: 8px; }
#choicePanel .chOpts { display: flex; flex-wrap: wrap; gap: 8px; }
#choicePanel .chOpt { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; max-width: 160px; padding: 6px; border: 2px solid #4a4155; border-radius: 8px; background: #241d2b; color: inherit; font: 13px system-ui, sans-serif; cursor: pointer; }
#choicePanel .chOpt img { width: 88px; border-radius: 4px; }
/* owner 2026-10-17: a card option is the card itself: the picture fills the button, the name sits over its foot */
#choicePanel .chOpt.hasArt { position: relative; width: 118px; min-width: 118px; aspect-ratio: 5 / 7; padding: 0; overflow: hidden; justify-content: flex-end; background: #000; }
#choicePanel .chOpt.hasArt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
#choicePanel .chOpt.hasArt .chLbl { position: relative; z-index: 1; width: 100%; padding: 14px 4px 5px; background: linear-gradient(180deg, transparent, #000d 55%); color: #fff; font-size: 12px; text-shadow: 0 1px 2px #000; text-align: center; box-sizing: border-box; }
#choicePanel .chOpt.hasArt[aria-pressed="true"] { box-shadow: 0 0 0 3px #f5c84c, 0 0 14px #f5c84c88; }
/* the one-frame answer: each option wears the picture of the card it would use */
.respFrame .respRow button.withArt { position: relative; overflow: hidden; min-height: 64px; padding-left: 58px; text-align: left; }
.respFrame .respRow button.withArt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 50px; background: var(--artimg) center / cover no-repeat; opacity: .95; }
#choicePanel .chOpt[aria-pressed="true"] { border-color: #f5c84c; background: #3a2f17; }
#choicePanel .chGo { margin-top: 10px; width: 100%; padding: 10px; font: 700 15px system-ui, sans-serif; border-radius: 8px; border: 0; background: #d4a017; color: #1a1408; cursor: pointer; }
#choicePanel .chGo:disabled { opacity: .45; cursor: default; }

.reminderNote { margin: 0 0 10px; padding: 8px 12px; border: 1px dashed #d4a017; border-radius: 8px; background: #2a210d66; } .reminderNote summary { cursor: pointer; font-weight: 700; color: #f5c84c; } .reminderNote p { margin: 6px 0 0; }
/* the King's Market savings meter (admin) */
.meter { height: 10px; border-radius: 5px; background: rgba(127,127,127,.25); overflow: hidden; margin: 6px 0; }
.meterFill { height: 100%; border-radius: 5px; background: #c9a227; }

/* ===== TABLE MOTION (motion.js; owner 2026-10-11 12:03, 3D Tier 1). Clones glide in an overlay above the board; the board itself is never touched. ===== */
#motionLayer { position: fixed; inset: 0; pointer-events: none; z-index: 40; perspective: 900px; overflow: hidden; }
.motionClone { position: absolute; margin: 0; inset: auto; transform-style: preserve-3d; will-change: transform, opacity; box-shadow: 0 6px 14px #000a; border-radius: 6px; overflow: hidden; }
.motionClone .face { position: absolute; inset: 0; }
.motionClone.glide { animation: mGlide var(--ms, 920ms) cubic-bezier(.3, .7, .3, 1) forwards; }
.motionClone.toGrave { animation: mToGrave var(--ms, 920ms) cubic-bezier(.4, .6, .4, 1) forwards; }
.motionClone.strike { animation: mStrike var(--ms, 980ms) cubic-bezier(.3, .9, .4, 1) forwards; }
.motionClone.spin { animation: mSpin var(--ms, 1020ms) cubic-bezier(.3, .7, .3, 1) forwards; }
.motionClone.crack { animation: mCrack var(--ms, 1020ms) ease-in forwards; }
.motionClone.flipAway { animation: mFlipAway var(--ms, 920ms) ease-in forwards; }
@keyframes mGlide { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(calc(var(--dx) * .5), calc(var(--dy) * .5), 40px) scale(calc((1 + var(--sc)) / 2 * 1.06)); } 100% { transform: translate3d(var(--dx), var(--dy), 0) scale(var(--sc)); } }
@keyframes mToGrave { 0% { transform: translate3d(0, 0, 0) rotateX(0) scale(1); opacity: 1; filter: none; } 35% { transform: translate3d(calc(var(--dx) * .25), calc(var(--dy) * .25 - 18px), 36px) rotateX(-24deg) scale(1.04); filter: grayscale(.5) brightness(.8); } 100% { transform: translate3d(var(--dx), var(--dy), 0) rotateX(0) scale(var(--sc)); opacity: .35; filter: grayscale(1) brightness(.6); } }
@keyframes mStrike { 0% { transform: translate3d(0, 0, 0) rotateX(0); } 30% { transform: translate3d(calc(var(--dx) * .15), calc(var(--dy) * .15), 48px) rotateX(-18deg) scale(1.08); } 62% { transform: translate3d(calc(var(--dx) * .85), calc(var(--dy) * .85), 18px) rotateX(12deg) scale(1.04); } 78% { transform: translate3d(calc(var(--dx) * .7), calc(var(--dy) * .7), 30px) rotateX(-6deg); } 100% { transform: translate3d(0, 0, 0) rotateX(0) scale(1); opacity: 0; } }
@keyframes mSpin { 0% { transform: translate3d(0, 0, 0) rotateY(0) scale(1); } 100% { transform: translate3d(var(--dx), var(--dy), 0) rotateY(900deg) scale(calc(var(--sc) * .6)); opacity: .2; } }
@keyframes mCrack { 0% { transform: translate3d(0, 0, 0) rotate(0); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 25% { transform: translate3d(0, -10px, 30px) rotate(-3deg); filter: brightness(1.6); } 100% { transform: translate3d(var(--dx), var(--dy), 0) rotate(14deg) scale(var(--sc)); opacity: 0; clip-path: polygon(0 0, 100% 0, 45% 100%, 0 100%); } }
@keyframes mFlipAway { 0% { transform: translate3d(0, 0, 0) rotateY(0); } 45% { transform: translate3d(calc(var(--dx) * .4), calc(var(--dy) * .4 - 16px), 40px) rotateY(90deg); } 100% { transform: translate3d(var(--dx), var(--dy), 0) rotateY(180deg) scale(var(--sc)); opacity: .5; } }
/* in-place motions on the real card: a flip through its edge, a quarter turn, a pulse */
#board .card.flipIn { animation: mFlipIn 880ms ease-out; } @keyframes mFlipIn { 0% { transform: translateZ(4px) rotateY(-180deg); } 55% { transform: translateZ(40px) rotateY(-70deg); } 100% { transform: translateZ(4px) rotateY(0); } }
#board .card.turn { animation: mTurn 880ms ease-out; } @keyframes mTurn { 0% { transform: translateZ(40px) rotate(-90deg); } 100% { transform: translateZ(4px) rotate(0); } }
#board .card.def.turn { animation: mTurnDef 880ms ease-out; } @keyframes mTurnDef { 0% { transform: translateZ(40px) rotate(0) scale(.7); } 100% { transform: translateZ(4px) rotate(90deg) scale(.7); } }
#board .card.pulse { animation: mPulse 880ms ease-out; } @keyframes mPulse { 0% { transform: translateZ(4px) scale(1); } 40% { transform: translateZ(30px) scale(1.12); filter: brightness(1.5); } 100% { transform: translateZ(4px) scale(1); } }
#board .card.popIn { animation: mPop 880ms cubic-bezier(.3, 1.4, .5, 1); } @keyframes mPop { 0% { transform: translateZ(60px) scale(.2); opacity: 0; } 100% { transform: translateZ(4px) scale(1); opacity: 1; } }
.life.lifeShake { animation: mShake 860ms ease-out; display: inline-block; } @keyframes mShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-4px) scale(1.15); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { #motionLayer { display: none; } #board .card.flipIn, #board .card.turn, #board .card.def.turn, #board .card.pulse, #board .card.popIn, .life.lifeShake { animation: none; } }

/* ===== CARD STOCK: a thin dark edge under each card on the table, and a shadow that deepens as it lifts (3D Tier 1, item 4) ===== */
#board .slot .card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; transform: translateZ(-3px); background: #0b0d12; pointer-events: none; }
#board .slot .card { box-shadow: 0 2px 3px #0009, 0 1px 0 #000c; }
#board .slot .card:hover { box-shadow: 0 14px 22px #000b, 0 3px 4px #0009; }

/* ===== REAL PILES: the deck, grave and exiles as stacks whose thickness follows the count (3D Tier 1, item 3) ===== */
.pileCard .pileStack { position: absolute; inset: 0; border-radius: 5px; background: #1a1f2a; border: 1px solid #000a; transform: translateZ(calc(var(--i) * -1.2px)) translate(calc(var(--i) * .5px), calc(var(--i) * .5px)); pointer-events: none; }
.pile:hover .pileCard .card { transform: translateZ(18px); }

/* ===== THE HAND AS A FAN: cards in a slight arc, the held card rising and straightening (3D Tier 1, item 2) ===== */
#hand.fan { perspective: 700px; perspective-origin: 50% 120%; padding-bottom: 6px; }
#hand.fan .card { transform: rotate(calc(var(--fan, 0) * 1deg)) translateY(calc(var(--fanY, 0) * 1px)); transform-origin: 50% 160%; transition: transform .16s ease; }
#hand.fan .card:hover, #hand.fan .card.selected { transform: rotate(0deg) translateY(-14px) translateZ(20px) scale(1.14); z-index: 5; }
@media (prefers-reduced-motion: reduce) { #hand.fan .card { transition: none; } }

/* ===== DIGITIZE (digitize.js, owner 2026-10-11 12:51): the pixel canvas above the table; the re-forming card is hidden until its bits have gathered; the field quake ===== */
#digitizeLayer { position: fixed; inset: 0; pointer-events: none; z-index: 41; }
#board .card.digitizing { opacity: 0; transition: opacity .2s ease .86s; }
#board .card.digitizing .face { visibility: hidden; }
#board.quake { animation: quake 1.4s cubic-bezier(.36, .07, .19, .97); }
@keyframes quake { 10%, 90% { transform: rotateX(54deg) translate3d(-2px, 0, 0); } 20%, 80% { transform: rotateX(54deg) translate3d(4px, 0, 2px); } 30%, 50%, 70% { transform: rotateX(54deg) translate3d(-6px, 1px, 0); } 40%, 60% { transform: rotateX(54deg) translate3d(6px, -1px, 4px); } }
#board .card.shudder { animation: shudder 1.2s ease-out; }
@keyframes shudder { 0%, 100% { transform: translateZ(4px); filter: none; } 30% { transform: translateZ(14px) translate(1px, -1px); filter: brightness(1.6) contrast(1.3); } 55% { transform: translateZ(2px) translate(-1px, 1px); filter: brightness(.5); } 75% { transform: translateZ(10px); filter: brightness(1.3); } }
#board .card.def.shudder { animation: shudderDef 1.2s ease-out; }
@keyframes shudderDef { 0%, 100% { transform: translateZ(4px) rotate(90deg) scale(.7); } 30% { transform: translateZ(14px) rotate(90deg) scale(.72); filter: brightness(1.6); } 55% { transform: translateZ(2px) rotate(90deg) scale(.7); filter: brightness(.5); } 75% { transform: translateZ(10px) rotate(90deg) scale(.7); } }
@media (prefers-reduced-motion: reduce) { #digitizeLayer { display: none; } #board .card.digitizing { opacity: 1; transition: none; } #board .card.digitizing .face { visibility: visible; } #board.quake, #board .card.shudder, #board .card.def.shudder { animation: none; } }

/* ===== FX (fx.js, owner 2026-10-11 13:09): shuffle, blood pool, skeleton arm, dirt, bone dice ===== */
.fxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 42; }
.fxLayer.fxDirt { z-index: 38; }
.card.fxSink, .card.fxDrag { position: fixed; margin: 0; inset: auto; z-index: 40; pointer-events: none; transform-origin: 50% 100%; box-shadow: 0 4px 10px #000a; transition: none; }
.card.fxDrag { z-index: 45; transform-origin: 50% 50%; }
.card.fxEvoke { position: fixed; margin: 0; inset: auto; z-index: 44; pointer-events: none; transform-origin: 50% 50%; transition: none; box-shadow: 0 0 18px #c0141c, 0 6px 14px #000a; }
.card.fxCorrupt { z-index: 44; box-shadow: 0 0 22px #7a0b12; }
/* the bone d6: ivory with grain and pitting, carved dark pips */
.die3d .f { background: radial-gradient(circle at 30% 25%, #f7f0dc, #e6d8b4 55%, #c4b088); background-image: radial-gradient(circle at 30% 25%, #f7f0dc, #e6d8b4 55%, #c4b088), repeating-linear-gradient(115deg, #0000 0 5px, #6b5a3a10 5px 6px), radial-gradient(circle at 70% 70%, #6b5a3a22 0 1.5px, #0000 2px), radial-gradient(circle at 22% 62%, #6b5a3a1e 0 1px, #0000 1.6px); box-shadow: inset 0 0 0 2px #5a482c33, inset 0 -6px 12px #5a482c44, inset 0 6px 10px #fff9; }
.die3d .pip { background: radial-gradient(circle at 40% 35%, #3a2a18, #120c06 70%); box-shadow: inset 0 2px 3px #000c, 0 1px 0 #fff8; }
.dieStage .d20 { filter: drop-shadow(0 10px 14px #000a); }
@media (prefers-reduced-motion: reduce) { .fxLayer { display: none; } .card.fxSink, .card.fxDrag { display: none; } }

/* ===== THE GAME LOG (gamelog.js, owner 2026-10-11 13:16): the last few things that happened, and which card's effect did them, under the table ===== */
#gameLog { position: absolute; left: 10px; bottom: 6px; max-width: min(46vw, 420px); z-index: 7; pointer-events: none; font-size: 12px; color: var(--muted); text-shadow: 0 1px 2px #000; }
#gameLog .logLine { opacity: .55; line-height: 1.3; } #gameLog .logLine.newest { opacity: 1; color: var(--ink); }
@media (max-height: 460px) { #gameLog { font-size: 10px; max-width: 40vw; } }

/* card zoom (owner 2026-10-11 17:12): full card left, organized scrolling box right */
.zoomSheet { max-width: 900px; width: min(96vw, 900px); }
.zoomSheet .zoom { display: grid; grid-template-columns: minmax(180px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; margin: 8px 0 12px; }
.zoomSheet .zoomCard { position: relative; aspect-ratio: 5 / 7; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 24px #000b; transform: none; }
.zoomSheet .zoomCard .card { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; transform: none !important; font-size: 14px; }
.zoomSheet .zoomInfo { max-height: min(70vh, 560px); overflow-y: auto; border: 1px solid var(--rim); border-radius: 12px; background: #10171f; padding: 8px 12px; display: grid; gap: 2px; align-content: start; }
.zoomSheet .zrow { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 6px 0; border-bottom: 1px solid #22303e; font-size: 14px; line-height: 1.35; }
.zoomSheet .zrow:last-child { border-bottom: 0; }
.zoomSheet .zk { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
.zoomSheet .zv { word-break: break-word; }
.zoomSheet .ztext .zv { font-weight: 600; }
.zoomSheet .zlore .zv { font-style: italic; color: #c9b8e0; }
@media (max-width: 560px) { .zoomSheet .zoom { grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 10px; } .zoomSheet .zrow { grid-template-columns: 90px minmax(0, 1fr); font-size: 12px; } .zoomSheet .zoomInfo { max-height: 50vh; } }

/* ARENA FLOOR (owner 2026-10-11 17:12: "use the empty area around the board to make it look more 3D"): a perspective floor grid that recedes under the
   table, a far wall band and a vignette, drawn behind the board in the same tilt so the table reads as standing in a hall. CSS only; off with reduced motion
   nothing moves anyway (it is static). */
#scene::before { content: ''; position: absolute; left: -60%; right: -60%; top: -30%; height: 140%; z-index: -1; pointer-events: none; transform-origin: 50% 100%; transform: rotateX(58deg);
  background: repeating-linear-gradient(90deg, rgba(120, 160, 200, .10) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(120, 160, 200, .10) 0 1px, transparent 1px 64px), linear-gradient(180deg, #121c27 0%, #0b1118 70%, #070b10 100%);
  -webkit-mask: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.9) 70%, transparent 100%); mask: linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.9) 22%, rgba(0,0,0,.9) 70%, transparent 100%); }
#scene::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 42%, transparent 55%, rgba(0, 0, 0, .55) 100%), linear-gradient(180deg, rgba(40, 60, 85, .35) 0%, transparent 18%); }
#scene { isolation: isolate; }
#scene.flatScene::before { display: none; }
/* owner 2026-10-17: while the server passes for you (nothing of yours can answer), a quiet note stands where Pass would be */
#passingNote { color: var(--muted); font-style: italic; font-size: 12px; padding: 6px 10px; }

/* owner 2026-10-17: the card inspector's three boxes: effect (blue), abilities (green), lore (violet) */
.zoomSheet .zoom.zoom3 { grid-template-rows: auto auto; } .zoomSheet .zoom.zoom3 .zboxes { grid-column: 1 / -1; display: grid; gap: 8px; }
.zbox { border: 1px solid var(--rim); border-radius: 10px; background: #10171f; padding: 8px 12px; } .zbox .zbt { margin: 0 0 4px; font: 700 11px/1.2 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .zbox .zbv { font-size: 14px; line-height: 1.4; }
.zbox.ztext { border-color: #6cb4ee88; } .zbox.ztext .zbv { font-weight: 600; } .zbox.zabil { border-color: #4cc38a66; } .zbox.zabil .zab { padding: 3px 0; } .zbox.zlore { border-color: #c9a9ff66; } .zbox.zlore .zbv { font-style: italic; color: #c9b8e0; }

/* ===== joined from the other tree 2026-10-17 (owner 2026-10-12/13: slide End turn + deck flag, deck preview inline, Extra Deck sign, deck choice, dread counters) ===== */
/* owner 2026-10-12 17:34: End turn is smaller than the other buttons and must be slid UP to work; a white flag beside your own deck shows that holding it forfeits */
#endBtn.slideEnd { position: relative; justify-self: center; width: 64%; min-height: 20px !important; padding: 0 6px !important; font-size: 10px !important; transform: translateY(var(--slide, 0)); transition: transform .12s ease-out, background .12s; touch-action: none; }
#endBtn.slideEnd::before { content: '\25B2  '; font-size: 9px; opacity: .8; }
#endBtn.slideEnd.armed { background: linear-gradient(180deg, #3d7d5c, #24543c); border-color: #4cc38a; transition: none; }
[data-pile="deck"][data-mine="1"] { position: relative; }
[data-pile="deck"][data-mine="1"]::after { content: ''; position: absolute; right: -14px; top: 2px; width: 13px; height: 18px; pointer-events: none; opacity: .9;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 18'><rect x='1' y='0' width='1.4' height='18' fill='%23b08a5a'/><path d='M2.4 1.2 C5 0.2 7.5 2.4 12.4 1.2 L12.4 8.2 C7.5 9.4 5 7.2 2.4 8.2 Z' fill='%23f4f1ea' stroke='%23999' stroke-width='.5'/></svg>") center / contain no-repeat; }
/* owner 2026-10-12 23:23: on phones the deck builder's large card opens under the tapped card's name, across the whole list */
.deckPreview.inline, .deckPreview.inline:has(p.muted:only-child) { position: static; left: auto; bottom: auto; top: auto; transform: none; max-width: none; z-index: auto; grid-column: 1 / -1; flex: 0 0 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 8px; }
.deckPreview.inline .deckPreviewName { font-weight: 700; margin: 0; }
/* owner 2026-10-13 02:49: the Extra Deck area until its cards exist */
.comingSoon { color: #ff3b3b; font-weight: 800; font-size: 1.15em; letter-spacing: .03em; text-align: center; border: 2px solid #ff3b3b; border-radius: 10px; padding: 10px 12px; margin: 6px 0 10px; background: #ff3b3b14; }
/* owner 2026-10-13 04:20: the deck-choice screen before a challenge match */
.deckChoice { z-index: 90; } .deckChoiceSheet { max-width: 480px; width: 100%; max-height: 86vh; overflow: auto; }
.deckChoiceList { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .deckChoiceItem { text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.deckChoiceItem.on { outline: 2px solid #e7c46a; }
/* owner 2026-10-13 06:29: dread counters (the old fear counters, CR 818) */
.face .ctr-dread { background: radial-gradient(circle at 35% 30%, #8a5ad8, #2d1a5a); }

/* owner 2026-10-17 15:16: the I.Q. moving during a match: green flash and a rising ▲ +n going up, red flash and a sinking ▼ -n going down (fx.js fxIqChange) */
.iqUp { animation: iqUpF 1.3s ease-out; } .iqDown { animation: iqDownF 1.3s ease-out; }
@keyframes iqUpF { 0% { color: inherit; text-shadow: none; transform: none; } 15% { color: #5dff9a; text-shadow: 0 0 10px #2ecc71; transform: scale(1.35); } 60% { color: #5dff9a; transform: scale(1.05); } 100% { color: inherit; text-shadow: none; transform: none; } }
@keyframes iqDownF { 0% { color: inherit; text-shadow: none; transform: none; } 15% { color: #ff6b5a; text-shadow: 0 0 10px #ff3b30; transform: scale(1.35); } 60% { color: #ff6b5a; transform: scale(1.05); } 100% { color: inherit; text-shadow: none; transform: none; } }
.iqDelta { position: absolute; right: 2px; top: -4px; font: 800 11px/1 system-ui, sans-serif; pointer-events: none; white-space: nowrap; z-index: 5; text-shadow: 0 1px 2px #000; }
.iqDelta.up { color: #5dff9a; animation: iqRise 1.4s ease-out forwards; } .iqDelta.down { color: #ff6b5a; animation: iqSink 1.4s ease-out forwards; }
@keyframes iqRise { 0% { opacity: 0; transform: translateY(6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
@keyframes iqSink { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) { .iqUp, .iqDown, .iqDelta { animation: none; } .iqDelta { display: none; } }

/* owner 2026-10-17 15:36: Black Sunshine's blood moon over the field (fx.js fxBloodMoon) */
.bloodMoon .bmShade { position: absolute; inset: 0; background: radial-gradient(ellipse 90% 75% at 50% 8%, rgba(190, 10, 20, .55), rgba(110, 0, 10, .5) 45%, rgba(20, 0, 4, .62) 100%); mix-blend-mode: multiply; }
.bloodMoon .bmRays { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 4%, rgba(255, 40, 30, .35), transparent 70%); mix-blend-mode: screen; }
.bloodMoon .bmMoon { position: absolute; border-radius: 50%; background: radial-gradient(circle at 38% 36%, #ff4a3a 0%, #c0101c 38%, #6a0008 72%, #2a0004 100%); box-shadow: 0 0 24px 6px rgba(200, 10, 20, .75), 0 0 70px 20px rgba(120, 0, 10, .5); overflow: hidden; }
.bloodMoon .bmMoon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 70% 58%, #000 0%, #050002 42%, rgba(0, 0, 0, .85) 55%, transparent 66%); }
@media (prefers-reduced-motion: reduce) { .bloodMoon { display: none; } }