:root{
    --bg1:#0b0f12;
    --bg2:#0d2a1e;
    --neon:#b04cff;

    /* --board-blue:#0b3aa8; */
    --board-blue:#061f5c;
    --board-blue-dark:#ffffff;
    --cell-line:rgba(255,255,255,.18);

    --panel:#0e1626;
    --panel2:#0a1020;

    --white:#fff;
    --shadow: 0 22px 60px rgba(0,0,0,.55);
    --ok:#22c55e;
    --bad:#ef4444;
  }

  *{ box-sizing:border-box; }
  html,body{ height:100%; margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
  body{
    display:grid;
    place-items:center;
    background: radial-gradient(1200px 600px at 50% 20%, rgba(70,120,255,.25), transparent 60%),
                radial-gradient(900px 600px at 20% 85%, rgba(176,76,255,.18), transparent 55%),
                linear-gradient(180deg, var(--bg1), var(--bg2));
    overflow:hidden;
  }

  .game-screen{
    width: 100%;
    height: 100%;
    /* height: min(92vh, 720px);
    aspect-ratio: 16 / 9; */
    position: relative;
  }

  .game-stage{
    display: grid;
    /* grid-template-rows: auto 1fr; */
    max-width: 1280px;
    margin-inline: auto;
    margin-top: 7rem;
    
    position:absolute;
    inset:0;
    /* border-radius: 18px; */
    /* box-shadow: var(--shadow); */
    overflow:hidden;
    /* background:
      radial-gradient(1000px 420px at 50% 70%, rgba(0,0,0,.25), transparent 60%),
      linear-gradient(180deg, #05070d 0%, #070d1a 60%, #04060c 100%); */
  }

  /* .game-stage::before{
    content:"";
    position:absolute;
    inset:-40px;
    background:
      radial-gradient(circle at 70% 30%, rgba(176,76,255,.20), transparent 55%),
      radial-gradient(circle at 55% 25%, rgba(176,76,255,.16), transparent 52%),
      radial-gradient(circle at 40% 20%, rgba(176,76,255,.12), transparent 50%);
    filter: blur(1px);
    opacity:.9;
    pointer-events:none;
  } */
  /* .game-stage::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      repeating-linear-gradient(115deg,
        transparent 0 18px,
        rgba(176,76,255,.10) 18px 20px,
        transparent 20px 60px);
    opacity:.25;
    pointer-events:none;
  } */

  .board-area{
    /* position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-52%); */
    width: 90%;
    /* width: min(78%, 860px); */
  }

  .qr-box{
    position:absolute;
    left: -72px;
    bottom: 130px;
    width: 70px;
    height: 70px;
    background: #0bd3ff;
    border-radius: 10px;
    display:grid;
    place-items:center;
    box-shadow: 0 10px 25px rgba(0,0,0,.4);
    border: 2px solid rgba(255,255,255,.55);
  }
  .qr-placeholder{
    width: 52px;
    height: 52px;
    background:
      linear-gradient(90deg, rgba(0,0,0,.22) 1px, transparent 1px) 0 0/6px 6px,
      linear-gradient(0deg, rgba(0,0,0,.22) 1px, transparent 1px) 0 0/6px 6px,
      #e9fbff;
    border-radius: 6px;
    display:grid;
    place-items:center;
    font-weight:900;
    color:#0a2240;
    font-size:12px;
  }

  .brand{
    position:absolute;
    right: -66px;
    bottom: 140px;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.25);
    display:grid;
    place-items:center;
    backdrop-filter: blur(4px);
  }
  .brand-text{
    font-weight:800;
    color: rgba(255,255,255,.75);
    text-transform: lowercase;
    font-size: 16px;
  }

  .board{ position:relative; width:100%; }

  .board-frame{
    position:relative;
    border-radius: 18px;
    padding: 18px;
    background: rgba(255,255,255,.06);
    border: 3px solid rgba(255,255,255,.75);
    box-shadow:
      inset 0 0 0 6px rgba(0,0,0,.55),
      0 16px 45px rgba(0,0,0,.6);
    max-height: 354px;
  }

  .board-frame::before,
  .board-frame::after{
    content:"";
    position:absolute;
    top:18%;
    width: 32px;
    height: 64%;
    background: rgba(0,0,0,.35);
    border-top: 3px solid rgba(255,255,255,.75);
    border-bottom: 3px solid rgba(255,255,255,.75);
    z-index: 0;
  }
  .board-frame::before{
    left:-35px;
    border-left: 3px solid rgba(255,255,255,.75);
    border-radius: 14px 0 0 14px;
  }
  .board-frame::after{
    right:-35px;
    border-right: 3px solid rgba(255,255,255,.75);
    border-radius: 0 14px 14px 0;
  }

  /* === PORTA / PORTAL (overlay em cima da grade) === */
  .door{
    position: relative;
    border-radius: 10px;
    overflow:hidden;
    z-index: 1;
    min-height: 0;
    transition: min-height 0.8s cubic-bezier(.2,.9,.2,1);
  }
  .door--open{
    /* min-height: 400px; */
  }

  .portal-glow{
    position:absolute;
    inset:0;
    background:
      radial-gradient(650px 280px at 50% 55%, rgba(255,255,255,.35), transparent 65%),
      radial-gradient(420px 220px at 50% 55%, rgba(176,76,255,.55), transparent 60%),
      linear-gradient(180deg, rgba(16,185,255,.10), rgba(176,76,255,.18));
    opacity:0;
    transition: opacity .6s ease;
    pointer-events:none;
    z-index: 1;
  }

  .door-panel{
    position:absolute;
    top:0; bottom:0;
    width:50%;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.25));
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.10);
    z-index: 2;
    transition: transform 1.1s cubic-bezier(.2,.9,.2,1), filter .6s ease;
    filter: saturate(1.1);
  }

  .door-left{
    left:0;
    background:
      linear-gradient(90deg, rgba(0,0,0,.22), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.25)),
      var(--board-blue);
    border-right: 1px solid rgba(255,255,255,.22);
  }
  .door-right{
    right:0;
    background:
      linear-gradient(270deg, rgba(0,0,0,.22), transparent 60%),
      linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.25)),
      var(--board-blue);
    border-left: 1px solid rgba(255,255,255,.22);
  }

  .door--open .door-left{ transform: translateX(-110%); }
  .door--open .door-right{ transform: translateX(110%); }
  .door--open .portal-glow{ opacity: 1; }

  /* === Grade da frase === */
  .phrase-grid{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns: repeat(14, 1fr);
    grid-auto-rows: 100px;
    gap: 6px;
    background: rgba(255,255,255,.10);
    border-radius: 10px;
    overflow:hidden;
    position: relative;
    z-index: 3; /* fica acima do portal-glow (1) e abaixo das portas (2) */
  }

  .cell{
    display:grid;
    place-items:center;
    background: var(--board-blue-dark);
    border: 1px solid var(--cell-line);
    color: transparent;
    font-weight: 900;
    font-size: 4rem;
    text-transform: uppercase;
    user-select:none;
  }

  .cell--revealed{
    background: #ffffff;
    color: #0a1a2e;
  }

  .cell--space{
    background: var(--board-blue);
    border-color: var(--cell-line);
  }

  .board-footer{
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.30));
    border: 2px solid rgba(255,255,255,.35);
    border-radius: 14px;
    padding: 12px 16px 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,.55);
  }

  #hiddenPhrase {
    text-align: center;
    font-weight: 600;
    font-size: 3.3rem;
    margin-block: 3rem;
    color: var(--board-blue);
    text-shadow: 0 0 41px #FAB704, 0 0 141px #FAB704;
    letter-spacing: 1px;
  }

  .category{
    width: fit-content;
    margin-inline: auto;
    margin-bottom: 2rem;
    background: #fab401;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 12px 18px;
    text-align:center;
    border: 5px solid var(--board-blue);
    box-shadow: 3px 3px 0px 0px var(--board-blue),
                5px 5px 0px 0px var(--board-blue),
                7px 7px 0px 0px var(--board-blue),
                10px 10px 0px 0px var(--board-blue);
  }
  .category-label{
    color: var(--board-blue);
    font-weight: 900;
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .guess-row{
    margin-top: 10px;
    display:flex;
    gap:10px;
    align-items:center;
    justify-content:space-between;
  }

  .guess-form{
    flex: 1;
    display:flex;
    gap:10px;
    align-items:center;
  }

  .guess-input{
    flex:1;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: var(--panel2);
    color: rgba(255,255,255,.92);
    padding: 0 14px;
    font-size: 16px;
    outline: none;
  }
  .guess-input::placeholder{ color: rgba(255,255,255,.45); }

  .btn{
    height: 44px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    color: rgba(255,255,255,.92);
    font-weight: 700;
    cursor: pointer;
  }
  .btn:active{ transform: translateY(1px); }

  .feedback{
    min-width: 160px;
    text-align:right;
    font-weight: 700;
    color: rgba(255,255,255,.75);
  }
  .feedback.ok{ color: var(--ok); }
  .feedback.bad{ color: var(--bad); }
  .feedback-wrap{
   border: 0px solid red;
    margin-top: 10px;
    text-align: center;
  }
  .feedback-wrap *{
      text-align: center;
    display: inline-block;
  }

  .current-guess{
    margin-top: 8px;
    text-align:center;
  }
  .guess-letter{
    display:inline-block;
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 10px;
    background: var(--panel2);
    border: 1px solid rgba(255,255,255,.18);
    color: rgba(255,255,255,.92);
    font-weight: 900;
    letter-spacing: 2px;
  }

  .tentativas-wrap{
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
    font-size: 13px;
  }
  .tentativas-label{
    color: rgba(255,255,255,.6);
    margin-right: 6px;
  }
  .tentativas-list{
    color: rgba(255,255,255,.9);
    font-weight: 700;
    letter-spacing: 1px;
    word-break: break-all;
  }

  #tentativasOutList {
    font-size: 3rem;
  }

  @keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
  }
  .shake { animation: shake .35s ease; }

  @media (max-width: 900px){
    .game-screen{ height: 92vh; }
    .board-area{ width: 88%; }
    .qr-box{ left: -18px; bottom: 146px; transform: scale(.9); }
    .brand{ right: -18px; bottom: 156px; transform: scale(.9); }
    .phrase-grid{ grid-auto-rows: 34px; }
    .feedback{ display:none; }
  }

  /* ===== PORTAL MAIS "CINEMÁTICO" ===== */
