/* =========================================================================
   GIZAS - cinematic golden-hour / Egyptian-gold UI theme
   Frosted-glass panels, dusk-indigo backdrops, warm gold accents.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* backdrops - deep dusk indigo/navy to match the sky dome */
  --bg-deep:#080d1e;
  --bg-deep-2:#0c1226;
  --bg-panel:rgba(16,26,52,.74);
  --bg-panel-solid:#101a32;
  --bg-panel-2:rgba(24,36,66,.70);
  --glass-border:rgba(244,211,94,.28);
  --hairline:rgba(255,255,255,.08);

  /* metals + sand */
  --sand:#e8c477;
  --sand-dim:#a98a4f;
  --gold:#f4d35e;
  --gold-deep:#caa23a;
  --gold-grad:linear-gradient(145deg,#ffe9a8 0%,#f4d35e 42%,#d9ad3c 100%);

  --text:#f3eede;
  --text-dim:#9aa0bd;

  /* factions */
  --north:#ff5d5d;
  --south:#3aa0ff;
  --east:#3ddc8c;
  --west:#ffb444;
  --pinklotus:#ff6fc6;

  --radius:14px;
  --radius-lg:18px;
  --shadow: 0 14px 40px rgba(0,0,0,.5);
  --shadow-soft: 0 6px 20px rgba(0,0,0,.35);
  --glow-gold: 0 0 18px rgba(244,211,94,.45);

  font-family:'Inter','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;}
html,body{
  margin:0;height:100%;color:var(--text);
  background:
    radial-gradient(1200px 700px at 78% -10%, #2a2350 0%, rgba(42,35,80,0) 55%),
    radial-gradient(900px 600px at 10% 110%, #14304d 0%, rgba(20,48,77,0) 60%),
    linear-gradient(180deg,#0c1124 0%, #080b16 100%);
  background-attachment:fixed;
}
::selection{background:rgba(244,211,94,.3);}
#app{height:calc(100vh - 66px);overflow:hidden;display:flex;}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:rgba(244,211,94,.22);border-radius:8px;}
*::-webkit-scrollbar-thumb:hover{background:rgba(244,211,94,.4);}
*::-webkit-scrollbar-track{background:transparent;}

/* ---------- topbar ---------- */
.topbar{
  height:66px;display:flex;align-items:center;gap:26px;padding:0 24px;
  background:linear-gradient(180deg, rgba(18,30,58,.92), rgba(10,18,38,.9));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--glass-border);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  position:relative;z-index:20;
}
.brand{display:flex;align-items:center;gap:10px;min-width:150px;}
.brand-glyph{
  font-size:26px;color:var(--gold);
  filter:drop-shadow(0 0 10px rgba(244,211,94,.55));
}
.brand-name{
  font-family:'Cinzel',Georgia,serif;font-weight:700;letter-spacing:5px;font-size:20px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tabs{display:flex;gap:8px;flex:1;}
.tab-btn{
  position:relative;background:transparent;border:1px solid transparent;color:var(--text-dim);
  padding:10px 20px;border-radius:11px;cursor:pointer;font-size:13.5px;font-weight:600;letter-spacing:.4px;
  transition:all .18s ease;
}
.tab-btn:hover{color:var(--text);background:rgba(255,255,255,.05);border-color:var(--hairline);}
.tab-btn.active{
  color:#2a2008;background:var(--gold-grad);font-weight:700;
  border-color:rgba(255,255,255,.25);box-shadow:var(--glow-gold);
}
.wallet{
  display:flex;align-items:center;gap:9px;
  background:linear-gradient(180deg, rgba(26,40,72,.82), rgba(16,26,52,.82));
  border:1px solid var(--glass-border);backdrop-filter:blur(8px);
  padding:9px 18px;border-radius:30px;font-weight:700;color:var(--gold);
  box-shadow:inset 0 0 14px rgba(244,211,94,.10);
}
.coin-icon{font-size:17px;filter:drop-shadow(0 0 6px rgba(244,211,94,.5));}

/* ---------- tab panels ---------- */
.tab-panel{display:none;width:100%;height:100%;}
.tab-panel.active{display:flex;}

/* ================= MAP ================= */
#mapCanvasWrap{
  flex:1;position:relative;
  background:linear-gradient(180deg,#16284a 0%, #4a4674 45%, #c89a6e 80%, #f2d6a6 100%);
}
#mapCanvas{width:100%;height:100%;display:block;cursor:grab;}

/* frosted overlay panels shared look */
.map-hint,.map-legend{
  position:absolute;
  background:linear-gradient(180deg, rgba(14,18,36,.62), rgba(10,12,26,.62));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);border-radius:12px;
  box-shadow:var(--shadow-soft);
}
.map-hint{bottom:18px;left:18px;font-size:12px;color:var(--text-dim);padding:8px 14px;letter-spacing:.3px;}
.map-legend{top:18px;left:18px;padding:12px 16px;font-size:12px;}
.map-legend::before{
  content:'FACTIONS';display:block;font-family:'Cinzel',serif;font-size:10px;letter-spacing:2px;
  color:var(--gold);margin-bottom:8px;opacity:.85;
}
.legend-row{display:flex;align-items:center;gap:9px;margin:5px 0;color:var(--text);}
.legend-dot{width:12px;height:12px;border-radius:4px;display:inline-block;box-shadow:0 0 8px currentColor;}
.map-loading{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:var(--gold);font-family:'Cinzel',serif;font-size:15px;letter-spacing:2px;
  text-shadow:0 0 16px rgba(244,211,94,.6);
}
.map-loading.hidden{display:none;}

/* detail panel - glass frame with gold edge */
.detail-panel{
  width:350px;
  background:linear-gradient(180deg, rgba(14,24,48,.93), rgba(9,16,34,.95));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-left:1px solid var(--glass-border);
  box-shadow:-10px 0 40px rgba(0,0,0,.45);
  padding:22px;overflow-y:auto;
  transition:border-color .25s ease;
}
.detail-empty{color:var(--text-dim);font-size:13px;margin-top:50px;text-align:center;line-height:1.6;}
.detail-card{display:flex;flex-direction:column;gap:14px;}
/* fact rows sit tight together - the card's 14px gap stays only between
   SECTIONS (art / words / title / rows), not between individual rows */
.detail-card .detail-row + .detail-row{margin-top:-14px;}
.detail-card .art{border-radius:14px;overflow:hidden;border:1px solid var(--glass-border);
  box-shadow:var(--shadow-soft);position:relative;}
.detail-card .art svg{display:block;width:100%;}
.detail-title{
  font-family:'Cinzel',Georgia,serif;font-size:27px;font-weight:700;letter-spacing:1px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.detail-row{display:flex;justify-content:space-between;font-size:15.5px;color:var(--text-dim);
  border-bottom:1px solid var(--hairline);padding:4px 0;}
.detail-row b{color:var(--text);font-weight:600;}
.detail-row .w3w-link{color:var(--gold);text-decoration:none;font-weight:600;}
.detail-row .w3w-link:hover{text-decoration:underline;text-shadow:var(--glow-gold);}
.detail-words{display:flex;gap:7px;flex-wrap:wrap;margin-top:4px;}
.detail-sub{font-size:11px;color:var(--text-dim);letter-spacing:.3px;margin-top:6px;opacity:.85;}
.word-chip{
  background:rgba(244,211,94,.08);border:1px solid var(--glass-border);color:var(--gold);
  font-size:12px;padding:5px 12px;border-radius:20px;cursor:pointer;transition:.15s;
}
.word-chip:hover{background:rgba(244,211,94,.2);box-shadow:var(--glow-gold);transform:translateY(-1px);}
.word-chip.active{background:var(--gold-grad);color:#2a2008;border-color:rgba(255,255,255,.3);box-shadow:var(--glow-gold);}
.word-chip.active .wc-count{background:rgba(0,0,0,.25);color:#fff;}

/* ================= CARDS (placeholder art) ================= */
.giza-card{
  width:170px;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(180deg, rgba(32,38,64,.85), rgba(20,24,42,.9));
  border:1px solid var(--hairline);box-shadow:var(--shadow-soft);cursor:pointer;
  transition:transform .16s, box-shadow .16s, border-color .16s;position:relative;
}
.giza-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--glass-border);}
.giza-card .art{width:100%;height:170px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.giza-card .art svg{width:100%;height:100%;}
.giza-card .tier-badge{position:absolute;top:8px;right:8px;background:rgba(8,10,20,.7);color:var(--gold);
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;border:1px solid var(--glass-border);}
.giza-card .body{padding:11px 13px;}
.giza-card .name{font-weight:700;font-size:14px;margin-bottom:2px;}
.giza-card .sub{font-size:11px;color:var(--text-dim);}
.giza-card .faction-tag{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;}
.giza-card .price-tag{margin-top:7px;font-size:13px;color:var(--gold);font-weight:700;}

.fac-North{color:var(--north);} .fac-South{color:var(--south);}
.fac-East{color:var(--east);} .fac-West{color:var(--west);}
.fac-Pink-Lotus{color:var(--pinklotus);}

/* ================= BUTTONS ================= */
.btn-primary{
  background:var(--gold-grad);color:#2a2008;border:1px solid rgba(255,255,255,.25);
  padding:10px 20px;border-radius:10px;font-weight:700;cursor:pointer;font-size:13px;
  box-shadow:var(--shadow-soft);transition:.16s;
}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--glow-gold);}
.btn-ghost{
  width:100%;background:rgba(244,211,94,.04);border:1px dashed var(--sand-dim);color:var(--sand);
  padding:11px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:.16s;
}
.btn-ghost:hover{background:rgba(244,211,94,.12);border-color:var(--gold);color:var(--gold);}
.btn-secondary{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);color:var(--text);
  padding:10px 18px;border-radius:10px;cursor:pointer;font-size:13px;transition:.16s;
}
.btn-secondary:hover{background:rgba(255,255,255,.1);border-color:var(--glass-border);}

/* ================= MARKETPLACE ================= */
#tab-marketplace{padding:0;}
.market-layout{display:flex;width:100%;height:100%;}
.market-main{flex:1;padding:22px 26px;overflow-y:auto;}
.market-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.market-title{margin:0;font-family:'Cinzel',serif;font-size:24px;font-weight:700;letter-spacing:1px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.market-subtabs{display:flex;gap:10px;flex-wrap:wrap;width:100%;justify-content:space-between;}
.subtab-group{display:flex;align-items:center;gap:8px;}
.subtab-label{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim);}
.subtab-btn{
  background:rgba(32,38,64,.6);border:1px solid var(--hairline);color:var(--text-dim);
  padding:9px 18px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;transition:.16s;
}
.subtab-btn:hover{color:var(--text);border-color:var(--glass-border);}
.subtab-btn.active{color:#2a2008;background:var(--gold-grad);font-weight:700;box-shadow:var(--glow-gold);}
.market-filters{display:flex;gap:11px;margin-bottom:14px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(30,38,66,.55),rgba(18,22,40,.6));
  border:1px solid var(--hairline);border-radius:12px;padding:12px;}
.market-filters input, .market-filters select{
  background:rgba(20,24,42,.7);border:1px solid var(--hairline);color:var(--text);
  padding:10px 14px;border-radius:10px;font-size:13px;font-family:inherit;transition:.16s;
}
.market-filters input:focus, .market-filters select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(244,211,94,.12);
}
.market-filters input{flex:1;min-width:200px;}
.market-count{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;}
.market-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px;align-items:start;}
.market-grid .giza-card{width:100%;}

/* marketplace listing card — mirrors the buy modal, faction-tinted */
.mk-card{border-radius:14px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;
  border:1px solid var(--hairline);transition:transform .16s, box-shadow .16s;
  content-visibility:auto;contain-intrinsic-size:auto 300px;}
.mk-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.mk-art{position:relative;width:100%;aspect-ratio:1/1;background:#0b1024;overflow:hidden;flex:none;}
.mk-art svg,.mk-art img,.mk-art .giza-img,.mk-art .giza-img img,
.mk-art .giza-img-fallback,.mk-art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}
.mk-tier{position:absolute;top:8px;right:8px;background:rgba(8,10,20,.72);color:var(--gold);
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;border:1px solid var(--glass-border);}
.mk-body{padding:8px 12px 11px;}
.mk-name{font-weight:700;font-size:15px;margin-bottom:4px;}
.mk-body .detail-row{padding:4px 0;font-size:12px;border-bottom:1px solid var(--hairline);}
.mk-body .detail-row:last-child{border-bottom:none;}
.mk-words{align-items:flex-start;gap:10px;}
.mk-words b{text-align:right;font-weight:600;}
.mk-price{color:var(--gold);}
.market-side{
  width:350px;
  background:linear-gradient(180deg, rgba(14,24,48,.92), rgba(9,16,34,.94));
  backdrop-filter:blur(14px);border-left:1px solid var(--glass-border);
  box-shadow:-10px 0 40px rgba(0,0,0,.4);padding:22px;overflow-y:auto;
  transition:border-color .25s ease;
}
.market-side h3{margin-top:0;font-family:'Cinzel',serif;letter-spacing:1px;color:var(--gold);font-size:15px;}
.my-listings{display:flex;flex-direction:column;gap:9px;font-size:12px;color:var(--text-dim);margin-bottom:16px;}
.listing-row{display:flex;justify-content:space-between;background:rgba(32,38,64,.6);
  padding:9px 12px;border-radius:9px;border:1px solid var(--hairline);}

/* ================= PACK OPENING ================= */
#tab-packs{flex-direction:column;width:100%;}
.pack-shelf{
  display:flex;gap:12px;padding:12px 18px;overflow-x:auto;
  background:linear-gradient(180deg, rgba(14,24,48,.86), rgba(9,16,34,.86));
  border-bottom:1px solid var(--glass-border);
}
.pack-option{
  min-width:152px;border-radius:var(--radius);padding:18px;text-align:center;cursor:pointer;
  background:linear-gradient(180deg, rgba(34,40,68,.7), rgba(20,24,42,.8));
  border:1px solid var(--hairline);transition:.16s;position:relative;
}
.pack-option:hover{transform:translateY(-4px);border-color:var(--glass-border);box-shadow:var(--shadow-soft);}
.pack-option.selected{border-color:var(--gold);box-shadow:var(--glow-gold);}
.pack-art{font-size:48px;margin-bottom:8px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.pack-thumb{width:100%;max-width:118px;display:block;margin:0 auto 10px;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.55));}
.pack-name{font-weight:700;font-size:14px;}
.pack-price{color:var(--gold);font-size:13px;margin-top:4px;font-weight:700;}
.pack-odds{font-size:10px;color:var(--text-dim);margin-top:6px;line-height:1.5;}

