*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html,
body{

  width:100%;
  height:100%;

  overflow:hidden;

  background:#0b2d1d;

  font-family:
    Arial,
    sans-serif;

  color:white;

  touch-action:none;

}

/* =========================================
APP
========================================= */

.app-shell{

  width:100vw;
  height:100vh;

  display:flex;

  flex-direction:column;

  padding:8px;

  overflow:hidden;

}

/* =========================================
TOPO
========================================= */

.topbar{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:10px;

  flex-wrap:wrap;

  margin-bottom:8px;

}

.eyebrow{

  font-size:11px;

  opacity:.8;

}

h1{

  font-size:24px;

}

/* =========================================
STATS
========================================= */

.stats{

  display:flex;

  gap:8px;

  flex-wrap:wrap;

}

.stats div{

  background:
    rgba(255,255,255,.08);

  padding:6px 10px;

  border-radius:10px;

  text-align:center;

  min-width:60px;

}

.stats span{

  display:block;

  font-size:18px;

  font-weight:bold;

}

/* =========================================
AÇÕES
========================================= */

.actions{

  display:flex;

  gap:8px;

  flex-wrap:wrap;

}

.primary-btn{

  border:none;

  background:#198754;

  color:white;

  padding:10px 14px;

  border-radius:10px;

  cursor:pointer;

  font-size:14px;

  font-weight:bold;

}

/* =========================================
MENSAGEM
========================================= */

.message{

  margin-bottom:8px;

  padding:8px;

  border-radius:10px;

  background:
    rgba(0,0,0,.2);

  font-size:13px;

}

/* =========================================
BOARD
========================================= */

.board{

  flex:1;

  display:flex;

  flex-direction:column;

  background:#146c43;

  border-radius:18px;

  padding:10px;

  overflow:hidden;

  box-shadow:
    0 0 35px rgba(0,0,0,.4);

}

/* =========================================
LINHAS
========================================= */

.top-row,
.tableau-row{

  display:flex;

  justify-content:space-between;

  gap:.8vw;

}

.top-row{

  margin-bottom:10px;

}

/* =========================================
SLOTS
========================================= */

.slot{

  width:clamp(58px,8vw,110px);

  height:clamp(84px,12vw,150px);

  border-radius:12px;

  border:
    2px dashed rgba(255,255,255,.25);

  position:relative;

  flex-shrink:0;

}

.tableau{

  flex:1;

  min-height:100%;

}

.spacer{

  flex:1;

}

/* =========================================
CARTAS
========================================= */

.card{

  width:100%;

  height:100%;

  border-radius:12px;

  background:white;

  position:absolute;

  left:0;

  top:0;

  padding:6px;

  color:black;

  box-shadow:
    0 6px 15px rgba(0,0,0,.45);

  transition:
    transform .12s ease;

  user-select:none;

  cursor:pointer;

}

.card:hover{

  transform:
    translateY(-2px);

}

.card.red{

  color:#c11;

}

.card.black{

  color:#111;

}

.rank{

  font-size:clamp(14px,2vw,24px);

  font-weight:bold;

}

.rank.bottom{

  position:absolute;

  right:6px;

  bottom:6px;

  transform:rotate(180deg);

}

.suit.center{

  position:absolute;

  top:50%;

  left:50%;

  transform:
    translate(-50%,-50%);

  font-size:
    clamp(24px,4vw,42px);

}

/* =========================================
RODAPÉ
========================================= */

.help{

  margin-top:8px;

  font-size:12px;

  opacity:.85;

}

/* =========================================
MOBILE LANDSCAPE
========================================= */

@media (max-width:900px){

  .topbar{

    gap:6px;

  }

  h1{

    font-size:18px;

  }

  .stats span{

    font-size:15px;

  }

  .primary-btn{

    padding:8px 10px;

    font-size:12px;

  }

  .slot{

    width:11vw;

    height:16vw;

  }

}

/* =========================================
RETRATO BLOQUEADO
========================================= */

@media (orientation:portrait){

  body::before{

    content:
      '🔄 Vire o celular para jogar';

    position:fixed;

    inset:0;

    background:#081b12;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding:30px;

    font-size:24px;

    z-index:999999;

  }

}