:root{
  --bg:#07111f;
  --bg-2:#0b1628;
  --panel:#0f1d35;
  --panel-2:#132442;
  --panel-3:#192d4e;
  --board-wood:#2a1f13;
  --ink:#eef5ff;
  --muted:#a9b8d4;
  --line:rgba(190,214,255,.16);
  --line-strong:rgba(190,214,255,.26);
  --blue:#56a6ff;
  --gold:#f4c95d;
  --success:#43d17d;
  --shadow:0 22px 60px rgba(0,0,0,.32);
  --radius:22px;
  --seat-0:#e25f6d;
  --seat-1:#57a6ff;
  --seat-2:#57c98c;
  --seat-3:#bb7cff;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top, rgba(86,166,255,.12), transparent 30%),
    linear-gradient(180deg,#06101c,#091321 42%,#050d18);
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
img{display:block;max-width:100%}
.page{max-width:1680px;margin:0 auto;padding:18px}
.hidden{display:none!important}

.topbar{
  display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:18px;
}
.eyebrow{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:#8eb8ff;margin-bottom:.35rem}
.topbar h1{margin:0;font-size:clamp(1.85rem,3vw,2.55rem)}
.hero-copy{margin:.45rem 0 0;color:var(--muted);max-width:56rem;line-height:1.45}
.top-actions,.split-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.left-column,.right-column{display:grid;gap:18px}

.panel,
.rail-card,
.detail-card,
.action-ribbon-card,
.lobby-row,
.seat-card,
.player-card,
.faction-card,
.log-row{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{padding:16px}
.rail-card,.detail-card,.action-ribbon-card{padding:14px}

.section-head,
.rail-head,
.ribbon-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;
}
.section-head h2,
.rail-head h3,
.ribbon-head h3{margin:0 0 .25rem}
.section-head p,
.rail-head p,
.ribbon-head p{margin:0;color:var(--muted);line-height:1.35}
.rail-head.compact{margin-bottom:10px}

.create-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:12px}
.join-by-code{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:12px}
label{display:grid;gap:8px;font-size:.92rem;color:var(--muted)}
input,select{
  width:100%;padding:12px 13px;border-radius:14px;border:1px solid var(--line);
  color:var(--ink);background:#0a1526;outline:none;
}
input:focus,select:focus{border-color:rgba(86,166,255,.65);box-shadow:0 0 0 3px rgba(86,166,255,.14)}
button{cursor:pointer}
.primary-btn,.ghost-btn{
  padding:11px 15px;border-radius:14px;border:1px solid var(--line-strong);color:var(--ink);
  background:#112038;transition:transform .12s ease,filter .12s ease,border-color .12s ease;
}
.primary-btn{border:none;background:linear-gradient(135deg,#0ea5e9,#2563eb);font-weight:700}
.primary-btn:hover,.ghost-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.danger-btn{border-color:rgba(226,95,109,.45);color:#ffd7dc;background:linear-gradient(180deg,rgba(226,95,109,.16),rgba(226,95,109,.06))}
.danger-btn:hover{border-color:rgba(226,95,109,.7)}
.primary-btn:disabled,.ghost-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.small{padding:8px 12px;font-size:.92rem}

.badge,.seat-badge,.status-chip,.user-badge,.tech-chip,.resource-pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);background:#0b1424;font-size:.84rem;
}
.status-chip{
  min-width:165px;padding:10px 12px;border-radius:16px;flex-direction:column;align-items:flex-start;gap:4px;
  background:#0b1628;
}
.status-chip strong{font-size:1rem}
.chip-label{color:var(--muted);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.chip-sub{color:var(--muted);font-size:.82rem}
.status-progress{width:100%;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(190,214,255,.12)}
.status-progress-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f4c95d,#56a6ff)}
.turn-alert{animation:turnPulse 1.2s ease 2;border-color:rgba(244,201,93,.65)!important;box-shadow:0 0 0 1px rgba(244,201,93,.22),0 0 18px rgba(244,201,93,.18)}
@keyframes turnPulse{0%{transform:scale(1)}35%{transform:scale(1.03)}100%{transform:scale(1)}}
.user-badge{background:rgba(86,166,255,.12)}
.subtle{color:var(--muted);font-size:.88rem;line-height:1.35}
.top-gap{margin-top:16px}

.lobby-list,.seat-list,.player-panels,.faction-picker,.event-log{display:grid;gap:12px}
.lobby-row,.seat-card,.faction-card,.player-card,.log-row{padding:12px 14px}
.lobby-row,.seat-top,.player-header,.player-name-line{display:flex;justify-content:space-between;align-items:center;gap:12px}
.lobby-row .meta,.player-name-stack{display:grid;gap:4px;min-width:0}
.lobby-row .sub{color:var(--muted);font-size:.9rem}
.lobby-list-shell{display:grid;gap:12px;padding:12px;border-radius:20px;border:1px solid rgba(190,214,255,.14);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)),#0d192e}
.lobby-list-shell.empty{padding:14px}
.lobby-list-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:4px}
.lobby-card-stack{display:grid;gap:12px}
.lobby-row{grid-template-columns:auto 1fr auto;display:grid;align-items:center;gap:14px;padding:14px 16px;border-color:rgba(86,166,255,.18);background:linear-gradient(180deg,rgba(86,166,255,.08),rgba(255,255,255,0)),#10203a}
.lobby-code-block{display:grid;gap:4px;min-width:118px;padding:10px 12px;border-radius:16px;background:#0b1729;border:1px solid rgba(190,214,255,.12)}
.lobby-code-label{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lobby-code-value{font-size:1.1rem;letter-spacing:.08em}
.lobby-actions{justify-content:flex-end}
.lobby-empty-state{padding:12px 14px;border-radius:16px;background:#0b172a;border:1px dashed rgba(190,214,255,.14);color:#d7e6ff;line-height:1.45}
.seat-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),var(--panel-2)}
.faction-picker{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.faction-card{
  display:grid;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),var(--panel-2);
}
.faction-card img{
  width:100%;height:120px;object-fit:contain;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:16px;padding:10px;
}
.faction-card.selected{border-color:rgba(244,201,93,.55);box-shadow:0 0 0 2px rgba(244,201,93,.17),var(--shadow)}
.faction-copy{display:grid;gap:6px}
.faction-summary{color:#dbe8ff;font-size:.88rem;line-height:1.45}
.faction-guide{display:grid;gap:6px}
.faction-guide p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.45}
.faction-tag{display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;border:1px solid var(--line);background:#0c1729;font-size:.84rem}
.seat-name{font-weight:700}
.faction-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}

.current-match-panel{padding:16px 16px 18px}
.current-match-head{margin-bottom:10px}
.match-lobby{padding-top:4px}
.lobby-columns{display:grid;grid-template-columns:1fr 1.15fr;gap:16px}

.match-game{display:grid;gap:14px}
.match-status-bar{
  display:flex;gap:12px;flex-wrap:wrap;padding:10px 12px;border-radius:20px;
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0)),var(--panel-2);
}
.match-workspace{
  display:grid;gap:14px;
  grid-template-columns:minmax(0,1fr) 320px;
  grid-template-areas:
    "board players"
    "lower detail";
  align-items:start;
}
.players-rail{grid-area:players;align-self:start}
.board-stage{grid-area:board}
.action-log-stack{grid-area:lower;display:grid;gap:14px;align-content:start;min-width:0}
.detail-rail{grid-area:detail;display:grid;gap:14px;align-content:start;align-self:start;min-width:0}
.action-ribbon-card{grid-area:actions;min-width:0}
.log-card{grid-area:log}
.log-card .event-log{max-height:240px}

.board-frame{
  position:relative;overflow:hidden;padding:14px;border-radius:24px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),
    linear-gradient(180deg,#0d1b31,#0a1426 62%,#08111f);
  border:1px solid var(--line-strong);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035), var(--shadow);
  min-height:640px;
}
.board-frame::before{
  content:"";position:absolute;inset:10px;border-radius:18px;pointer-events:none;
  border:1px solid rgba(244,201,93,.12);
}
#boardCanvas{display:block;width:100%;height:620px;border-radius:18px;background:radial-gradient(circle at top,#1a2b46,#0b1423 68%)}
.board-hint{
  margin-top:12px;padding:12px 14px;border-radius:16px;background:rgba(8,16,28,.72);border:1px solid var(--line);
  color:#d8e6ff;line-height:1.4;font-size:.95rem;
}

.rail-card,
.detail-card,
.action-ribbon-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),var(--panel-2)}

