:root{
  --bg:#08070c;
  --panel:#0f0e17;
  --panel-2:#15131f;
  --panel-3:#221e33;
  --line:#2b2740;
  --line-soft:#201c33;
  --ink:#e9e6f5;
  --dim:#8f89ab;
  --dimmer:#6d6790;
  --heart:#ff2f4f;
  --free:#3a3552;
  --free-hi:#5b5480;
  --free-ink:#8f88b8;

  /* paleta do dia 1 */
  --accent:#518ee3;
  --accent-2:#e607f7;
}
/* paleta do dia 2 */
body[data-day="2"]{
  --accent:#40ff40;
  --accent-2:#ffe9b0;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"VT323","Courier New",monospace;font-size:19px;line-height:1.35;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
body,.btn,.tab,.seat rect,.field input,.zone{
  transition:color .25s,background-color .25s,border-color .25s,fill .25s,stroke .25s;
}
.pixel{font-family:"Press Start 2P","VT323",monospace;letter-spacing:.5px;line-height:1.6}
.hidden{display:none !important}
[hidden]{display:none !important}
button,input{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--accent);color:#000}

/* ---------------------------------------------------------- botões */
.btn{
  background:var(--panel-2);border:2px solid var(--line);color:var(--ink);
  padding:6px 14px;cursor:pointer;border-radius:2px;white-space:nowrap;
}
.btn:hover{border-color:var(--ink);background:var(--panel-3)}
.btn.primary{border-color:var(--accent);color:var(--accent)}
.btn.primary:hover{background:var(--accent);color:#000}
.btn.danger{border-color:var(--heart);color:var(--heart)}
.btn.danger:hover{background:var(--heart);color:#fff}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.sound{border-color:var(--accent-2);color:var(--accent-2);padding:6px 12px}
.btn.sound:hover{background:var(--accent-2);color:#000}
.btn.sound.off{border-color:var(--line);color:var(--dim)}
.btn.sound.off:hover{background:var(--panel-2);color:var(--ink)}

/* ---------------------------------------------------------- campos */
.field{display:block;margin:0 0 12px}
.field>span{display:block;color:var(--dim);font-size:17px;margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=search],.field input,.composer input{
  width:100%;background:#0a0912;border:2px solid var(--line);border-radius:2px;
  padding:8px 10px;outline:none;color:var(--ink);
}
input::placeholder{color:var(--dimmer);opacity:1}
.field input:focus,.composer input:focus,.map-actions input:focus{
  border-color:var(--accent);
}
.form-error{color:var(--heart);margin:0 0 10px}

.tabs{display:flex;gap:6px}
.tab{
  background:transparent;border:2px solid var(--line);border-radius:2px;
  padding:6px 16px;cursor:pointer;color:var(--dim);
}
.tab.active{border-color:var(--accent);color:var(--accent);background:var(--panel-3)}
.tab:hover{color:var(--ink)}

/* a aba do dia ativo ganha as listras da paleta daquele dia */
.date-tabs .tab{position:relative;overflow:hidden}
.date-tabs .tab.active::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:repeating-linear-gradient(90deg,var(--day-a) 0 8px,var(--day-b) 8px 16px);
}
.date-tabs .tab[data-day="1"]{--day-a:#518ee3;--day-b:#e607f7}
.date-tabs .tab[data-day="2"]{--day-a:#40ff40;--day-b:#ffe9b0}
.date-tabs .tab.active[data-day="1"]{border-color:#518ee3;color:#518ee3}
.date-tabs .tab.active[data-day="2"]{border-color:#40ff40;color:#40ff40}
.day-name{color:var(--day-b);margin-left:8px;opacity:.6}
.date-tabs .tab.active .day-name{opacity:1}

/* ---------------------------------------------------------- carregamento */
.loader{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;
  background:radial-gradient(ellipse at 50% 50%,#161029 0%,var(--bg) 70%);
  transition:opacity .45s ease;
}
.souls{position:relative;width:min(78vmin,560px);height:min(78vmin,560px)}
.soul,.soul-red{
  position:absolute;left:50%;top:50%;line-height:1;
  font-size:clamp(26px,5.2vmin,42px);
}
/* cada alma começa em um canto e vai encolhendo em direção ao centro */
.soul{
  transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)));
  transition:transform .62s cubic-bezier(.5,0,.35,1),opacity .3s ease .32s;
  animation:soul-float 2.4s ease-in-out infinite;
  animation-delay:var(--d,0s);
}
.soul.s1{--x:0vmin;--y:-32vmin;--d:0s}
.soul.s2{--x:-31vmin;--y:-14vmin;--d:.35s}
.soul.s3{--x:31vmin;--y:-14vmin;--d:.7s}
.soul.s4{--x:-31vmin;--y:14vmin;--d:1.05s}
.soul.s5{--x:31vmin;--y:14vmin;--d:1.4s}
.soul.s6{--x:0vmin;--y:32vmin;--d:1.75s}
@keyframes soul-float{
  0%,100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}
  50%{transform:translate(calc(-50% + var(--x) * .88),calc(-50% + var(--y) * .88)) scale(1.08)}
}
.soul-red{
  transform:translate(-50%,-50%);
  font-size:clamp(38px,7.4vmin,60px);
  filter:drop-shadow(0 0 14px rgba(255,47,79,.55));
  animation:soul-beat 1.6s ease-in-out infinite;
}
/* precisa repetir o translate: a animação substitui a propriedade transform inteira */
@keyframes soul-beat{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  45%{transform:translate(-50%,-50%) scale(1.13)}
}
.loader-text{
  position:absolute;left:0;right:0;bottom:12%;text-align:center;
  color:var(--dim);margin:0;
}

/* as almas encostam no coração: fim do carregamento */
.loader.converge .soul{
  animation:none;
  transform:translate(-50%,-50%) scale(.35);
  opacity:0;
}
.loader.converge .soul-red{animation:soul-burst .6s ease-out forwards}
.loader.converge .loader-text{opacity:0;transition:opacity .25s ease}
@keyframes soul-burst{
  0%{transform:translate(-50%,-50%) scale(1)}
  55%{transform:translate(-50%,-50%) scale(1.45);filter:drop-shadow(0 0 40px rgba(255,47,79,.95))}
  100%{transform:translate(-50%,-50%) scale(1.1);filter:drop-shadow(0 0 22px rgba(255,47,79,.7))}
}
.loader.gone{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .soul{animation:none}
  .soul-red{animation:none}
  .loader,.soul{transition-duration:.2s}
}

/* ---------------------------------------------------------- login */
.gate{
  position:fixed;inset:0;display:grid;place-items:center;
  background:rgba(6,5,11,.38);
  backdrop-filter:blur(9px) saturate(.7);
  -webkit-backdrop-filter:blur(9px) saturate(.7);
  z-index:40;padding:20px;overflow:auto;
}
.gate-box{
  width:min(420px,100%);background:rgba(15,14,23,.97);border:3px solid #fff;
  padding:28px 26px;text-align:center;box-shadow:0 0 60px rgba(0,0,0,.85);
}
.gate-heart{color:var(--heart);font-size:40px;line-height:1;margin-bottom:10px;
  filter:drop-shadow(0 0 12px rgba(255,47,79,.6));animation:beat 1.6s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}45%{transform:scale(1.13)}}
.gate-box h1{font-size:17px;margin:0 0 6px}
.gate-box h1 span{color:var(--accent)}
.gate-sub{color:var(--dim);margin:0 0 20px}
.auth-tabs{justify-content:center;margin-bottom:18px}
.gate-box form{text-align:left}
.gate-box form .btn{width:100%;margin-top:4px;padding:10px}
.gate-foot{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.gate-foot p{color:var(--dimmer);font-size:16px;margin:0}

/* o app fica visível e desfocado atrás do login */
.app.behind{filter:blur(5px) brightness(.85);pointer-events:none;user-select:none}

/* ---------------------------------------------------------- app */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.topbar{
  display:flex;align-items:center;gap:14px;justify-content:space-between;
  padding:9px 14px;background:var(--panel);border-bottom:2px solid var(--line);
  position:relative;z-index:3;flex:0 0 auto;
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 14px,var(--accent-2) 14px 28px);
  opacity:.5;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand .heart{color:var(--heart);font-size:26px;cursor:pointer;user-select:none}
.brand .heart:hover{filter:drop-shadow(0 0 8px rgba(255,47,79,.8))}
.brand strong{display:block;font-size:11px}
.brand small{color:var(--dim);white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:10px}
.online{color:var(--accent);white-space:nowrap}
.who{color:var(--accent-2);white-space:nowrap}

.layout{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 370px;min-height:0}
.map-panel{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:2px solid var(--line)}
.map-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:8px 14px;border-bottom:1px solid var(--line-soft);background:var(--panel);flex:0 0 auto;
}
.legend{display:flex;gap:16px;color:var(--dim);font-size:17px;flex-wrap:wrap}
.legend span{display:flex;align-items:center;gap:6px}
.sw{width:13px;height:13px;display:inline-block;border-radius:2px;flex:0 0 auto}
.sw.free{background:var(--free)}
.sw.mine{background:var(--accent-2)}
.sw.taken{background:var(--accent)}
.map-actions{display:flex;gap:6px;align-items:center}
.map-actions input{width:190px;padding:5px 10px}

/* fundo do mapa: ruínas em pixel art, levemente desfocadas */
.map-wrap{flex:1;position:relative;overflow:hidden;background:#050409;cursor:grab;min-height:0;touch-action:none}
.map-wrap::before{
  content:"";position:absolute;inset:-30px;
  background:url("/img/ruins.jpg") center/cover no-repeat;
  filter:blur(5px) saturate(.9) brightness(.72);
  opacity:.6;pointer-events:none;
}
.map-wrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 30%,rgba(5,4,9,.15) 0%,rgba(5,4,9,.78) 100%);
}
.map-wrap.dragging{cursor:grabbing}
#map{width:100%;height:100%;display:block;touch-action:none;position:relative;z-index:1}
.map-status{
  display:flex;justify-content:space-between;gap:12px;padding:6px 14px;
  border-top:1px solid var(--line-soft);color:var(--dim);background:var(--panel);
  font-size:17px;flex:0 0 auto;
}
#my-seats{color:var(--accent-2)}

.tooltip{
  position:absolute;pointer-events:none;background:#000;border:2px solid var(--accent);
  padding:4px 9px;font-size:17px;white-space:nowrap;z-index:5;transform:translate(-50%,-135%);
}
.tooltip b{color:var(--accent-2)}
.tooltip em{color:var(--dim);font-style:normal}

/* assentos */
.seat{cursor:pointer}
.seat rect{stroke-width:1;stroke:#0b0a12}
.seat .n{
  font-family:"VT323",monospace;font-size:11px;text-anchor:middle;
  dominant-baseline:central;pointer-events:none;
}
.seat.free rect{fill:var(--free)}
.seat.free .n{fill:var(--free-ink)}
.seat.free:hover rect{fill:var(--free-hi)}
.seat.taken rect{fill:var(--accent)}
.seat.mine rect{fill:var(--accent-2)}
.seat.taken .n,.seat.mine .n{fill:#0b0a12;font-weight:bold}
.seat.match rect{fill:#fff;stroke:#fff}
.seat.match .n{fill:#000}
.seat.dim{opacity:.22}

.zone{fill:rgba(23,21,40,.82);stroke:var(--accent);stroke-width:1.5;stroke-opacity:.35}
.zone-label{fill:#8d86ae;font-family:"Press Start 2P",monospace;font-size:11px;text-anchor:middle}
.row-label{fill:#7d769e;font-size:14px;text-anchor:middle;dominant-baseline:central;font-family:"VT323",monospace}
.palco{fill:#d6d3e0}
.palco-stripe{opacity:.9}
.palco-stripe.a{fill:var(--accent)}
.palco-stripe.b{fill:var(--accent-2)}
.palco-text{fill:#0b0a12;font-family:"Press Start 2P",monospace;font-size:13px;text-anchor:middle}

/* ---------------------------------------------------------- painel lateral */
.side-panel{
  display:flex;flex-direction:column;min-height:0;min-width:0;
  background:var(--panel);position:relative;z-index:2;
}
.panel-tabs{display:flex;border-bottom:2px solid var(--line);flex:0 0 auto;background:var(--panel-2)}
.ptab{
  flex:1;background:transparent;border:none;border-bottom:3px solid transparent;
  padding:12px 8px;cursor:pointer;color:var(--dim);
  font-family:"Press Start 2P","VT323",monospace;font-size:11px;
}
.ptab:hover{color:var(--ink);background:var(--panel-3)}
.ptab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--panel-3)}
.badge{
  background:var(--heart);color:#fff;border-radius:9px;padding:1px 6px;
  font-size:9px;margin-left:7px;vertical-align:middle;
}
.panel{flex:1;display:flex;flex-direction:column;min-height:0}

.chat-log{
  flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:11px;
}
.load-older{
  align-self:center;background:var(--panel-2);border:2px solid var(--line);
  border-radius:2px;color:var(--dim);padding:5px 14px;cursor:pointer;flex:0 0 auto;
}
.load-older:hover{color:var(--ink);border-color:var(--accent)}
.load-older:disabled{opacity:.5;cursor:wait}
.msg{border-left:3px solid var(--line);padding-left:10px}
.msg.self{border-color:var(--accent-2)}
.msg .meta{color:var(--dim);font-size:16px}
.msg .meta b{color:var(--accent);cursor:pointer}
.msg .meta b:hover{text-decoration:underline}
.msg.self .meta b{color:var(--accent-2);cursor:default}
.msg.self .meta b:hover{text-decoration:none}
.msg .body{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink)}
.msg.system{border-color:var(--heart);color:var(--dim)}

/* composer sempre colado no fim do painel */
.composer{
  display:flex;gap:8px;padding:10px 12px;border-top:2px solid var(--line);
  flex:0 0 auto;background:var(--panel-2);
}
.composer input{flex:1;min-width:0;width:auto}
.composer-status{
  margin:0;padding:6px 14px 0;color:var(--dim);font-size:16px;flex:0 0 auto;
}
.composer-status:empty{display:none}
.composer-status.error{color:var(--heart)}

/* recados */
.dm-list{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.dm-empty{color:var(--dim);padding:10px 2px}
.dm-empty b{color:var(--accent)}
.dm-item{
  display:block;width:100%;text-align:left;background:var(--panel-2);
  border:2px solid var(--line);border-radius:2px;padding:9px 10px;cursor:pointer;color:var(--ink);
}
.dm-item:hover{border-color:var(--accent);background:var(--panel-3)}
.dm-item .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.dm-item .peer{color:var(--accent)}
.dm-item .last{color:var(--dim);font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-item.unread{border-color:var(--heart)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block;flex:0 0 auto}
.dot.on{background:#4ade80;box-shadow:0 0 8px #4ade80}
.dm-thread{flex:1;display:flex;flex-direction:column;min-height:0}
.dm-thread-head{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-bottom:2px solid var(--line);flex:0 0 auto;background:var(--panel-2);
}
.dm-thread-head strong{color:var(--accent);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-thread-head .btn{padding:2px 10px}

/* scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#0a0912}
::-webkit-scrollbar-thumb{background:var(--line);border:2px solid #0a0912}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* ---------------------------------------------------------- controle de som */
.sound-pop{
  position:fixed;z-index:60;background:var(--panel);border:2px solid var(--accent-2);
  padding:12px;display:flex;flex-direction:column;gap:10px;min-width:230px;
  box-shadow:0 8px 30px rgba(0,0,0,.75);
}
.sound-pop .btn{width:100%}
.vol-row{display:flex;align-items:center;gap:8px}
.vol-ico{font-size:15px}
#volume-val{color:var(--dim);font-size:17px;min-width:44px;text-align:right}
.sound-pop small{color:var(--dim);font-size:16px;text-align:center}
input[type=range]{
  flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:6px;
  background:var(--line);border-radius:3px;outline:none;cursor:pointer;padding:0;border:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:18px;background:var(--accent-2);
  border:2px solid #0a0912;cursor:pointer;
}
input[type=range]::-moz-range-thumb{
  width:12px;height:16px;background:var(--accent-2);border:2px solid #0a0812;
  border-radius:0;cursor:pointer;
}

/* selo de quem fez o site */
.dev-tag{
  display:inline-block;margin-left:7px;padding:1px 6px;vertical-align:middle;
  border:1px solid var(--accent);border-radius:2px;color:var(--accent);
  font-size:13px;letter-spacing:.5px;text-transform:lowercase;white-space:nowrap;
}
.msg.self .dev-tag,.who .dev-tag{border-color:var(--accent-2);color:var(--accent-2)}
.tooltip .dev-tag{border-color:var(--accent-2);color:var(--accent-2);font-size:12px}

/* ---------------------------------------------------------- menu do celular */
#menu-open{display:none;padding:5px 11px;font-size:21px;line-height:1}
.menu-pop{
  position:fixed;z-index:60;background:var(--panel);border:2px solid var(--accent);
  padding:6px;display:flex;flex-direction:column;min-width:236px;
  box-shadow:0 8px 30px rgba(0,0,0,.75);
}
.menu-user{
  margin:0;padding:8px 10px 10px;color:var(--accent-2);
  border-bottom:2px solid var(--line);text-align:center;
}
.menu-item{
  display:block;width:100%;text-align:left;background:transparent;border:none;
  color:var(--ink);padding:11px 12px;cursor:pointer;text-decoration:none;font:inherit;
}
.menu-item:hover,.menu-item:focus{background:var(--panel-3);outline:none}
.menu-item.coffee-item{color:#ffc978}
.menu-item.sair{color:var(--heart);border-top:2px solid var(--line);margin-top:4px}

/* ---------------------------------------------------------- cachorrinho */
/* o bottom é ajustado no JS: ele anda em cima da barra de status do mapa */
.toby{position:fixed;bottom:6px;left:0;z-index:1;pointer-events:none;will-change:transform}
.toby .hop{animation:toby-hop .42s ease-in-out infinite}
.toby img{
  display:block;width:52px;height:auto;image-rendering:pixelated;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.45));
}
.toby.right img{transform:scaleX(-1)}
@keyframes toby-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-13px)}}

/* ---------------------------------------------------------- modais */
.modal{position:fixed;inset:0;background:rgba(2,2,6,.82);display:grid;place-items:center;z-index:50;padding:16px}
.modal-box{width:min(430px,100%);background:var(--panel);border:3px solid #fff;padding:22px}
.modal-box h3{margin:0 0 8px;color:var(--accent);font-size:23px}
.modal-box p{margin:0 0 14px;color:var(--dim)}
.modal-box p b{color:var(--accent-2)}
.modal-box.wide{width:min(620px,100%);max-height:88vh;overflow-y:auto}
.modal-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.guide{margin:0 0 14px;padding-left:24px;color:var(--ink)}
.guide li{margin-bottom:9px}
.guide b{color:var(--accent-2)}
.warn{color:var(--dim);border-left:3px solid var(--heart);padding-left:10px}
#termo{text-decoration:none;display:inline-block}

/* apoio: um tom de café, quente, que não briga com a paleta do dia */
.coffee{
  text-decoration:none;display:inline-block;
  border-color:#c88a3a;color:#ffc978;
}
.coffee:hover{background:#ffc978;color:#2b1a06;border-color:#ffc978}
#coffee{padding:6px 11px}
.gate-foot .coffee{width:100%;text-align:center}
#help-open{padding:6px 13px;border-color:var(--accent);color:var(--accent);font-weight:bold}
#help-open:hover{background:var(--accent);color:#000}

/* ---------------------------------------------------------- navegação em tela estreita */
.mobile-nav{display:none;border-top:2px solid var(--line);background:var(--panel-2);flex:0 0 auto}
.mnav{
  flex:1;background:transparent;border:none;border-top:3px solid transparent;
  padding:13px 8px;color:var(--dim);cursor:pointer;
  font-family:"Press Start 2P","VT323",monospace;font-size:11px;
}
.mnav.active{color:var(--accent);border-top-color:var(--accent);background:var(--panel-3)}

/* ================================================================= *
 *  RESPONSIVO
 *  > 1000px  : mapa + painel lado a lado
 *  <= 1000px : uma coisa de cada vez, alternada pela barra de baixo
 * ================================================================= */

@media (max-width:1400px){
  .brand small{display:none}
}
@media (max-width:1240px){
  .layout{grid-template-columns:minmax(0,1fr) 320px}
  #termo{display:none} /* continua disponível dentro do guia "?" */
  .map-actions input{width:150px}
  .legend{font-size:16px;gap:12px}
}

@media (max-width:1000px){
  .app{height:100dvh}

  .topbar{
    display:grid;grid-template-columns:1fr auto;grid-template-areas:"brand right" "dates dates";
    gap:8px;padding:8px 10px;
  }
  .brand{grid-area:brand}
  .brand strong{font-size:10px}
  .topbar-right{grid-area:right;gap:8px}
  .topbar-right .btn{padding:5px 10px}
  /* recolhidos para dentro do ☰ */
  #help-open,#coffee,#sound-app,#logout,#termo{display:none}
  #menu-open{display:inline-block}
  .date-tabs{grid-area:dates;justify-content:stretch;gap:8px}
  .date-tabs .tab{flex:1;text-align:center;padding:7px 4px}
  .who{display:none}

  /* mapa e painel ocupam a tela inteira, alternados pela barra de baixo */
  .layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .map-panel,.side-panel{grid-column:1;grid-row:1;min-height:0}
  .map-panel{border-right:none}
  body[data-mview="map"] .side-panel{display:none}
  body[data-mview="chat"] .map-panel{display:none}
  .mobile-nav{display:flex}
}

@media (max-width:680px){
  body{font-size:19px}
  .map-toolbar{padding:6px 10px;gap:8px}
  .map-actions{width:100%;order:1}
  .map-actions input{flex:1;width:auto;min-width:0}
  .legend{width:100%;justify-content:space-between;gap:8px;font-size:15px;order:2}
  .map-status{font-size:15px;padding:5px 10px}
  #seat-count{display:none}
  #my-seats{margin-left:auto}

  .chat-log,.dm-list{padding:10px}
  .composer{padding:8px 10px}
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .composer input,.field input,.map-actions input{font-size:16px}

  .gate{padding:12px}
  .gate-box{padding:22px 18px}
  .gate-box h1{font-size:15px}

  .modal-box{padding:18px 16px}
  .modal-box.wide{max-height:82vh}
  .guide{padding-left:20px}
  .modal-actions .btn{flex:1;text-align:center}

  .toby img{width:44px}
  .sound-pop{min-width:200px}
}

@media (max-width:420px){
  .brand strong{font-size:9px}
  .brand .heart{font-size:22px}
  .legend span:nth-child(3){display:none}
  .online{font-size:16px}
  .ptab,.mnav{font-size:10px}
}

/* telas baixas (celular deitado): compacta tudo na vertical */
@media (max-height:520px){
  .topbar{padding:5px 10px;gap:5px}
  .brand{display:none}
  .topbar{grid-template-columns:auto 1fr;grid-template-areas:"dates right"}
  .map-toolbar{padding:4px 10px}
  .composer{padding:6px 10px}
  .mnav{padding:8px}
  .ptab{padding:8px}
}