.portal-vortex{
position:absolute;
inset:-18%;
z-index: 0;
opacity: 0;
transform: scale(.85);
transition: opacity .7s ease, transform .9s ease;
filter: blur(.3px) saturate(1.25);
background:
  radial-gradient(circle at 50% 50%, rgba(255,255,255,.22) 0 10%, transparent 38%),
  conic-gradient(from 0deg,
    rgba(176,76,255,.00),
    rgba(176,76,255,.55),
    rgba(11,211,255,.55),
    rgba(255,255,255,.25),
    rgba(176,76,255,.55),
    rgba(11,211,255,.45),
    rgba(176,76,255,.00)
  );
border-radius: 24px;
}

.portal-burst{
position:absolute;
inset:-10%;
z-index: 0;
opacity: 0;
transform: scale(.6);
border-radius: 24px;
background:
  radial-gradient(circle at 50% 55%, rgba(255,255,255,.65), transparent 48%),
  radial-gradient(circle at 50% 55%, rgba(176,76,255,.55), transparent 60%),
  radial-gradient(circle at 50% 55%, rgba(11,211,255,.45), transparent 65%);
filter: blur(0.6px);
}

.portal-particles{
position:absolute;
inset:0;
z-index: 1;
opacity: 0;
pointer-events:none;
background-image:
  radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 2px),
  radial-gradient(circle, rgba(11,211,255,.55) 1px, transparent 2px),
  radial-gradient(circle, rgba(176,76,255,.55) 1px, transparent 2px);
