/* Draft card v3 (docs/design/DRAFT-CARD-V3.md). Loaded after layout-v15/v18 + skill-text.css: overrides by specificity, v15 stays untouched.
   Six fixed zones under the art so three offers line up row for row. */
:root{--dc-ink:#3a2410;--dc-text:#4a3216;--dc-sub:#7a5a30;--dc-val:#1f9a4a;--dc-up:#1f7a3a;--dc-trig:#8a4b12;--dc-pact:#c0262d;
  --dc-art:128px;--dc-title:26px;--dc-chips:22px;--dc-effect:64px;--dc-rank:22px;--dc-strip:46px;--dc-gap:6px;--dc-pad:12px;--dc-col:96px;--dc-row:162px;--dc-fs:15px}
.sk-ic[hidden]{display:none}
.trig{color:#8a4b12;font-weight:800}
.dc-text .trig,.sk-text .trig{color:var(--dc-trig)}

/* ---- card shell (landscape) ---- */
#choiceButtons .card{flex:1 1 0;max-width:250px;min-width:0;min-height:0;gap:var(--dc-gap);padding:0 0 var(--dc-pad)}
#choiceButtons .card .skill-art.dc-art{height:var(--dc-art)!important;padding:6px;border-radius:7px 7px 4px 4px;overflow:hidden;position:relative}
#choiceButtons .card .skill-art.dc-art img,#choiceButtons .card .skill-art.dc-art svg{max-height:calc(var(--dc-art) - 12px)}
#choiceButtons .card .skill-art.dc-art svg.skill-icon{width:auto;height:calc(var(--dc-art) - 20px);max-width:100%}
#choiceButtons .card .cross-chip{position:absolute;left:8px;top:8px;margin:0;z-index:3}
#choiceButtons .card .pact-ribbon~.cross-chip{top:38px}
#choiceButtons .card .sk-body.dc-body{margin:0 var(--dc-pad);padding:0;gap:var(--dc-gap);flex:1 1 auto;min-height:0;display:flex;flex-direction:column;text-align:left}
#choiceButtons .card.Fusion .sk-body.dc-body{padding:0 0 0 0}

/* Z2 */
.dc-title{height:var(--dc-title);flex:none;display:flex;align-items:center;gap:8px;min-width:0}
.dc-name{flex:1;min-width:0;font-size:17px;font-weight:800;line-height:1.25;color:var(--dc-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-title .sk-rar{flex:none}
/* Z3 */
.dc-chips{height:var(--dc-chips);flex:none;display:flex;flex-wrap:nowrap;gap:4px;align-items:center;overflow:hidden}
.dc-chip{flex:0 1 auto;min-width:0;display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:8px;font-size:11.5px;font-weight:700;line-height:1.5;white-space:nowrap;background:rgba(58,36,16,.1);color:var(--dc-sub);overflow:hidden;text-overflow:ellipsis}
.dc-chip.dc-trig{color:var(--dc-trig);background:rgba(138,75,18,.12);flex-shrink:0}
.dc-chip .sk-ic{width:14px;height:14px}.dc-chip .sk-ic img{border-radius:50%}
/* Z4 */
.dc-effect{height:var(--dc-effect);flex:none;display:flex;flex-direction:column;overflow:hidden;color:var(--dc-text)}
.dc-text{font-size:var(--dc-fs);line-height:1.4;font-weight:500;display:block;max-height:4.2em;overflow:hidden;overflow-wrap:anywhere}
.dc-text.dc-text2{max-height:2.8em}
.dc-text em{font-style:normal;font-weight:900;font-size:17px;color:var(--dc-val)}
#choiceButtons .card .dc-effect b.trig,#choiceButtons .card .dc-effect .trig{font-size:inherit;margin:0;color:var(--dc-trig);font-weight:800;line-height:inherit}
.dc-pact{font-size:12.5px;line-height:1.3;color:var(--dc-pact);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none}
/* Z5 */
.dc-rank{height:var(--dc-rank);flex:none;display:flex;align-items:center;gap:7px;min-width:0;font-size:12.5px;color:var(--dc-sub);overflow:hidden}
.dc-pill{flex:none;padding:0 9px;border-radius:8px;border:1.5px solid #3b2208;font-size:11.5px;font-weight:800;line-height:1.55;white-space:nowrap}
.dc-new{background:#7fd69b;color:#0b3a22}.dc-up{background:#ffc84a;color:#4a2300}.dc-max{background:#d9d2c0;color:#4a3b22}
.dc-rank-t{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.dc-rank-t em{font-style:normal;font-weight:800;color:var(--dc-up)}
#choiceButtons .card .dc-rank .fusion-foot{margin:0;font-size:12px;font-weight:700;color:var(--dc-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* Z6 */
.dc-impact{--sc-dk:color-mix(in srgb,var(--school,#8a5410) 45%,#2a1808);height:var(--dc-strip);flex:none;display:flex;align-items:center;gap:7px;padding:0 8px;border-radius:9px;overflow:hidden;background:rgba(58,36,16,.08);border:1.5px solid color-mix(in srgb,var(--school,#8a5410) 55%,#8a5410)}
.di-medal{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:color-mix(in srgb,var(--school,#8a5410) 22%,#fff8e4);border:2px solid var(--school,#8a5410)}
.di-medal .sk-ic{width:100%;height:100%}.di-medal .sk-ic img{border-radius:50%}
.di-none{opacity:.45}
.di-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.di-l1{display:flex;align-items:center;gap:6px;min-width:0;font-size:12.5px;font-weight:800;line-height:1.3;color:var(--sc-dk)}
.di-l1>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.di-l2{font-size:12px;line-height:1.3;color:var(--dc-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.di-none .di-l2,.di-none+.di-text .di-l2{opacity:.65}
.di-pips{flex:none;display:inline-flex;gap:2px}
.di-pips i{width:6px;height:6px;border-radius:2px;border:1px solid var(--sc-dk);background:transparent}
.di-pips i.on{background:var(--sc-dk)}
.di-pips i.next{border-style:dashed;animation:dc-pulse 1.1s ease-in-out infinite}
.di-unlock{display:inline-block;padding:0 6px;margin-right:2px;border-radius:6px;background:#7fd69b;color:#0b3a22;border:1px solid #2f8f6a;font-weight:800;font-size:11px;animation:dc-pulse 1.1s ease-in-out infinite}
.dc-impact.di-vow{box-shadow:inset 0 0 0 1px #2f8f6a}
@keyframes dc-pulse{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.di-pips i.next,.di-unlock{animation:none}}

/* ---- 800x470 landscape ---- */
@media (orientation:landscape) and (max-height:620px){
  :root{--dc-art:76px;--dc-effect:54px;--dc-fs:13.5px;--dc-pad:10px;--dc-gap:5px}
  .dc-text em{font-size:15px}
  
}
/* ---- portrait: art column left, six zones stacked in column 2 ---- */
@media (orientation:portrait){
  :root{--dc-title:22px;--dc-chips:20px;--dc-effect:54px;--dc-rank:18px;--dc-strip:36px;--dc-gap:3px;--dc-fs:14px;--dc-row:174px}
  #choiceButtons .card{flex:none;max-width:none;height:var(--dc-row);min-height:0;padding:0 10px 0 0;grid-template-columns:var(--dc-col) minmax(0,1fr);grid-template-rows:1fr;align-items:stretch}
  #choiceButtons .card .skill-art.dc-art{grid-column:1;grid-row:1;height:auto!important;align-self:stretch;border-radius:7px 0 0 7px;padding:6px}
  #choiceButtons .card .skill-art.dc-art img,#choiceButtons .card .skill-art.dc-art svg{max-height:84px}
  #choiceButtons .card .skill-art.dc-art svg.skill-icon{height:auto;width:100%;max-height:84px}
  #choiceButtons .card .sk-body.dc-body{grid-column:2;grid-row:1;margin:0;padding:6px 0;justify-content:center;gap:var(--dc-gap)}
  .dc-text{line-height:1.3}.dc-text em{font-size:15px}
  .dc-name{font-size:16px}
  .dc-impact{padding:0 6px;gap:5px}
  .di-medal{width:24px;height:24px;border-width:1.5px}
  #choiceButtons .card .cross-chip{top:auto;bottom:6px;left:6px}
}
/* landscape: the reroll / skip button leaves the card row (top right of the dialog) so three cards keep their 250px */
@media (orientation:landscape){
  #choices:not(.camp){position:relative}
  #choices:not(.camp) #choiceButtons .draft-act{position:absolute;top:14px;right:18px;margin:0;z-index:2}
}
/* skip button: smaller grey secondary */
#choiceButtons .draft-act.skip{padding:6px 18px;font-size:13px;opacity:.9}
/* Fusion offers: the ornate frame overlay would cover the fixed zones, so the draft card keeps the gold border + glow only */
#choiceButtons .card.Fusion::after{display:none}
#choiceButtons .card.Fusion{box-shadow:0 0 0 2px #3b2208,0 0 30px rgba(255,200,90,.6),0 12px 26px rgba(0,0,0,.55)}
/* the trigger phrase runs inline with the sentence everywhere (older .card b rules make <b> a block) */
.sk-text b.trig,#details .card b.trig,#choiceButtons .card .dc-effect b.trig{display:inline;margin:0;padding:0;font-size:inherit;line-height:inherit;color:var(--dc-trig);font-weight:800}

/* IDLE-V1 auto-pilot: the pre-selected card is highlighted and ribboned for 2 s before it is taken. */
#choiceButtons .card.dc-auto,#choiceButtons .camp-option.dc-auto,#choiceButtons .draft-act.dc-auto{position:relative;outline:4px solid #2f9a3a;outline-offset:-2px;box-shadow:0 0 18px rgba(63,190,80,.6)}
.dc-auto-ribbon{position:absolute;top:6px;left:6px;z-index:3;display:inline-flex;align-items:center;gap:3px;padding:2px 8px;border-radius:8px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(180deg,#3fae4a,#1f7a2a);border:2px solid #0d3a14;pointer-events:none}
.dc-auto-ribbon img{width:14px;height:14px}
.auto-note{font-size:.6em;font-weight:700;color:#8fe39a;white-space:nowrap}
#choiceButtons .draft-act.auto-pause{padding:6px 14px;font-size:12px;opacity:.95}