.player-panels{display:grid;gap:10px;align-content:start}
.player-tab-row{display:flex;gap:8px;overflow:auto;padding:2px 2px 4px;scroll-snap-type:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.player-tab-btn{
  min-width:140px;display:grid;gap:3px;justify-items:start;padding:10px 12px;border-radius:16px;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0)),#0e1b32;
  color:var(--ink);scroll-snap-align:start;position:relative;overflow:hidden;
}
.player-tab-btn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--seat-color,#fff);opacity:.95}
.player-tab-btn:hover{transform:translateY(-1px)}
.player-tab-btn.active{border-color:rgba(244,201,93,.58);box-shadow:0 0 0 1px rgba(244,201,93,.14) inset, var(--shadow)}
.player-tab-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.player-tab-name{font-weight:700;font-size:.92rem;line-height:1.1}
.player-tab-sub{font-size:.76rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.player-card{
  display:grid;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0)),#10213c;
  position:relative;
}
.player-card.active{border-color:rgba(244,201,93,.55);box-shadow:0 0 0 1px rgba(244,201,93,.18),var(--shadow)}
.player-card-stage{min-height:0}
.player-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:22px 0 0 22px;background:var(--seat-color,#fff);
}
.seat-color-0{--seat-color:var(--seat-0)}
.seat-color-1{--seat-color:var(--seat-1)}
.seat-color-2{--seat-color:var(--seat-2)}
.seat-color-3{--seat-color:var(--seat-3)}
.player-header{align-items:flex-start}
.faction-thumb{
  flex:0 0 54px;width:54px;height:54px;border-radius:14px;border:1px solid var(--line);
  background:#0a1323;object-fit:contain;padding:5px;
}
.faction-thumb.placeholder{display:grid;place-items:center;color:var(--muted)}
.player-name-stack{flex:1;min-width:0}
.player-name-line{justify-content:flex-start;gap:8px;flex-wrap:wrap}
.seat-token{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.stat-row{display:flex;flex-wrap:wrap;gap:8px}
.resource-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.resource-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
.resource-pill{justify-content:space-between;padding:7px 8px;border-radius:14px;background:#0b172a;min-width:0}
.resource-pill img{width:22px;height:22px;object-fit:contain}
.resource-pill-label{font-size:.78rem;color:var(--muted)}
.tech-strip{display:flex;flex-wrap:wrap;gap:8px}
.tech-chip{border-radius:12px;background:#0d1c31}

.selected-action-card{
  min-height:300px;display:grid;gap:14px;position:sticky;top:12px;width:100%;
}
.selected-action-card.empty{place-items:center;text-align:center;color:var(--muted)}
.action-hero{
  display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px;align-items:start;
}
.action-art-large{
  width:112px;height:148px;object-fit:contain;border-radius:16px;padding:8px;background:#0c1729;border:1px solid var(--line);
}
.action-art-large.placeholder,
.action-thumb.placeholder{display:grid;place-items:center;color:var(--muted);background:#0c1729}
.action-meta{display:grid;gap:8px}
.action-title{margin:0;font-size:1.2rem}
.action-desc{margin:0;color:#d5e3fb;line-height:1.5}
.detail-row{display:flex;flex-wrap:wrap;gap:8px}
.detail-note{margin:0;color:var(--muted);font-size:.9rem;line-height:1.45}
.detail-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:2px}
.use-btn-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.event-log{display:grid;gap:8px;max-height:360px;overflow:auto;padding-right:2px}
.log-row{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:#0d182c;border-radius:16px;padding:10px 12px;
}
.log-row small{color:var(--muted);white-space:nowrap}

.ribbon-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.action-tabs{display:flex;gap:8px;flex-wrap:wrap}
.action-tab{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#0b1424;color:var(--ink);
}
.action-tab.active{background:rgba(86,166,255,.18);border-color:rgba(86,166,255,.52)}
.action-strip{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(132px,132px);gap:12px;overflow:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;
}
.action-chip{
  position:relative;display:grid;gap:10px;padding:10px;border-radius:18px;cursor:pointer;
  border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),#0f1d35;
  min-height:170px;scroll-snap-align:start;
}
.action-chip:hover{transform:translateY(-1px)}
.action-chip.selected{border-color:rgba(244,201,93,.6);box-shadow:0 0 0 1px rgba(244,201,93,.14) inset}
.action-chip.taken{opacity:.66}
.action-chip.pending{border-color:rgba(86,166,255,.6);box-shadow:0 0 0 1px rgba(86,166,255,.18) inset}
.action-thumb-wrap{
  position:relative;height:82px;border-radius:16px;padding:6px;background:#0b1729;border:1px solid rgba(255,255,255,.06);
}
.action-thumb{
  width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 10px rgba(0,0,0,.22));
}
.action-chip-title{font-size:.95rem;font-weight:700;line-height:1.2}
.action-chip-sub{color:var(--muted);font-size:.78rem;line-height:1.3}
.action-chip-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-top:auto}
.action-occupant{
  position:absolute;right:6px;bottom:6px;display:inline-flex;align-items:center;gap:5px;
  background:rgba(8,14,24,.85);border:1px solid var(--line);border-radius:999px;padding:4px 7px;font-size:.74rem;
}
.action-occupant img{width:18px;height:18px;object-fit:contain}
.action-open-tag{font-size:.74rem;padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:#0a1424;color:var(--muted)}
.action-open-tag.open{color:#dfeeff;background:rgba(67,209,125,.12);border-color:rgba(67,209,125,.28)}

.me-summary{display:grid;gap:12px}
.me-hero{display:flex;gap:12px;align-items:flex-start}
.rules-list{display:grid;gap:12px;padding-left:18px;margin:0;color:#d7e6ff;line-height:1.45}
.rules-list li::marker{color:var(--gold)}

.choice-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.resource-input-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:10px;margin-top:10px}
.resource-row{display:grid;gap:6px;color:var(--ink);font-size:.88rem}
.resource-row input{padding:10px 11px}

.modal-backdrop{
  position:fixed;inset:0;background:rgba(2,6,14,.7);backdrop-filter:blur(4px);display:grid;place-items:center;padding:18px;z-index:200;
}
.modal-card{
  width:min(720px,100%);max-height:min(82vh,900px);overflow:auto;padding:18px;border-radius:24px;border:1px solid var(--line-strong);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)),var(--panel-2);box-shadow:var(--shadow);
}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.modal-head h3{margin:0}
.modal-close{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:#0d1728;color:var(--ink);font-size:1.35rem}
.modal-body{display:grid;gap:12px}
.toast{
  position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:250;
  padding:12px 16px;border-radius:999px;background:rgba(8,16,28,.92);border:1px solid var(--line-strong);box-shadow:var(--shadow);
}

.page.in-match .app-shell{grid-template-columns:minmax(0,1fr)}
.page.in-match .right-column{display:none}
.page.in-match .hero-copy{max-width:68rem}

@media (max-width:1200px){
  .app-shell{grid-template-columns:1fr}
  .right-column{grid-template-columns:1fr 1fr}
  .match-workspace{
    grid-template-columns:minmax(0,1fr) 320px;
    grid-template-areas:
      "board board"
      "lower detail"
      "players players";
  }
}

@media (max-width:980px){
  .page{padding:14px}
  .topbar{flex-direction:column}
  .create-grid,.lobby-columns{grid-template-columns:1fr}
  .join-by-code{grid-template-columns:1fr}
  .match-status-bar{position:sticky;top:10px;z-index:30;backdrop-filter:blur(8px)}
  .match-workspace{
    grid-template-columns:1fr;
    grid-template-areas:
      "board"
      "actions"
      "detail"
      "players"
      "log";
  }
  .action-log-stack{display:contents}
  .board-frame{min-height:0;padding:12px}
  #boardCanvas{height:min(62vh,560px)}
  .detail-rail{grid-template-columns:1fr}
  .selected-action-card{position:static}
  .players-rail .rail-card,.detail-card,.action-ribbon-card{padding:12px}
  .player-tab-row{padding-bottom:6px}
  .resource-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:720px){
  .page{padding:12px}
  .topbar h1{font-size:1.8rem}
  .status-chip{min-width:calc(50% - 6px);flex:1}
  .action-hero{grid-template-columns:86px minmax(0,1fr)}
  .action-art-large{width:86px;height:116px}
  .action-strip{grid-auto-columns:minmax(116px,116px);gap:10px}
  .action-chip{min-height:154px;padding:9px}
  .action-thumb-wrap{height:74px}
  #boardCanvas{height:min(56vh,480px)}
  .resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .player-tab-btn{min-width:126px}
}

@media (max-width:720px){
  .player-tab-btn{min-width:120px;padding:9px 10px}
}

@media (max-width:520px){
  .panel{padding:14px}
  .section-head,.ribbon-head,.rail-head{gap:10px}
  .player-header{gap:10px}
  .faction-thumb{width:46px;height:46px}
  .seat-token{width:28px;height:28px}
  .status-chip{min-width:100%}
  .action-tabs{overflow:auto;flex-wrap:nowrap;padding-bottom:4px}
  .action-tab{white-space:nowrap}
  .board-hint{font-size:.9rem}
}


/* Styled scrollbars */
html{
  scrollbar-width: thin;
  scrollbar-color: rgba(86,166,255,.68) rgba(7,17,31,.92);
}
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(86,166,255,.68) rgba(7,17,31,.82);
}
*::-webkit-scrollbar{
  width: 12px;
  height: 12px;
}
*::-webkit-scrollbar-track{
  background: linear-gradient(180deg, rgba(7,17,31,.95), rgba(10,21,38,.9));
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(96,172,255,.9), rgba(36,101,199,.92));
  border: 2px solid rgba(6,14,24,.95);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(128,190,255,.95), rgba(56,124,225,.95));
}

