#commander-screen{position:fixed;inset:0;z-index:3000;display:none;overflow:hidden;background:#030711;color:#eef7ff;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
#commander-screen.is-visible{display:block}
.commander-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(39,106,178,.22),transparent 38%),radial-gradient(circle at 50% 100%,rgba(77,52,145,.12),transparent 38%),#030711}
.commander-backdrop:after{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(circle at 12% 17%,#b9e1ff 0 1px,transparent 1.5px),radial-gradient(circle at 28% 78%,#b9e1ff 0 1px,transparent 1.5px),radial-gradient(circle at 74% 14%,#b9e1ff 0 1px,transparent 1.5px),radial-gradient(circle at 91% 62%,#b9e1ff 0 1px,transparent 1.5px)}
.commander-shell{position:relative;z-index:1;width:100%;height:100%;padding:12px 16px;display:flex;flex-direction:column}
.commander-top{display:flex;justify-content:space-between;align-items:center;height:28px;flex:0 0 28px}.commander-brand{font-size:11px;font-weight:800;letter-spacing:.23em;color:#b7d8f0}.commander-deck{font-size:8px;text-transform:uppercase;letter-spacing:.22em;color:#667b96}
.commander-hero{text-align:center;flex:0 0 auto;padding:2px 0 7px}.commander-eyebrow{font-size:7px;letter-spacing:.28em;text-transform:uppercase;color:#61d1ff;font-weight:800}.commander-hero h1{font-size:clamp(21px,3.4vw,32px);letter-spacing:.13em;margin:1px 0 1px;font-weight:650}.commander-hero p{margin:0;color:#8293ab;font-size:9px}
.commander-cards{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:minmax(250px,330px);gap:9px;align-content:start;align-items:stretch;overflow-y:auto;overflow-x:hidden;padding:1px 2px 4px;scrollbar-width:thin}
.commander-card{min-width:0;min-height:250px;overflow:hidden;border:1px solid rgba(75,160,220,.34);border-radius:13px;background:linear-gradient(180deg,rgba(11,25,43,.97),rgba(4,9,17,.98));display:flex;flex-direction:column;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.commander-image{height:52%;min-height:0;position:relative;overflow:hidden;background:#081221}.commander-image img{width:100%;height:100%;display:block;object-fit:cover;object-position:center top}.commander-image:after{content:"";position:absolute;inset:auto 0 0;height:24px;background:linear-gradient(transparent,rgba(4,9,16,.45))}
.commander-content{padding:9px 10px 10px;display:flex;flex-direction:column;flex:1;min-height:0;background:linear-gradient(180deg,rgba(6,13,23,.98),rgba(4,9,17,.98))}.commander-name{font-size:clamp(10px,1.2vw,14px);font-weight:850;letter-spacing:.08em;white-space:nowrap}.commander-role{font-size:7px;color:#6ebfe8;letter-spacing:.17em;text-transform:uppercase;margin-top:1px}.commander-stats{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin:8px 0}.commander-stat{border:1px solid rgba(255,255,255,.055);background:rgba(255,255,255,.035);border-radius:6px;padding:4px 5px}.commander-stat span{display:block;color:#65778e;font-size:6px;text-transform:uppercase;letter-spacing:.1em}.commander-stat strong{font-size:9px}
.commander-actions{margin-top:auto;display:grid;grid-template-columns:1fr auto;gap:5px;align-items:center}.commander-continue{height:30px;border:1px solid rgba(43,201,255,.55);border-radius:7px;background:rgba(43,201,255,.08);color:#eaf9ff;font:inherit;font-size:7px;font-weight:850;letter-spacing:.15em;text-transform:uppercase;cursor:pointer}.commander-continue:active{transform:translateY(1px);background:rgba(43,201,255,.16)}.commander-delete{height:30px;padding:0 7px;border:1px solid rgba(255,255,255,.12);border-radius:7px;background:rgba(255,255,255,.025);color:#718198;font:inherit;font-size:6px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}.commander-delete:active{transform:translateY(1px);background:rgba(255,255,255,.07);color:#c9d7e5}
.commander-new{align-items:center;justify-content:center;text-align:center;padding:14px;cursor:pointer;user-select:none}.commander-new:focus-visible,.commander-available:focus-visible{outline:2px solid rgba(97,209,255,.9);outline-offset:2px}.commander-new-orb{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(43,201,255,.5);font-size:25px;color:#8cddff;background:rgba(43,201,255,.07);margin-bottom:10px}.commander-new h2{font-size:11px;letter-spacing:.1em;margin:0}.commander-new p{font-size:8px;line-height:1.45;color:#8293ab;max-width:145px;margin:7px 0 12px}.commander-new .commander-continue{margin-top:0}.commander-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#52647b;font-size:7px;letter-spacing:.16em;text-transform:uppercase;padding-top:6px}.commander-footer span{min-width:0}.commander-back-button{height:28px;padding:0 18px;border:1px solid rgba(255,255,255,.18);border-radius:7px;background:rgba(255,255,255,.04);color:#d7e8f6;font:inherit;font-size:7px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.commander-available{cursor:pointer}.commander-available .commander-content{padding-bottom:10px}.commander-select-hint{margin-top:auto;padding-top:8px;color:#7edcff;font-size:6px;font-weight:850;letter-spacing:.18em;text-transform:uppercase}.commander-available .commander-actions{display:block}.commander-available .commander-continue{width:100%}.commander-new.is-full{grid-column:1/-1}
.commander-cards.is-empty{display:flex;align-items:center;justify-content:center}
.commander-cards.is-empty .commander-new{width:min(300px,72vw);height:min(310px,48vh);min-height:220px;flex:none}
@media(max-width:700px){.commander-shell{padding:7px 8px 6px}.commander-top{height:20px;flex-basis:20px}.commander-brand{font-size:8px}.commander-deck{font-size:6px}.commander-hero{padding:2px 0 5px}.commander-hero h1{font-size:21px}.commander-hero p{font-size:8px}.commander-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:270px;gap:6px;padding:1px 1px 4px}.commander-card{border-radius:9px;min-height:270px}.commander-image{height:52%}.commander-content{padding:6px}.commander-name{font-size:10px}.commander-role{font-size:6px}.commander-stats{gap:3px;margin:5px 0}.commander-stat{padding:3px 4px}.commander-stat span{font-size:5px}.commander-stat strong{font-size:8px}.commander-actions{gap:4px}.commander-continue{height:25px;font-size:6px}.commander-delete{height:25px;padding:0 5px;font-size:5px}.commander-new{padding:8px}.commander-new-orb{width:34px;height:34px;font-size:19px;margin-bottom:5px}.commander-new h2{font-size:10px}.commander-new p{font-size:7px;margin:4px 0 7px}.commander-footer{font-size:5px;padding-top:4px}.commander-footer span{display:none}.commander-back-button{height:25px;font-size:6px;padding:0 15px}}

.commander-cards.is-launching{pointer-events:none}

/* Mobile Commander UX hardening */
#commander-screen.is-launching .commander-back-button{opacity:.72;cursor:wait}
#commander-screen.is-launching .commander-card{filter:saturate(.82)}
.commander-card.is-selected{border-color:rgba(97,209,255,.9);box-shadow:0 0 0 1px rgba(97,209,255,.22),0 14px 34px rgba(0,0,0,.48)}
.commander-card.is-selected:after{content:"SELECTED";position:absolute;top:7px;right:7px;padding:3px 5px;border:1px solid rgba(97,209,255,.55);border-radius:5px;background:rgba(3,11,20,.82);color:#8ddfff;font-size:5px;font-weight:900;letter-spacing:.15em;z-index:3}
.commander-card{position:relative}
@media(max-width:700px){
  #commander-screen{padding-bottom:env(safe-area-inset-bottom,0px)}
  #commander-screen .commander-shell{padding-bottom:max(7px,env(safe-area-inset-bottom,7px))}
  #commander-screen .commander-cards{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:8px}
  #commander-screen .commander-cards::-webkit-scrollbar{display:none}
  #commander-screen .commander-footer{position:relative;z-index:5;min-height:31px;padding-top:6px;padding-bottom:2px;background:linear-gradient(180deg,transparent,rgba(3,7,17,.94) 30%)}
  #commander-screen .commander-back-button{min-width:112px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  #commander-screen .commander-continue,#commander-screen .commander-delete,#commander-screen .commander-new,#commander-screen .commander-available{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  #commander-screen.is-launching .commander-back-button{min-width:145px}
}

/* Desktop: Nova staat linksboven; schuif de titelbalk (STARBREAKER / COMMAND DECK) en de rest ervan naar beneden zodat ze niet overlappen. */
@media(min-width:701px){.commander-top{margin-top:84px}}

/* Desktop: kaarten smaller en hoger (zoals op de gsm), zodat de afbeelding van de commander
   niet meer tot een smalle strook wordt afgesneden maar vrijwel volledig zichtbaar is. */
@media(min-width:701px){
  .commander-cards{grid-template-columns:repeat(5,minmax(0,300px));grid-auto-rows:minmax(400px,430px);justify-content:center}
  .commander-card{min-height:400px}
  .commander-image{height:56%}
  .commander-image img{object-position:center 18%}
}