@font-face{font-family:'Pixelify Sans';font-weight:400;src:url(pixelify-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Pixelify Sans';font-weight:500 600;src:url(pixelify-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Pixelify Sans';font-weight:700;src:url(pixelify-sans-latin-700-normal.woff2) format('woff2')}

/* ============================================================
   SCRIBIA THEME TEST — the card's own visual language
   Colors come from the two card palettes:
   bold drawing colors in small doses, soft background tones for surfaces.
   ============================================================ */
:root{
  --ink:#000;
  --paper:#f6f5f1;            /* main surface: near-white, cool */
  --paper-2:#e9e9ef;          /* soft gray-lilac (bg palette light) */
  --desk:#3e4258;             /* soft indigo-slate (bg palette dark) */
  --desk-2:#474b63;
  --bold-yellow:#efc21a;      /* drawing palette */
  --bold-blue:#1f6fe0;
  --bold-red:#d61f1f;
  --bold-pink:#d81b72;
  --bold-green:#2bb64a;
  --ui:'Pixelify Sans','Rajdhani',sans-serif;
}

/* ---- the room behind the book: dithered slate, no ocean ---- */
body{background:#d8dae2 !important}
.arena-layer{background:transparent !important}

/* ---- no more wood / leather / parchment ---- */

/* ---- the book: a card-like object, thick black edge, hard shadow ---- */
.book-panel, .book-panel.home-mode{
  background:var(--paper) !important;
  border:3px solid var(--ink) !important;
  border-radius:4px !important;
  box-shadow:6px 6px 0 var(--ink) !important;
  overflow:hidden;
}
.book-right-panel{border-radius:0 !important}
.book-spine{display:none !important}

/* left nav */
.book-left-panel{border-right:3px solid var(--ink)}
.book-left-title{font-family:var(--ui) !important;font-weight:700;font-size:26px !important;letter-spacing:.02em !important;
  color:#fff !important;-webkit-text-stroke:0;text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink),4px 4px 0 var(--ink) !important;
  border-bottom:3px solid var(--ink) !important;padding-bottom:18px !important;margin-bottom:12px !important}
.book-left-nav{gap:8px !important;padding:4px 14px !important}
.book-left-tab{font-family:var(--ui) !important;font-size:17px !important;font-weight:600;letter-spacing:0 !important;
  color:var(--ink) !important;background:#fff !important;border:2px solid var(--ink) !important;border-radius:0 !important;
  box-shadow:3px 3px 0 var(--ink);padding:8px 12px !important}
.book-left-tab:hover{background:#fff8d8 !important;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.book-left-tab.active{background:var(--bold-yellow) !important;color:var(--ink) !important}
.book-left-footer{border-top:3px solid var(--ink) !important}

/* mobile header + tabs */
.book-right-panel > .leather-panel, .book-panel > .leather-panel{border-bottom:3px solid var(--ink)}
.book-tab{font-family:var(--ui) !important;font-size:15px !important;font-weight:600;color:#fff !important;letter-spacing:0 !important}
.book-tab.active{color:var(--ink) !important;background:var(--bold-yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.book-tab-arrow{color:#fff !important}

/* ---- section headers: two-tone striped bars ---- */
.posts-compact-bar{background:#1f6fe0 url(data:image/png;base64,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) left center/1200px 100% !important;image-rendering:pixelated;
  border-top:3px solid var(--ink) !important;border-bottom:3px solid var(--ink) !important;padding:8px 14px !important}
#playerSearchSection .posts-compact-bar{background:#d81b72 url(data:image/png;base64,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) left center/1200px 100% !important;image-rendering:pixelated}
.posts-compact-title{font-family:var(--ui) !important;font-weight:700;font-size:20px !important;letter-spacing:.02em !important;text-transform:lowercase;
  color:#fff !important;text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink) !important}
.posts-compact-toggle{color:#fff !important}
.hero-label{font-family:var(--ui) !important;font-size:15px !important;font-weight:600;letter-spacing:.04em !important;color:var(--ink) !important;opacity:1 !important;background:transparent !important}

/* ---- filters + sort: chunky outlined buttons ---- */
.book-filter-label{font-family:var(--ui) !important;font-size:13px !important;color:var(--ink) !important;letter-spacing:.04em !important}
.book-creator-input{font-family:var(--ui) !important;font-size:14px !important;border:2px solid var(--ink) !important;border-radius:0 !important;background:#fff !important;padding:5px 8px !important;color:var(--ink) !important}
.book-level-pill{font-family:var(--ui) !important;font-size:14px !important;font-weight:600;min-width:28px;min-height:28px;color:var(--ink) !important;
  background:#fff !important;border:2px solid var(--ink) !important;border-radius:0 !important}
.book-level-pill.active{background:var(--bold-yellow) !important}
.book-filter-count{font-family:var(--ui) !important;font-size:13px !important;color:#333 !important}
.book-sort-btn{font-family:var(--ui) !important;font-size:15px !important;font-weight:600;color:var(--ink) !important;background:#fff !important;
  border:2px solid var(--ink) !important;border-radius:0 !important;box-shadow:2px 2px 0 var(--ink);padding:5px 10px !important}
.book-sort-btn.active{background:var(--bold-yellow) !important}

/* ---- cards: square corners, hard shadow, little lift on hover ---- */
.book-thumb-img, .posts-thumb, .hero-track img, .hero-track canvas{border-radius:0 !important;box-shadow:3px 3px 0 var(--ink) !important;transition:transform .12s steps(2) !important}
.book-thumb-img:hover, .posts-thumb:hover{transform:translate(-2px,-3px) !important;box-shadow:5px 6px 0 var(--ink) !important}
.book-thumb-badge{font-family:var(--ui) !important;font-size:10px !important;background:var(--ink) !important;color:#fff !important;border-radius:0 !important;padding:2px 4px !important;bottom:auto !important;top:3px !important;left:3px !important}

/* old level-colored frames around thumbnails off (rarity needs a new treatment) */
.posts-thumb, .book-thumb-img{border:0 !important;border-image:none !important;background:none !important}
.book-thumb-wrap{line-height:0}
.posts-grid,.posters-page-wrapper,.book-grid-thumbs,.posts-expandable,.posts-library{background:transparent !important;box-shadow:none !important}
.hero-carousel{background:transparent !important}

/* ============================================================
   SITE-WIDE: colors, buttons, dialogs
   Pages are paper; dialogs and overlays are the binder's cobalt.
   ============================================================ */
:root{
  --gold:#f0c419; --gold-bright:#ffd84a; --gold-dim:#b8941a;
  --brass:#f0c419; --brass-light:#ffd84a; --brass-dark:#b8941a;
  --panel-wood-dark:#1c3778; --panel-wood-mid:#24479a; --panel-wood-warm:#2c55b0; --panel-wood-light:#3a66c4; --panel-wood-edge:#122858;
  --panel-dark:#1c3778; --panel-mid:#24479a; --panel-warm:#2c55b0; --panel-light:#3a66c4; --panel-edge:#122858;
  --cobalt:#1f3f8f; --cobalt-2:#18336f;
}

/* ---- buttons: one chunky family ---- */
.onboard-btn, .anon-submit, .anon-modal-actions button, .mykards-signin-btn, .book-action-item, .book-subnav-btn,
.game-btn, .play-menu-btn, .ai-mode-btn, .ai-diff-btn, .pvp-create-btn, .card-btn-generate, .card-btn-save, .card-btn-cancel,
.cc-reroll-btn, .overlay-btn-cancel, .sr-keep-btn, .sr-done-btn, .ch-accept-btn, .ch-cancel-btn, .library-back-btn,
.card-detail-nav-btn, .ai-end-btn, .cc-crop-apply, .cc-crop-cancel, .onboard-pfp-upload-btn, .card-detail-delete, .hpick-clear{
  font-family:var(--ui) !important;font-weight:600 !important;letter-spacing:.01em !important;text-transform:none !important;
  color:var(--ink) !important;background:#fff !important;background-image:none !important;
  border:2px solid var(--ink) !important;border-radius:0 !important;box-shadow:3px 3px 0 var(--ink) !important;
  text-shadow:none !important;opacity:1;
}
.onboard-btn:hover, .anon-submit:hover, .anon-modal-actions button:hover, .mykards-signin-btn:hover, .book-action-item:hover, .book-subnav-btn:hover,
.game-btn:hover, .play-menu-btn:hover, .ai-mode-btn:hover, .ai-diff-btn:hover, .pvp-create-btn:hover, .card-btn-generate:hover, .card-btn-save:hover,
.card-btn-cancel:hover, .cc-reroll-btn:hover, .overlay-btn-cancel:hover, .sr-keep-btn:hover, .sr-done-btn:hover, .library-back-btn:hover, .ai-end-btn:hover{
  transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink) !important}
.onboard-btn:active, .game-btn:active, .play-menu-btn:active, .card-btn-generate:active, .card-btn-save:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink) !important}
/* primary actions go yellow */
.onboard-btn:not(.onboard-btn-ghost), .anon-submit, .mykards-signin-btn, .card-btn-generate, .card-btn-save, .sr-done-btn, .sr-keep-btn,
.game-btn.confirm, .game-btn.rematch, .pvp-create-btn, .ai-mode-btn, .book-subnav-btn.active, .ai-diff-btn.active, .cc-crop-apply, .ch-accept-btn{
  background:var(--bold-yellow) !important}
.play-menu-btn.ai{background:#7fb0f0 !important} .play-menu-btn.pvp{background:#f08a8a !important}
.card-detail-delete{background:#ffd6d6 !important}
button:disabled{opacity:.45 !important;transform:none !important}

/* ---- dialogs: cobalt binder surfaces, black edge, hard shadow ---- */
.anon-modal, .onboard-card{
  background-color:var(--cobalt) !important;
  background-image:conic-gradient(#2348a0 25%,transparent 0 50%,#2348a0 0 75%,transparent 0) !important;background-size:4px 4px !important;
  border:3px solid var(--ink) !important;border-radius:4px !important;box-shadow:6px 6px 0 var(--ink) !important;color:#fff !important}
.onboard-card{padding:26px 24px !important}
.anon-modal h3, .onboard-title, .overlay-title, .picker-title, .ai-mode-title{
  font-family:var(--ui) !important;font-weight:700 !important;color:#fff !important;letter-spacing:.01em !important;
  text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink),4px 4px 0 var(--ink) !important}
.onboard-title{font-size:30px !important}
.onboard-sub, .onboard-hint, .anon-modal-hint, .overlay-subtitle, .picker-subtitle, .picker-count{color:#dfe6ff !important}
.anon-modal input, .onboard-card input, .onboard-card select{
  font-family:var(--ui) !important;font-size:16px !important;color:var(--ink) !important;background:#fff !important;
  border:2px solid var(--ink) !important;border-radius:0 !important;box-shadow:inset 2px 2px 0 #0002}
.anon-modal input::placeholder, .onboard-card input::placeholder{color:#777 !important}
.onboard-error, .anon-modal-error{color:#ffd0d0 !important;font-weight:600}
.onboard-dot{background:#ffffff55 !important;border-radius:0 !important} .onboard-dot.active{background:var(--bold-yellow) !important} .onboard-dot.done{background:#fff !important}

/* full-screen overlays: dim toward the binder blue instead of black */
.onboard-overlay{background:rgba(18,30,70,.82) !important;backdrop-filter:none !important}
.game-overlay.z-play, .game-overlay.z-lobby, .game-overlay.z-picker, .game-overlay.z-claim{background:rgba(18,30,70,.88) !important}
.game-overlay.z-coin, .game-overlay.z-result{background:rgba(18,30,70,.78) !important}
.anon-modal-overlay{background:rgba(18,30,70,.7) !important;backdrop-filter:none !important}
.card-detail-overlay{background:rgba(18,30,70,.85) !important}
.card-detail-content{font-family:var(--ui) !important}
.card-detail-name{font-family:var(--ui) !important;font-weight:700 !important;color:#fff !important}

/* ---- book sub-tabs (Deck / Binder / Gallery) ---- */
.book-subnav-btn{font-size:15px !important;padding:6px 14px !important;min-height:36px}

/* ---- section titles inside pages ---- */
.mykards-section-title, .drops-pool-title, .drops-next-label, .book-log-title{font-family:var(--ui) !important;font-weight:700 !important;color:var(--ink) !important;letter-spacing:.03em !important;font-size:15px !important}
.drops-countdown{font-family:var(--ui) !important;color:var(--ink) !important}
.drops-stat-box{background:#fff !important;border:2px solid var(--ink) !important;border-radius:0 !important;box-shadow:3px 3px 0 var(--ink)}
.drops-stat-value{font-family:var(--ui) !important;color:var(--ink) !important}
.drops-stat-label, .drops-utc-note{font-family:var(--ui) !important;color:#444 !important}
.drops-eligibility{background:#fff !important;border:2px solid var(--ink) !important;border-radius:0 !important;color:var(--ink) !important}

/* ---- small card tiles (binder, gallery, drops) ---- */
.book-card{border:2px solid var(--ink) !important;border-radius:0 !important;box-shadow:2px 2px 0 var(--ink)}
.drops-pool-grid .book-card{width:96px;height:auto}
@media (min-width:768px){ .drops-pool-grid .book-card{width:120px} }

/* ---- text on paper pages: accents in readable blue, names in ink ---- */
.book-pages{--gold:#1c56c8;--gold-bright:#1f6fe0;--gold-dim:#4a5a80;--text-dim:#4a4f5c;--text-faint:#6a7080;--parch-light:#f6f5f1;--parch:#e9e9ef}
.book-profile-name{font-family:var(--ui) !important;font-weight:700 !important;font-size:24px !important;color:var(--ink) !important;letter-spacing:0 !important}
.book-profile-record{font-family:var(--ui) !important;color:#333 !important;font-size:14px !important}
.book-profile-coins{font-family:var(--ui) !important;color:#9a6a00 !important;font-weight:600}
.book-profile-highlights-label{font-family:var(--ui) !important;font-weight:700 !important;color:var(--ink) !important;font-size:14px !important;letter-spacing:.03em !important}
.lb-entry{font-family:var(--ui)}
.lb-entry.lb-you{background:#fff3c4 !important;border:2px solid var(--ink);border-radius:0 !important}
#lbList .lb-name, .lb-name{font-family:var(--ui) !important;font-weight:600 !important;color:var(--ink) !important;font-size:16px !important}
.lb-meta{color:#555 !important;font-size:12px !important}
.lb-rank{font-family:var(--ui) !important;font-weight:700 !important;color:var(--ink) !important}
.lb-streak{font-family:var(--ui) !important;color:#1c56c8 !important;font-weight:700}
.lb-streak-label{color:#555 !important}
.lb-avatar{border-color:var(--ink) !important}
.card-overlay{background:rgba(18,30,70,.85) !important}
.card-creator{border:3px solid var(--ink) !important;border-radius:4px !important;box-shadow:6px 6px 0 var(--ink) !important}
.card-creator h3{font-family:var(--ui) !important;font-weight:700 !important;color:var(--ink) !important;font-size:22px !important}

/* ---- card creator: color pickers + board-size preview ---- */
#ccDrawColorPickerFs{display:none !important}
.card-color-grid-soft{display:grid !important;grid-template-columns:repeat(13,minmax(0,1fr)) !important;gap:4px !important}
.card-color-grid-soft .card-color-swatch{width:auto !important;height:auto !important;aspect-ratio:1;border:2px solid var(--ink) !important;border-radius:0 !important}
.card-color-grid-soft .card-color-swatch.selected-1{outline:3px solid var(--bold-yellow);outline-offset:1px;transform:scale(1.08)}
.palette-label{font-family:var(--ui) !important;font-weight:700 !important;color:var(--ink) !important;font-size:14px !important}
.palette-preview-strip{border:2px solid var(--ink);border-radius:0 !important;height:14px !important}
.cc-board-preview{display:flex;align-items:center;gap:10px;justify-content:center;margin:8px 0 2px}
.cc-board-preview canvas{width:64px;height:64px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:#000}
.cc-board-preview span{font-family:var(--ui);font-size:13px;color:#333;max-width:190px;line-height:1.25}
.cc-draw-swatch{border-radius:0 !important;border:2px solid var(--ink) !important}

/* ---- game screen ---- */
.hand-drawer{background-color:var(--cobalt) !important;background-image:conic-gradient(#2348a0 25%,transparent 0 50%,#2348a0 0 75%,transparent 0) !important;background-size:4px 4px !important;
  border:3px solid var(--ink) !important;border-bottom:0 !important;box-shadow:0 -4px 0 #0003 !important}
.game-hand-hint{font-family:var(--ui) !important;color:#fff !important}
.turn-indicator, #turnIndicator{font-family:var(--ui) !important;font-weight:700 !important;letter-spacing:.02em !important;color:var(--ink) !important;text-shadow:none !important}
.turn-timer, .score-label{font-family:var(--ui) !important;font-weight:700 !important}
.grid-panel{border:3px solid var(--ink) !important;border-radius:2px !important;box-shadow:6px 6px 0 var(--ink) !important}

/* ---- signed-out "book is empty" box ---- */
.mykards-empty-cta{background:#fff !important;border:3px solid var(--ink) !important;border-radius:0 !important;box-shadow:5px 5px 0 var(--ink) !important}
.mykards-empty-title{font-family:var(--ui) !important;font-weight:700 !important;font-size:22px !important;color:var(--ink) !important;text-shadow:none !important}
.mykards-empty-text{font-family:var(--ui) !important;font-size:15px !important;line-height:1.4 !important;color:#333 !important;text-shadow:none !important}

/* ---- contrast fixes found by the screen scan ---- */
.hero-arrow{color:var(--ink) !important;opacity:.8}
.play-menu-btn-sub, .play-menu-btn-label, .play-menu-btn-icon, .ai-mode-btn-sub, .ai-mode-btn-label{color:#1a1a1a !important;opacity:1 !important}
.cc-tool-label{color:#444 !important}
.anon-modal .pfp-placeholder{color:#fff !important;background:#18336f !important;border-color:var(--ink) !important}
.anon-profile-stats, .anon-modal .auth-link, .anon-modal-hint{color:#dfe6ff !important}
.anon-modal .auth-link-red, .anon-logout{color:#ffc9c9 !important}
.anon-modal .auth-link-gold{color:var(--bold-yellow) !important}
.anon-profile-name{color:#fff !important;font-family:var(--ui) !important;font-weight:700}
.onboard-exit{color:#fff !important}
.elig-eligible{color:#1f6b2a !important}
.book-profile-coins{color:#7a5200 !important}
.cc-draw-preview-hint{background:#333 !important;color:#fff !important}
.kard-limit-display{color:#555 !important}

/* ============================================================
   LANDING PAGE
   ============================================================ */
.landing{position:relative;z-index:2;width:100%;min-width:0;max-width:960px;margin:0 auto;padding:20px 16px 110px;display:flex;flex-direction:column;gap:22px;box-sizing:border-box}
.arena-layer.game-active .landing{display:none}
.landing-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.landing-logo{font-family:var(--ui);font-weight:700;font-size:52px;line-height:1;color:var(--bold-yellow);cursor:default;user-select:none;
  text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink),3px 3px var(--ink),-3px -3px var(--ink),3px -3px var(--ink),-3px 3px var(--ink),6px 6px 0 var(--ink)}
.landing-live{display:flex;gap:8px;flex-wrap:wrap}
.live-pill{font-family:var(--ui);font-size:15px;color:var(--ink);background:#fff;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:6px 10px;display:inline-flex;align-items:center;gap:7px;min-height:36px;box-sizing:border-box}
button.live-pill{cursor:pointer}
button.live-pill:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.live-pill b{font-weight:700}
.live-dot{width:10px;height:10px;border:2px solid var(--ink);display:inline-block}
.live-dot.on{background:#2bb64a}
.live-dot.fight{background:#bbb}
#landingChallengePill.hot{background:#ffe9a8}
#landingChallengePill.hot .live-dot.fight{background:#e0261c;animation:liveBlink 1s steps(2) infinite}
@keyframes liveBlink{50%{opacity:.2}}

.landing-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:center;
  background:#f6f5f1;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:22px}
.landing-feature{display:flex;gap:16px;align-items:center}
.landing-feature-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.landing-feature-kicker{font-family:var(--ui);font-size:13px;color:#555;letter-spacing:.04em}
.landing-feature-name{font-family:var(--ui);font-weight:700;font-size:24px;color:var(--ink);line-height:1.1}
.landing-feature-by{font-family:var(--ui);font-size:14px;color:#333}
.landing-cta{display:flex;flex-direction:column;gap:14px}
.landing-tagline{font-family:var(--ui);font-weight:700;font-size:26px;line-height:1.2;color:var(--ink);margin:0}
.landing-cta-row{display:flex;gap:12px;flex-wrap:wrap}
.landing-btn{font-family:var(--ui);font-weight:700;font-size:20px;color:var(--ink);background:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:12px 22px;min-height:52px;cursor:pointer}
.landing-btn.primary{background:var(--bold-yellow)}
.landing-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.landing-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.landing-signin{font-family:var(--ui);font-size:15px;color:#333}
.landing-link{font:inherit;color:#1c56c8;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

.landing-panel{background:#f6f5f1;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.landing-head{margin:0;font-family:var(--ui);font-weight:700;font-size:20px;color:#fff;padding:8px 14px;border-bottom:3px solid var(--ink);
  text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink)}
.landing-head.blue{background:#1f6fe0}
.landing-head.pink{background:#d81b72}
.landing-strip{display:flex;gap:12px;overflow-x:auto;padding:14px;scroll-snap-type:x proximity}
.landing-card{flex:0 0 auto;width:112px;padding:0;border:2px solid var(--ink);background:#000;box-shadow:3px 3px 0 var(--ink);cursor:pointer;line-height:0;scroll-snap-align:start;transition:transform .12s steps(2)}
.landing-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.landing-card:hover{transform:translate(-2px,-3px);box-shadow:5px 6px 0 var(--ink)}
.landing-card-big{width:190px;box-shadow:5px 5px 0 var(--ink)}
.landing-feed{display:flex;flex-direction:column;padding:6px 14px 12px}
.landing-feed-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:2px dashed #0002;font-family:var(--ui);font-size:16px;color:var(--ink)}
.landing-feed-row:last-child{border-bottom:0}
.landing-feed-tag{flex:0 0 auto;font-size:12px;font-weight:700;padding:2px 6px;border:2px solid var(--ink);background:#fff}
.landing-feed-row.is-match .landing-feed-tag{background:#ffd6e6}
.landing-feed-row.is-card .landing-feed-tag{background:#d6e6ff}
.landing-feed-text strong{font-weight:700}
.landing-feed-text em{font-style:normal;text-decoration:underline}
.landing-empty{font-family:var(--ui);font-size:15px;color:#444;padding:6px 0}

/* the book button: bottom center, always reachable */
.book-fab{width:auto !important;height:auto !important;border-radius:0 !important;padding:12px 26px !important;gap:10px;
  font-family:var(--ui) !important;font-weight:700 !important;font-size:20px !important;color:#fff !important;
  background-color:var(--cobalt) !important;background-image:conic-gradient(#2348a0 25%,transparent 0 50%,#2348a0 0 75%,transparent 0) !important;background-size:4px 4px !important;
  border:3px solid var(--ink) !important;box-shadow:4px 4px 0 var(--ink) !important;
  text-shadow:2px 2px 0 var(--ink)}
.book-fab-icon{width:18px;height:22px;background:var(--bold-yellow);border:2px solid var(--ink);box-shadow:inset 4px 0 0 #b8941a;display:inline-block}
@media (max-width:600px){
  .book-fab{left:50% !important;right:auto !important;transform:translateX(-50%) !important}
  .book-fab:hover,.book-fab:active{transform:translateX(-50%) !important}
  .landing-hero{grid-template-columns:1fr}
  .landing-logo{font-size:40px}
  .landing-tagline{font-size:21px}
  .landing-card-big{width:150px}
  .landing-btn{flex:1}
}
.book-backdrop{background:rgba(18,30,70,.55) !important}
/* landing scrolls like a normal page; the game screen keeps its fixed layout */
.arena-layer:not(.game-active){overflow-y:auto !important;overflow-x:hidden !important;justify-content:flex-start !important}

/* ============================================================
   DRAWING SCREEN (fullscreen paint) — paper panel on chalk desk
   ============================================================ */
.draw-fullscreen-overlay{background-color:#6f7385 !important;
  background-image:conic-gradient(#787c8e 25%,transparent 0 50%,#787c8e 0 75%,transparent 0) !important;background-size:4px 4px !important;padding-right:0 !important}
#cardDrawCanvasFullscreen{border:3px solid var(--ink) !important;border-radius:0 !important;box-shadow:6px 6px 0 var(--ink);
  background:repeating-conic-gradient(#ffffff 0% 25%,#e4e5ec 0% 50%) 50% / 24px 24px !important}
.draw-fullscreen-canvas-wrap{padding:16px 20px 22px !important}
.draw-fullscreen-toolbar{gap:14px !important;padding:16px 18px 18px 6px !important}
.draw-fs-panel{background:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.draw-fs-title{font-family:var(--ui);font-weight:700;font-size:20px;text-transform:lowercase;color:#fff;padding:6px 12px;border-bottom:3px solid var(--ink);
  background:var(--bold-blue);text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink),2px 2px var(--ink),-2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink)}
.draw-fs-body{padding:10px 12px 14px;display:flex;flex-direction:column;gap:6px}
.draw-fs-label{font-family:var(--ui);font-size:13px;font-weight:600;color:#333;letter-spacing:.04em;margin-top:4px}
.draw-fullscreen-toolbar .cc-draw-palette{gap:5px !important;margin-bottom:2px !important}
.draw-fullscreen-toolbar .cc-draw-swatch{border:2px solid var(--ink) !important;border-radius:0 !important;box-shadow:2px 2px 0 var(--ink);transition:transform .08s steps(2)}
.draw-fullscreen-toolbar .cc-draw-swatch:hover{transform:translate(-1px,-1px)}
.draw-fullscreen-toolbar .cc-draw-swatch.active{outline:3px solid var(--bold-yellow);outline-offset:1px;transform:translate(-1px,-2px);box-shadow:3px 4px 0 var(--ink)}
.draw-fullscreen-toolbar .cc-draw-swatch.eraser{background:repeating-conic-gradient(#fff 0% 25%,#c9cad3 0% 50%) 50% / 8px 8px !important}
.draw-fullscreen-toolbar .cc-tool-row{gap:6px !important}
.draw-fullscreen-toolbar .cc-icon-btn,.draw-fullscreen-toolbar .cc-icon-btn-sm{font-family:var(--ui) !important;font-size:15px !important;font-weight:600;color:var(--ink) !important;
  background:#fff !important;border:2px solid var(--ink) !important;border-radius:0 !important;box-shadow:2px 2px 0 var(--ink) !important;min-height:34px;padding:4px 10px !important;flex:1 1 0;cursor:pointer}
.draw-fullscreen-toolbar .cc-icon-btn:hover{background:#fff8d8 !important}
.draw-fullscreen-toolbar .cc-icon-btn.active{background:var(--bold-yellow) !important}
.draw-fullscreen-toolbar .cc-icon-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink) !important}
.draw-fullscreen-done{font-family:var(--ui) !important;font-weight:700 !important;font-size:20px !important;color:var(--ink) !important;background:var(--bold-yellow) !important;
  border:3px solid var(--ink) !important;border-radius:0 !important;box-shadow:4px 4px 0 var(--ink) !important;padding:10px 18px !important;margin-left:0 !important;width:100%;cursor:pointer}
.draw-fullscreen-done:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink) !important}
@media (min-width:700px){.draw-fullscreen-toolbar{flex:0 0 300px !important;max-width:300px !important}}
@media (max-width:699px){
  .draw-fullscreen-canvas-wrap{padding:12px 14px 14px !important}
  .draw-fullscreen-toolbar{padding:0 14px 14px !important;gap:10px !important;max-width:none !important}
  .draw-fs-title{display:none}
  .draw-fs-body{padding:8px 10px 10px;gap:4px}
  .draw-fs-label{display:none}
  .draw-fullscreen-toolbar .cc-draw-palette{grid-template-columns:repeat(10,1fr) !important;gap:4px !important;margin-bottom:6px !important}
  .draw-fullscreen-toolbar .cc-icon-btn,.draw-fullscreen-toolbar .cc-icon-btn-sm{min-height:32px;font-size:14px !important;padding:3px 6px !important}
  .draw-fullscreen-done{padding:8px 14px !important;font-size:18px !important}
}

/* ============================================================
   BATTLE SCREEN — paper board, team colors, HUD, dialogs
   Your cards are always BLUE, theirs always RED, whichever
   side of the match you're on.
   ============================================================ */
:root{--mine:#1f6fe0;--theirs:#d61f1f;--mine-soft:#cfe0fb;--theirs-soft:#f8d2d2}

/* the board: a paper panel */
.arena-layer.game-active .grid-panel{background:#e9e9ef !important;padding:10px !important}
.arena-layer.game-active .grid-panel .material-canvas,
.arena-layer.game-active .grid-panel canvas,
.arena-layer.game-active .grid-panel .rivet{display:none !important}
.arena-layer.game-active .kardic-grid{position:relative;z-index:1;gap:8px !important;padding:2px 6px 8px 2px !important}
.v7-topbar-streak{display:none}

/* empty and target cells */
.board-cell{background:rgba(255,255,255,.55) !important;border:2px dashed #aeb1c0 !important;border-radius:0 !important;box-shadow:none !important;transition:transform .1s steps(2) !important}
.board-cell:hover{transform:none}
.board-cell.valid-target{background:#fff8d8 !important;border:3px dashed #b88f00 !important}
.board-cell.valid-target:hover{background:#ffef9e !important;transform:translate(-1px,-1px) !important}
/* placed cards */
.board-cell.occupied{border:2px solid var(--ink) !important;background:#fff !important;box-shadow:3px 3px 0 var(--ink) !important;overflow:hidden}
.board-cell:has(.cell-border.red), .board-cell:has(.cell-border.blue){box-shadow:3px 3px 0 var(--ink) !important}
.board-cell img{border-radius:0 !important;image-rendering:pixelated}
.board-cell .cell-border{border-radius:0 !important;border:4px solid var(--team) !important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35) !important}
.board-cell .cell-border::after{content:"";position:absolute;right:-1px;top:-1px;width:0;height:0;border-style:solid;border-width:0 14px 14px 0;border-color:transparent var(--team) transparent transparent}
body.you-gold .cell-border.red, body.you-silver .cell-border.blue{--team:var(--mine)}
body.you-gold .cell-border.blue, body.you-silver .cell-border.red{--team:var(--theirs)}
.board-cell .cell-border{--team:#888}
body.you-gold .cell-border.red, body.you-silver .cell-border.blue{--team:var(--mine)}
body.you-gold .cell-border.blue, body.you-silver .cell-border.red{--team:var(--theirs)}
.board-cell.capturing{animation:fxCellShake .3s steps(6) !important}
.board-cell.capture-flipping{animation:fxCellFlip .5s steps(10) !important}
.board-cell.capture-flipping .cell-border{animation:none !important}
@keyframes fxCellShake{0%,100%{transform:none}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}}
@keyframes fxCellFlip{0%{transform:perspective(400px) rotateY(0)}50%{transform:perspective(400px) rotateY(90deg) scale(1.06)}100%{transform:perspective(400px) rotateY(0)}}

/* stat clash popup */
.stat-clash{background:#fff !important;border:2px solid var(--ink) !important;border-radius:0 !important;box-shadow:2px 2px 0 var(--ink);font-family:var(--ui) !important;font-size:13px !important;color:var(--ink) !important}
.stat-clash .atk{color:var(--mine) !important}.stat-clash .def{color:var(--theirs) !important}.stat-clash .vs{color:#555 !important}

/* HUD: score chips, whose turn, timer */
.game-score-bar{position:relative;z-index:2;background:#fff !important;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);margin:0 4px 10px 0;padding:6px 8px !important;min-height:46px;gap:8px !important}
.score-label{font-size:22px !important;line-height:1;color:#fff !important;min-width:44px;text-align:center;padding:5px 8px;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background:var(--theirs);
  text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink) !important;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.score-label.is-you{background:var(--mine)}
.score-label.is-you::before{content:'YOU' !important;background:#fff !important;color:var(--ink) !important;border:2px solid var(--ink);border-radius:0 !important;text-shadow:none;font-size:11px !important;padding:1px 4px !important;margin:0 !important;letter-spacing:.04em}
.score-label:not(.is-you)::after{content:'THEM';background:#fff;color:var(--ink);border:2px solid var(--ink);text-shadow:none;font-size:11px;padding:1px 4px;letter-spacing:.04em;order:-1}
#scoreBlue.score-label:not(.is-you)::after, #scoreRed.score-label:not(.is-you)::after{order:2}
.turn-indicator{flex:1;min-width:0;text-align:center;font-size:15px !important;line-height:1.2;overflow:hidden;text-overflow:ellipsis}
.turn-timer{font-family:var(--ui) !important;font-size:16px !important;color:var(--ink) !important;background:#fff;border:2px solid var(--ink);padding:2px 7px;margin-left:0 !important;min-width:44px;text-align:center;text-shadow:none !important}
.turn-timer:empty{display:none !important}
.turn-timer.warning{background:var(--bold-yellow) !important}
.turn-timer.danger{background:#ff8a1f !important;animation:fxBlink 1s steps(1) infinite !important}
.turn-timer.urgent{background:var(--theirs) !important;color:#fff !important;animation:fxBlink .4s steps(1) infinite !important}
@keyframes fxBlink{50%{transform:translateY(-2px)}}
.score-pop,.score-pulse{animation:fxPop .3s steps(3) !important}
@keyframes fxPop{50%{transform:scale(1.25)}}

/* opponent's hidden cards: red card backs */
.opponent-hand-row{gap:6px !important;padding:8px 0 10px !important}
.opp-card-back{border-radius:0 !important;border:2px solid var(--ink) !important;box-shadow:2px 2px 0 var(--ink) !important;
  background-color:var(--theirs) !important;background-image:conic-gradient(#b81616 25%,transparent 0 50%,#b81616 0 75%,transparent 0) !important;background-size:6px 6px !important}
.opp-card-back::before{inset:3px !important;border:2px solid #fff !important;border-radius:0 !important;opacity:.9}
.opp-card-back::after{content:'s' !important;font-family:var(--ui) !important;font-weight:700;font-size:20px !important;color:#fff !important;
  text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink) !important}
.opp-hand-count{font-family:var(--ui) !important;font-size:16px !important;color:#fff !important;text-shadow:2px 2px 0 var(--ink)}

/* your hand */
.hand-card, .hand-drawer .hand-card{border:3px solid var(--ink) !important;border-radius:0 !important;box-shadow:3px 3px 0 rgba(0,0,0,.55) !important;background:#fff}
.hand-card img{image-rendering:pixelated}
.hand-drawer .hand-card.selected{outline:4px solid var(--bold-yellow);outline-offset:0;box-shadow:4px 6px 0 rgba(0,0,0,.6) !important}
.hand-card.played{filter:grayscale(1)}
.game-hand-hint{font-size:14px !important;text-shadow:2px 2px 0 var(--ink)}
.ai-end-btn{font-family:var(--ui) !important}
@media (max-width:520px){
  .hand-drawer .player-hand-container{grid-template-columns:repeat(5,minmax(0,1fr)) !important;gap:5px !important;padding:4px 6px !important}
  .hand-drawer .hand-card{width:auto !important;height:auto !important;aspect-ratio:96/114}
  .game-score-bar{padding:5px 6px !important;gap:5px !important}
  .score-label{font-size:18px !important;min-width:38px;padding:4px 6px}
  .score-label.is-you::before,.score-label:not(.is-you)::after{font-size:9px !important;padding:1px 3px !important}
  .turn-indicator{font-size:13px !important}
}

/* ---- game dialogs: coin, round, result, claim ---- */
.game-overlay.z-coin, .game-overlay.z-result, .game-overlay.z-claim{background:rgba(40,44,62,.55) !important}
.game-dialog{background:var(--paper);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);padding:22px 24px 20px;min-width:min(320px,88vw);max-width:min(640px,92vw);
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;animation:fxDialogIn .25s steps(4)}
@keyframes fxDialogIn{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.result-animate{animation:none !important}
.result-title, .claim-title{font-family:var(--ui) !important;font-weight:700 !important;font-size:38px !important;line-height:1.05;color:var(--ink) !important;text-shadow:none !important;margin:0 !important;
  padding:4px 16px;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;transform:rotate(-2deg)}
.claim-title{font-size:28px !important}
.result-title[data-tone="win"], .claim-title[data-tone="win"]{background:var(--bold-yellow)}
.result-title[data-tone="loss"], .claim-title[data-tone="loss"]{background:#e9e9ef;transform:rotate(1.5deg)}
.result-title[data-tone="draw"]{background:#fff}
.fx-slam{animation:fxSlam .45s steps(6) both}
@keyframes fxSlam{0%{transform:scale(2.4) rotate(-6deg);opacity:0}70%{transform:scale(.92) rotate(-3deg);opacity:1}100%{transform:scale(1) rotate(-2deg)}}
.fx-sink{animation:fxSink .7s steps(8) both}
@keyframes fxSink{0%{transform:translateY(-40px);opacity:0}100%{transform:rotate(1.5deg);opacity:1}}
.fx-shake{animation:fxShake .4s steps(8)}
@keyframes fxShake{0%,100%{transform:none}20%{transform:translate(-6px,3px)}40%{transform:translate(6px,-3px)}60%{transform:translate(-4px,-2px)}80%{transform:translate(3px,2px)}}
.result-subtitle, .claim-subtitle{font-family:var(--ui) !important;color:#333 !important;font-size:16px !important;margin:6px 0 0 !important}
.result-score{display:inline-block;font-size:26px;font-weight:700;color:var(--ink)}
.result-vs{font-size:14px;color:#555;margin-top:2px}
.result-streak, .round-info-sub, .claim-detail-sub, .rematch-status{font-family:var(--ui) !important;color:#333 !important;font-size:14px !important;margin:0 !important}
.result-streak:empty{display:none}
.round-pips{margin:2px 0 4px !important;gap:10px !important}
.round-pips .pip{width:16px !important;height:16px !important;border-radius:0 !important;border:2px solid var(--ink) !important;background:#fff !important}
.round-pips .pip.won{background:var(--mine) !important}
.round-pips .pip.lost{background:var(--theirs) !important}
.round-pips .pip-vs{font-family:var(--ui);color:#333 !important;font-size:13px !important}
.result-claim-row{gap:12px !important;margin:2px 0 !important}
.result-claim-img{width:60px !important;height:60px !important;border-radius:0 !important;border:2px solid var(--ink) !important;box-shadow:3px 3px 0 var(--ink) !important;image-rendering:pixelated}
.result-claim-text{font-family:var(--ui) !important;color:var(--ink) !important;font-size:15px !important}
.result-actions, .claim-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.claim-hand{gap:10px !important;margin:6px 0 !important}
.claim-card{border-radius:0 !important;border:2px solid var(--ink) !important;box-shadow:3px 3px 0 var(--ink) !important;background:#fff;transition:transform .1s steps(2) !important}
.claim-card img{image-rendering:pixelated}
.claim-card:hover{transform:translate(-1px,-2px) !important;border-color:var(--ink) !important}
.claim-card.selected{outline:4px solid var(--bold-yellow);transform:translate(-2px,-4px) !important;box-shadow:5px 7px 0 var(--ink) !important;border-color:var(--ink) !important}
.claim-card .claim-card-name{font-family:var(--ui) !important}
.game-overlay.z-claim .game-dialog{max-height:92vh;overflow-y:auto}

/* coin: a chunky pixel coin */
.coin-dialog{min-width:min(280px,88vw)}
.coin-image{width:96px !important;height:96px !important;margin:4px 0 6px !important;position:relative;perspective:400px}
.coin-image img{display:none !important}
.coin-image::before{content:'s';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-weight:700;font-size:48px;color:#fff;
  text-shadow:3px 0 var(--ink),-3px 0 var(--ink),0 3px var(--ink),0 -3px var(--ink);background:var(--bold-yellow);border:3px solid var(--ink);box-shadow:inset -6px -6px 0 #c99d00,inset 6px 6px 0 #ffe27a,4px 4px 0 var(--ink);
  clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%);animation:fxCoin 1.6s steps(20) 1}
@keyframes fxCoin{from{transform:rotateY(0)}to{transform:rotateY(1440deg)}}
.coin-result{font-family:var(--ui) !important;font-size:22px !important;font-weight:700;color:var(--ink) !important}

/* ---- celebration layer ---- */
.fx-layer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9500}
.fx-float{position:fixed;z-index:9501;pointer-events:none;font-family:var(--ui);font-weight:700;font-size:24px;color:#fff;
  text-shadow:2px 0 var(--ink),-2px 0 var(--ink),0 2px var(--ink),0 -2px var(--ink);animation:fxFloat .8s steps(8) forwards}
@keyframes fxFloat{0%{transform:translateY(0);opacity:1}100%{transform:translateY(-36px);opacity:0}}
.claim-celebrate{position:fixed;inset:0;z-index:9400;display:none;align-items:center;justify-content:center;flex-direction:column;gap:16px;background:rgba(40,44,62,.7);cursor:pointer;overflow:hidden}
.claim-celebrate.active{display:flex}
.claim-celebrate-rays{position:absolute;left:50%;top:46%;width:900px;height:900px;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(rgba(255,255,255,.35) 0 10deg,transparent 10deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 0 22%,transparent 60%);mask:radial-gradient(circle,#000 0 22%,transparent 60%);animation:fxSpin 8s steps(80) infinite}
@keyframes fxSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.claim-celebrate-card{position:relative;width:min(220px,56vw);aspect-ratio:1/1;border:3px solid var(--ink);background:#fff;box-shadow:7px 7px 0 var(--ink);animation:fxRise .7s steps(10) both}
.claim-celebrate-card img{display:block;width:100%;height:100%;image-rendering:pixelated}
@keyframes fxRise{0%{transform:translateY(120px) scale(.5)}60%{transform:translateY(-10px) scale(1.12) rotate(-4deg)}100%{transform:rotate(-3deg)}}
.claim-celebrate-name{position:relative;font-family:var(--ui);font-weight:700;font-size:24px;color:#fff;text-shadow:2px 2px 0 var(--ink)}
.claim-celebrate-stamp{position:relative;font-family:var(--ui);font-weight:700;font-size:22px;color:#fff;background:var(--bold-green);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  padding:4px 14px;text-shadow:2px 2px 0 var(--ink);transform:scale(0);animation:fxStamp .3s steps(5) .55s forwards}
@keyframes fxStamp{0%{transform:scale(2);opacity:0}100%{transform:scale(1) rotate(2deg);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .fx-slam,.fx-sink,.fx-shake,.claim-celebrate-card,.claim-celebrate-rays,.coin-image::before,.game-dialog{animation:none !important}
  .claim-celebrate-stamp{animation:none !important;transform:none}
}

/* ============================================================
   RARITY — gems (count = tier) + foil from Rare up
   tiers: t1 Common · t2 Uncommon · t3 Rare · t4 Epic · t5 Legendary · t6 Mythic
   ============================================================ */
.rar-host{position:relative;overflow:visible !important;--gem:11px}
.rar-wrap{display:inline-block;vertical-align:top;line-height:0;max-width:100%}
.rar-wrap > img{display:block;max-width:100%}
.rar-t1{--gc:#a3a8b5}.rar-t2{--gc:#2bb64a}.rar-t3{--gc:#1f6fe0}.rar-t4{--gc:#8a3ad6}.rar-t5{--gc:#efc21a}.rar-t6{--gc:#d61f1f}
.rar-gems{position:absolute;left:50%;bottom:calc(var(--gem) * -0.75);transform:translateX(-50%);display:flex;gap:calc(var(--gem) * .3);z-index:3;pointer-events:none;line-height:0}
.rar-gems i{display:block;width:var(--gem);height:var(--gem);transform:rotate(45deg);background:var(--gc);border:2px solid var(--ink);box-shadow:inset 2px 2px 0 rgba(255,255,255,.55)}
.rar-gems i.rar-gem-plus{background:#fff;width:calc(var(--gem) * .7);height:calc(var(--gem) * .7);align-self:center}
.rar-t6 .rar-gems i:not(.rar-gem-plus){animation:rarGemHue 1.6s steps(1) infinite}
@keyframes rarGemHue{0%{background:#d61f1f}20%{background:#efc21a}40%{background:#2bb64a}60%{background:#1f6fe0}80%{background:#8a3ad6}}
.rar-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2}
.rar-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 0 38%,rgba(255,255,255,.5) 38% 44%,transparent 44% 50%,rgba(255,255,255,.32) 50% 53%,transparent 53%);
  background-size:300% 100%;animation:rarSweep 3.2s steps(24) infinite}
.rar-t4 .rar-shine{animation-duration:2.5s}
.rar-t5 .rar-shine{background-image:linear-gradient(115deg,transparent 0 38%,rgba(255,236,150,.7) 38% 44%,transparent 44% 50%,rgba(255,236,150,.45) 50% 53%,transparent 53%);animation-duration:2s}
@keyframes rarSweep{0%{background-position:120% 0}55%,100%{background-position:-60% 0}}
.rar-holo{position:absolute;inset:0;mix-blend-mode:color;opacity:.5;background:linear-gradient(135deg,#ff3b3b,#ffd23f,#3bd16f,#3b8bff,#b13bff,#ff3b3b);background-size:300% 300%;animation:rarHolo 3s steps(30) infinite}
@keyframes rarHolo{0%{background-position:0% 0%}100%{background-position:100% 100%}}
.rar-spark{position:absolute;width:6px;height:6px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);opacity:0;animation:rarSpark 1.8s steps(1) infinite}
@keyframes rarSpark{0%,70%{opacity:0}72%,90%{opacity:1}}
/* sizes by context */
.board-cell.rar-host, .hand-card.rar-host, .claim-card.rar-host, .hpick-card.rar-host, .hero-card.rar-host{--gem:8px}
.board-cell.rar-host .rar-spark, .hand-card.rar-host .rar-spark, .claim-card.rar-host .rar-spark, .hpick-card.rar-host .rar-spark{width:4px;height:4px}
.card-detail-content .rar-wrap{--gem:14px;margin-bottom:12px}
.claim-celebrate-card.rar-host{--gem:16px}
.landing-card.rar-host{--gem:8px}
/* hover lift on book thumbnails: move the overlay with the image */
.rar-wrap:hover > .rar-fx, .rar-wrap:hover > .rar-gems{translate:-2px -3px}
.rar-wrap > img.book-thumb-img:hover ~ .rar-fx{translate:-2px -3px}
/* room for the hanging gems in grids */
.book-grid-thumbs, .posts-grid, .landing-strip, .claim-hand, .hpick-grid{row-gap:16px}
@media (prefers-reduced-motion:reduce){.rar-shine,.rar-holo,.rar-spark,.rar-gems i{animation:none !important}.rar-spark{opacity:1}}
.landing-strip{padding-bottom:14px !important}
.claim-celebrate-name{margin-top:12px}