/* compact horizontal chips just for the Pack Opening shelf */
.pack-shelf .pack-option{
  display:flex;align-items:center;gap:11px;min-width:0;width:auto;
  padding:8px 16px 8px 9px;text-align:left;
}
.pack-shelf .pack-option:hover{transform:translateY(-2px);}
.pack-shelf .pack-thumb{width:40px;max-width:40px;margin:0;flex:none;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.5));}
.pack-shelf .pack-art{font-size:28px;margin:0;}
.pack-shelf .pack-meta{display:flex;flex-direction:column;gap:1px;}
.pack-shelf .pack-name{font-size:13px;}
.pack-shelf .pack-odds{font-size:10px;margin:0;max-width:190px;line-height:1.35;}
.pack-shelf .pack-price{font-size:11px;margin-top:2px;}

/* ---------- pull-odds ladder: thin sidebar along the left of the stage ---------- */
.odds-side{
  width:148px;flex:none;display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(14,24,48,.9), rgba(9,16,34,.92));
  border-right:1px solid var(--glass-border);padding:14px 12px;overflow-y:auto;
}
.odds-toggle{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:none;border:none;cursor:pointer;
  color:var(--gold);font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;padding:0 0 10px;font-weight:700;
}
.odds-toggle-arrow{transition:transform .2s ease;font-size:10px;}
.odds-side.open .odds-toggle-arrow{transform:rotate(180deg);}
.odds-panel{padding-top:2px;}
.odds-panel[hidden]{display:none;}
.odds-mode{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.odds-mode-btn{background:rgba(32,38,64,.6);border:1px solid var(--hairline);color:var(--text-dim);
  padding:5px 8px;border-radius:8px;cursor:pointer;font-size:10px;font-weight:600;transition:.16s;}
.odds-mode-btn:hover{color:var(--text);border-color:var(--glass-border);}
.odds-mode-btn.active{color:#2a2008;background:var(--gold-grad);font-weight:700;}
.odds-table{display:flex;flex-direction:column;gap:1px;}
.odds-row{display:flex;align-items:center;justify-content:space-between;gap:6px;
  padding:3px 5px;border-radius:5px;border-left:2px solid transparent;transition:background .12s;}
.odds-row:hover{background:rgba(244,211,94,.06);}
.odds-row.pinklotus{border-left-color:var(--pinklotus);}
.odds-row-label{font-size:10.5px;color:var(--text-dim);white-space:nowrap;}
.odds-row.pinklotus .odds-row-label{color:var(--pinklotus);}
.odds-row-value{font-size:10.5px;color:var(--gold);font-weight:700;text-align:right;white-space:nowrap;}
.odds-row.pinklotus .odds-row-value{color:var(--pinklotus);}

/* pull-odds callout in the reveal side panel */
/* dedicated odds card: FLOATS over the stage's top-right corner (next to the
   Giza panel) so it doesn't consume layout width and push the deck off-centre */
.pull-odds-side{
  display:none;width:185px;
  position:absolute;top:16px;right:448px;z-index:7;
}
.pull-odds-side.show{display:block;}
.pull-odds{margin-top:2px;padding:13px 14px;border-radius:12px;
  background:linear-gradient(180deg, rgba(14,24,48,.9), rgba(9,16,34,.92));
  border:1px solid rgba(244,211,94,.35);box-shadow:var(--shadow-soft);}
.pull-odds-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:4px;}
.pull-odds-main{font-family:'Cinzel',serif;font-size:19px;font-weight:700;color:var(--gold);}
.pull-odds-sub{font-size:12px;color:var(--text-dim);margin-top:3px;}
.pull-odds.legendary{background:rgba(255,111,198,.09);border-color:rgba(255,111,198,.4);}
.pull-odds.legendary .pull-odds-main{color:var(--pinklotus);}
.pack-best{font-size:12px;color:var(--text-dim);margin-top:8px;}
.pack-best b{color:var(--gold);}

/* body holds the stage + side detail panel (mirrors the Map tab) */
.packs-body{flex:1;display:flex;min-height:0;position:relative;}
.pack-detail{width:340px;flex:none;transition:background .45s ease, border-color .45s ease;}
.pack-detail .reveal-pos{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;
  color:var(--gold);text-transform:uppercase;opacity:.9;}
/* show the full(er) square art in the side panel too */
.pack-detail{width:430px;} /* room for the hero words + bigger art, like the Map panel */
.pack-detail .detail-card .art{aspect-ratio:1/1;background:#0b1024;}
.pack-detail .detail-card .art .giza-img,
.pack-detail .detail-card .art .giza-img img,
.pack-detail .detail-card .art .giza-img-fallback,
.pack-detail .detail-card .art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}

.pack-stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(ellipse at 50% 35%, #2a2450 0%, #0a0e1c 75%);overflow:hidden;}
.pack-stage-empty{color:var(--text-dim);font-family:'Cinzel',serif;letter-spacing:1px;text-align:center;}

/* ---------- ready-to-rip pack (tear the top off, upward) ---------- */
.pack-ready{display:flex;flex-direction:column;align-items:center;gap:24px;user-select:none;}
.rip-pack{width:412px;height:696px;position:relative;cursor:grab;touch-action:none;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.55));}
.rip-pack.grabbing{cursor:grabbing;}
.rip-piece{position:absolute;left:0;width:100%;overflow:hidden;background-repeat:no-repeat;
  background-size:412px 696px;will-change:transform,opacity;backface-visibility:hidden;}
.rip-piece.top{top:0;height:126px;background-position:center 0;transform-origin:center bottom;z-index:3;}
.rip-piece.bottom{top:126px;height:570px;background-position:center -126px;z-index:1;}
/* glowing light spilling from the tear as the top lifts */
.rip-glow{position:absolute;left:0;top:126px;width:100%;height:96px;transform:translateY(-50%);
  pointer-events:none;opacity:0;filter:blur(8px);
  background:radial-gradient(ellipse at center, rgba(247,222,120,.95), rgba(247,222,120,0) 70%);}
.rip-seam{position:absolute;left:-4%;top:124px;width:108%;height:3px;pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--gold) 0 9px, transparent 9px 18px);
  filter:drop-shadow(0 0 7px rgba(247,222,120,.85));}
/* fallback glyph pack when no image is available */
.rip-whole{position:absolute;inset:0;border-radius:16px;background:linear-gradient(135deg,#3a2e58,#1b1628);
  border:3px solid var(--gold);box-shadow:0 0 46px rgba(244,211,94,.3);
  display:flex;align-items:center;justify-content:center;}
.rip-whole .pack-glyph{font-size:140px;color:var(--gold);filter:drop-shadow(0 0 14px rgba(244,211,94,.6));}
.rip-hint{color:var(--text-dim);font-size:13px;letter-spacing:1px;animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:.45;}50%{opacity:1;}}

/* ---------- swipeable card deck ---------- */
.deck-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;}
.deck-counter{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;color:var(--gold);opacity:.9;}
/* full-art square card — all the detail lives in the right-hand panel */
.card-deck{position:relative;width:min(600px,74vmin);height:min(600px,74vmin);}
.deck-card{position:absolute;inset:0;border-radius:16px;overflow:hidden;will-change:transform;
  background:#0b1024;border:2px solid var(--hairline);box-shadow:var(--shadow);}
.deck-card.top{cursor:grab;}
.deck-card.top.grabbing{cursor:grabbing;}
.deck-card.rare{border-color:var(--gold);box-shadow:0 0 26px rgba(244,211,94,.5);}
.deck-card.legendary{border-color:var(--pinklotus);box-shadow:0 0 42px rgba(255,111,198,.7);}
.deck-art{position:absolute;inset:0;}
.deck-art{background:#0b1024;} /* opaque backing so stacked cards never ghost through */
.deck-art svg,.deck-art img,.deck-art .giza-img,.deck-art .giza-img img,
.deck-art .giza-img-fallback,.deck-art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}
/* tier plaque on card art: just the number, big and ceremonial */
.deck-tier{
  position:absolute;top:12px;right:12px;z-index:2;
  min-width:42px;height:42px;padding:0 10px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',Georgia,serif;font-size:20px;font-weight:700;color:var(--gold);
  background:radial-gradient(circle at 50% 30%, rgba(22,28,52,.94), rgba(8,10,20,.92));
  border:1px solid rgba(244,211,94,.55);border-radius:12px;
  box-shadow:0 0 14px rgba(244,211,94,.22), inset 0 0 10px rgba(0,0,0,.5);
  text-shadow:0 0 8px rgba(244,211,94,.35);
}
.deck-done{display:flex;align-items:center;justify-content:center;width:100%;height:100%;
  font-size:80px;color:var(--gold);opacity:.5;}
.swipe-hint{color:var(--text-dim);font-size:12px;letter-spacing:1px;transition:opacity .3s;animation:pulse 1.6s infinite;}

/* ---------- the haul: all pulled Gizas laid out side by side once done ---------- */
.haul-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--gold);opacity:.9;text-align:center;}
.haul-grid{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:flex-start;max-width:min(1400px,92vw);}
.haul-card{position:relative;width:min(240px,17vw);flex:none;border-radius:16px;overflow:hidden;cursor:pointer;
  background:#0b1024;border:2px solid var(--hairline);box-shadow:var(--shadow-soft);
  transition:transform .16s, box-shadow .16s, border-color .16s;}
/* smaller, subtler tier plaque on thumbnail-sized art
   (haul, collection walls, marketplace listing cards) */
.haul-card .deck-tier, .wall-cell .deck-tier, .cv-cell .deck-tier, .mk-art .deck-tier{
  min-width:30px;height:30px;padding:0 7px;font-size:14px;top:8px;right:8px;border-radius:9px;}
.haul-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.haul-card.selected{border-color:var(--gold);box-shadow:var(--glow-gold);}
.haul-card.rare{border-color:var(--gold);box-shadow:0 0 20px rgba(244,211,94,.4);}
.haul-card.legendary{border-color:var(--pinklotus);box-shadow:0 0 28px rgba(255,111,198,.55);}
.haul-art{width:100%;aspect-ratio:1/1;position:relative;}
.haul-art svg,.haul-art img,.haul-art .giza-img,.haul-art .giza-img img,
.haul-art .giza-img-fallback,.haul-art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}

.confetti-piece{position:absolute;top:-10px;border-radius:2px;pointer-events:none;animation:fall linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg);opacity:.2;}}

.pack-stage-actions{position:absolute;bottom:18px;display:flex;gap:10px;}

/* ---------- optional pull recording + reaction cam ---------- */
#tab-packs{position:relative;}
.rec-controls{
  position:absolute;top:12px;right:18px;z-index:9;display:flex;gap:8px;
}
.rec-btn{
  padding:7px 13px;border-radius:20px;font-size:12px;cursor:pointer;
  background:linear-gradient(180deg, rgba(14,24,48,.9), rgba(9,16,34,.92));
  border:1px solid var(--glass-border);color:var(--text-dim);transition:.16s;
}
.rec-btn:hover{color:var(--text);border-color:rgba(244,211,94,.45);}
.rec-btn.active{color:var(--gold);border-color:rgba(244,211,94,.55);box-shadow:var(--glow-gold);}
.rec-btn.recording{
  color:#fff;border-color:rgba(255,90,90,.7);background:rgba(180,40,40,.35);
  animation:recPulse 1.2s ease-in-out infinite;
}
@keyframes recPulse{0%,100%{box-shadow:0 0 6px rgba(255,80,80,.35);}50%{box-shadow:0 0 16px rgba(255,80,80,.7);}}
.reaction-cam{
  position:fixed;top:74px;left:340px;width:224px;height:168px;z-index:60;
  display:none;object-fit:cover;transform:scaleX(-1); /* mirror, like a selfie */
  border-radius:14px;border:2px solid rgba(244,211,94,.65);
  box-shadow:0 8px 30px rgba(0,0,0,.55), var(--glow-gold);
  background:#0b1024;
}
.reaction-cam.show{display:block;}
.rec-preview{width:100%;max-height:340px;border-radius:12px;background:#000;margin-top:6px;}

/* ---------- the waiting cinema (on-chain draw, ~30s) ---------- */
.wait-stage{
  width:100%;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:24px;
}
.wait-window{
  position:relative;width:min(78%, 118vh);aspect-ratio:16/9;
  border-radius:16px;overflow:hidden;background:#05070f;
  border:1px solid rgba(244,211,94,.4);
  box-shadow:0 12px 50px rgba(0,0,0,.6), var(--glow-gold);
}
.wait-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;}
.wait-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(ellipse at 50% 40%, #2a2450 0%, #070a16 75%);
}
.wait-placeholder .wait-glyph{
  font-size:74px;color:var(--gold);
  animation:waitGlow 2.6s ease-in-out infinite;
}
.wait-placeholder .wait-line{
  font-family:'Cinzel',serif;letter-spacing:2px;font-size:15px;color:var(--text-dim);
}
@keyframes waitGlow{
  0%,100%{opacity:.55;text-shadow:0 0 12px rgba(244,211,94,.25);transform:scale(1);}
  50%{opacity:1;text-shadow:0 0 34px rgba(244,211,94,.7);transform:scale(1.06);}
}
.wait-status{display:flex;align-items:center;gap:12px;color:var(--text-dim);font-size:14px;}
.wait-status .spinner.sm{width:22px;height:22px;border-width:3px;}
.wait-topbar{min-height:56px;display:flex;justify-content:center;align-items:center;}
.reveal-now{
  padding:6px 18px;border-radius:16px;font-size:13px;cursor:pointer;white-space:nowrap;
  background:rgba(244,211,94,.12);border:1px solid rgba(244,211,94,.5);color:var(--gold);
  box-shadow:var(--glow-gold);
}
.reveal-now:hover{background:rgba(244,211,94,.24);}
/* the big unmissable one: cards are ready, skip the clip whenever you like */
.reveal-now.big{
  font-family:'Cinzel',Georgia,serif;font-size:18px;font-weight:700;letter-spacing:1.5px;
  padding:13px 38px;border-radius:28px;
  background:var(--gold-grad);color:#2a2008;border:1px solid rgba(255,255,255,.35);
  animation:revealPulse 1.6s ease-in-out infinite;
}
.reveal-now.big:hover{transform:scale(1.04);}
@keyframes revealPulse{
  0%,100%{box-shadow:0 0 14px rgba(244,211,94,.45);}
  50%{box-shadow:0 0 34px rgba(244,211,94,.9);}
}