background-size: 120px 120px, 180px 180px, 240px 240px;
background-position: 0 0, 60px 90px, 110px 40px;
mix-blend-mode: screen;
filter: blur(.1px);
}

.portal-text{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%) scale(.95);
z-index: 4;
opacity: 0;
padding: 10px 16px;
border-radius: 14px;
border: 1px solid rgba(255,255,255,.22);
background: rgba(0,0,0,.25);
color: rgba(255,255,255,.92);
font-weight: 900;
letter-spacing: 2px;
text-shadow: 0 10px 30px rgba(0,0,0,.6);
backdrop-filter: blur(6px);
}

/* quando abrir */
.door--open .portal-vortex{
opacity: 1;
transform: scale(1);
animation: vortexSpin 1.1s linear infinite;
}

.door--open .portal-particles{
opacity: .75;
animation: particlesFloat 1.6s ease-in-out infinite;
}

.door--open .portal-burst{
animation: burst 1.1s ease-out forwards;
}

.door--open .portal-text{
animation: portalTextIn 1.1s ease forwards .25s;
}

@keyframes vortexSpin{
from { transform: scale(1) rotate(0deg); }
to   { transform: scale(1) rotate(360deg); }
}

@keyframes burst{
0%   { opacity: 0; transform: scale(.6); }
35%  { opacity: 1; transform: scale(1.04); }
100% { opacity: .0; transform: scale(1.25); }
}

