/* WinnerLudo Board Designer styles — navy+gold Ludo-King style */
.ds-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start;margin-top:22px}
#board-holder{background:#fff;border-radius:22px;padding:14px;box-shadow:0 18px 50px rgba(0,0,0,.5),0 0 0 4px var(--lk-gold)}
#board-holder svg{display:block;width:100%;height:auto;border-radius:12px}
#board-holder.pop svg{animation:ds-pop .45s ease}
@keyframes ds-pop{0%{transform:scale(.96) rotate(-.6deg)}60%{transform:scale(1.012)}100%{transform:scale(1)}}
.ds-actions{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.lk-btn.small{font-size:.95rem;padding:9px 20px}
.lk-btn.ghost{background:linear-gradient(180deg,#2b3370,#1a2049);color:#fff;border:3px solid var(--lk-gold);box-shadow:0 4px 0 #0a0d24}
.lk-btn:disabled{opacity:.6;cursor:wait}

.ds-panel{background:linear-gradient(170deg,#232a63,#141a3d);border:3px solid var(--lk-gold);border-radius:22px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.ds-toggle{display:none;width:100%;background:none;border:none;color:var(--lk-gold2);font-family:'Baloo 2',system-ui,sans-serif;font-weight:800;font-size:1.15rem;padding:14px;cursor:pointer}
.ds-controls{padding:20px}
.ds-panel.collapsed .ds-controls{display:none}
.ds-group{margin-bottom:18px}
.ds-group>h4{color:#fff;font-size:1rem;margin-bottom:10px}
.ds-group>h4 small{color:#9aa3c7;font-weight:600}
.ds-colors{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ds-color{display:flex;align-items:center;gap:10px;background:#0f1433;border:2px solid #ffffff22;border-radius:12px;padding:8px 10px;cursor:pointer}
.ds-color span{font-size:.85rem;font-weight:700;color:#dfe4f5;text-transform:capitalize}
.ds-swatch{width:34px;height:34px;border-radius:10px;border:2px solid #ffffff55;flex:none}
.ds-color input[type=color]{position:absolute;opacity:0;width:0;height:0}
.ds-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ds-preset{border:2px solid #ffffff2c;background:#0f1433;color:#fff;border-radius:12px;padding:8px 4px;font-size:.8rem;font-weight:700;cursor:pointer;font-family:inherit}
.ds-preset .dots{display:flex;justify-content:center;gap:3px;margin-bottom:5px}
.ds-preset .dots i{width:14px;height:14px;border-radius:50%;border:1px solid #ffffff66}
.ds-preset:hover{border-color:var(--lk-gold2)}
.ds-preset.active{border-color:var(--lk-gold2);box-shadow:0 0 0 2px var(--lk-gold2)}
.ds-tokens{display:flex;gap:8px}
.ds-tokens label{flex:1;text-align:center;background:#0f1433;border:2px solid #ffffff2c;color:#cfd4e8;border-radius:12px;padding:9px 4px;font-size:.8rem;font-weight:700;cursor:pointer}
.ds-tokens input{position:absolute;opacity:0}
.ds-tokens label:has(input:checked){border-color:var(--lk-gold2);color:#fff;box-shadow:0 0 0 2px var(--lk-gold2)}
.ds-controls input[type=text]{width:100%;padding:11px 12px;border-radius:12px;border:2px solid #ffffff2c;background:#0f1433;color:#fff;font-size:.95rem;font-family:inherit;margin-bottom:8px}
.ds-controls input[type=text]:focus{border-color:var(--lk-gold2);outline:none}
.ds-yard-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ds-yard-grid input{margin-bottom:0}
.ds-check{display:flex;align-items:center;gap:10px;color:#dfe4f5;font-weight:600;font-size:.92rem;margin-top:10px;cursor:pointer}
.ds-check input{width:20px;height:20px;accent-color:var(--lk-gold)}
.ds-wide{width:100%;margin-top:4px}

.ds-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:20px}
.ds-card{background:var(--lk-card);border:2px solid #ffffff1e;border-radius:18px;padding:12px;text-align:center;transition:transform .12s}
.ds-card:hover{transform:translateY(-4px);border-color:var(--lk-gold)}
.ds-thumb{background:#fff;border-radius:12px;padding:6px;margin-bottom:10px}
.ds-thumb svg{display:block;width:100%;height:auto}
.ds-card h3{color:#fff;font-size:1.05rem}
.ds-card p{color:#9aa3c7;font-size:.82rem;margin:2px 0 10px}

.ds-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:20px}
.ds-step{background:var(--lk-card);border:2px solid #ffffff1e;border-radius:18px;padding:22px;text-align:center}
.ds-step .n{display:inline-flex;width:52px;height:52px;border-radius:50%;background:linear-gradient(180deg,var(--lk-gold2),var(--lk-gold));color:#3a2b00;font-weight:800;font-size:1.4rem;align-items:center;justify-content:center;margin-bottom:10px;box-shadow:0 4px 0 var(--lk-gold-dark)}
.ds-step h3{color:#fff;margin-bottom:6px}
.ds-step p{color:#c6cdea;font-size:.92rem}

#print-area{display:none}

/* ---------- print: board only, A3-friendly ---------- */
@page{size:A3 landscape;margin:8mm}
@media print{
  body{background:#fff!important}
  body>*{display:none!important}
  #print-area{display:block!important}
  #print-area svg{width:100%;height:auto;display:block}
}

@media (max-width:900px){
  .ds-layout{grid-template-columns:1fr}
  .ds-toggle{display:block}
  .ds-panel{order:2}
}

/* in-article designer CTA box */
.ds-cta-box{background:linear-gradient(160deg,#232a63,#141a3d);border:3px solid var(--lk-gold);border-radius:18px;padding:22px;margin:26px 0;color:#fff}
.ds-cta-box h3{color:var(--lk-gold2);margin-bottom:8px;font-size:1.25rem}
.ds-cta-box p{color:#c6cdea;margin-bottom:10px}
.ds-cta-box .btn{display:inline-block;background:linear-gradient(180deg,var(--lk-gold2),var(--lk-gold));color:#3a2b00!important;font-weight:800;border-radius:12px;padding:11px 26px;text-decoration:none;box-shadow:0 4px 0 var(--lk-gold-dark)}
body.lk-page .ds-cta-box a.btn{color:#3a2b00}

/* ================= v1.1 — professional designer redesign ================= */
/* refined group cards */
.ds-group{background:#ffffff08;border:1.5px solid #ffffff16;border-radius:16px;padding:15px 14px;
  margin-bottom:14px;box-shadow:0 4px 14px rgba(0,0,0,.22);transition:border-color .2s,box-shadow .2s}
.ds-group:hover{border-color:#F5B30144}
.ds-group>h4{display:flex;align-items:center;gap:8px;color:#fff;font-size:1.02rem;margin-bottom:12px;
  padding-bottom:8px;border-bottom:1px solid #ffffff14}
.ds-group>h4 small{color:#9aa3c7;font-weight:600;font-size:.78rem}
/* segmented control */
.ds-seg{display:flex;background:#0b0f28;border:2px solid #ffffff1c;border-radius:14px;padding:4px;gap:4px}
.ds-seg button{flex:1;border:none;background:transparent;color:#c6cdea;font-family:inherit;font-weight:700;
  font-size:.82rem;padding:10px 4px;border-radius:10px;cursor:pointer;transition:all .18s;white-space:nowrap}
.ds-seg button:hover{color:#fff;background:#ffffff10}
.ds-seg button.on{background:linear-gradient(180deg,#FFD23F,#F5B301);color:#3a2b00;
  box-shadow:0 3px 0 #9a6f00,inset 0 1px 2px rgba(255,255,255,.6)}
/* color swatches with polish */
.ds-color{transition:transform .15s,border-color .15s,box-shadow .15s;position:relative;overflow:hidden}
.ds-color:hover{transform:translateY(-2px);border-color:#FFD23F;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.ds-swatch{box-shadow:inset 0 2px 4px rgba(255,255,255,.4),inset 0 -2px 4px rgba(0,0,0,.25)}
.ds-color input[type=color]{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
/* presets with checkmark */
.ds-preset{position:relative;transition:transform .15s,border-color .15s,box-shadow .15s}
.ds-preset:hover{transform:translateY(-2px)}
.ds-preset.active{border-color:var(--lk-gold2);box-shadow:0 0 0 2px var(--lk-gold2),0 6px 14px rgba(0,0,0,.4)}
.ds-preset.active::after{content:'✓';position:absolute;top:-9px;right:-7px;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(180deg,#FFD23F,#F5B301);color:#3a2b00;font-size:.8rem;font-weight:900;
  display:grid;place-items:center;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.ds-preset .dots i{box-shadow:inset 0 1px 2px rgba(255,255,255,.5)}
/* token radio cards with checkmark */
.ds-tokens{flex-wrap:wrap}
.ds-tokens label{position:relative;transition:transform .15s,border-color .15s}
.ds-tokens label:hover{transform:translateY(-2px);border-color:#FFD23F}
.ds-tokens label .tk{position:relative;z-index:1}
.ds-tokens label:has(input:checked)::after{content:'✓';position:absolute;top:-9px;right:-5px;width:22px;height:22px;
  border-radius:50%;background:linear-gradient(180deg,#FFD23F,#F5B301);color:#3a2b00;font-size:.75rem;font-weight:900;
  display:grid;place-items:center;border:2px solid #fff}
/* color rows for text colors */
.ds-colorrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;
  background:#0b0f28;border:2px solid #ffffff1c;border-radius:12px;padding:8px 12px;cursor:pointer}
.ds-colorrow span{font-size:.88rem;font-weight:700;color:#dfe4f5}
.ds-colorrow input[type=color]{width:46px;height:32px;border:2px solid #ffffff44;border-radius:8px;
  background:none;padding:2px;cursor:pointer}
/* dice preview */
.ds-dice-prev{display:flex;align-items:center;gap:12px;justify-content:center;margin-top:12px;
  background:#0b0f28;border:2px dashed #F5B30144;border-radius:14px;padding:12px}
.ds-dice-prev svg{filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.ds-dice-prev .dice-cap{color:#c6cdea;font-weight:700;font-size:.9rem;text-transform:capitalize}
/* panel header polish */
.ds-panel{box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.ds-controls{padding:16px}
.ds-actions .lk-btn{min-width:170px}
/* board holder frame polish */
#board-holder{position:relative;transition:box-shadow .25s}
#board-holder:hover{box-shadow:0 22px 60px rgba(0,0,0,.6),0 0 0 4px var(--lk-gold),0 0 34px rgba(245,179,1,.35)}

/* ================= v1.1 — DAY theme for designer ================= */
html[data-theme="day"] #board-holder{box-shadow:0 18px 44px rgba(120,90,10,.25),0 0 0 4px #F5B301;background:#fff}
html[data-theme="day"] .ds-panel{background:#ffffff;border:3px solid #F5B301;box-shadow:0 14px 36px rgba(120,90,10,.16)}
html[data-theme="day"] .ds-toggle{color:#8a5c00}
html[data-theme="day"] .ds-group{background:#fffaf0;border-color:#f0e2c4;box-shadow:0 4px 12px rgba(120,90,10,.08)}
html[data-theme="day"] .ds-group:hover{border-color:#F5B30188}
html[data-theme="day"] .ds-group>h4{color:#1d2433;border-bottom-color:#f0e2c4}
html[data-theme="day"] .ds-group>h4 small{color:#8a8a8a}
html[data-theme="day"] .ds-seg{background:#f4efe2;border-color:#e5d9bd}
html[data-theme="day"] .ds-seg button{color:#5b6474}
html[data-theme="day"] .ds-seg button:hover{color:#1d2433;background:#00000008}
html[data-theme="day"] .ds-color{background:#fffaf0;border-color:#e5d9bd}
html[data-theme="day"] .ds-color span{color:#1d2433}
html[data-theme="day"] .ds-preset{background:#fffaf0;border-color:#e5d9bd;color:#1d2433}
html[data-theme="day"] .ds-preset:hover{border-color:#F5B301}
html[data-theme="day"] .ds-tokens label{background:#fffaf0;border-color:#e5d9bd;color:#5b6474}
html[data-theme="day"] .ds-tokens label:has(input:checked){color:#1d2433}
html[data-theme="day"] .ds-controls input[type=text]{background:#fffaf0;border-color:#e5d9bd;color:#1d2433}
html[data-theme="day"] .ds-controls input[type=text]::placeholder{color:#a09a89}
html[data-theme="day"] .ds-check{color:#1d2433}
html[data-theme="day"] .ds-colorrow{background:#fffaf0;border-color:#e5d9bd}
html[data-theme="day"] .ds-colorrow span{color:#1d2433}
html[data-theme="day"] .ds-dice-prev{background:#fffaf0;border-color:#F5B30166}
html[data-theme="day"] .ds-dice-prev .dice-cap{color:#5b6474}