/* uncaught Gizas keep a whisper of colour - dulled, not hidden
   (shared by the collection overlay AND the Collections tab walls) */
.cv-cell.unowned img, .cv-cell.unowned svg,
.wall-cell.unowned img, .wall-cell.unowned svg{
  filter:saturate(.25) brightness(.68) contrast(.95);
  transition:filter .25s ease;
}
.cv-cell.unowned:hover img, .cv-cell.unowned:hover svg,
.wall-cell.unowned:hover img, .wall-cell.unowned:hover svg{
  filter:saturate(.5) brightness(.82); /* lean in and they warm up a touch */
}
.cv-cell.unowned .wc-name, .wall-cell.unowned .wc-name{opacity:.55;}
.cv-cell.unowned .deck-tier, .wall-cell.unowned .deck-tier{opacity:.5;}
.wall-cell.unowned{cursor:default;}

/* ================= COLLECTIONS ================= */
#tab-collections{padding:26px 30px;overflow-y:auto;width:100%;flex-direction:column;}
.collections-layout{display:flex;flex-direction:column;gap:18px;max-width:1100px;margin:0 auto;width:100%;}
.collections-search{position:relative;}
#wordSearch{
  width:100%;padding:15px 20px;font-size:15px;border-radius:14px;font-family:inherit;
  background:rgba(20,24,42,.7);border:1px solid var(--glass-border);color:var(--text);
  backdrop-filter:blur(8px);transition:.16s;
}
#wordSearch:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(244,211,94,.14);}
.word-suggest{
  position:absolute;top:56px;left:0;right:0;z-index:10;display:none;
  background:var(--bg-panel-solid);border:1px solid var(--glass-border);
  border-radius:12px;max-height:230px;overflow-y:auto;box-shadow:var(--shadow);
}
.word-suggest.show{display:block;}
.suggest-row{padding:11px 18px;cursor:pointer;font-size:13px;display:flex;justify-content:space-between;transition:.12s;}
.suggest-row:hover{background:rgba(244,211,94,.1);color:var(--gold);}
.collections-stats{color:var(--text-dim);font-size:13px;}
.collections-grid{display:flex;flex-wrap:wrap;gap:16px;}

/* ---------- collections: size filter bar ---------- */
.coll-sizebar{display:flex;flex-wrap:wrap;align-items:center;gap:7px;}
.sizebar-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-right:4px;}
.size-chip{background:rgba(20,24,42,.7);border:1px solid var(--glass-border);color:var(--text-dim);
  font-size:12px;font-weight:600;min-width:34px;padding:6px 13px;border-radius:18px;cursor:pointer;transition:.15s;font-family:inherit;}
.size-chip:hover{color:var(--text);border-color:var(--gold);}
.size-chip.active{background:var(--gold-grad);color:#2a2008;border-color:rgba(255,255,255,.3);box-shadow:var(--glow-gold);}
.size-chip.earned-chip{margin-left:10px;min-width:0;}
.size-chip.earned-chip:not(.active){color:var(--gold);border-color:rgba(244,211,94,.4);}

/* ---------- collections: badge wall ---------- */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;width:100%;}
.badge-card{border-radius:14px;padding:16px 12px 14px;text-align:center;cursor:pointer;position:relative;
  background:linear-gradient(180deg,rgba(30,38,66,.7),rgba(16,20,38,.85));
  border:1px solid var(--hairline);transition:transform .16s,border-color .16s,box-shadow .16s;
  /* skip layout/paint for cards scrolled off-screen — huge win for a long wall */
  content-visibility:auto;contain-intrinsic-size:auto 152px;}
.badge-card:hover{transform:translateY(-4px);border-color:var(--glass-border);box-shadow:var(--shadow-soft);}
.badge-card.complete{border-color:rgba(244,211,94,.5);box-shadow:0 0 18px rgba(244,211,94,.14);}
/* Badge art sits whole (transparent PNG) above the word - no circular crop. */
.bc-medallion{width:92px;height:92px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;}
.bc-medallion .bc-img{width:100%;height:100%;object-fit:contain;display:block;}
/* Glyph fallback only (image missing): restore the small circular medallion. */
.bc-medallion.noimg{width:60px;height:60px;margin:0 auto 10px;border-radius:50%;
  font-size:26px;color:rgba(255,255,255,.25);background:radial-gradient(circle at 38% 32%,#27304e,#161a2e);border:1px solid var(--hairline);}
.badge-card.complete .bc-medallion.noimg{color:#2a2008;background:radial-gradient(circle at 38% 32%,#fff3c4,#e8c558 55%,#b7902f);
  border:2px solid #f7de78;box-shadow:0 0 18px rgba(244,211,94,.55);}
.bc-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bc-count{font-family:'Cinzel',serif;font-size:18px;color:var(--text);margin-top:3px;}
.bc-count span{font-size:12px;color:var(--text-dim);}
.bc-bar{height:5px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:9px;}
.bc-bar span{display:block;height:100%;background:var(--gold-grad);border-radius:4px;}
.bc-tag{margin-top:9px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:4px 0;border-radius:8px;}
.bc-tag.claim{background:var(--gold-grad);color:#2a2008;box-shadow:var(--glow-gold);animation:pulse 1.6s infinite;}
.bc-tag.earned{background:rgba(244,211,94,.14);color:var(--gold);border:1px solid var(--glass-border);}

/* locked placeholder (your assets/locked.png; hatched "?" until it exists) */
.lk{width:100%;height:100%;object-fit:cover;display:block;}
.lk-q{display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:64px;color:var(--gold);opacity:.5;
  background:repeating-linear-gradient(45deg,#10131f,#10131f 8px,#0c0f18 8px,#0c0f18 16px);}
.noimg .lk-q,.wall-cell.locked.noimg .lk-q{display:flex;}

/* ---------- badge detail: big 3x3 Giza wall (the main event) ---------- */
.badge-detail{width:100%;}
.bd-head{display:flex;align-items:center;gap:16px;margin-bottom:22px;border-radius:14px;padding:6px 4px;}
.bd-back{width:auto !important;padding:6px 14px !important;flex:none;}
.bd-titlewrap{flex:1;min-width:0;text-align:center;}
.bd-title{font-family:'Cinzel',serif;font-size:26px;font-weight:700;letter-spacing:1px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.bd-count{font-size:12px;color:var(--text-dim);margin-top:2px;}
.bd-action{flex:none;min-width:150px;text-align:right;}
.bd-need{font-size:12px;color:var(--text-dim);}
.bd-earned{font-size:13px;font-weight:700;color:var(--gold);text-shadow:var(--glow-gold);}
.claim-btn{animation:pulse 1.6s infinite;}
.claimed-burst{animation:claimflash .7s ease-out;}
@keyframes claimflash{0%{box-shadow:0 0 0 rgba(244,211,94,0);}30%{box-shadow:0 0 50px rgba(244,211,94,.6);}100%{box-shadow:0 0 0 rgba(244,211,94,0);}}

/* Collection detail: big badge on the left, Giza wall on the right. */
.bd-body{display:flex;gap:28px;align-items:flex-start;}
.bd-side{flex:0 0 260px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;
  position:sticky;top:16px;}
.bd-badge-art{width:100%;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:18px;}
.bd-badge-img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5));}
.bd-side .bd-title{font-size:30px;}
.bd-side .bd-action{flex:none;min-width:0;width:100%;text-align:center;}
.bd-side .claim-btn{width:100%;}
.bd-body .giza-wall{flex:1;margin:0;max-width:none;}
@media (max-width:780px){
  .bd-body{flex-direction:column;align-items:center;}
  .bd-side{flex:none;width:100%;max-width:300px;position:static;}
}

/* My Badges side panel: badge art + the Gizas in the collection. */
.badge-side{display:flex;flex-direction:column;gap:8px;}
.badge-side .bd-badge-art{width:100%;max-width:220px;margin:0 auto;}
.badge-side-gizas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px;}
.bd-mini{border-radius:10px;overflow:hidden;background:#0b1024;border:1px solid var(--hairline);}
.bd-mini-art{aspect-ratio:1/1;}
.bd-mini-art svg,.bd-mini-art img,.bd-mini-art .giza-img,.bd-mini-art .giza-img img{width:100%;height:100%;object-fit:cover;display:block;}
.bd-mini-name{font-size:11px;text-align:center;padding:5px 4px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.badge-card.selected{border-color:var(--gold);box-shadow:0 0 16px rgba(244,211,94,.3);}

.giza-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:760px;margin:0 auto;}
.wall-cell{aspect-ratio:1/1;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid var(--hairline);background:#0b1024;transition:transform .16s,border-color .16s,box-shadow .16s;}
.wall-cell.owned{cursor:pointer;}
.wall-cell.owned:hover{transform:translateY(-4px) scale(1.02);border-color:var(--gold);box-shadow:0 0 20px rgba(244,211,94,.3);}
.wall-cell svg,.wall-cell img,.wall-cell .giza-img,.wall-cell .giza-img img{width:100%;height:100%;object-fit:cover;display:block;}
.wc-tier{position:absolute;top:8px;right:8px;background:rgba(8,10,20,.72);color:var(--gold);
  font-size:11px;font-weight:700;padding:3px 8px;border-radius:8px;border:1px solid var(--glass-border);}
.wc-name{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(0,0,0,.82));
  color:#fff;font-size:13px;font-weight:600;padding:18px 10px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ================= MODAL ================= */
.modal-overlay{position:fixed;inset:0;background:rgba(6,8,16,.7);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;z-index:200;} /* above the collection wall (150) */
.modal-overlay.show{display:flex;}
.modal-box{
  background:linear-gradient(180deg, rgba(16,26,50,.98), rgba(10,18,36,.98));
  border:1px solid var(--glass-border);border-radius:18px;
  padding:26px;max-width:420px;width:90%;box-shadow:var(--shadow);
  transition:background .3s ease, border-color .3s ease;
}
.modal-box h3{margin-top:0;font-family:'Cinzel',serif;letter-spacing:1px;color:var(--gold);}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}


/* ---------- giza media (PNG with SVG fallback) ---------- */
.giza-img{width:100%;height:100%;}
.giza-img img{width:100%;height:100%;object-fit:cover;display:block;}
.giza-img-fallback{width:100%;height:100%;}
.giza-img-fallback svg{width:100%;height:100%;display:block;}

/* ---------- word chip shared-count badge ---------- */
.word-chip{display:inline-flex;align-items:center;gap:6px;}
.word-chip .wc-count{
  font-size:10px;font-weight:700;color:#2a2008;background:var(--gold-grad);
  padding:1px 6px;border-radius:10px;line-height:1.5;
}

/* ---------- Map tab: bigger Giza panel with hero what3words ---------- */
/* Wider panel so the artwork is big enough to hunt the three words in the
   Giza's features (the map's panel only - packs/marketplace are untouched). */
#detailPanel { width: 575px; }
#detailPanel .detail-card .art .giza-img,
#detailPanel .detail-card .art .giza-img img,
#detailPanel .detail-card .art .giza-img-fallback,
#detailPanel .detail-card .art .giza-img-fallback svg { width: 100%; display: block; }
/* the three words: front and centre, straight under the artwork */
.detail-words.hero { gap: 10px; justify-content: center; margin-top: 0; }
.detail-words.hero .word-chip {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 18px; font-weight: 600; letter-spacing: .8px;
  padding: 10px 18px; border-radius: 12px;
  background: rgba(244,211,94,.12); border-color: rgba(244,211,94,.4);
}
.detail-words.hero .word-chip .wc-count { font-size: 10px; }

/* My Gizas (marketplace): the wide "enjoy your collection" side panel */
.market-side.enjoy { width: 520px; }
.market-side.enjoy .detail-card { display: flex; flex-direction: column; gap: 14px; }
.market-side.enjoy .giza-img, .market-side.enjoy .giza-img img,
.market-side.enjoy .giza-img-fallback, .market-side.enjoy .giza-img-fallback svg {
  width: 100%; display: block;
}

/* ---------- collection panel (bottom of detail) ---------- */
.detail-collection{margin-top:6px;}
.detail-collection:empty{display:none;}
.collection-head{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:'Cinzel',serif;color:var(--gold);font-size:13px;letter-spacing:.5px;
  margin:8px 0 10px;padding-top:14px;border-top:1px solid var(--hairline);
}
.collection-head b{color:var(--text);font-family:'Inter',sans-serif;font-size:12px;font-weight:600;}
.collection-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.collection-thumb{
  aspect-ratio:1/1;border-radius:10px;overflow:hidden;cursor:pointer;
  border:1px solid var(--hairline);background:rgba(14,24,48,.6);transition:.15s;
}
.collection-thumb:hover{border-color:var(--gold);box-shadow:var(--glow-gold);transform:translateY(-2px);}
.collection-thumb .giza-img,.collection-thumb .giza-img-fallback{width:100%;height:100%;}

/* ================= shared: discrete icon buttons ================= */
.icon-btn{width:40px;height:40px;border-radius:11px;cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(10,16,32,.7);border:1px solid var(--glass-border);transition:.16s;}
.icon-btn:hover{border-color:var(--gold);box-shadow:var(--glow-gold);transform:translateY(-1px);}
.icon-btn svg{display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));}
/* pyramid-to-map button sits discreetly in the modal's bottom-left corner */
.modal-box{position:relative;}
.to-map-btn{position:absolute;bottom:14px;left:14px;z-index:2;}

/* map detail: marketplace icon pinned to the bottom-left of the pane */
.detail-foot{display:flex;justify-content:flex-start;margin-top:18px;}

/* ================= big collection overlay (map + packs) ================= */
.cv-overlay{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  background:rgba(6,9,20,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:28px;
  animation:cvfade .2s ease-out;}
@keyframes cvfade{from{opacity:0;}to{opacity:1;}}
.cv-panel{position:relative;width:100%;max-width:920px;max-height:88vh;overflow-y:auto;
  background:linear-gradient(180deg,rgba(16,26,50,.98),rgba(10,18,36,.98));
  border:1px solid var(--glass-border);border-radius:20px;box-shadow:var(--shadow);padding:26px 28px 30px;}
.cv-close{position:absolute;top:16px;right:18px;width:38px;height:38px;border-radius:50%;cursor:pointer;
  background:rgba(10,16,32,.7);border:1px solid var(--glass-border);color:var(--text);font-size:22px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:.15s;z-index:2;}
.cv-close:hover{border-color:var(--gold);color:var(--gold);box-shadow:var(--glow-gold);}
.cv-head{display:flex;align-items:center;gap:16px;margin-bottom:20px;padding-right:46px;}
.cv-titlewrap{flex:1;min-width:0;}
.cv-title{font-family:'Cinzel',serif;font-size:26px;font-weight:700;letter-spacing:1px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.cv-sub{font-size:12px;color:var(--text-dim);margin-top:2px;}
.cv-badge-btn{flex:none;}
.cv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.cv-cell{aspect-ratio:1/1;border-radius:14px;overflow:hidden;position:relative;
  border:1px solid var(--hairline);background:#0b1024;transition:transform .16s,box-shadow .16s;}
.cv-cell svg,.cv-cell img,.cv-cell .giza-img,.cv-cell .giza-img img{width:100%;height:100%;object-fit:cover;display:block;}
.cv-cell.cv-clickable{cursor:pointer;}
.cv-cell.cv-clickable:hover{transform:translateY(-4px) scale(1.02);border-color:var(--gold);box-shadow:0 0 22px rgba(244,211,94,.4);}
.cv-cell.cv-new{border:2px solid var(--gold);box-shadow:0 0 26px rgba(244,211,94,.6);}
.cv-newtag{position:absolute;top:8px;left:8px;background:var(--gold-grad);color:#2a2008;
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:8px;z-index:3;}
@media (max-width:640px){.cv-grid{grid-template-columns:repeat(2,1fr);}}

/* --- on-chain additions: wallet connect, map ownership toggle, My Gizas roller --- */
#connectWallet { margin-left: 10px; cursor: pointer; }

.map-owned {
  position: absolute;
  top: 186px;          /* sits just below the FACTIONS legend (top:18px) */
  left: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  background: linear-gradient(180deg, rgba(14, 18, 36, .62), rgba(10, 12, 26, .62));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  z-index: 5;
}
.map-owned .mo-check {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1px solid var(--glass-border); display: inline-block;
}
.map-owned.active { border-color: var(--gold); color: var(--gold); }
.map-owned.active .mo-check { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* First-person "walk the pyramid" mode: enter/exit overlay + crosshair */
.map-enter-btn, .walk-exit-btn {
  position: absolute; bottom: 18px; right: 18px; z-index: 5;
}
/* passive "Press Esc to exit" chip shown while walking (see index.html) */
.walk-exit-btn {
  pointer-events: none;
  background: linear-gradient(180deg, rgba(14,18,36,.62), rgba(10,12,26,.62));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); border-radius: 12px;
  box-shadow: var(--shadow-soft);
  font-size: 12px; color: var(--text-dim); padding: 8px 14px; letter-spacing: .3px;
}
.walk-exit-btn b { color: var(--gold); font-weight: 600; }

/* Walk-mode HUD (compass / location / name tag / toasts) - all pointer-events:
   none since the pointer is locked while walking anyway. */
.walk-compass, .walk-loc, .walk-nametag, .walk-toast {
  position: absolute; left: 50%; transform: translateX(-50%);
  z-index: 5; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,18,36,.62), rgba(10,12,26,.62));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border); border-radius: 12px;
  box-shadow: var(--shadow-soft);
  font-size: 12px; color: var(--text); padding: 8px 14px; letter-spacing: .3px;
  white-space: nowrap;
}
.walk-compass { top: 18px; display: flex; align-items: center; gap: 8px; }
.wc-needle {
  display: inline-block; color: var(--gold); font-size: 14px; line-height: 1;
  transition: transform .15s linear;
  text-shadow: 0 0 6px rgba(244,211,94,.6);
}
.walk-loc { bottom: 64px; color: var(--text-dim); font-size: 11px; padding: 7px 14px; text-align: center; letter-spacing: 1px; }
.walk-loc b { color: var(--gold); font-size: 16px; font-family: 'Cinzel', serif; }
.wl-bar {
  display: block; margin-top: 5px; height: 3px; width: 150px;
  background: rgba(255,255,255,.12); border-radius: 2px; overflow: hidden;
}
.wl-bar span { display: block; height: 100%; background: var(--gold); border-radius: 2px; transition: width .3s ease; }
.walk-loc.pulse { animation: wlPulse .55s ease; }
@keyframes wlPulse {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.14); border-color: var(--gold); }
  100% { transform: translateX(-50%) scale(1); }
}
.walk-nametag { top: calc(50% + 26px); font-size: 12px; padding: 6px 12px; }
.walk-nametag b { color: var(--gold); font-weight: 600; }
.walk-toast {
  top: 64px; opacity: 0; transition: opacity .35s ease;
  border-color: rgba(244,211,94,.45); font-size: 13px; padding: 10px 18px;
}
.walk-toast.show { opacity: 1; }
.walk-toast b { color: var(--gold); font-weight: 600; }

