@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Space+Grotesk:wght@400;500;600;700&display=swap');

.reference-card{padding:12px;border:1px solid #36526f;border-radius:14px;background:#101d30;box-shadow:0 5px 0 #07111b}.reference-card q{display:block;margin-top:13px;color:#c5ef65;font-size:12px;font-style:italic;line-height:1.35}.reference-card q::before,.reference-card q::after{content:''}
.reference-card .deck-count{display:inline-block;margin-top:10px;padding:3px 6px;border:1px solid #527393;border-radius:5px;color:#d9e6f2;font:10px 'DM Mono',monospace}
.card{position:relative;overflow:hidden;height:278px;padding:0;background:#f4f1e4;border:3px solid #f4f1e4;border-radius:13px;box-shadow:0 7px 0 #06101d,0 10px 20px #0008;color:#eef2e9}.card:hover{transform:translateY(-5px);border-color:#fff}.card-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.card:has(.card-art) strong{position:absolute;z-index:1;top:15px;left:14px;right:14px;color:#f5eed7;font-size:15px;line-height:1;text-transform:uppercase;text-shadow:1px 1px #000}.card:has(.card-art) small{position:absolute;z-index:1;bottom:37px;left:14px;right:14px;color:#f2f6ef;font-size:11px;line-height:1.15;text-shadow:1px 1px #000}.card:has(.card-art) q{position:absolute;z-index:1;bottom:12px;left:14px;right:14px;margin:0;padding:0;border:0;color:#d4e0e4;font-size:9px;line-height:1.15;text-shadow:1px 1px #000}.card:has(.card-art){height:278px}.outage-loss{border-color:#ff5b5b;text-align:center;background:linear-gradient(160deg,#2c1720,#111b2d)}.loss-icon{font-size:68px;line-height:1;color:var(--hot);text-shadow:0 0 22px #ff5b5b}.outage-loss .flavor{color:var(--lime);font-style:italic}
.card-art{width:calc(100% + 30px);height:82px;object-fit:cover;object-position:center 45%;margin:-15px -15px 10px;border-radius:9px 9px 0 0;border-bottom:1px solid #405372}.card:has(.card-art){height:260px}.card:has(.card-art) strong{font-size:15px}
.card q{display:block;margin-top:auto;padding-top:9px;border-top:1px solid #3a4a66;font-size:10px;line-height:1.25;color:#d7deeb;font-style:italic}.card q:before,.card q:after{content:''}
.ability{margin:14px 0 0;padding:11px 13px;border-left:3px solid var(--lime);background:#17243a;display:flex;gap:12px;align-items:center;font-size:13px}.ability b{color:var(--lime);white-space:nowrap}.ability span{color:#cdd6e7;flex:1}.ability button{background:transparent;border:1px solid #627393;color:var(--ink);padding:7px 9px;border-radius:6px;white-space:nowrap}.ability button:disabled{opacity:.45;cursor:not-allowed}
:root{--ink:#e9edf6;--muted:#92a0ba;--paper:#182235;--deep:#0c1220;--hot:#ff5b5b;--lime:#b9e75d;--blue:#62b7ff}
*{box-sizing:border-box}
body{
  margin:0;
  background:radial-gradient(circle at 70% 20%,#263a59 0,#101827 37%,#090e18 100%);
  color:var(--ink);
  font-family:'Space Grotesk',system-ui;
  min-height:100vh;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  overscroll-behavior:none;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}
button,input,select{font:inherit}
button{cursor:pointer}
header{padding:28px max(5vw,32px);display:flex;align-items:center;justify-content:space-between}
.eyebrow{font:12px 'DM Mono',monospace;letter-spacing:.13em;color:var(--lime);margin:0 0 6px}h1,h2,p{margin-top:0}h1{font-size:clamp(34px,5vw,58px);letter-spacing:-.06em;line-height:.9;margin-bottom:0}h1 span{color:var(--hot)}h2{font-size:22px;margin-bottom:4px}h2 small{font-size:14px;color:var(--muted);font-weight:400}.outline,.text-button{border:1px solid #4d5b72;background:transparent;color:var(--ink);border-radius:8px;padding:9px 13px}.table{max-width:1150px;margin:18px auto 0;display:grid;grid-template-columns:280px 1fr;gap:22px;padding:0 24px}.players{display:grid;gap:8px}.player{background:#121c2dba;border:1px solid #2c3a52;border-radius:10px;padding:10px;display:flex;gap:10px;align-items:center}.player.active{border-color:var(--lime);box-shadow:0 0 0 1px #b9e75d44}.player.fired{opacity:.45}.role{font-weight:bold;background:#293b58;width:30px;height:30px;display:grid;place-items:center;border-radius:7px}.player div{display:grid;flex:1}.player small,.player b{font-size:11px;color:var(--muted)}.player b{color:var(--lime)}.board{background:#111a2bb8;border:1px solid #2c3a52;border-radius:16px;min-height:320px;padding:28px}.status span{font-size:25px;font-weight:700}.status small{color:var(--muted);margin-left:10px}.piles{display:flex;gap:34px;justify-content:center;padding:34px}.pile{width:138px;height:172px;border-radius:10px;display:grid;place-items:center;align-content:center;gap:10px;font-weight:700}.deck{background:repeating-linear-gradient(-45deg,#254f77,#254f77 8px,#173755 8px,#173755 16px);border:2px solid #70bfff;color:white}.deck:hover{transform:translateY(-3px)}.pile b{font-size:34px}.pile span{font-size:12px;text-transform:uppercase;letter-spacing:.08em}.discard{border:2px dashed #485875;color:var(--muted)}.log{border-top:1px solid #29364c;padding-top:10px;font:12px 'DM Mono';color:var(--muted)}.log p{margin:6px 0}.hand{max-width:1150px;margin:28px auto;padding:0 24px}.hand-heading{display:flex;justify-content:space-between;align-items:end}.draw,.start{background:var(--lime);border:0;padding:12px 16px;font-weight:700;border-radius:8px;color:#15200a}.draw span{margin-left:8px}.cards{display:flex;gap:12px;overflow-x:auto;padding:16px 2px 8px}.card{width:170px;min-width:170px;height:218px;text-align:left;padding:15px;display:flex;flex-direction:column;background:var(--paper);border:1px solid #3b4d6c;border-radius:10px;color:var(--ink);transition:.15s}.card:hover{transform:translateY(-5px);border-color:var(--blue)}.card-icon{font-size:31px;margin-bottom:auto}.card strong{font-size:17px;line-height:1}.card small{font-size:12px;color:#b7c2d8;margin-top:9px;line-height:1.35}.card em{font:11px 'DM Mono';color:var(--hot);margin-top:8px}.card.outage{border-color:var(--hot)}.card.defense{border-color:var(--lime)}.card.attack{border-color:#c985ff}.setup{max-width:600px;margin:12vh auto;padding:30px}.intro{font-size:20px;color:var(--muted);max-width:470px}form{margin-top:35px;display:grid;gap:15px}label{display:grid;gap:6px;color:#cdd6e7;font-size:14px}input,select{background:#131d2e;border:1px solid #3b4b67;color:white;padding:10px;border-radius:7px}#names{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.hint{font-size:12px;color:var(--muted);margin-top:22px}.overlay{position:fixed;inset:0;background:#060a11d9;display:grid;place-items:center;padding:20px;z-index:2}.modal{background:#162238;border:1px solid #405374;border-radius:14px;max-width:530px;width:100%;padding:28px}.modal.danger{border-color:var(--hot)}.modal h2{font-size:30px}.modal>p:not(.eyebrow){color:#bdc9dd;line-height:1.5}.choices{display:grid;gap:8px;margin:18px 0}.choices button{display:flex;justify-content:space-between;align-items:center;border:1px solid #455979;background:#202e47;color:white;border-radius:8px;padding:12px;text-align:left}.choices small{color:var(--muted)}#placement{margin:16px 0}.text-button{padding:0;border:0;color:var(--muted)}.winner{text-align:center}

.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  background: #0c1220;
  border-top: 1px solid #2c3a52;
  z-index: 10;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-nav button {
  flex: 1;
  background: none;
  border: 0;
  color: var(--muted);
  font: 700 12px 'Space Grotesk';
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mobile-nav button.active {
  color: var(--lime);
}

@media(max-width: 1024px) {
  .view-board .player-sidebar, .view-board .log { display: none !important; }
  .view-teams .board-main, .view-teams .log { display: none !important; }
  .view-log .player-sidebar { display: none !important; }
  .view-log .board-main > :not(.log) { display: none !important; }
  .view-teams .player-sidebar { display: block !important; width: 100% !important; padding: 20px; min-height: 100vh; }
  .view-log .log { display: block !important; padding: 20px; border-top: 0; min-height: 100vh; }
  .compact-board { padding-bottom: 80px; }
}

@media(max-width:720px){header{padding:22px}.table{grid-template-columns:1fr;padding:0 15px}.players{grid-template-columns:repeat(2,1fr)}.board{padding:19px}.piles{padding:25px 0;gap:16px}.pile{width:125px;height:150px}.hand{padding:0 15px}.hand-heading{align-items:start;gap:12px}.draw{font-size:13px}.card{width:155px;min-width:155px;height:205px}#names{grid-template-columns:1fr}.status small{display:block;margin:4px 0}.setup{margin:5vh auto}}