@keyframes particlesFloat{
0%,100% { transform: translateY(0); opacity:.65; }
50%     { transform: translateY(-6px); opacity:.85; }
}

@keyframes portalTextIn{
0%   { opacity:0; transform: translate(-50%,-50%) scale(.92); }
55%  { opacity:1; transform: translate(-50%,-50%) scale(1.03); }
100% { opacity:1; transform: translate(-50%,-50%) scale(1); }
}

/* garante camadas: vortex/pulsos por baixo da grade, portas por cima */
.door{ position: relative; }
.phrase-grid{ position: relative; z-index: 3; }
/* === PORTAS (não aparecem até completar) === */
.door-panel{
position:absolute;
top:0; bottom:0;
width:50%;
z-index: 6;                 /* acima da grade quando abrir */
opacity: 0;                 /* <- escondidas por padrão */
pointer-events:none;

background:
  linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.25)),
  linear-gradient(180deg, #0b4ad0, #08318f);
box-shadow: inset 0 0 0 2px rgba(255,255,255,.10);

transition:
  transform 1.1s cubic-bezier(.2,.9,.2,1),
  opacity .25s ease;
transform: translateX(0);
}

.door-left{
left:0;
border-right: 1px solid rgba(255,255,255,.22);
}
.door-right{
right:0;
border-left: 1px solid rgba(255,255,255,.22);
}

/* mostra as portas só quando estiver abrindo */
.door--opening .door-panel{ opacity: 1; }

/* animação de abrir */
.door--open .door-left{ transform: translateX(-110%); opacity: 1; }
.door--open .door-right{ transform: translateX(110%); opacity: 1; }

/* === CHAVE (centro, gira e some) === */
.door-key{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 7;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
}
.door--opening .door-key{
opacity: 1;
animation: keyTurnAndFade 1.05s ease-in-out forwards;
}
.door--open .door-key{
opacity: 0;
visibility: hidden;
}
.door-key-icon{
display: block;
font-size: 56px;
filter: drop-shadow(0 0 12px rgba(255,255,255,.5)) drop-shadow(0 0 24px rgba(176,76,255,.6));
line-height: 1;
}
@keyframes keyTurnAndFade {
0%   { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); }
35%  { transform: translate(-50%, -50%) rotate(360deg) scale(1.1); }
60%  { opacity: 1; transform: translate(-50%, -50%) rotate(360deg) scale(1); }
100% { opacity: 0; transform: translate(-50%, -50%) rotate(400deg) scale(0.2); }
}

/* a grade deve ficar visível antes de abrir */
.phrase-grid{
position: relative;
z-index: 4;
opacity: 1;
transition: opacity .35s ease, filter .35s ease, transform .35s ease;
}

/* quando abrir, some a grade pra revelar o portal por trás */
.door--open .phrase-grid{
opacity: 0;
filter: blur(1.2px);
transform: scale(.99);
}

/* efeitos do portal (ficam atrás da grade) */
.portal-vortex{ z-index: 1; }
.portal-burst{ z-index: 1; }
.portal-particles{ z-index: 2; }
.portal-glow{ z-index: 3; }
.portal-text{ z-index: 5; }
.portal-glow{ z-index: 2; } /* glow entre vortex e grade */

/* Balões de participante (lista no display) */
.participants-list-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.participant-balloon {
  outline: none;
}
.participant-balloon--active,
.participant-balloon.participant-balloon--active {
  background-color: var(--panel, #0e1626) !important;
  color: var(--white) !important;
  border-color: var(--neon, #b04cff) !important;
  box-shadow: 0 0 12px rgba(176, 76, 255, 0.35);
}