/* Map search (top-right of the 3D view): find a Giza by name / word / #block */
.map-search { position: absolute; top: 18px; right: 18px; z-index: 6; width: 260px; }
.map-search input {
  width: 100%; padding: 9px 13px; border-radius: 10px; font-size: 13px;
  background: linear-gradient(180deg, rgba(14,24,48,.94), rgba(9,16,34,.96));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(244,211,94,.4); color: var(--text);
  box-shadow: var(--shadow-soft);
}
.map-search input::placeholder { color: var(--text-dim); }
.map-search input:focus { outline: none; border-color: var(--gold); box-shadow: var(--glow-gold); }
.map-suggest {
  display: none; margin-top: 6px; border-radius: 10px; overflow: hidden auto;
  max-height: 440px;
  background: linear-gradient(180deg, rgba(14,24,48,.96), rgba(9,16,34,.97));
  border: 1px solid rgba(244,211,94,.35); box-shadow: var(--shadow-soft);
}
.map-suggest.show { display: block; }
.ms-row { padding: 8px 13px; cursor: pointer; font-size: 12px; }
.ms-row .ms-main {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.ms-row b { color: var(--text); font-weight: 600; }
.ms-row span { color: var(--text-dim); white-space: nowrap; }
.ms-row .ms-words { color: var(--gold); opacity: .75; font-size: 11px; margin-top: 2px; }
.ms-row:hover { background: rgba(244,211,94,.14); }
.ms-none { padding: 10px 13px; color: var(--text-dim); font-size: 12px; }

/* TEMPORARY pre-launch gate (see the #launchGate block at the top of
   index.html) - remove together with that block when going public. */
html.gated { overflow: hidden; }
html.gated header, html.gated main { filter: blur(14px); pointer-events: none; user-select: none; }
#launchGate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(20,28,58,.92), rgba(7,10,22,.97));
}
.lg-box {
  text-align: center; padding: 42px 48px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(14,18,36,.85), rgba(10,12,26,.85));
  border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
}
.lg-glyph { font-size: 42px; color: var(--gold); }
.lg-title { font-family: 'Cinzel', Georgia, serif; font-weight: 700; letter-spacing: 6px; font-size: 24px; margin: 8px 0 4px; color: var(--text); }
.lg-sub { color: var(--text-dim); font-size: 13px; margin-bottom: 18px; }
#lgForm { display: flex; gap: 8px; justify-content: center; }
#lgInput {
  padding: 10px 14px; border-radius: 8px; min-width: 200px;
  background: var(--bg-panel-2); border: 1px solid rgba(255,255,255,.14); color: var(--text);
}
#lgInput:focus { outline: none; border-color: var(--gold); }
.lg-err { color: #ff8080; font-size: 12px; margin-top: 12px; min-height: 16px; }
.walk-crosshair {
  position: absolute; top: 50%; left: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%); z-index: 5; pointer-events: none;
}
.walk-crosshair::before, .walk-crosshair::after {
  content: ''; position: absolute; background: rgba(244, 211, 94, .85);
  box-shadow: 0 0 4px rgba(0, 0, 0, .6);
}
.walk-crosshair::before { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.walk-crosshair::after { left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); }

.roller {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  padding: 10px 0 4px;
}
.roller-card { width: 340px; max-width: 80vw; }
.roller-nav {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text, #eaeefb);
  font-size: 26px; line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.roller-nav:hover { background: rgba(255, 255, 255, 0.14); }
.roller-pos { text-align: center; color: var(--text-dim, #9aa3bd); margin-top: 6px; font-size: 13px; }
.roller-copies {
  position: absolute; top: 8px; left: 8px;
  background: rgba(10, 16, 30, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px; padding: 2px 8px; font-size: 13px; font-weight: 700;
  color: #f4d35e;
}
.roller-list { width: 100%; margin-top: 10px; }

/* My Gizas: coverflow controls (List button + nav under the card) */
.mygizas-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 0 24px; }
.mygizas-list { width: min(380px, 42vmin); max-width: 100%; }

/* My Gizas coverflow deck */
.deck-stage {
  position: relative;
  width: 100%;
  height: min(580px, 66vh);
  perspective: 1400px;
  overflow: hidden;
  margin-top: 6px;
  border-radius: 20px;
  /* a stage, not a void: deep vignette with a soft spotlight from above */
  background:
    radial-gradient(ellipse at 50% -20%, rgba(255,240,210,.07), transparent 55%),
    radial-gradient(ellipse at 50% 45%, rgba(42,36,80,.5), rgba(8,11,22,.0) 72%);
}
/* faction-coloured glow behind the centre card (set per-Giza from JS) */
.deck-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 40% 45% at 50% 46%, var(--deck-glow, rgba(244,211,94,.16)), transparent 70%);
  transition: background .4s ease;
}
/* floor shadow grounding the centre card */
.deck-stage::after {
  content: ''; position: absolute; pointer-events: none;
  left: 50%; top: calc(50% + min(245px, 27vmin));
  transform: translateX(-50%);
  width: min(380px, 42vmin); height: 36px; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.5), transparent 68%);
}
.cf-card {
  position: absolute;
  top: 50%; left: 50%;
  width: 320px;
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s, filter .35s;
  will-change: transform, opacity;
  cursor: pointer;
}
.cf-card.center { cursor: default; width: min(460px, 50vmin); }
.cf-card.side { width: min(310px, 34vmin); cursor: pointer; }
.cf-art {
  position: relative;
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
}
.cf-art svg, .cf-art img, .cf-art .giza-img, .cf-art .giza-img img,
.cf-art .giza-img-fallback, .cf-art .giza-img-fallback svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.roller-pos .roller-nav.sm {
  width: 34px; height: 34px; font-size: 20px;
  vertical-align: middle; margin: 0 10px;
}
.roller-count { color: var(--text-dim); font-size: 13px; }

/* Pack opening: simple circular loader */
.spinner {
  width: 56px; height: 56px;
  margin: 0 auto 22px;
  border: 5px solid rgba(255, 255, 255, 0.14);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Pack quantity stepper (fixed steps, no free typing) */
.qty-label{display:block;margin:12px 0 6px;color:var(--text-dim);font-size:13px;}
.qty-stepper{display:flex;align-items:center;gap:16px;margin:2px 0 4px;}
.qty-btn{
  width:38px;height:38px;flex:none;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:rgba(244,211,94,.08);border:1px solid var(--glass-border);color:var(--gold);
  font-size:20px;font-weight:700;line-height:1;cursor:pointer;transition:.15s;
}
.qty-btn:hover{background:rgba(244,211,94,.18);box-shadow:var(--glow-gold);}
.qty-btn:disabled{opacity:.35;cursor:not-allowed;box-shadow:none;}
.qty-value{min-width:38px;text-align:center;font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--text);}

/* Buying a pack: loading state so the modal never looks frozen while the
   wallet popup / on-chain confirmation are pending. */
.pack-buy-loading{text-align:center;padding:16px 0 6px;}
.pack-buy-status{color:var(--text);font-weight:600;font-size:14px;margin-top:4px;}

/* My Packs (marketplace) */
.mypacks {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 60px 20px; text-align: center; color: var(--text);
}
.mypacks-count { font-family: 'Cinzel', serif; font-size: 64px; font-weight: 700; color: var(--gold); line-height: 1; }
.mypacks-label { color: var(--text-dim); font-size: 14px; }
.mypacks-hint { color: var(--text-dim); font-size: 13px; margin-top: 8px; }

