:root{
  --bg:#0b1020; --panel:#121a33; --text:#e7ecff; --muted:#a9b2d6;
  --accent:#7aa2ff; --good:#5ee6a8; --warn:#ffd36e; --bad:#ff6b8a;
  --corr:#18224a; --room:#2a356a; --void:#070a14;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --hudH: 140px;

}
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--sans); color:var(--text);
  background: radial-gradient(1200px 800px at 18% 0%, #1a2450 0%, var(--bg) 58%);
}
header{
  position: sticky; top:0; z-index:10;
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(10,14,30,.6);
  backdrop-filter: blur(10px);
}
header .title{display:flex; align-items:center; gap:10px; font-weight:900}
header .badge{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:4px 8px; border-radius:999px;
  white-space:nowrap;
}
main{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:16px;
  padding:16px;
  max-width: 1350px;
  margin:0 auto;
}
@media (max-width: 1050px){ main{grid-template-columns:1fr;} }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card h2{
  margin:0; padding:12px 14px;
  font-size:14px; letter-spacing:.2px; color:var(--muted);
  border-bottom:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.15);
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.content{padding:14px}
.note{
  font-size:12px; color:var(--muted);
  padding:10px 12px;
  background: rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
}
.board-wrap{display:grid; gap:10px}
.board{
  display:grid;
  grid-template-columns: repeat(23, 1fr);
  gap:6px;
  padding:14px;
  background: rgba(0,0,0,.12);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
}
.cell{
  aspect-ratio: 1 / 1;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  position:relative;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,.70);
  cursor:not-allowed;
  overflow:hidden;
}
.cell.void{ background: var(--corr); cursor: default; }
.cell.corridor{ background: var(--corr); cursor: default; }
.cell.room{ background: var(--room); cursor: default; }
.cell.door{
  outline: 2px dashed rgba(255,255,255,.20);
  outline-offset: -3px;
}
.cell.reachable{
  cursor:pointer;
  box-shadow: 0 0 0 2px rgba(122,162,255,.55) inset, 0 0 18px rgba(122,162,255,.15);
  border-color: rgba(122,162,255,.65);
}
.cell.reachable:hover{ transform: translateY(-1px); transition: transform .08s ease; }
.roomtag{
  position:absolute; left:8px; top:8px;
  font-size:10px; color: rgba(255,255,255,.90);
  opacity:.92;
  max-width: 85%;
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events:none;
}
.secret{
  position:absolute; right:8px; top:8px;
  font-size:11px; opacity:.9;
  pointer-events:none;
}
.token{
  width: 18px; height: 18px;
  border-radius: 999px;
  border:2px solid rgba(255,255,255,.85);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-family:var(--mono);
  color: rgba(10,14,30,.9);
  font-weight:900;
}
.token.player0{ background:#7aa2ff; }
.token.player1{ background:#5ee6a8; }
.token.player2{ background:#ffd36e; }
.token.player3{ background:#ff6b8a; }
.token.npc{
  background: rgba(255,255,255,.55);
  border-color: rgba(255,255,255,.75);
}
.row{display:flex; gap:10px; flex-wrap:wrap;}
.stat{
  flex:1;
  min-width: 170px;
  background: rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:10px 12px;
}
.stat .k{font-size:12px; color:var(--muted)}
.stat .v{font-family:var(--mono); margin-top:6px; font-size:13px}
button{
  appearance:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:800;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
button:hover{border-color: rgba(122,162,255,.6)}
button.primary{border-color: rgba(122,162,255,.55); background: rgba(122,162,255,.15)}
button.danger{border-color: rgba(255,107,138,.55); background: rgba(255,107,138,.15)}
button:disabled{opacity:.45; cursor:not-allowed; filter: grayscale(25%)}
.section{margin-top:12px}
.label{font-size:12px; color:var(--muted); margin:6px 0}
.log{
  max-height: 220px;
  overflow:auto;
  padding:10px 12px;
  background: rgba(0,0,0,.12);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  font-size: 13px;
  line-height: 1.35;
}
.log p{ margin: 0 0 10px 0; }
.muted{ color: var(--muted); }
.good{ color: var(--good); }
.warn{ color: var(--warn); }
.bad{ color: var(--bad); }
select, input{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline:none;
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.chip{
  font-family: var(--mono);
  font-size:12px;
  border-radius:999px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(231,236,255,.95);
  white-space:nowrap;
}
.chip.yours{ border-color: rgba(122,162,255,.55); background: rgba(122,162,255,.12); }
.notebook{
  overflow:auto;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background: rgba(0,0,0,.10);
  max-height: 340px;
}
table{ width:100%; border-collapse: collapse; font-size:13px; }
th, td{ border-bottom:1px solid rgba(255,255,255,.08); padding:10px 10px; vertical-align: middle; }
th{
  text-align:left; color: var(--muted); font-weight:900;
  background: rgba(0,0,0,.12);
  position: sticky; top: 0; z-index: 2;
}
td small{ color: var(--muted); }
.mark{
  width:74px; text-align:center; font-family: var(--mono);
  border-radius: 12px; cursor:pointer; user-select:none;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  padding:6px 0;
  display:inline-block;
}
.mark.blank{ opacity:.85; }
.mark.q{ border-color: rgba(255,211,110,.55); background: rgba(255,211,110,.10); }
.mark.x{ border-color: rgba(255,107,138,.55); background: rgba(255,107,138,.12); }
.seenBadge{
  display:inline-block;
  font-family: var(--mono);
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(94,230,168,.55);
  background: rgba(94,230,168,.12);
  color: rgba(231,236,255,.95);
}
.modal{
  position:fixed; inset:0;
  background: rgba(0,0,0,.58);
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  z-index:50;
}
.modal.show{display:flex;}
.modal .box{
  width:min(920px, 100%);
  background: linear-gradient(180deg, rgba(18,26,51,.98), rgba(10,14,30,.98));
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  max-height: 92vh;
  display:flex;
  flex-direction:column;
}
.modal header{
  position:static;
  background: rgba(0,0,0,.20);
  border-bottom:1px solid rgba(255,255,255,.10);
  padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.head-left{display:flex; align-items:center; gap:10px;}
.modal .body{ padding:14px; overflow:auto; }
.modal .actions{
  display:flex; justify-content:flex-end; gap:10px;
  padding:12px 14px;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
@media (max-width: 720px){ .grid2{grid-template-columns:1fr;} }

.menu{
  position:fixed; inset:0;
  z-index:80;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: radial-gradient(900px 700px at 20% 10%, rgba(122,162,255,.25), rgba(0,0,0,.65));
  backdrop-filter: blur(8px);
}
.menu.show{display:flex;}
.menu .panel{
  width:min(980px, 100%);
  max-height: 92vh;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(18,26,51,.96), rgba(10,14,30,.96));
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.menu .panel.panel-small{ width:min(620px, 100%); }
.menu .top{
  padding:18px 18px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.menu .top .big{ font-size:22px; font-weight:1000; letter-spacing:.3px; }
.menu .top .small{ color: var(--muted); font-size:12px; margin-top:6px; }
.menu .mid{
  padding:16px 18px;
  overflow:auto;
  flex:1;
}
.menu .bottom{
  padding:12px 18px 18px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex; justify-content:flex-end; gap:10px;
  background: rgba(0,0,0,.12);
}
.block{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 18px;
  padding:14px;
}
.block h3{ margin:0 0 10px 0; font-size:13px; color: var(--muted); letter-spacing:.2px; }
.error{
  border:1px solid rgba(255,107,138,.55);
  background: rgba(255,107,138,.12);
  padding:10px 12px;
  border-radius:14px;
  color: rgba(231,236,255,.95);
  font-size:13px;
  display:none;
  margin-top:10px;
}
.slot{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
  background: rgba(0,0,0,.12);
  display:grid;
  gap:10px;
  margin-top:10px;
}
.slot .head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pill{
  font-family:var(--mono);
  font-size:12px;
  color: var(--muted);
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  white-space:nowrap;
}
.handoff{
  position:fixed; inset:0;
  z-index:70;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
}
.handoff.show{display:flex;}
.handoff .cardx{
  width:min(560px, 100%);
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(18,26,51,.96), rgba(10,14,30,.96));
  box-shadow: var(--shadow);
  padding:18px;
  text-align:center;
}
.handoff .who{ font-size:18px; font-weight:1000; margin-top:6px; }
.handoff .hint{ margin-top:10px; color: var(--muted); font-size:12px; line-height:1.35; }
.handoff .actions{ margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
/* ===== Cards (cartinhas) ===== */
.pickGrid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 900px){
  .pickGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cardPick{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  border-radius:16px;
  overflow:hidden;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  position:relative;
  user-select:none;
  transition: transform .08s ease;
}
.cardPick:hover{ transform: translateY(-1px); border-color: rgba(122,162,255,.55); }
.cardPick.selected{
  border-color: rgba(122,162,255,.85);
  box-shadow: 0 0 0 2px rgba(122,162,255,.55) inset, 0 12px 22px rgba(0,0,0,.28);
}
.cardPick .imgWrap{
  aspect-ratio: 3 / 4;
  background: rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.cardPick img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}
.cardPick .fallback{
  font-family: var(--mono);
  color: rgba(231,236,255,.90);
  font-size: 12px;
  padding: 10px;
  text-align:center;
  line-height:1.2;
}
.cardPick .labelBar{
  padding:8px 10px;
  font-size:12px;
  font-weight:900;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.cardPick .labelBar span{
  color: rgba(231,236,255,.95);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cardPick .tag{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding:2px 6px;
  border-radius:999px;
  white-space:nowrap;
}
.cardsRow{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 1050px){
  .cardsRow{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .cardsRow{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* === TABULEIRO: overlay de imagens das salas (não participa do grid) === */
.board{ position: relative; overflow: hidden; }

.room-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.room-bg{
  position:absolute;
  background-size: cover;
  background-position: center;
  border-radius: 22px;
  opacity: .96;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* células ficam acima do overlay */
.cell{ z-index:2; }

/* dentro das salas não queremos “quadradinhos” nem caminho por cima */
.cell.room{
  background: transparent !important;
  border-color: transparent !important;
}

/* tag da sala continua legível por cima */
.cell.room .roomtag{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
}
/* ===== UI MINIMALISTA: ARENA FULLSCREEN + HUD EMBAIXO ===== */

/* some com o header inteiro */
header{ display:none !important; }

/* arena do tabuleiro ocupa tudo, menos o HUD */
#arena{
  position: fixed;
  left: 0; right: 0;
  top: 0;
  bottom: var(--hudH);
  padding: 10px;
  z-index: 20;
  overflow: auto;  /* se em telas pequenas precisar rolar */
}

/* tabuleiro deve preencher a arena */
/* Deixa a arena rolar vertical/horizontal quando precisar */
#arena{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* NÃO force height:100% no grid, senão ele estica e deforma as células */
#arena #board{
  width: 100%;
  height: auto !important;   /* <-- chave */
  min-height: unset !important;
}

/* Garante que o grid não tente “preencher” a altura sobrando */
.board{
  align-content: start;
  place-content: start;
}


/* HUD fixo embaixo */
#hud{
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  height: var(--hudH);
  z-index: 40;

  display: flex;
  gap: 12px;
  align-items: flex-end;

  padding: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(10,14,30,.82);
  backdrop-filter: blur(10px);
}

/* cartinhas rolam horizontal se precisar */
#hudCards{
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
}

/* botões do lado das cartinhas */
#hudActions{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* deixa a "mão" mais compacta */
.hand{
  display:flex;
  align-items:flex-end;
  gap:0;
  padding:4px 6px;
}
.hand .cardtile{ margin-left:-26px; }
.hand .cardtile:first-child{ margin-left:0; }

/* menu no canto superior esquerdo */
#btnMenu{
  position: fixed !important;
  left: 10px !important;
  top: 10px !important;
  z-index: 60 !important;
}

/* some com infos de cima (turno, movimentos, dicas, regras etc) */
#turnInfo, #movesInfo, #statusBadge, #boardHint{ display:none !important; }
.note{ display:none !important; }
.card h2{ display:none !important; }

/* botão reiniciar some */
#btnRestart{ display:none !important; }

/* ===== overlay das salas não pode atrapalhar o grid ===== */
.room-overlay{
  position:absolute !important;
  inset:0 !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.room-bg{
  position:absolute !important;
  z-index:0 !important;
}
.cell{ z-index:2 !important; }
/* fullscreen: tira borda/padding visual do tabuleiro */
#arena #board{
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Aumenta o modal de privacidade quando for mostrar carta */
#privacyModal > div{
  width: min(820px, 96vw) !important;
}

/* Centraliza melhor o conteúdo */
#privacyBody{
  justify-items: center;
}

/* Deixa a carta preview gigante */
#privacyModal .cardtile.preview{
  padding: 16px !important;
  gap: 10px !important;
}

#privacyModal .cardtile.preview img,
#privacyModal .cardtile.preview div{
  /* caso o img falhe e caia no fallback, ambos ficam grandes */
}

#privacyModal .cardtile.preview img{
  width: 280px !important;
  height: 280px !important;
  border-radius: 18px !important;
}

/* legenda maior */
#privacyModal .cardtile.preview > div:last-child{
  font-size: 16px !important;
  max-width: 520px !important;
}
@media (max-width: 720px){
  :root{ --hudH: 110px; }

  #hud{
    padding: 8px;
    gap: 8px;
  }

  #hudActions button{
    padding: 8px 10px;
    border-radius: 12px;
    font-size: 12px;
  }

  .token{
    width: 14px;
    height: 14px;
    font-size: 9px;
  }

  .board{
    gap: 4px;
  }

  #arena{
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }
}