/* TRIAL (local only, card_creator_real_trial.html): CARD CREATOR: START FROM A REAL CARD -- the picker (see card_creator_real.js). It wears the save pop-up's look
   (.svp-ov / .svp / .svp-b), so only what is new is here. */
.toolbar-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.rc-open{font-size:.72rem !important;padding:7px 14px !important;}
.rc{width:min(860px,100%);}
.rc-lede{margin:0 0 12px;font:500 .9rem/1.45 'Inter',sans-serif;color:#cfd5e2;}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:12px 8px;margin:14px 0 6px;
  max-height:46vh;overflow:auto;padding:6px 4px 10px;}
.rc-it{display:flex;justify-content:center;background:none;border:0;padding:4px 0;cursor:pointer;border-radius:10px;
  transition:transform .14s,background .14s;}
.rc-it:hover{transform:translateY(-3px);}
.rc-it.sel{background:rgba(var(--theme-rgb),.18);box-shadow:inset 0 0 0 1.5px var(--theme-bright,var(--theme));}
/* the framed tile (game_framed.js markup): the creator's own .ft-slot rules size only its own thumbnail */
.rc-grid .ft-slot{position:relative;flex:0 0 auto;}
.rc-grid .ft-slot *{pointer-events:none;}
.rc-grid .ft-slot .ft-art{position:absolute;width:100.5%;height:100.5%;top:-6%;left:4%;object-fit:cover;z-index:4;
  clip-path:polygon(14% 0,86% 0,100% 15%,100% 85%,86% 100%,14% 100%,0 85%,0 15%);}
.rc-grid .ft-slot .fx{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;}
.rc-grid .ft-slot .fx-spin,.rc-grid .ft-slot .fx-seza{z-index:2;}.rc-grid .ft-slot .fx-thunder{z-index:3;}
/* the creator dims and moves ITS OWN thumbnail's spin (.5, translateY 6%) and shrinks its SEZA glow (.9); the picker's
   tiles are the site's ordinary ones, drawn like detail.html's (same frame, badges and effects) */
.rc-grid .ft-slot .fx-spin,.rc-grid .ft-slot .fx-thunder,.rc-grid .ft-slot .fx-seza{opacity:1;transform:none;}
.rc-grid .ft-slot .ft-type,.rc-grid .ft-slot .ft-rarity,.rc-grid .ft-slot .ft-ezaseza{z-index:6;}
.rc-more{display:flex;justify-content:center;margin:4px 0 8px;}
.rc-more [hidden]{display:none;}
.rc-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;margin-top:6px;border-radius:10px;
  background:#0d1017;border:1px solid rgba(var(--theme-rgb),.45);}
.rc-pick[hidden]{display:none;}
.rc-who{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px;}
.rc-who b{font:400 1.05rem 'Black Han Sans',sans-serif;font-style:italic;color:#fff;}
.rc-who span{font:600 .82rem 'Rajdhani',sans-serif;color:#aab2c2;}
.rc-tiers{display:flex;gap:8px;}
.rc-tiers .svp-b.on::before{background:linear-gradient(180deg,rgba(var(--theme-rgb),.45),rgba(var(--theme-rgb),.16)),#0d1017;
  border-color:var(--theme-bright,var(--theme));box-shadow:0 0 12px rgba(var(--theme-rgb),.55);}
@media (max-width:600px){
  .rc-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));max-height:42vh;}
  .rc-pick{gap:10px;}
  #rcGo{width:100%;}
}
/* search.js wraps this input in the house search plate, so the save pop-up's input box must not draw a second box */
.sb-wrap #rcSearch{background:none !important;border:0 !important;box-shadow:none !important;border-radius:0;}
/* the editor's sticky title row (CARD CREATOR + START FROM A REAL CARD) was z-index 3 while the link / category chips'
   remove buttons are 5 (and the thumbnail's badges 6-8), so scrolling the editor slid every ✕ over the row */
.cc-scroll > .toolbar-top{z-index:20;}
.rc-passive{border:0;padding:0;background:transparent;color:var(--text,#f3f4f8);width:min(720px,94vw);max-height:88vh;}
.rc-passive::backdrop{background:rgba(0,0,0,.75);}
.rc-passive>.svp{width:auto;max-height:86vh;overflow:auto;}
.rc-passive-who{font:700 1.1rem Rajdhani,sans-serif;color:var(--theme-bright,var(--theme));margin:12px 0;}
.rc-passive-name{font:700 1.1rem Rajdhani,sans-serif;margin:14px 0 8px;}
.rc-passive-body{font:600 1rem/1.55 Rajdhani,sans-serif;max-height:47vh;overflow:auto;}
.rc-passive-body>div{margin:4px 0;}
.rc-passive-body img{height:1.1em;width:auto;vertical-align:middle;}
.rc-passive-body .passive-condition{color:#ffad43;font-weight:700;margin-top:12px;}
.rc-passive-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}

/* a real card's thumb gets the card page's art box, so it can break out over the frame (see isFree() in the .js) */
.rc-free .ft-slot .ft-art-clip{width:100.5%;height:100.5%;top:-6%;left:4%;}

/* START FROM A REAL CARD and its pop-up take the SITE colour, not the card's type (owner, 5 Nov 2026) */
#rcOv,#rcOpen{--theme-rgb:var(--acc-rgb,255,216,74);--theme:var(--acc,#FFD84A);--theme-bright:var(--acc,#FFD84A);
  --theme-border:rgba(var(--acc-rgb,255,216,74),.45);--theme-glow:rgba(var(--acc-rgb,255,216,74),.6);}
#rcOpen{color:var(--acc,#FFD84A) !important;}
#rcOpen::before{background:linear-gradient(180deg,rgba(var(--acc-rgb,255,216,74),.16),rgba(var(--acc-rgb,255,216,74),.04)),#0b0d12;
  border:1.5px solid rgba(var(--acc-rgb,255,216,74),.6);box-shadow:0 0 10px rgba(var(--acc-rgb,255,216,74),.25);}
#rcOpen:hover{color:#fff !important;}
#rcOpen:hover::before{border-color:var(--acc,#FFD84A);box-shadow:0 0 16px rgba(var(--acc-rgb,255,216,74),.55);}
/* ...and the pop-up is darker: the house near-black panel */
#rcOv{background:rgba(0,0,0,.72);}
#rcOv .svp.rc{background:linear-gradient(180deg,#0f1218,#07080b);border-color:rgba(var(--acc-rgb,255,216,74),.45);
  box-shadow:0 22px 60px rgba(0,0,0,.8),inset 0 0 30px rgba(var(--acc-rgb,255,216,74),.05);}
#rcOv .rc-pick{background:#06070a;}
#rcOv .svp-x{background:#07080b;}
#rcOv .svp-b.ghost::before{background:#07080b;}

/* the TRANSFORMATIONS heading in the preview is the card's TYPE colour (owner, 5 Nov 2026), not the site colour */
.pv-forms-head{color:var(--theme-bright,var(--theme)) !important;}