.board-frame{position:relative}
.board-inspector{
  position:absolute;left:22px;top:18px;z-index:2;display:grid;gap:2px;pointer-events:none;
  min-width:220px;max-width:min(56%, 360px);
  padding:11px 14px;border-radius:16px;
  background:rgba(8,17,30,.84);backdrop-filter:blur(8px);
  border:1px solid rgba(190,214,255,.16);box-shadow:0 12px 30px rgba(0,0,0,.22);
}
.board-inspector strong{font-size:.92rem;letter-spacing:.01em}
.board-inspector span{color:#cfe1ff;font-size:.82rem;line-height:1.35}

.terrain-label{
  display:inline-flex;align-items:center;gap:8px;max-width:max-content;
  padding:6px 10px;border-radius:999px;border:1px solid rgba(244,201,93,.24);
  background:rgba(244,201,93,.08);color:#f8deb0;font-size:.8rem;
}
.worker-tray-wrap{display:grid;gap:6px}
.worker-tray-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.worker-tray-label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.worker-tray-count{font-size:.84rem;color:#dbe9ff}
.worker-tray{display:flex;flex-wrap:wrap;gap:8px;min-height:28px}
.worker-tray.empty{align-items:center}
.worker-token-mini{
  width:26px;height:26px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.2));
}
.worker-token-mini.merc{filter:drop-shadow(0 6px 8px rgba(0,0,0,.2)) brightness(1.03)}
.worker-tray-note{font-size:.76rem;color:#cbdcff}

.detail-section{display:grid;gap:10px;padding:12px;border-radius:18px;background:#0b1729;border:1px solid rgba(190,214,255,.1)}
.detail-section-title{font-size:.82rem;color:#9fc0f2;text-transform:uppercase;letter-spacing:.08em}
.cost-block{display:grid;gap:7px}
.cost-block + .cost-block{padding-top:10px;border-top:1px solid rgba(190,214,255,.08)}
.cost-block-label{font-weight:700;font-size:.9rem;color:#eef5ff}
.cost-line{display:flex;flex-wrap:wrap;gap:8px}
.cost-chip{
  display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:14px;
  border:1px solid rgba(190,214,255,.14);background:#112038;color:#eef5ff;
}
.cost-chip img{width:24px;height:24px;object-fit:contain}
.cost-note{color:#bfd4f5;font-size:.86rem;line-height:1.45}
.cost-empty{padding:10px 12px;border-radius:14px;background:#101b2d;border:1px dashed rgba(190,214,255,.16);color:#bfd4f5}
.cost-empty.compact{padding:7px 10px;font-size:.86rem}

.faction-bonus-section{background:linear-gradient(180deg,rgba(244,201,93,.08),rgba(86,166,255,.04)),#0b1729}
.faction-bonus-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bonus-list{margin:0;padding-left:18px;display:grid;gap:8px;color:#eef5ff;line-height:1.45}
.bonus-list li::marker{color:var(--gold)}

.found-town-section .town-cost-grid{display:grid;gap:12px}
.town-cost-grid.compact-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));align-items:start}
.town-cost-lane{display:grid;gap:10px;padding:12px;border-radius:18px;background:#101c31;border:1px solid rgba(190,214,255,.1)}
.compact-town-lane{padding:10px 12px}
.town-cost-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.town-cost-row{display:flex;flex-wrap:wrap;gap:10px}
.town-cost-inline-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:start}
.town-cost-choice-row{display:grid;gap:8px}
.town-cost-choice-panel{display:grid;gap:8px;align-content:start;min-width:0;grid-column:1 / -1;padding:8px 10px;border-radius:16px;background:#0b1729;border:1px solid rgba(190,214,255,.1)}
.town-cost-choice-panel.free{background:rgba(69,126,207,.09);border-color:rgba(99,168,255,.24)}
.town-cost-choice-label{font-size:.76rem;color:#9fc0f2;text-transform:uppercase;letter-spacing:.08em}
.town-cost-choice-cards{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.town-cost-choice-cards.compact{gap:8px}
.town-choice-divider{display:grid;place-items:center;min-width:32px;color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.cost-card-mini{display:grid;gap:8px;padding:10px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0)),#0b1729;border:1px solid rgba(190,214,255,.12);width:min(126px,100%)}
.cost-card-mini.compact{width:92px;gap:6px;padding:8px;border-radius:14px}
.cost-card-mini.muted{opacity:.72}
.cost-card-art{position:relative;display:grid;place-items:center;min-height:118px;border-radius:14px;background:#101c31;border:1px solid rgba(190,214,255,.08);padding:8px}
.cost-card-mini.compact .cost-card-art{min-height:72px;padding:6px;border-radius:12px}
.cost-card-art img{width:100%;height:100%;max-height:96px;object-fit:contain}
.cost-card-mini.compact .cost-card-art img{max-height:58px}
.cost-card-badge{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:28px;padding:0 8px;border-radius:999px;background:rgba(8,17,30,.88);border:1px solid rgba(190,214,255,.18);font-weight:800;color:#eef5ff}
.cost-card-mini.compact .cost-card-badge{top:6px;right:6px;min-width:28px;height:22px;padding:0 6px;font-size:.75rem}
.cost-card-title{font-size:.84rem;font-weight:700;color:#eef5ff}
.cost-card-mini.compact .cost-card-title{font-size:.77rem;text-align:center}
.cost-card-note{font-size:.76rem;line-height:1.35;color:#bfd4f5}
.cost-card-mini.compact .cost-card-note{font-size:.7rem;text-align:center}

.selected-action-card .found-town-section{padding:10px}
.selected-action-card .compact-town-lane{padding:10px}
.selected-action-card .cost-card-mini.compact{width:100%;max-width:none}
.selected-action-card .town-cost-choice-cards.compact{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}

.trade-modal-body{gap:16px}
.trade-header-copy p{margin:0;color:#dbe8ff;line-height:1.5}
.trade-summary-bar{display:flex;flex-wrap:wrap;gap:8px}
.trade-summary-pill{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:#0b172a;border:1px solid rgba(190,214,255,.14);color:#eef5ff;font-size:.86rem;
}
.trade-summary-pill.subtle-pill{color:#bfd4f5}
.trade-lane{display:grid;gap:12px;padding:14px;border-radius:20px;background:#0f1d35;border:1px solid rgba(190,214,255,.12)}
.trade-lane-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.trade-lane-head h4{margin:0 0 .2rem}
.trade-lane-head p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.4}
.trade-total{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:#132442;border:1px solid rgba(86,166,255,.32);font-weight:700}
.trade-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px}
.trade-card{
  display:grid;gap:10px;padding:10px;border-radius:18px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), #0b1729;
  border:1px solid rgba(190,214,255,.12);
}
.trade-card.out-of-stock{opacity:.58}
.trade-card-art{width:100%;height:108px;object-fit:contain;border-radius:14px;background:#111d32;padding:8px;border:1px solid rgba(190,214,255,.08)}
.trade-card-meta{display:grid;gap:2px}
.trade-card-meta span{color:var(--muted);font-size:.82rem}
.trade-card-footer{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;gap:8px}
.trade-stepper{
  width:34px;height:34px;border-radius:12px;border:1px solid rgba(190,214,255,.16);background:#132442;color:#eef5ff;font-size:1.15rem;
}
.trade-stepper:disabled{opacity:.4;cursor:not-allowed}
.trade-count-pill{
  display:grid;place-items:center;height:34px;border-radius:12px;background:#0a1424;border:1px solid rgba(190,214,255,.12);font-weight:700;
}

@media (max-width:720px){
  .board-inspector{left:14px;top:14px;max-width:calc(100% - 28px);min-width:0}
  .trade-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trade-card-art{height:96px}
  .cost-card-mini{width:100%}
  .town-choice-divider{width:100%;min-height:22px}
}


/* Tech card thumbnails */
.tech-card-strip{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(110px,110px);
  gap:10px;
  overflow:auto;
  padding-bottom:4px;
}
.tech-card-strip.compact{grid-auto-columns:minmax(86px,86px)}
.player-tech-grid{
  grid-auto-flow:row;
  grid-auto-columns:auto;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:visible;
  align-items:start;
}
.player-tech-grid .tech-card-mini{
  min-height:auto;
  padding:6px;
}
.player-tech-grid .tech-card-mini img{
  height:92px;
}
.player-tech-grid .tech-card-mini span{
  font-size:.72rem;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tech-card-mini{
  display:grid;
  gap:6px;
  padding:8px;
  border-radius:16px;
  background:#0b172a;
  border:1px solid rgba(190,214,255,.12);
  min-height:164px;
}
.tech-card-mini.small{min-height:auto;padding:6px}
.tech-card-mini img{
  width:100%;
  height:118px;
  object-fit:contain;
  border-radius:12px;
  background:#101c31;
  border:1px solid rgba(190,214,255,.08);
}
.tech-card-mini.small img{height:96px}
.tech-card-mini span{
  font-size:.78rem;
  line-height:1.3;
  color:#dce8ff;
}

.player-card .tech-card-strip{
  width:100%;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  grid-auto-flow:row;
  grid-auto-columns:auto;
  overflow:visible;
}
.player-card .tech-card-mini{
  min-height:auto;
  padding:7px;
}
.player-card .tech-card-mini img{
  height:90px;
}
.player-card .tech-card-mini span{
  font-size:.72rem;
}
@media (max-width:720px){
  .player-card .tech-card-mini img{height:82px}
}

/* Card choice modals */
.card-choice-body{gap:16px}
.card-choice-copy{margin:0;color:#dbe8ff;line-height:1.5}
.resource-card-choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(132px,1fr));
  gap:14px;
}
.resource-card-choice{
  display:grid;
  gap:10px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(190,214,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), #0b1729;
  color:var(--ink);
}
.resource-card-choice:hover{transform:translateY(-1px);border-color:rgba(86,166,255,.4)}
.resource-card-choice img{
  width:100%;
  height:150px;
  object-fit:contain;
  border-radius:14px;
  background:#101c31;
  border:1px solid rgba(190,214,255,.08);
}
.resource-card-choice span{font-weight:700}

/* Caravan */
.caravan-target-row{display:flex;flex-wrap:wrap;gap:10px}
.caravan-target-btn,
.trade-mode-btn{
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(190,214,255,.14);
  background:#0b172a;
  color:var(--ink);
}
.caravan-target-btn.active,
.trade-mode-btn.active{background:rgba(86,166,255,.18);border-color:rgba(86,166,255,.52)}
.trade-mode-row{display:flex;gap:10px;flex-wrap:wrap}

/* Feedback tray */
.feedback-tray{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:240;
  width:min(460px, calc(100vw - 24px));
}
.feedback-card{
  display:grid;
  gap:12px;
  padding:14px;
  border-radius:22px;
  border:1px solid rgba(190,214,255,.16);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), rgba(9,18,33,.96);
  box-shadow:var(--shadow);
}
.feedback-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.feedback-message{color:#dbe8ff;line-height:1.45}
.feedback-pill-row{display:flex;flex-wrap:wrap;gap:8px}
.feedback-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid rgba(190,214,255,.12);
  background:#10213c;
}
.feedback-pill.gain{border-color:rgba(67,209,125,.32)}
.feedback-pill.loss{border-color:rgba(226,95,109,.32)}
.feedback-pill img{width:26px;height:26px;object-fit:contain}
.feedback-pill strong{font-size:.84rem}
.feedback-tech-row{display:grid;gap:10px}
.feedback-tech-card{
  display:grid;
  grid-template-columns:74px minmax(0,1fr);
  gap:10px;
  padding:10px;
  border-radius:18px;
  background:#0b172a;
  border:1px solid rgba(244,201,93,.18);
}
.feedback-tech-card img{
  width:74px;
  height:98px;
  object-fit:contain;
  border-radius:12px;
  background:#101c31;
  border:1px solid rgba(190,214,255,.08);
}
.feedback-tech-card div{display:grid;gap:4px}
.feedback-tech-card span{color:#cfe1ff;font-size:.86rem;line-height:1.4}
.feedback-close{margin-left:auto}

/* Action animation modal */
.action-animation-body{place-items:center;text-align:center;gap:14px}
.anim-hero{display:grid;place-items:center}
.anim-art{
  width:140px;
  height:140px;
  object-fit:contain;
  border-radius:18px;
  background:#0e1b31;
  border:1px solid rgba(190,214,255,.12);
  padding:10px;
}
.anim-art.die{padding:16px}
.anim-copy{margin:0;color:#dbe8ff;line-height:1.45}
.anim-result{
  padding:12px 14px;
  border-radius:16px;
  background:#0b172a;
  border:1px solid rgba(190,214,255,.12);
  color:#eef5ff;
  line-height:1.45;
}

@media (max-width:720px){
  .feedback-tray{left:12px;right:12px;bottom:12px;width:auto}
  .resource-card-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .resource-card-choice img{height:126px}
  .feedback-tech-card{grid-template-columns:62px minmax(0,1fr)}
  .feedback-tech-card img{width:62px;height:82px}
}



@media (max-width:720px){
  .town-cost-grid.compact-grid{grid-template-columns:1fr}
  .town-cost-inline-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .town-cost-choice-panel{grid-column:1 / -1}
  .cost-card-mini.compact{width:100%}
}
.results-view{
  display:grid;
  gap:14px;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(244,201,93,.26);
  background:
    radial-gradient(circle at top, rgba(244,201,93,.12), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)),
    #101e36;
  box-shadow:var(--shadow);
}
.results-view.hidden{display:none!important}
.results-inline-actions{display:flex;align-items:center;gap:8px}
.results-modal-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.results-view-modal{border:none;box-shadow:none;background:transparent;padding:0}
.results-modal-body{gap:0}
.modal-backdrop[data-mode="results"] .modal-card{width:min(1080px,100%);max-height:min(88vh,1000px)}
.modal-backdrop[data-mode="results"] .modal-body{padding-top:2px}
.results-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.results-title-wrap{display:grid;gap:6px}
.results-kicker{font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:#f8deb0}
.results-title{margin:0;font-size:clamp(1.3rem,2.6vw,2rem)}
.results-copy{margin:0;color:#d9e7ff;line-height:1.45;max-width:56rem}
.results-meta{display:flex;gap:8px;flex-wrap:wrap}
.results-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
}
.result-card{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(190,214,255,.14);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), #0c172b;
  position:relative;
}
.result-card.winner{border-color:rgba(244,201,93,.44); box-shadow:0 0 0 1px rgba(244,201,93,.12) inset}
.result-rank{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 10px;border-radius:999px;
  background:#132442;border:1px solid rgba(190,214,255,.16);font-weight:700;
}
.result-card.winner .result-rank{background:rgba(244,201,93,.18);border-color:rgba(244,201,93,.36);color:#f8deb0}
.result-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.result-player{display:grid;gap:4px}
.result-name-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.result-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.result-metric{
  display:grid;gap:2px;padding:9px 10px;border-radius:14px;
  background:#101c31;border:1px solid rgba(190,214,255,.1)
}
.result-metric span{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.result-metric strong{font-size:1rem;color:#eef5ff}
.results-tech-strip{display:flex;gap:8px;overflow:auto;padding-bottom:2px}
.result-card .tech-card-mini{min-width:90px;min-height:auto}
.result-card .tech-card-mini img{height:92px}
.result-empty{padding:10px 12px;border-radius:14px;background:#101b2d;border:1px dashed rgba(190,214,255,.16);color:#bfd4f5}
.match-game.finished .action-ribbon-card{display:none}
.match-game.finished .selected-action-card{display:none}
@media (max-width:720px){
  .results-grid{grid-template-columns:1fr}
  .result-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.confirm-stack{display:grid;gap:12px}
.confirm-copy{margin:0;line-height:1.5;color:#dfeaff}
.confirm-meta{display:flex;flex-wrap:wrap;gap:8px}


.lava-forge-body{gap:16px}
.lava-forge-hero{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.lava-forge-card{display:grid;gap:8px;justify-items:center;padding:12px;border-radius:20px;background:#0b172a;border:1px solid rgba(190,214,255,.12)}
.lava-forge-card.reward{border-color:rgba(244,201,93,.24);background:linear-gradient(180deg,rgba(244,201,93,.08),rgba(255,255,255,0)),#0b172a}
.lava-forge-card img{width:100%;max-width:132px;height:132px;object-fit:contain;border-radius:16px;background:#101c31;border:1px solid rgba(190,214,255,.08);padding:10px}
.lava-forge-card span{font-weight:700}
.lava-forge-arrow{font-size:2rem;color:var(--gold);font-weight:900;text-align:center}
.lava-forge-copy{margin:0;color:#dbe8ff;line-height:1.5}
.lava-forge-stepper{display:flex;align-items:center;justify-content:center;gap:12px}
.lava-forge-count{display:grid;place-items:center;min-width:140px;padding:12px 16px;border-radius:18px;background:#10213c;border:1px solid rgba(190,214,255,.12)}
.lava-forge-count strong{font-size:1.4rem}
.lava-forge-count span{color:var(--muted);font-size:.84rem}
.lava-forge-summary{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
@media (max-width:720px){
  .lobby-row{grid-template-columns:1fr;justify-items:start}
  .lobby-actions{width:100%;justify-content:space-between}
  .lobby-code-block{width:100%}
  .event-log{max-height:260px}
  .lava-forge-hero{grid-template-columns:1fr}
  .lava-forge-arrow{transform:rotate(90deg)}
}


.selected-action-card .town-cost-grid.compact-grid{grid-template-columns:1fr;gap:10px}
.selected-action-card .compact-town-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.town-cost-choice-inline{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:center}
.town-cost-choice-pill{display:grid;place-items:center;padding:10px 12px;border-radius:14px;background:#0f2138;border:1px dashed rgba(190,214,255,.18);color:#dbe8ff;font-size:.82rem;line-height:1.35;text-align:center}
.town-cost-choice-pill.free{background:rgba(69,126,207,.12);border-color:rgba(99,168,255,.26);color:#eef6ff}
.town-choice-divider.inline{min-width:0;padding:0 2px}
.selected-action-card .town-cost-choice-inline .cost-card-mini.compact{width:100%;max-width:none}
.selected-action-card .cost-card-mini.compact .cost-card-art{min-height:64px}
.selected-action-card .cost-card-mini.compact .cost-card-art img{max-height:50px}
.selected-action-card .cost-card-mini.compact .cost-card-title{font-size:.74rem}



@media (min-width:1201px){
  .players-rail,
  .detail-rail{
    width:100%;
    min-width:0;
  }
  .players-rail .rail-card,
  .detail-rail .detail-card{
    width:100%;
  }
}

/* v16 desktop layout stability fix */
@media (min-width: 981px){
  .match-workspace{
    align-items:start;
  }
  .action-log-stack{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-width:0;
    align-self:start;
  }
  .action-log-stack > .action-ribbon-card,
  .action-log-stack > .log-card{
    margin:0;
    position:relative;
    inset:auto;
    width:100%;
    flex:0 0 auto;
  }
  .action-log-stack > .log-card{
    z-index:0;
  }
  .action-log-stack > .action-ribbon-card{
    z-index:1;
  }
}

/* v18 desktop action ribbon restore */
@media (min-width: 981px){
  .match-workspace{
    grid-template-columns:minmax(0,1fr) 320px;
    grid-template-areas:
      "board players"
      "lower detail";
    align-items:start;
  }
  .action-log-stack{
    grid-area:lower;
    display:grid !important;
    grid-template-rows:auto auto;
    gap:14px;
    align-content:start;
    min-width:0;
  }
  .match-game:not(.finished) .action-log-stack > .action-ribbon-card{
    display:block !important;
    width:100%;
    min-width:0;
    margin:0;
    order:0;
    visibility:visible;
  }
  .match-game:not(.finished) .action-log-stack > .log-card{
    display:block !important;
    width:100%;
    min-width:0;
    margin:0;
    order:1;
  }
  .match-game.finished .action-log-stack > .action-ribbon-card{
    display:none !important;
  }
}

/* v19 desktop action ribbon + log structure fix */
@media (min-width: 981px){
  .action-log-stack{
    display:flex !important;
    flex-direction:column;
    gap:14px;
    align-content:flex-start;
    align-self:start;
    min-width:0;
  }
  .action-log-stack > .action-ribbon-card,
  .action-log-stack > .log-card{
    display:block !important;
    grid-area:auto !important;
    position:relative;
    inset:auto;
    width:100%;
    min-width:0;
    margin:0;
    order:initial;
    visibility:visible;
    flex:0 0 auto;
  }
  .action-ribbon-card .ribbon-head{
    display:grid;
    grid-template-columns:1fr;
    justify-items:start;
    align-items:start;
    gap:10px;
  }
  .action-ribbon-card .action-tabs{
    width:100%;
    justify-content:flex-start;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
}