/* Neo Campus Cube draft deck-builder — shared by solo and multiplayer */
body:has(.cube-builder-ui){max-width:1600px}
.cube-builder-ui{color:#eef4ff;font-family:system-ui,sans-serif}
.cube-builder-ui *{box-sizing:border-box}
.cb-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.cb-header h2{font-size:clamp(25px,3vw,36px);line-height:1.15;margin:4px 0 8px;color:#f5f7ff}
.cb-header p{margin:0;color:#b9cbe7;font-size:14px}
.cb-eyebrow{color:#79a8e8;font-size:11px;letter-spacing:1.4px;font-weight:800}
.cb-progress{background:#142d54;border:1px solid #31578b;padding:15px 20px;border-radius:15px;min-width:210px;text-align:center}
.cb-progress strong{display:block;font-size:22px}
.cb-progress small{display:block;color:#bbcceb;font-size:12px;margin-top:7px}
.cb-progress small.ready{color:#64e9ad}
.cb-track{height:10px;background:#0a1932;border-radius:20px;overflow:hidden;margin-top:8px}
.cb-track div{height:100%;width:0;background:linear-gradient(90deg,#31c59b,#9bf7b7);border-radius:20px;transition:width .15s}
.cb-workspace{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(220px,.8fr) minmax(275px,.95fr);align-items:start;gap:13px}
.cb-library,.cb-preview,.cb-selected{background:#101e3a;border:1px solid #2a4779;border-radius:15px;padding:13px;min-width:0}
.cb-preview,.cb-selected{position:sticky;top:12px}
.cb-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:14px}
.cb-tabs{display:flex;flex-wrap:wrap;gap:5px}
.cb-tab{background:#182c50;border:1px solid #35517a;border-radius:9px;color:#bcd1f3;padding:9px 11px;font-size:12px;cursor:pointer}
.cb-tab.active{background:#244777;border-color:#81b3fb;color:white;font-weight:750}
.cb-tab:hover,.cb-tab:focus-visible{border-color:#a3c7fb}
.cb-search{display:flex;gap:6px;flex-wrap:wrap}
.cb-search input,.cb-search select{width:auto;min-width:0;max-width:180px;background:#0a1a35;color:#e8f1ff;border:1px solid #3c608d;border-radius:8px;font:inherit;font-size:12px;padding:9px}
.cb-search input{max-width:125px}
.cb-category{margin:0 0 17px}
.cb-category h3{display:flex;gap:7px;align-items:center;color:#d5e6ff;margin:0 0 10px;font-size:17px}
.cb-pill{display:inline-flex;border-radius:100px;padding:3px 9px;background:#284672;color:#c8dfff;font-size:12px;font-weight:750;margin-left:2px}
.cb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:9px}
.cb-tile{min-width:0;background:#152b50;border:1px solid #274774;border-radius:11px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;outline:none}
.cb-tile.active,.cb-tile:focus-within,.cb-tile:focus-visible{border-color:#83b8ff;box-shadow:0 0 0 2px #70b1ff55}
.cb-tile .cb-thumb{width:100%;height:170px;object-fit:contain;max-width:123px}
.cb-name{font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;text-align:center}
.cb-qty{display:flex;justify-content:center;gap:6px;align-items:center;width:100%}
.cb-qty-btn{font:inherit;font-size:18px;line-height:1;background:#1b3b69;color:#eff8ff;border:1px solid #6389bf;width:30px;height:30px;flex-shrink:0;border-radius:8px;cursor:pointer;padding:0;display:grid;place-items:center}
.cb-qty-btn:hover:not(:disabled){background:#356caf}
.cb-qty-btn:disabled{opacity:.3;cursor:default}
.cb-qty-text{font-weight:750;font-size:12px;white-space:nowrap;text-align:center;min-width:36px}
.cb-qty.compact{width:auto;gap:4px}
.cb-qty.compact .cb-qty-btn{width:25px;height:27px;font-size:17px}
.cb-qty.compact .cb-qty-text{min-width:18px}
.cb-caption{font-size:10px;font-weight:900;letter-spacing:1.2px;color:#92b8ed;margin:2px 0 14px}
.cb-large{display:block;width:100%;max-width:265px;margin:auto;aspect-ratio:2.5/3.5;object-fit:contain}
.cb-preview-title{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:12px}
.cb-preview-title h3{font-size:19px;margin:0;overflow-wrap:anywhere}
.cb-preview-title strong{font-size:12px;color:#aaccf7;white-space:nowrap}
.cb-preview-tag{font-size:12px;color:#8ae5c0;margin:7px 0}
.cb-muted{color:#bed0e7;font-size:12px;line-height:1.5}
.cb-attack{border-top:1px solid #334b72;padding:9px 0;display:flex;gap:6px;align-items:center;font-size:12px}
.cb-attack strong{margin-right:auto}
.cb-attack span{color:#bdd0e7;font-size:10px}
.cb-preview-add{border:1px solid #6ea6e8;background:#224d7d;color:#edf7ff;width:100%;padding:10px;font-weight:800;border-radius:8px;cursor:pointer}
.cb-preview-add:disabled{opacity:.35}
.cb-selected-title{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.cb-selected-actions{display:flex;gap:6px;flex-wrap:wrap}
.cb-selected-title h3{font-size:21px;margin:0}
.cb-selected-title button{background:none;border:1px solid #3e618f;color:#9fc2f3;font-size:11px;padding:7px 9px;border-radius:7px;cursor:pointer}
.cb-selected-title button:disabled{opacity:.3}
.cb-summary{border:1px solid #274a7c;background:#152b52;border-radius:11px;padding:13px;margin:13px 0}
.cb-summary>strong{font-size:21px;color:#d8e7ff}
#cbBreakdown{display:grid;grid-template-columns:repeat(3,1fr);margin-top:10px}
.cb-stat{text-align:center;border-right:1px solid #344a6d}
.cb-stat:last-child{border-right:none}
.cb-stat strong{display:block;font-size:15px}
.cb-stat small{color:#b4c8e6;font-size:10px}
.cb-deck-list{overflow-y:auto;max-height:53vh;min-height:80px}
.cb-deck-group{padding-top:10px}
.cb-deck-group h4{margin:0 0 8px;color:#cee1ff;font-size:14px}
.cb-deck-row{display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid #344869;padding:6px 0}
.cb-row-card{min-width:0;display:flex;align-items:center;gap:7px;flex:1;background:none;border:none;color:#e7f2ff;padding:0;text-align:left;cursor:pointer;font-size:12px}
.cb-row-card span{overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cb-tiny{width:32px;height:44px;object-fit:contain;flex-shrink:0}
.cb-art-fallback{display:grid;place-items:center;text-align:center;background:linear-gradient(140deg,#244875,#111c38);border:1px solid #44608b;color:#c9dcfa;border-radius:6px;font-size:11px;padding:5px}
.cb-art-fallback.cb-thumb{width:100%;height:170px}
.cb-art-fallback.cb-large{aspect-ratio:2.5/3.5;width:100%;max-width:265px}
.cb-art-fallback.cb-tiny{width:32px;height:44px;font-size:7px}
.cb-empty{padding:15px;color:#a5bcdf;font-size:13px}
#cbActionSlot{margin-top:15px;position:sticky;bottom:0;background:#101e3a;padding-top:8px}
#cbActionSlot button{width:100%;min-height:47px}
@media(max-width:1080px){.cb-workspace{grid-template-columns:minmax(0,1.35fr) minmax(220px,.8fr)}.cb-selected{grid-column:1/-1;position:static}.cb-deck-list{max-height:300px}}
@media(max-width:740px){.cb-header{display:block}.cb-progress{margin-top:12px}.cb-workspace{grid-template-columns:1fr}.cb-library,.cb-preview,.cb-selected{position:static;grid-column:auto}.cb-preview{max-width:100%}.cb-preview .cb-large{max-width:220px}.cb-grid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}.cb-deck-list{max-height:unset}.cb-search input{max-width:150px}}


/* Deck building is its own focused screen, not a subsection below the draft.
   Keep the builder in the normal document flow so small screens can scroll. */
body.cube-deck-mode{
  max-width:none;
  width:100%;
  margin:0;
  padding:0;
  min-height:100svh;
  background:linear-gradient(150deg,#101d37 0%,#0c1226 65%);
}
body.cube-deck-mode > header,
body.cube-deck-mode > p:not(#error):not(#message),
body.cube-deck-mode > .preset-picker,
body.cube-deck-mode > #start,
body.cube-deck-mode > #progress,
body.cube-deck-mode > .layout,
body.cube-deck-mode > #tournament,
body.cube-deck-mode > #entrance,
body.cube-deck-mode > #room > .panel,
body.cube-deck-mode > #room > #draftArea,
body.cube-deck-mode > #room > #roundRobinArea{
  display:none!important;
}
body.cube-deck-mode > #builder,
body.cube-deck-mode > #room > #deckArea{
  display:block!important;
  box-sizing:border-box;
  width:100%;
  max-width:1900px;
  min-height:100svh;
  padding:clamp(14px,2.5vw,40px);
  margin:0 auto;
}
body.cube-deck-mode > #room{display:block!important;width:100%;max-width:none}
.cube-build-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 24px;
  margin-bottom:20px;
  padding:0 0 14px;
  border-bottom:1px solid #31456d;
  color:#b8c9e7;
  font-size:12px;
  letter-spacing:.04em;
}
.cube-build-context strong{color:#ffdc84;letter-spacing:.1em}
.cube-build-reset{
  border:1px solid #5d7dab;
  border-radius:9px;
  background:#1a345b;
  color:#d6e7ff;
  font-size:12px;
  font-weight:700;
  padding:9px 12px;
  cursor:pointer;
  white-space:nowrap;
}
.cube-build-reset:hover,.cube-build-reset:focus-visible{
  border-color:#ffd56f;
  color:#fff;
}
.cube-build-context span:nth-child(2){color:#e8f2ff;font-weight:750}
body.cube-deck-mode #soloBuilderAction,
body.cube-deck-mode #roomBuilderAction{margin-top:0}
body.cube-deck-mode #error:not(:empty),
body.cube-deck-mode #message:not(:empty){
  position:fixed;
  z-index:200;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:min(640px,calc(100vw - 30px));
  border:1px solid #e99c9c;
  border-radius:10px;
  padding:12px 18px;
  background:#481f35;
  color:#ffe9e9;
  text-align:center;
  box-shadow:0 10px 30px #000a;
}
body.cube-deck-mode #error:empty,
body.cube-deck-mode #message:empty{display:none}
@media(min-width:1181px){
  body.cube-deck-mode .cb-workspace{
    grid-template-columns:minmax(0,1.85fr) minmax(245px,.83fr) minmax(295px,1fr);
    gap:clamp(14px,1.4vw,26px);
  }
  body.cube-deck-mode .cb-grid{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  }
}
@media(max-width:640px){
  .cube-build-context{display:grid;gap:5px;font-size:11px}
  body.cube-deck-mode > #builder,
  body.cube-deck-mode > #room > #deckArea{padding:12px}
}