/* ================= BATTLE ================= */
#tab-battle{padding:0;}
.battle-root{width:100%;height:100%;overflow-y:auto;padding:26px 30px 60px;}
.battle-intro h2{
  margin:0 0 4px;font-family:'Cinzel',serif;font-size:24px;font-weight:700;letter-spacing:1px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.battle-intro p{margin:0 0 8px;color:var(--text-dim);font-size:13px;max-width:640px;line-height:1.5;}
.bt-bad{color:#ff6f6f !important;}
.bt-account-row{
  display:flex;align-items:center;gap:12px;font-size:12px;color:var(--text-dim);margin:10px 0 20px;
}
.bt-account-row button{width:auto;padding:6px 12px;font-size:11.5px;}
.bt-deck-warning{
  font-size:11px;color:#ffb444;background:rgba(255,180,68,.1);border:1px solid rgba(255,180,68,.3);
  border-radius:8px;padding:6px 10px;margin-bottom:10px;line-height:1.5;
}

/* -- deck list -- */
.bt-empty-hint{
  background:linear-gradient(180deg,rgba(30,38,66,.55),rgba(18,22,40,.6));
  border:1px dashed var(--sand-dim);border-radius:12px;padding:16px 18px;color:var(--text-dim);
  font-size:13px;margin-bottom:20px;line-height:1.6;
}
.bt-empty-hint button{margin-top:10px;width:auto;padding:9px 16px;}
.bt-deck-list{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:22px;}
.bt-deck-card{
  width:230px;border-radius:var(--radius);padding:16px;
  background:linear-gradient(180deg, rgba(32,38,64,.85), rgba(20,24,42,.9));
  border:1px solid var(--hairline);box-shadow:var(--shadow-soft);transition:.16s;
}
.bt-deck-card:hover{border-color:var(--glass-border);transform:translateY(-3px);}
.bt-deck-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.bt-deck-name{font-weight:700;font-size:15px;}
.bt-deck-form{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:.6px;}
.bt-deck-meta{font-size:12px;color:var(--text-dim);margin:8px 0 12px;}
.bt-deck-actions{display:flex;gap:7px;flex-wrap:wrap;}
.bt-deck-actions .btn-primary{padding:8px 14px;font-size:12px;}
.bt-deck-actions .btn-ghost{width:auto;padding:8px 12px;font-size:12px;}
.bt-new-deck{width:auto;padding:11px 20px;}
.bt-difficulty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px;}
.bt-diff-note{font-size:11.5px;color:var(--text-dim);}

/* -- deck editor -- */
/* fill the visible battle area (no page scroll); the two lists scroll
   internally so Save/Cancel and the sort controls stay in view. */
.bt-editor{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;align-items:stretch;
  height:calc(100vh - 152px);min-height:420px;}
.bt-editor-pool, .bt-editor-deck{
  background:linear-gradient(180deg,rgba(30,38,66,.55),rgba(18,22,40,.6));
  border:1px solid var(--hairline);border-radius:14px;padding:16px;
  display:flex;flex-direction:column;min-height:0;overflow:hidden;
}
#btPoolSearch, #btDeckName{
  width:100%;box-sizing:border-box;background:rgba(20,24,42,.7);border:1px solid var(--hairline);color:var(--text);
  padding:10px 14px;border-radius:10px;font-size:13px;font-family:inherit;margin-bottom:12px;
}
#btPoolSearch:focus, #btDeckName:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(244,211,94,.12);}
.bt-pool-controls{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.bt-sort-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.6px;flex:none;}
.bt-sort{display:flex;gap:6px;flex-wrap:wrap;}
.bt-sort-btn{
  background:rgba(32,38,64,.6);border:1px solid var(--hairline);color:var(--text-dim);
  padding:5px 12px;border-radius:20px;font-size:11.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:.15s;
}
.bt-sort-btn:hover{color:var(--text);border-color:var(--glass-border);}
.bt-sort-btn.active{color:#2a2008;background:var(--gold-grad);font-weight:700;border-color:rgba(255,255,255,.25);box-shadow:var(--glow-gold);}
.bt-pool-list{flex:1 1 0;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-right:2px;}

/* circular tier badge (matches the tier plaque on the map / collection tabs) */
.bt-tier-badge{
  flex:none;width:36px;height:36px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Cinzel',Georgia,serif;font-size:15px;font-weight:700;color:var(--gold);
  background:radial-gradient(circle at 50% 30%, rgba(22,28,52,.94), rgba(8,10,20,.92));
  border:1px solid rgba(244,211,94,.55);
  box-shadow:0 0 10px rgba(244,211,94,.18), inset 0 0 8px rgba(0,0,0,.5);
  text-shadow:0 0 6px rgba(244,211,94,.35);
}
.bt-tier-badge.sm{width:27px;height:27px;font-size:12px;}

/* stat icons (shared: builder pool + arena) */
.bt-ico{width:12px;height:12px;display:block;flex:none;}
.bt-stat{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;line-height:1;
  padding:3px 6px;border-radius:6px;border:1px solid transparent;}
.bt-stat-val{font-variant-numeric:tabular-nums;}
.bt-stat-damage {color:#ff8f6f;background:rgba(255,93,93,.12); border-color:rgba(255,93,93,.28);}
.bt-stat-armour {color:#8fbcff;background:rgba(58,160,255,.12);border-color:rgba(58,160,255,.28);}
.bt-stat-healing{color:#5fe0a0;background:rgba(61,220,140,.12);border-color:rgba(61,220,140,.28);}

/* pool card: art thumbnail + info */
.bt-pool-card{
  display:flex;gap:12px;background:linear-gradient(180deg,rgba(32,38,64,.7),rgba(20,24,42,.8));
  border:1px solid var(--hairline);border-radius:12px;padding:10px;transition:.15s;
}
.bt-pool-card:hover{border-color:var(--glass-border);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.bt-pool-card.bt-in-deck{border-color:var(--gold);box-shadow:0 0 0 1px rgba(244,211,94,.25),var(--shadow-soft);}
.bt-pool-art{
  position:relative;width:112px;height:112px;flex:none;border-radius:12px;overflow:hidden;
  border:1px solid var(--hairline);background:rgba(8,10,20,.5);
}
.bt-pool-art svg,.bt-pool-art img,.bt-pool-art .giza-img,.bt-pool-art .giza-img img,
.bt-pool-art .giza-img-fallback,.bt-pool-art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}
.bt-pool-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;}
.bt-pool-head{display:flex;align-items:center;gap:10px;}
.bt-pool-name{font-weight:700;font-size:15px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bt-pool-owned{font-size:11px;color:var(--text-dim);}
.bt-pool-words{display:flex;flex-wrap:wrap;gap:6px;}
.bt-word-chip{
  display:inline-flex;flex-direction:column;gap:4px;background:rgba(10,14,28,.45);
  border:1px solid var(--hairline);border-radius:9px;padding:6px 8px;line-height:1;
}
.bt-word-name{color:var(--text);font-weight:700;font-size:11.5px;letter-spacing:.2px;}
.bt-word-stats{display:flex;gap:4px;}
.bt-pool-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;}
.bt-qty-stepper{display:flex;align-items:center;gap:10px;justify-content:flex-end;}
.bt-qty-stepper button{width:auto;padding:4px 12px;font-size:14px;font-weight:700;}
.bt-qty-stepper button:disabled{opacity:.3;cursor:not-allowed;box-shadow:none;}
.bt-qty-stepper span{min-width:18px;text-align:center;font-weight:700;}
.tier-badge-inline{
  background:rgba(8,10,20,.7);color:var(--gold);font-size:10.5px;font-weight:700;
  padding:2px 7px;border-radius:7px;border:1px solid var(--glass-border);flex:none;
}
.bt-cap-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin-bottom:6px;}
.bt-cap-fill{height:100%;background:var(--gold-grad);transition:width .2s;}
.bt-cap-label{font-size:12px;color:var(--text-dim);margin-bottom:14px;}
.bt-form-label{display:block;font-size:12px;color:var(--text-dim);margin-bottom:8px;}
.bt-form-label select{
  display:block;width:100%;margin-top:6px;background:rgba(20,24,42,.7);border:1px solid var(--hairline);
  color:var(--text);padding:9px 12px;border-radius:10px;font-size:13px;font-family:inherit;
}
.bt-form-desc{font-size:11.5px;color:var(--text-dim);margin-bottom:14px;line-height:1.5;}
.bt-deck-lines{flex:1 1 0;min-height:60px;overflow-y:auto;display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.bt-deckline{
  display:flex;flex-direction:column;gap:7px;font-size:12.5px;background:rgba(32,38,64,.6);
  border:1px solid var(--hairline);border-radius:8px;padding:8px 10px;
}
.bt-deckline-top{display:flex;align-items:center;gap:9px;}
.bt-deckline-art{width:30px;height:30px;flex:none;border-radius:7px;overflow:hidden;border:1px solid var(--hairline);}
.bt-deckline-art svg,.bt-deckline-art img,.bt-deckline-art .giza-img,.bt-deckline-art .giza-img img,
.bt-deckline-art .giza-img-fallback,.bt-deckline-art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}
.bt-deckline-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.bt-deckline-sub{color:var(--text-dim);font-size:11px;flex:none;}
.bt-deckline-top button{width:auto;padding:4px 10px;font-size:11px;flex:none;}
.bt-deckline-words{display:flex;flex-wrap:wrap;gap:6px;}
.bt-editor-actions{display:flex;gap:10px;flex:none;}
.bt-editor-actions .btn-ghost{width:auto;padding:10px 18px;}

/* -- arena -- */
.bt-arena{display:flex;flex-direction:column;gap:14px;max-width:960px;margin:0 auto;}
.bt-scoreboard{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(180deg,rgba(30,38,66,.55),rgba(18,22,40,.6));
  border:1px solid var(--hairline);border-radius:12px;padding:12px 20px;
}
.bt-score-side{font-size:12px;color:var(--text-dim);text-align:center;min-width:150px;}
.bt-score-bar{height:8px;border-radius:6px;background:rgba(255,255,255,.08);overflow:hidden;margin:6px 0;}
.bt-score-fill{height:100%;background:linear-gradient(90deg,#ff5d5d,#f4d35e);transition:width .25s;}
.bt-score-bar.bt-mine .bt-score-fill{background:linear-gradient(90deg,#3ddc8c,#f4d35e);}
.bt-round{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:1px;font-size:14px;}
.bt-board{
  background:linear-gradient(180deg,rgba(20,24,42,.5),rgba(14,18,34,.55));
  border:1px solid var(--hairline);border-radius:14px;padding:12px 16px;
}
.bt-board-enemy{border-right:2px solid rgba(255,93,93,.35);}
.bt-board-mine{border-left:2px solid rgba(61,220,140,.35);}
.bt-row{display:flex;align-items:center;gap:12px;padding:6px 0;}
.bt-row-label{width:110px;flex:none;font-size:10.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}
/* centred rows: slot counts stack into a shape (Standard 1/2/1 = diamond) */
.bt-row-slots{display:flex;gap:14px;flex-wrap:wrap;flex:1;justify-content:center;}
.bt-slot-role{display:flex;align-items:center;justify-content:center;height:100%;min-height:80px;
  font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);opacity:.5;}
.bt-slot.bt-drop-ok{border-color:var(--gold);border-style:solid;background:rgba(244,211,94,.1);
  box-shadow:0 0 0 2px rgba(244,211,94,.4), var(--glow-gold);}
/* portrait board card: square art on top, bars + name + words beneath (much
   bigger Gizas, kept compact enough that the whole board still fits). */
.bt-slot{
  width:326px;min-height:100px;border-radius:14px;box-sizing:border-box;
  border:1px dashed var(--hairline);transition:.15s;padding:9px;position:relative;
}
.bt-empty{background:rgba(255,255,255,.02);}
.bt-empty .bt-slot-role{min-height:224px;font-size:12px;}
.bt-slot-name{font-size:14px;}
.bt-slot .bt-card-words{gap:4px;}
.bt-slot .bt-mini-word{font-size:11.5px;padding:4px 8px;}
.bt-slot .bt-mini-w-stat .bt-ico{width:13px;height:13px;}
.bt-slot-nums{font-size:11px !important;}
.bt-role-tag{font-size:9.5px;padding:2px 7px;}
.bt-filled{
  border-style:solid;border-color:var(--hairline);
  background:linear-gradient(180deg, rgba(32,38,64,.85), rgba(20,24,42,.9));
  box-shadow:var(--shadow-soft);display:flex;flex-direction:row;gap:11px;align-items:flex-start;
}
/* left: big square picture + its bars. right: the three words */
.bt-slot-fig{width:200px;flex:none;display:flex;flex-direction:column;gap:5px;}
.bt-slot-words{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.bt-targetable{cursor:pointer;border-color:var(--gold);box-shadow:0 0 0 2px rgba(244,211,94,.35), var(--glow-gold);}
/* action phase: your cards you can still act with glow to invite a click -
   DPS (damage) glow red, Healers glow green. */
.bt-actable{cursor:pointer;}
.bt-actable.bt-role-damage{border-color:rgba(255,111,111,.65);box-shadow:0 0 0 1px rgba(255,111,111,.45), 0 0 15px rgba(255,111,111,.3);}
.bt-actable.bt-role-damage:hover{border-color:#ff8f8f;box-shadow:0 0 0 2px rgba(255,111,111,.6), 0 0 20px rgba(255,111,111,.45);transform:translateY(-2px);}
.bt-actable.bt-role-healer{border-color:rgba(95,224,160,.65);box-shadow:0 0 0 1px rgba(95,224,160,.45), 0 0 15px rgba(95,224,160,.3);}
.bt-actable.bt-role-healer:hover{border-color:#5fe0a0;box-shadow:0 0 0 2px rgba(95,224,160,.6), 0 0 20px rgba(95,224,160,.45);transform:translateY(-2px);}
.bt-acting{cursor:pointer;border-color:var(--gold);box-shadow:0 0 0 2px rgba(244,211,94,.55), var(--glow-gold);}
.bt-acted{opacity:.5;filter:grayscale(.35);}
.bt-empty[data-side="player"]{cursor:default;}
.bt-slot-name{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bt-card-words{display:flex;flex-direction:column;gap:3px;}
.bt-slot-art{position:relative;width:200px;height:200px;border-radius:9px;overflow:hidden;background:rgba(8,10,20,.5);border:1px solid var(--hairline);}
.bt-slot-art svg,.bt-slot-art img,.bt-slot-art .giza-img,.bt-slot-art .giza-img img,
.bt-slot-art .giza-img-fallback,.bt-slot-art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}
.bt-role-tag{position:absolute;bottom:4px;left:4px;font-size:8.5px;color:#2a2008;background:var(--gold-grad);
  text-transform:uppercase;font-weight:700;letter-spacing:.3px;padding:1px 6px;border-radius:5px;box-shadow:var(--shadow-soft);}
.bt-bar{height:6px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden;}
.bt-life-fill{height:100%;background:linear-gradient(90deg,#3ddc8c,#f4d35e);transition:width .2s;}
.bt-armour-fill{height:100%;background:linear-gradient(90deg,#6fa8ff,#3aa0ff);transition:width .2s;}
.bt-slot-nums{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:9.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
.bt-armour-num{color:var(--south);display:inline-flex;align-items:center;gap:2px;}
.bt-armour-num .bt-ico{width:9px;height:9px;}
.bt-dispose{position:absolute;top:5px;right:5px;background:rgba(255,111,111,.16);border:1px solid rgba(255,111,111,.4);
  color:#ff8f8f;border-radius:6px;padding:2px 6px;font-size:9.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:.14s;z-index:2;}
.bt-dispose:hover{background:rgba(255,111,111,.28);border-color:#ff8f8f;}
.bt-mini-word{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10px;
  background:rgba(10,14,28,.4);border:1px solid var(--hairline);color:var(--text);padding:3px 7px;border-radius:6px;}
.bt-mini-w-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;}
.bt-mini-w-stat{display:inline-flex;align-items:center;gap:3px;font-weight:700;flex:none;font-variant-numeric:tabular-nums;}
.bt-mini-w-stat .bt-ico{width:11px;height:11px;}
.bt-mini-w-stat em{font-style:normal;opacity:.7;font-size:9px;}
.bt-mini-word.bt-stat-damage .bt-mini-w-stat{color:#ff8f6f;}
.bt-mini-word.bt-stat-armour .bt-mini-w-stat{color:#8fbcff;}
.bt-mini-word.bt-stat-healing .bt-mini-w-stat{color:#5fe0a0;}
.bt-mini-word.bt-cd{opacity:.42;}
.bt-mini-word.bt-cd .bt-mini-w-name{text-decoration:line-through;}
.bt-overlap-note{
  font-size:11.5px;color:var(--gold);background:rgba(244,211,94,.08);border:1px solid var(--glass-border);
  border-radius:8px;padding:6px 12px;margin-bottom:8px;display:inline-block;
}
.bt-hand-row{
  background:linear-gradient(180deg,rgba(30,38,66,.55),rgba(18,22,40,.6));
  border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;
}
.bt-hand-label{font-size:12px;color:var(--text-dim);margin-bottom:10px;}
.bt-hand{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px;justify-content:center;}
.bt-hand-card{
  display:flex;gap:10px;width:290px;background:rgba(32,38,64,.7);border:1px solid var(--hairline);
  border-radius:12px;padding:10px;cursor:grab;transition:.15s;text-align:left;
}
.bt-hand-card:hover{border-color:var(--glass-border);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.bt-hand-card.bt-chosen{border-color:var(--gold);box-shadow:var(--glow-gold);}
.bt-hand-card.bt-disabled{opacity:.5;cursor:not-allowed;pointer-events:none;}
.bt-hand-card.bt-dragging{opacity:.45;cursor:grabbing;}
.bt-hand-art{position:relative;width:74px;height:74px;flex:none;border-radius:10px;overflow:hidden;border:1px solid var(--hairline);background:rgba(8,10,20,.5);}
.bt-hand-art svg,.bt-hand-art img,.bt-hand-art .giza-img,.bt-hand-art .giza-img img,
.bt-hand-art .giza-img-fallback,.bt-hand-art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}
.bt-hand-art .bt-tier-badge{position:absolute;top:3px;left:3px;}
.bt-hand-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.bt-hand-words{display:flex;flex-wrap:wrap;gap:5px;}
.bt-hand-empty{color:var(--text-dim);font-size:12px;}
.bt-hand-row > button{width:auto;padding:8px 16px;font-size:12px;}
.bt-action-panel{
  background:linear-gradient(180deg,rgba(30,38,66,.6),rgba(18,22,40,.65));
  border:1px solid var(--glass-border);border-radius:12px;padding:14px 16px;
}
.bt-action-head{font-size:13px;margin-bottom:10px;}
.bt-act-left{display:inline-block;font-size:10px;color:var(--gold);background:rgba(244,211,94,.12);
  border:1px solid var(--glass-border);border-radius:10px;padding:1px 8px;margin-left:6px;vertical-align:middle;}
.bt-act-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.bt-act-btns .bt-pass-btn{width:auto;padding:8px 14px;}
.bt-word-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px;}
.bt-word-btn{width:auto;padding:8px 12px;font-size:12px;display:inline-flex;align-items:center;gap:8px;}
.bt-word-btn-name{font-weight:600;}
.bt-word-btn-stat{display:inline-flex;align-items:center;gap:3px;font-weight:700;font-variant-numeric:tabular-nums;}
.bt-word-btn-stat .bt-ico{width:12px;height:12px;}
.bt-word-btn-stat em{font-style:normal;opacity:.7;font-size:10px;}
.bt-word-btn.bt-stat-damage .bt-word-btn-stat{color:#ff8f6f;}
.bt-word-btn.bt-stat-healing .bt-word-btn-stat{color:#5fe0a0;}
.bt-word-btn.bt-chosen{border-color:var(--gold);color:var(--gold);background:rgba(244,211,94,.16);}
.bt-word-btn:disabled{opacity:.35;cursor:not-allowed;}
.bt-action-hint{font-size:11.5px;color:var(--text-dim);margin-bottom:10px;}
.bt-action-panel > button.btn-ghost{width:auto;padding:8px 14px;font-size:12px;}
.bt-log{
  max-height:150px;overflow-y:auto;font-size:11.5px;color:var(--text-dim);line-height:1.7;
  background:rgba(10,14,28,.6);border:1px solid var(--hairline);border-radius:10px;padding:10px 14px;
}
.bt-result{text-align:center;padding:60px 20px;}
.bt-result h2{
  font-family:'Cinzel',serif;font-size:32px;letter-spacing:1px;margin-bottom:10px;
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.bt-result p{color:var(--text-dim);margin:6px 0;}
.bt-final-score{color:var(--text) !important;font-weight:600;margin-bottom:20px !important;}
.bt-result .btn-primary{width:auto;padding:12px 26px;}

@media (max-width: 900px){
  /* stacked columns can't share one fixed height - let the page scroll here */
  .bt-editor{grid-template-columns:1fr;height:auto;min-height:0;}
  .bt-editor-pool, .bt-editor-deck{overflow:visible;}
  .bt-pool-list{flex:none;max-height:460px;}
  .bt-deck-lines{flex:none;max-height:240px;}
}
.mypacks .btn-primary { margin-top: 16px; }

/* ===== BATTLE v3: deck-builder collections/filters/stats + cross-tab ===== */

/* pool controls: sort + role + collections toggle, wraps cleanly */
.bt-pool-controls{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;}
.bt-ctl-group{display:flex;align-items:center;gap:8px;}
.bt-coll-toggle{margin-left:auto;}

/* bigger, clearer word chips in the builder pool (the important info) */
.bt-pool-words{gap:8px;}
.bt-pool-words .bt-word-chip{gap:6px;padding:8px 10px;border-radius:10px;}
.bt-pool-words .bt-word-name{font-size:14px;}
.bt-pool-words .bt-stat{font-size:13px;padding:4px 9px;border-radius:7px;}
.bt-pool-words .bt-ico{width:15px;height:15px;}
.bt-word-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;
  margin-left:6px;padding:0 4px;font-size:10.5px;font-weight:700;color:var(--gold);
  background:rgba(244,211,94,.14);border:1px solid rgba(244,211,94,.4);border-radius:9px;vertical-align:middle;}
/* clickable word = collection filter */
.bt-word-click{cursor:pointer;transition:.13s;}
.bt-word-click:hover{border-color:var(--gold);background:rgba(244,211,94,.08);}
.bt-word-active{border-color:var(--gold);background:rgba(244,211,94,.14);box-shadow:0 0 0 1px rgba(244,211,94,.35);}

/* role tag on each pool card */
.bt-pool-role{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 8px;border-radius:7px;flex:none;}

/* collections browser */
.bt-coll-browser{background:rgba(10,14,28,.5);border:1px solid var(--hairline);border-radius:12px;padding:12px;margin-bottom:12px;}
.bt-coll-head{font-size:11.5px;color:var(--text-dim);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;}
.bt-coll-grid{display:flex;flex-wrap:wrap;gap:7px;max-height:200px;overflow-y:auto;}
.bt-coll-chip{display:inline-flex;align-items:center;background:rgba(32,38,64,.7);border:1px solid var(--hairline);
  color:var(--text);border-radius:20px;padding:5px 10px;font-size:12px;font-weight:600;cursor:pointer;transition:.13s;font-family:inherit;}
.bt-coll-chip:hover{border-color:var(--glass-border);color:var(--gold);}
.bt-coll-chip.active{border-color:var(--gold);background:rgba(244,211,94,.14);color:var(--gold);}

.bt-active-filter{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim);margin-bottom:10px;}
.bt-active-filter b{color:var(--gold);}
.bt-clear-filter{background:rgba(244,211,94,.08);border:1px solid var(--glass-border);color:var(--gold);
  border-radius:8px;padding:3px 9px;font-size:11px;cursor:pointer;font-family:inherit;}
.bt-clear-filter:hover{background:rgba(244,211,94,.18);}

/* right-side deck stats */
.bt-deck-stats{background:rgba(10,14,28,.45);border:1px solid var(--hairline);border-radius:12px;padding:12px;margin-bottom:14px;}
.bt-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:8px;margin-bottom:10px;}
.bt-stat-card{background:rgba(32,38,64,.6);border-radius:10px;padding:8px 6px;text-align:center;}
.bt-stat-num{display:block;font-family:'Cinzel',serif;font-size:22px;font-weight:700;color:var(--gold);line-height:1;}
.bt-stat-num.bt-stat-damage,.bt-stat-num.bt-stat-armour,.bt-stat-num.bt-stat-healing,.bt-stat-num.bt-stat-balanced{background:none;border:none;padding:0;}
.bt-stat-cap{display:block;font-size:9.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.4px;margin-top:5px;}
.bt-syn-list{display:flex;flex-wrap:wrap;gap:6px;max-height:84px;overflow-y:auto;}
.bt-syn-chip{display:inline-flex;align-items:center;background:rgba(244,211,94,.08);border:1px solid var(--glass-border);
  color:var(--text);border-radius:8px;padding:4px 9px;font-size:11.5px;font-weight:600;}
.bt-syn-empty{font-size:11.5px;color:var(--text-dim);line-height:1.5;}

/* ===== in-battle full-width layout: top bar, boards fill the middle, hand
   spread across the bottom - everything on one screen, no scrollbars ===== */
.bt-arena-full{display:flex;flex-direction:column;gap:12px;max-width:none;width:100%;
  height:calc(100vh - 152px);min-height:520px;margin:0;}

/* top bar: round, both HP bars, blocks */
.bt-topbar{flex:none;display:flex;align-items:center;gap:22px;
  background:linear-gradient(180deg,rgba(30,38,66,.55),rgba(18,22,40,.6));
  border:1px solid var(--hairline);border-radius:12px;padding:10px 20px;}
.bt-topbar .bt-round{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:1px;font-size:15px;flex:none;}
.bt-hpbars{flex:1;display:flex;gap:22px;min-width:0;}
.bt-hp{flex:1;display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--text-dim);min-width:0;}
.bt-hp .bt-score-bar{flex:1;margin:0;}
.bt-hp span{flex:none;font-variant-numeric:tabular-nums;}

/* boards face each other horizontally (Rival | VS | You) to use the width and
   keep the whole board on screen; each formation's rows become vertical columns
   so the counts still read as a shape. */
.bt-boards{flex:1;min-height:0;display:flex;flex-direction:row;justify-content:center;align-items:center;gap:12px;overflow:hidden;}
.bt-board{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 10px;position:relative;flex:none;}
.bt-board-tag{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);}
.bt-board-mine .bt-board-tag{color:#5fe0a0;}
.bt-board-enemy .bt-board-tag{color:#ff8f8f;}
.bt-board-rows{display:flex;flex-direction:row;gap:10px;align-items:center;justify-content:center;}
.bt-board .bt-row{flex-direction:column;padding:0;gap:0;align-items:center;}
.bt-board .bt-row-slots{flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:12px;}
.bt-vs{font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--gold);opacity:.75;
  letter-spacing:1px;flex:none;text-shadow:var(--glow-gold);}

/* redesigned blocks counter: chips with a stacked-blocks icon */
.bt-blocks-ui{flex:none;display:flex;gap:10px;align-items:center;}
.bt-blockchip{display:inline-flex;align-items:center;gap:6px;border-radius:10px;padding:6px 12px;
  background:rgba(10,14,28,.6);border:1px solid var(--hairline);}
.bt-blk-ico{width:18px;height:18px;flex:none;}
.bt-blockchip b{font-family:'Cinzel',serif;font-size:19px;line-height:1;font-weight:700;}
.bt-blockchip-mine{border-color:rgba(244,211,94,.5);box-shadow:inset 0 0 12px rgba(244,211,94,.1);}
.bt-blockchip-mine .bt-blk-ico,.bt-blockchip-mine b{color:var(--gold);}
.bt-block-plus{font-size:10px;color:#5fe0a0;font-weight:700;}
.bt-blockchip-rival{opacity:.85;}
.bt-blockchip-rival .bt-blk-ico,.bt-blockchip-rival b{color:var(--text-dim);}
.bt-block-tag{font-size:9.5px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;}

/* hand bar across the bottom: all cards visible at once, no scroll */
.bt-handbar{flex:none;display:flex;flex-direction:column;gap:8px;
  background:linear-gradient(180deg,rgba(30,38,66,.55),rgba(18,22,40,.6));
  border:1px solid var(--hairline);border-radius:12px;padding:10px 14px;}
.bt-hand-colls{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.bt-hand-colls-label{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--text-dim);margin-right:4px;}
.bt-coll-pip{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-dim);
  background:rgba(255,255,255,.04);border:1px solid var(--hairline);border-radius:14px;padding:2px 9px;}
.bt-coll-pip.shared{color:var(--gold);background:rgba(244,211,94,.14);border-color:rgba(244,211,94,.5);font-weight:700;box-shadow:var(--glow-gold);}
.bt-coll-pip b{font-weight:700;font-size:10px;}
.bt-hand{flex:1;display:flex;gap:10px;justify-content:center;flex-wrap:nowrap;min-width:0;margin:0;align-items:center;}
.bt-hand-hint{font-size:11.5px;color:var(--text-dim);line-height:1.4;}

/* the hand sits left, its controls are tucked to the far right (your side) in
   a fixed-size panel, so choosing a word never resizes the hand or the board */
.bt-hand-area{display:flex;gap:14px;align-items:stretch;height:158px;}
.bt-controls-panel{width:300px;flex:none;display:flex;flex-direction:column;justify-content:center;overflow:hidden;
  background:linear-gradient(180deg,rgba(30,38,66,.5),rgba(18,22,40,.55));
  border:1px solid var(--hairline);border-radius:12px;padding:12px 14px;}
.bt-controls-panel .bt-action-panel{margin:0;border:none;background:none;padding:0;width:100%;}
.bt-controls-panel .bt-action-head{margin-bottom:8px;}
.bt-controls-panel .bt-word-row{margin-bottom:8px;}
.bt-lay-controls{display:flex;flex-direction:column;align-items:stretch;gap:12px;}
.bt-lay-controls .bt-pass-btn{width:100%;padding:10px;}

/* hand card: words on the LEFT, square art on the RIGHT */
.bt-hand-card{flex:1 1 0;min-width:0;max-width:250px;display:flex;gap:9px;padding:9px;
  background:rgba(32,38,64,.7);border:1px solid var(--hairline);border-radius:12px;cursor:grab;transition:.15s;text-align:left;}
.bt-hand-card:hover{border-color:var(--glass-border);transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.bt-hand-card.bt-chosen{border-color:var(--gold);box-shadow:var(--glow-gold);}
.bt-hand-card.bt-disabled{cursor:not-allowed;pointer-events:none;}
.bt-hand-card.bt-unaffordable{opacity:.5;filter:grayscale(.4);}
.bt-hand-card.bt-dragging{opacity:.45;cursor:grabbing;}
.bt-hand-words{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.bt-hand-name{font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bt-hand-fig{width:66px;flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;}
.bt-hand-art{position:relative;width:66px;height:66px;border-radius:9px;overflow:hidden;border:1px solid var(--hairline);background:rgba(8,10,20,.5);}
/* tier plaque on hand art, matching the deck-tier style used on the other tabs */
.bt-hand-art .deck-tier{min-width:26px;height:26px;padding:0 5px;font-size:12px;top:4px;right:4px;border-radius:8px;}
.bt-hand-art svg,.bt-hand-art img,.bt-hand-art .giza-img,.bt-hand-art .giza-img img,
.bt-hand-art .giza-img-fallback,.bt-hand-art .giza-img-fallback svg{width:100%;height:100%;object-fit:cover;display:block;}
.bt-hand-tier{font-family:'Cinzel',serif;font-size:12px;font-weight:700;color:var(--gold);line-height:1;
  padding:3px 9px;border-radius:8px;border:1px solid rgba(244,211,94,.45);background:rgba(244,211,94,.08);letter-spacing:.3px;}
.bt-hand-tier.bt-cost-short{color:#ff8f8f;border-color:rgba(255,143,143,.45);background:rgba(255,111,111,.08);}
/* shared collection in hand = gold-lit word chip */
.bt-word-shared{border-color:rgba(244,211,94,.55) !important;background:rgba(244,211,94,.1) !important;}

@media (max-width: 900px){
  /* narrow: let the page scroll and wrap the hand */
  .bt-arena-full{height:auto;min-height:0;}
  .bt-boards{overflow:visible;}
  .bt-hand{flex-wrap:wrap;}
  .bt-hand-card{flex:0 0 220px;}
  .bt-boards{flex-direction:column;}
}

/* ================= ARENA (Chains grid game + deck builder) ================= */
#tab-arena{display:none;}
#tab-arena.active{display:block;flex:1;min-width:0;padding:14px 18px 30px;overflow-y:auto;height:100%;}
#tab-arena .ar-subtabs{width:100%;}
.ar-pool-grid .giza-card .bt-tier-badge{position:absolute;top:8px;right:8px;}
.ar-subtabs{display:flex;gap:8px;margin-bottom:14px;align-items:center;flex-wrap:wrap;}
.ar-subtabs .ar-title{font-family:'Cinzel',serif;color:var(--gold);font-size:17px;
  letter-spacing:2px;text-transform:uppercase;margin-right:14px;}
.ar-stat-strip{margin-left:auto;display:flex;gap:10px;align-items:center;}

/* ---- deck builder ---- */
.ar-builder{display:flex;gap:16px;align-items:flex-start;}
.ar-pool{flex:1;min-width:0;}
.ar-pool-filters{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.ar-pool-filters input,.ar-pool-filters select{
  background:var(--bg-panel-solid);border:1px solid var(--hairline);color:var(--text);
  border-radius:8px;padding:7px 10px;font-size:13px;font-family:inherit;}
.ar-pool-grid{display:flex;flex-wrap:wrap;gap:10px;}
.ar-pool-grid .giza-card{width:150px;}
.ar-pool-grid .giza-card.ar-maxed{opacity:.4;pointer-events:none;}
.ar-indeck-badge{position:absolute;top:8px;left:8px;background:rgba(8,10,20,.8);color:var(--gold);
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;border:1px solid rgba(244,211,94,.4);z-index:2;}
.ar-multi-badge{position:absolute;bottom:8px;left:8px;background:rgba(8,10,20,.82);color:var(--gold);
  font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:8px;
  border:1px solid rgba(244,211,94,.5);box-shadow:0 0 10px rgba(244,211,94,.25);z-index:2;}
.ar-deckpanel{flex:0 0 300px;background:var(--bg-panel);border:1px solid var(--hairline);
  border-radius:14px;padding:14px 16px;position:sticky;top:0;}
.ar-deckpanel h3{margin:0 0 8px;font-family:'Cinzel',serif;font-size:13px;color:var(--gold);
  letter-spacing:1.5px;text-transform:uppercase;}
.ar-deck-count{font-size:22px;font-weight:700;color:var(--gold);margin-bottom:8px;}
.ar-deck-count.ar-ready{color:var(--east);}
.ar-deck-list{max-height:320px;overflow-y:auto;margin-bottom:10px;}
.ar-deck-row{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:7px;
  font-size:12.5px;cursor:pointer;}
.ar-deck-row:hover{background:rgba(255,92,92,.12);}
.ar-deck-row img{width:30px;height:30px;border-radius:5px;object-fit:cover;}
.ar-deck-row .ar-dwords{color:var(--text-dim);font-size:11px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;flex:1;}
.ar-deck-row .ar-dx{color:#ff8f8f;font-weight:700;}
.ar-deck-stats{font-size:12px;color:var(--text-dim);line-height:1.7;border-top:1px solid var(--hairline);
  padding-top:8px;margin-bottom:10px;}
.ar-deck-stats b{color:var(--text);}
.ar-echo-chip{display:inline-block;background:rgba(244,211,94,.12);border:1px solid rgba(244,211,94,.3);
  border-radius:10px;padding:1px 8px;font-size:11px;color:var(--gold);margin:1px 2px;}
.ar-empty{padding:60px 20px;text-align:center;color:var(--text-dim);font-size:14px;line-height:1.8;}

/* ---- match ---- */
.ar-topbar{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.ar-timer{font-size:22px;font-weight:700;color:var(--gold);min-width:52px;text-align:center;
  font-variant-numeric:tabular-nums;}
.ar-timer.ar-low{color:#ff5c5c;animation:ar-blink 1s infinite;}
@keyframes ar-blink{50%{opacity:.4}}
.ar-scorebox{background:var(--bg-panel);border:1px solid var(--hairline);border-radius:10px;
  padding:5px 14px;text-align:center;min-width:106px;}
.ar-scorebox .nm{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);}
.ar-scorebox .pts{font-size:20px;font-weight:700;line-height:1.1;color:var(--gold);}
.ar-scorebox.ar-p2 .pts{color:#a05fd4;}
.ar-scorebox .sub{font-size:9.5px;color:var(--text-dim);}
.ar-scorebox.ar-active{border-color:var(--gold);box-shadow:var(--glow-gold);}
.ar-opprow{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;}
.ar-opplabel{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#a05fd4;
  writing-mode:vertical-rl;transform:rotate(180deg);align-self:center;font-weight:600;}
.ar-opphand{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;}
.ar-ocard{position:relative;background:var(--bg-panel);border:1.5px solid #3a2a5e;border-radius:8px;
  padding:4px;width:104px;flex:0 0 auto;background-size:auto,160px;}
.ar-ocard img{width:100%;border-radius:5px;display:block;}
.ar-ocard .ar-hw{font-size:11.5px;line-height:1.45;}
.ar-ocard .bt-tier-badge{position:absolute;top:6px;right:6px;}
.ar-match{display:flex;gap:12px;align-items:flex-start;}
.ar-handcol{flex:0 0 450px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;
  overflow-y:auto;max-height:clamp(420px,calc(100vh - 215px),1100px);padding-right:2px;}
.ar-handcol.ar-right{flex:0 0 354px;}
.ar-hcol-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);
  font-weight:600;padding:2px 2px 0;}
.ar-handcol .ar-hw{font-size:15.5px;}
.ar-hcol-head .ar-timer{min-width:0;}
.ar-viewport{position:relative;overflow:hidden;flex:1;min-width:0;
  height:clamp(420px,calc(100vh - 215px),1100px);
  border-radius:12px;border:1px solid var(--hairline);background:#060a18;}
.ar-board{display:grid;grid-template-columns:repeat(12,240px);grid-template-rows:repeat(12,240px);
  gap:4px;background:#060a18;padding:10px;width:fit-content;position:absolute;left:0;top:0;
  transition:transform .25s ease;will-change:transform;}
.ar-varrow{position:absolute;z-index:5;width:44px;height:44px;border-radius:50%;
  background:rgba(14,21,48,.85);border:1px solid var(--hairline);color:var(--text);
  font-size:17px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;}
.ar-varrow:hover{background:rgba(35,48,101,.95);}
.ar-varrow.up{top:12px;left:50%;transform:translateX(-50%);}
.ar-varrow.down{bottom:12px;left:50%;transform:translateX(-50%);}
.ar-varrow.left{left:12px;top:50%;transform:translateY(-50%);}
.ar-varrow.right{right:12px;top:50%;transform:translateY(-50%);}
.ar-cell{position:relative;background:#101a3a;border-radius:6px;border:1px solid #1a2650;overflow:hidden;}
.ar-cell.r1{background:#111b40;} .ar-cell.r2{background:#141f48;} .ar-cell.r3{background:#172350;}
.ar-cell.r4{background:#1a2858;}
.ar-cell.r5{background:#2a1836;border-color:#5e2a58;}
.ar-cell .ar-mult{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:700;color:#2c3c78;pointer-events:none;}
.ar-cell.r5 .ar-mult{color:#6e3a68;}
.ar-cell.ar-open{cursor:pointer;}
.ar-cell.ar-open:hover{border-color:var(--gold);box-shadow:inset 0 0 14px rgba(244,211,94,.25);}
.ar-tile{position:absolute;inset:0;display:grid;
  grid-template-columns:40px 1fr 40px;grid-template-rows:40px 1fr 40px;
  background:#0a0f24;background-size:auto,240px;border-radius:6px;}
.ar-tile.ar-own1{outline:2px solid var(--gold);outline-offset:-2px;}
.ar-tile.ar-own2{outline:2px solid #a05fd4;outline-offset:-2px;}
.ar-tile.ar-pend{outline:2px dashed #fff;outline-offset:-2px;animation:ar-pop .3s ease;}
@keyframes ar-pop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.ar-timg{grid-area:2/2;background-size:cover;background-position:center;border-radius:3px;}
.ar-wb{display:flex;align-items:center;justify-content:center;overflow:hidden;
  background:#0d1430;background-size:auto,240px;font-size:20px;font-weight:500;letter-spacing:.3px;
  line-height:1;color:#f0ece0;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.9);}
.ar-wb b{color:#fff;} .ar-wb u{text-decoration-color:var(--gold);}
.ar-wb.n{grid-area:1/2;} .ar-wb.s{grid-area:3/2;} .ar-wb.e{grid-area:2/3;} .ar-wb.w{grid-area:2/1;}
.ar-wb.e span{writing-mode:vertical-rl;}
.ar-wb.w span{writing-mode:vertical-rl;transform:rotate(180deg);}
.ar-wb.ar-blankw{color:#59627f;}
.ar-wb.ar-fbok{box-shadow:inset 0 0 0 2px #7bd88f;}
.ar-wb.ar-fbbad{box-shadow:inset 0 0 0 2px #ff5c5c;}
.ar-wb.ar-pendable{cursor:grab;}
.ar-wb.ar-dragover,.ar-wb.ar-selwb{box-shadow:inset 0 0 0 2px var(--gold);}
.ar-confirmbar{display:none;align-items:center;gap:12px;justify-content:center;flex-wrap:nowrap;
  position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:6;max-width:92%;
  background:rgba(14,21,48,.95);border:1px solid var(--gold);border-radius:12px;
  padding:8px 14px;width:fit-content;box-shadow:0 6px 20px rgba(0,0,0,.5);}
.ar-confirmbar.show{display:flex;}
.ar-cscore{font-size:16px;font-weight:700;color:var(--gold);}
.ar-cdetail{font-size:12px;color:var(--text-dim);}
.ar-cerr{font-size:13px;color:#ff5c5c;font-weight:600;}
.ar-chint{font-size:11px;color:var(--text-dim);white-space:nowrap;}
@media (max-width:1300px){.ar-chint{display:none;}}
.ar-handcol .ar-hcard,.ar-handcol .ar-ocard{width:100%;flex:0 0 auto;}
.ar-hcard{position:relative;background:var(--bg-panel);border:2px solid var(--hairline);
  border-radius:10px;padding:6px;width:160px;cursor:pointer;background-size:auto,220px;}
.ar-hcard:hover{border-color:#3c5098;}
.ar-hcard.ar-sel{border-color:var(--gold);box-shadow:var(--glow-gold);}
.ar-hcard.ar-dead{opacity:.45;cursor:default;}
.ar-hcard img{width:100%;border-radius:6px;display:block;}
.ar-hcard .bt-tier-badge{position:absolute;top:9px;right:9px;}
.ar-hw{font-size:15px;line-height:1.55;color:#cfcaba;margin-top:5px;text-align:center;
  background:rgba(8,10,20,.72);border-radius:7px;padding:4px 2px;}
.ar-hw b{color:#fff;} .ar-hw u{text-decoration-color:var(--gold);}
.ar-logpanel{background:var(--bg-panel);border:1px solid var(--hairline);border-radius:12px;
  padding:10px 14px;width:250px;flex:0 0 auto;}
.ar-logpanel h3{margin:0 0 6px;font-family:'Cinzel',serif;font-size:11px;color:var(--gold);
  letter-spacing:1.5px;text-transform:uppercase;}
.ar-log{max-height:130px;overflow-y:auto;font-size:11.5px;line-height:1.7;}
.ar-log .l1{color:var(--gold);} .ar-log .l2{color:#a05fd4;} .ar-log .lsys{color:var(--text-dim);}
.ar-decksel{background:var(--bg-panel-solid);border:1px solid var(--hairline);color:var(--text);
  border-radius:8px;padding:8px 10px;font-size:13.5px;font-family:inherit;font-weight:600;
  max-width:230px;}
.ar-score-chip{background:var(--bg-panel);border:1px solid rgba(244,211,94,.4);border-radius:9px;
  padding:6px 12px;font-size:12.5px;color:var(--text-dim);cursor:help;}
.ar-score-chip b{color:var(--gold);font-size:15px;}

/* ---- deck report weak-link rows ---- */
.ar-weak-row{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:8px;
  cursor:pointer;font-size:13px;}
.ar-weak-row:hover{background:rgba(244,211,94,.08);}
.ar-weak-row img{width:30px;height:30px;border-radius:6px;object-fit:cover;}
.ar-weak-row .wr-nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ar-weak-row .wr-n{color:var(--gold);font-weight:700;font-size:12.5px;}

/* ---- replays ---- */
.ar-rep-list{display:flex;flex-direction:column;gap:8px;max-width:860px;}
.ar-rep-row{display:flex;align-items:center;gap:18px;background:var(--bg-panel);
  border:1px solid var(--hairline);border-radius:12px;padding:12px 18px;cursor:pointer;
  font-size:13.5px;}
.ar-rep-row:hover{border-color:var(--gold);}
.ar-rep-row .rr-when{color:var(--text-dim);min-width:150px;}
.ar-rep-row .rr-turns{color:var(--text-dim);margin-left:auto;}
.ar-repcol{flex:0 0 320px;display:flex;flex-direction:column;gap:10px;
  max-height:clamp(420px,calc(100vh - 215px),1100px);overflow-y:auto;}
.ar-rep-opp{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.ar-teach-verdict{font-size:16px;font-weight:700;margin:4px 0;}
.ar-teach-flag{font-size:12px;color:#ffb444;background:rgba(255,180,68,.1);
  border:1px solid rgba(255,180,68,.35);border-radius:8px;padding:5px 9px;margin-top:6px;}

/* ---- end-of-match breakdown ---- */
.ar-endgrid{display:flex;gap:14px;justify-content:center;}
.ar-endcol{flex:1;min-width:230px;max-width:320px;background:rgba(8,10,20,.5);
  border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;}
.ar-endcol.win{border-color:var(--gold);box-shadow:var(--glow-gold);}
.ec-nm{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);
  font-weight:600;text-align:center;}
.ec-pts{font-family:'Cinzel',serif;font-size:34px;font-weight:700;color:var(--gold);
  text-align:center;line-height:1.15;margin-bottom:8px;}
.ar-endcol.win .ec-pts{text-shadow:0 0 16px rgba(244,211,94,.5);}
.ec-row{display:flex;justify-content:space-between;gap:10px;font-size:13px;margin:4px 0;}
.ec-row b{font-size:14px;}
.ec-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px;
  border-top:1px solid var(--hairline);padding-top:10px;}
.ec-badge{width:64px;text-align:center;}
.ec-badge img{width:52px;height:52px;object-fit:contain;}
.ec-badge div{font-size:9.5px;color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;}
.ec-noecho{font-size:11px;color:var(--text-dim);text-align:center;margin-top:10px;
  border-top:1px solid var(--hairline);padding-top:10px;}

/* ---- ECHO slam: collection badge smashes onto the screen ---- */
.ar-echoslam{position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(6,8,18,.72), rgba(6,8,18,.25) 70%, transparent);
  animation:ar-slam 1.7s cubic-bezier(.2,.9,.3,1) forwards;}
.ar-echoslam .es-badge{width:min(46vmin,460px);height:min(46vmin,460px);object-fit:contain;
  filter:drop-shadow(0 0 70px rgba(244,211,94,.85));}
.ar-echoslam .es-word{font-family:'Cinzel',serif;font-size:min(9vmin,80px);font-weight:700;
  color:var(--gold);letter-spacing:8px;text-transform:uppercase;
  text-shadow:0 0 34px rgba(244,211,94,.85);}
.ar-echoslam .es-sub{font-size:min(3vmin,22px);letter-spacing:10px;color:#fff;
  text-transform:uppercase;opacity:.85;text-shadow:0 0 18px rgba(244,211,94,.7);}
@keyframes ar-slam{
  0%{transform:scale(3.4);opacity:0;}
  11%{transform:scale(1);opacity:1;}
  15%{transform:scale(1.05);}
  19%{transform:scale(1);}
  72%{transform:scale(1);opacity:1;}
  100%{transform:scale(1.12);opacity:0;}
}

/* ---- deck reviewer: 5x5 connection map ---- */
.ar-rv2{position:relative;width:fit-content;margin:0 auto;}
.ar-rv2 svg{position:absolute;inset:0;pointer-events:none;z-index:3;}
.ar-rv2-grid{display:grid;grid-template-columns:repeat(5,150px);gap:30px;}
.ar-rv2-card{position:relative;background:var(--bg-panel);border:2px solid var(--hairline);
  border-radius:10px;padding:5px;background-size:auto,180px;cursor:pointer;
  transition:opacity .15s,border-color .15s,box-shadow .15s;}
.ar-rv2-card img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;display:block;}
.ar-rv2-card .ar-hw{font-size:12.5px;}
.ar-rv2-card .ar-hw span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ar-rv2-card .bt-tier-badge{position:absolute;top:8px;right:8px;z-index:2;}
.ar-rv2-card.focus{border-color:#fff;box-shadow:0 0 14px rgba(255,255,255,.4);}
.ar-rv2-card.p-echo{border-color:var(--gold);}
.ar-rv2-card.p-rhyme{border-color:#c07aff;}
.ar-rv2-card.p-shiri{border-color:var(--east);}
.ar-rv2-card.p-allit{border-color:var(--south);}
.ar-rv2-card.dim{opacity:.22;}
.ar-rv2-flex{display:flex;gap:16px;align-items:flex-start;}
.ar-rv2-left{flex:1;min-width:360px;display:flex;flex-direction:column;gap:12px;}
.ar-rv2-toprow{display:flex;gap:12px;align-items:stretch;}
.ar-rv2-stats{background:var(--bg-panel);border:1px solid var(--hairline);
  border-radius:12px;padding:14px 16px;}
.ar-gizapanel{flex:0 0 250px;text-align:center;background-size:auto,220px;}
.ar-gizapanel img.gp-art{width:100%;border-radius:10px;display:block;margin-bottom:8px;}
.gp-empty{width:100%;aspect-ratio:1/1;border:2px dashed #2c3c78;border-radius:10px;
  margin-bottom:8px;display:flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-size:44px;color:#2c3c78;}
.ar-gizapanel h4{font-family:'Cinzel',serif;color:var(--gold);font-size:14px;letter-spacing:1px;}
.ar-gizapanel .subtab-btn{margin-top:10px;}
.ar-rv2{flex:0 0 auto;}
.ar-coll-modal{display:flex;flex-wrap:wrap;gap:12px;max-height:72vh;overflow-y:auto;justify-content:center;}
.modal-box.ar-wide{width:fit-content;max-width:min(1240px,94vw);min-width:340px;}
.ar-coll-card{width:210px;cursor:default;}
.ar-coll-card.ar-nd{cursor:pointer;}
.ar-coll-card.ar-nd:hover{opacity:.85;border-color:var(--gold);}
.ar-coll-card .ar-hw{font-size:14px;}
.ar-coll-name{font-family:'Cinzel',serif;font-size:14px;font-weight:700;color:var(--text);
  text-align:center;margin:6px 0 2px;}
.ar-rv2-card.ar-nd{opacity:.5;}
.ar-rv2-card.ar-nd img{filter:grayscale(.75);}
.ar-nd-tag{position:absolute;top:8px;left:8px;z-index:2;font-size:9.5px;letter-spacing:.5px;
  text-transform:uppercase;background:rgba(8,10,20,.85);color:var(--text-dim);
  border:1px solid var(--hairline);border-radius:8px;padding:2px 7px;}
.ar-conn-table{width:100%;border-collapse:collapse;margin:8px 0 10px;}
.ar-conn-table th,.ar-conn-table td{padding:9px 6px;text-align:center;font-size:13px;
  border:1px solid #22305e;}
.ar-conn-table thead th{font-size:11px;letter-spacing:.6px;text-transform:uppercase;font-weight:700;}
.ar-conn-table tbody th{font-size:11px;color:var(--text-dim);font-weight:600;
  text-align:right;padding-right:9px;white-space:nowrap;}
.ar-conn-table td{color:#3a4670;}
.ar-conn-table td.on{font-weight:700;font-size:17px;}
.ar-conn-table .t-echo{color:var(--gold);}
.ar-conn-table .t-rhyme{color:#c07aff;}
.ar-conn-table .t-shiri{color:var(--east);}
.ar-conn-table .t-allit{color:var(--south);}
.ar-conn-table .t-any{color:#fff;}
.ar-slot{border:2px dashed #2c3c78;border-radius:10px;display:flex;align-items:center;
  justify-content:center;color:#3a4670;font-size:34px;cursor:pointer;min-height:200px;}
.ar-slot:hover{border-color:var(--gold);color:var(--gold);}
.ar-overlay{position:fixed;inset:0;background:rgba(5,8,18,.97);z-index:60;
  overflow-y:auto;padding:18px 26px 40px;}
.ar-ov-head{display:flex;gap:14px;align-items:center;margin-bottom:14px;flex-wrap:wrap;}
.ar-badges h4{margin:0 0 8px;font-family:'Cinzel',serif;font-size:12px;color:var(--gold);
  letter-spacing:1px;text-transform:uppercase;}
.ar-badge-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px;
  max-height:680px;overflow-y:auto;}
.ar-badge{text-align:center;cursor:pointer;background:rgba(8,10,20,.5);
  border:1px solid var(--hairline);border-radius:14px;padding:14px 10px 12px;}
.ar-badge:hover{border-color:var(--gold);box-shadow:var(--glow-gold);}
.ar-badge.ar-glow{border-color:var(--gold);box-shadow:0 0 22px rgba(244,211,94,.55);
  background:rgba(244,211,94,.08);}
.ar-badge img{width:150px;height:150px;object-fit:contain;}
.ar-badge .bw{font-size:14.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);margin-top:4px;}
.ar-badge .bc{font-size:12px;color:var(--gold);}
.ar-coll-grid{display:flex;flex-wrap:wrap;gap:10px;}
/* pack reveal: word already part of a collection you're building glows pink */
.word-chip.wc-owned{border-color:rgba(255,111,198,.7)!important;
  box-shadow:0 0 12px rgba(255,111,198,.5);}
.ar-rv2-stats h4{margin:0 0 8px;font-family:'Cinzel',serif;font-size:12px;color:var(--gold);
  letter-spacing:1px;text-transform:uppercase;}
.ar-rv2-words{font-size:13.5px;line-height:1.6;color:#cfcaba;background:rgba(8,10,20,.5);
  border-radius:7px;padding:6px 8px;margin-bottom:10px;}
.ar-rv2-words b{color:#fff;} .ar-rv2-words u{text-decoration-color:var(--gold);}
.ar-rv2-stat{font-size:13px;margin-bottom:8px;}
.ar-rv2-stat b{font-size:17px;}
.ar-rv2-sub{font-size:11px;color:var(--text-dim);margin-top:1px;}
.ar-rv2-note{font-size:11px;color:var(--text-dim);line-height:1.6;border-top:1px solid var(--hairline);
  padding-top:8px;margin-top:4px;}
.ar-rv2-legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--text-dim);
  margin-bottom:12px;flex-wrap:wrap;}
.ar-rv2-key{display:inline-flex;align-items:center;gap:6px;}
.ar-rv2-key i{width:20px;height:3px;border-radius:2px;display:inline-block;}

/* ---- deck reviewer ---- */
.ar-subhead{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;}
.ar-rv-title{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;font-size:14px;}
.ar-rv-sum{color:var(--text-dim);font-size:12px;}
.ar-rv-letters{display:grid;grid-template-columns:repeat(26,1fr);gap:3px;margin-bottom:12px;}
.ar-rv-cell{background:var(--bg-panel);border:1px solid var(--hairline);border-radius:7px;
  text-align:center;padding:4px 0 2px;cursor:pointer;min-width:0;}
.ar-rv-cell .rl{font-family:'Cinzel',serif;font-size:13px;color:var(--gold);}
.ar-rv-cell .rc{font-size:10px;color:var(--text-dim);min-height:13px;}
.ar-rv-cell.empty{opacity:.25;cursor:default;}
.ar-rv-cell.active{border-color:var(--gold);box-shadow:var(--glow-gold);}
.ar-rv-body{display:flex;gap:14px;align-items:flex-start;}
.ar-rv-side{flex:0 0 214px;background:var(--bg-panel);border:1px solid var(--hairline);
  border-radius:12px;padding:10px 12px;max-height:calc(100vh - 330px);overflow-y:auto;}
.ar-rv-side h4{margin:0 0 6px;font-family:'Cinzel',serif;font-size:11px;color:var(--gold);
  letter-spacing:1.5px;text-transform:uppercase;}
.ar-rv-row{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;
  padding:4px 6px;border-radius:7px;cursor:pointer;color:var(--text);}
.ar-rv-row b{color:var(--gold);}
.ar-rv-row:hover{background:rgba(244,211,94,.08);}
.ar-rv-row.active{background:rgba(244,211,94,.15);outline:1px solid rgba(244,211,94,.4);}
.ar-rv-none{color:var(--text-dim);font-size:12px;line-height:1.6;}
.ar-rv-cards{flex:1;display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;}
.ar-rv-card{position:relative;width:134px;background:var(--bg-panel);border:2px solid var(--hairline);
  border-radius:10px;padding:5px;background-size:auto,180px;transition:opacity .15s;}
.ar-rv-card img{width:100%;border-radius:6px;display:block;}
.ar-rv-card .bt-tier-badge{position:absolute;top:8px;right:8px;}
.ar-rv-card.dim{opacity:.22;}
.ar-rv-card .ar-hw{font-size:12.5px;}
.ar-rv-word.fam{color:var(--gold);}
.ar-rv-word.hl{background:rgba(244,211,94,.22);border-radius:4px;padding:0 3px;}

.ar-prematch{max-width:920px;margin:48px auto;text-align:center;background:var(--bg-panel);
  border:1px solid var(--hairline);border-radius:18px;padding:46px 56px 50px;}
.ar-prematch h3{font-size:30px !important;letter-spacing:3px !important;margin-bottom:6px !important;}
.ar-prematch p{font-size:15px !important;}
.ar-prematch .subtab-btn{font-size:16px;}
.ar-optrow-label{font-size:13px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-dim);font-weight:600;margin:22px 0 10px;}
.ar-optrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.ar-opt{display:inline-flex;flex-direction:column;align-items:center;line-height:1.3;
  padding:13px 26px;border-radius:12px;}
.ar-opt .ar-opt-sub{font-size:12px;font-weight:400;color:var(--text-dim);}
.ar-opt.active .ar-opt-sub{color:#5c4a10;}
#arStart{padding:13px 34px;margin-top:20px !important;}
.ar-prematch h3{font-family:'Cinzel',serif;color:var(--gold);letter-spacing:1.5px;margin:0 0 12px;}
.ar-prematch p{color:var(--text-dim);font-size:13px;line-height:1.7;}
@media (max-width: 1000px){
  .ar-builder{flex-direction:column;}
  .ar-deckpanel{position:static;width:100%;flex:none;}
}