/* ============================================================
   MONOPOLY ONLINE — estilos
   ============================================================ */

:root{
  --bg:#0d0f14;
  --bg2:#141821;
  --panel:#171c26;
  --panel2:#1e2431;
  --line:#2a3241;
  --txt:#e8ecf3;
  --muted:#94a1b6;
  --accent:#22c55e;
  --accent2:#16a34a;
  --gold:#f5c542;
  --red:#ef4444;
  --blue:#3b82f6;
  --board:#cfe4d0;
  --board-line:#1b2a1c;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 50% -10%,#1b2333 0%,var(--bg) 60%);
  color:var(--txt);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
.hidden{display:none !important}

/* ---------------- telas ---------------- */
.screen{display:none;height:100vh;height:100dvh;width:100%}
.screen.active{display:block}

/* ---------------- componentes ---------------- */
.card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 18px;border-radius:10px;font-weight:700;letter-spacing:.2px;
  background:var(--panel2);border:1px solid var(--line);
  transition:transform .12s ease,filter .15s ease,background .15s ease;
  white-space:nowrap;
}
.btn:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.15)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn-primary{background:linear-gradient(180deg,#2ee06a,#16a34a);color:#06210f;border-color:#0f7a37}
.btn-danger{background:linear-gradient(180deg,#f36b6b,#dc2626);color:#2a0606;border-color:#a01b1b}
.btn-warn{background:linear-gradient(180deg,#fbbf24,#d97706);color:#2a1a02;border-color:#a35c05}
.btn-gold{background:linear-gradient(180deg,#ffd85e,#e0a800);color:#2a1f02;border-color:#a37a05}
.btn-ghost{background:#20273444;border-color:var(--line)}
.btn-lg{padding:14px 22px;font-size:16px}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.wide{width:100%}
.pill{background:#0e131c;border:1px solid var(--line);border-radius:99px;padding:2px 10px;font-size:12px;color:var(--muted)}
.msg{margin-top:10px;font-size:13px;min-height:18px;color:var(--red)}
.msg.ok{color:var(--accent)}
.lbl{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);margin-bottom:4px}
.hint{color:var(--muted);font-size:13px;margin-top:10px}

/* ---------------- HOME ---------------- */
.home-wrap{
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:22px;padding:24px;overflow:auto;
}
.logo{text-align:center}
.logo-badge{
  display:inline-block;background:linear-gradient(180deg,#ff4d4d,#c81e1e);
  color:#fff;font-weight:900;font-size:clamp(28px,6vw,52px);letter-spacing:4px;
  padding:10px 28px;border-radius:8px;transform:skewX(-6deg);
  box-shadow:0 8px 0 #7f1010,0 18px 40px rgba(200,30,30,.35);
  border:3px solid #fff2;
}
.tag{color:var(--muted);margin-top:14px;font-size:14px}
.home-card{width:min(460px,100%)}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:7px}
input{
  width:100%;padding:12px 14px;border-radius:10px;background:#0d1219;
  border:1px solid var(--line);outline:none;transition:border-color .15s;
}
input:focus{border-color:var(--accent)}
.token-picker{display:flex;flex-wrap:wrap;gap:8px}
.tok{
  width:46px;height:46px;border-radius:12px;background:#0d1219;border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .15s;
}
.tok:hover{transform:translateY(-2px)}
.tok.sel{border-color:var(--accent);background:#123020;box-shadow:0 0 0 3px #22c55e33}
.tok.used{opacity:.25;pointer-events:none;filter:grayscale(1)}
.home-actions{margin-top:6px}
.home-actions .btn-primary{width:100%}
.or{display:flex;align-items:center;gap:12px;margin:16px 0;color:var(--muted);font-size:12px}
.or:before,.or:after{content:'';flex:1;height:1px;background:var(--line)}
.join-row{display:flex;gap:8px}
.code-input{text-transform:uppercase;letter-spacing:6px;font-weight:800;text-align:center}
.foot{color:#54607a;font-size:12px}

/* ---------------- LOBBY ---------------- */
.lobby-wrap{height:100%;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:16px;max-width:1000px;margin:0 auto}
.lobby-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.lobby-head-actions{display:flex;gap:8px}
.room-code{font-size:38px;font-weight:900;letter-spacing:10px;color:var(--gold);text-shadow:0 0 24px #f5c54255}
.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lobby-grid h3{margin-bottom:14px;font-size:16px}
.lobby-players{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.lobby-players li{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  background:#0e131c;border:1px solid var(--line);
}
.lp-tok{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:16px}
.lp-name{font-weight:700;flex:1}
.lp-badge{font-size:10px;text-transform:uppercase;letter-spacing:1px;background:#1d2a3d;color:#7fb0ff;padding:3px 7px;border-radius:5px}
.lobby-token{border-top:1px solid var(--line);padding-top:14px}
.settings{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px}
.set-row small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.set-row input[type=number]{width:100px;padding:7px 10px;text-align:right}
.switch{position:relative;width:46px;height:26px;flex:none}
.switch input{opacity:0;width:0;height:0;position:absolute}
.slider{position:absolute;inset:0;background:#2a3241;border-radius:99px;transition:.2s}
.slider:before{content:'';position:absolute;width:20px;height:20px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked+.slider{background:var(--accent2)}
.switch input:checked+.slider:before{transform:translateX(20px)}

/* ---------------- LAYOUT DO JOGO ---------------- */
.game-layout{
  height:100vh;height:100dvh;display:grid;gap:10px;padding:10px;
  grid-template-columns:238px minmax(0,1fr) 290px;
  grid-template-rows:minmax(0,1fr) auto;
  grid-template-areas:"left board right" "left bar right";
}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden;min-height:0;
}
.panel-left{grid-area:left}
.panel-right{grid-area:right}
.board-area{grid-area:board;display:grid;place-items:center;min-height:0;min-width:0}
.action-bar{
  grid-area:bar;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-height:62px;
}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line)}
.room-tag{font-weight:900;letter-spacing:3px;color:var(--gold);font-size:15px}
.head-icons{display:flex;align-items:center;gap:6px}
.pot-tag{font-size:12px;color:var(--gold);background:#2a220a;padding:3px 8px;border-radius:6px}
.icon-btn{width:26px;height:26px;border-radius:7px;background:#0e131c;border:1px solid var(--line);font-size:13px;line-height:1;transition:filter .15s}
.icon-btn:hover{filter:brightness(1.4)}
.icon-btn.off{opacity:.4}
.help h4{margin:14px 0 6px;font-size:14px;color:var(--gold)}
.help ul{margin:0 0 4px 18px;font-size:13px;line-height:1.65;color:#b8c3d4}

/* jogadores */
.players-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:7px;min-height:0}
.pcard{
  background:#0e131c;border:1px solid var(--line);border-left:4px solid var(--line);
  border-radius:10px;padding:8px 10px;transition:all .2s;position:relative;overflow:hidden;
}
.pcard.turn{background:#122018;border-color:#1f6b3d;box-shadow:0 0 0 1px #22c55e44,0 4px 18px #22c55e22}
.pcard.turn:after{
  content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#22c55e18,transparent);
  animation:sweep 2.4s linear infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.pcard.dead{opacity:.42;filter:grayscale(.8)}
.pcard.me .p-name:after{content:' (você)';color:var(--muted);font-weight:400;font-size:11px}
.p-top{display:flex;align-items:center;gap:8px}
.p-tok{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;font-size:15px;flex:none}
.p-name{font-weight:700;font-size:13.5px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-money{font-weight:800;color:var(--accent);font-size:13.5px;font-variant-numeric:tabular-nums}
.p-money.flash{animation:moneyflash .6s ease}
@keyframes moneyflash{0%,100%{transform:scale(1)}40%{transform:scale(1.25);color:#fff}}
.p-meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;font-size:10px;color:var(--muted)}
.p-meta b{color:#cbd5e1}
.p-props{display:flex;gap:2px;flex-wrap:wrap;margin-top:6px}
.p-chip{width:11px;height:11px;border-radius:3px;border:1px solid #0006;cursor:pointer}
.p-chip.mg{opacity:.35}
.p-chip.h{box-shadow:0 0 0 1.5px #fff8}
.off-dot{width:7px;height:7px;border-radius:50%;background:#64748b;flex:none}
.off-dot.on{background:var(--accent)}
.bank-info{display:flex;gap:14px;justify-content:center;padding:8px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
.panel-left-actions{padding:8px;display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line)}

/* log / chat */
.tabs{display:flex;border-bottom:1px solid var(--line)}
.tab{flex:1;padding:11px;font-size:13px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.tab.active{color:var(--txt);border-bottom-color:var(--accent)}
.tab-body{flex:1;display:flex;flex-direction:column;min-height:0}
.log{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:5px;font-size:12.5px;line-height:1.45}
.log div{color:#b8c3d4;padding:3px 6px;border-radius:5px;animation:fadein .25s ease}
.log div.hl{background:#1b2433;color:#e8ecf3}
.log div.sys{color:var(--gold)}
@keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.chat-form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line)}
.chat-form input{padding:9px 11px}

/* ============================================================
   TABULEIRO — texto SEMPRE em pé, letras grandes,
   e uma faixa própria para as peças (nunca por cima do nome).
   ============================================================ */

.board{
  position:relative;
  background:linear-gradient(160deg,#e9f5ec 0%,#d6eadb 100%);
  width:min(100%,calc(100vh - 120px));max-width:100%;max-height:100%;aspect-ratio:1/1;
  border:4px solid #24402a;border-radius:12px;
  display:grid;
  grid-template-columns:1.72fr repeat(9,1fr) 1.72fr;
  grid-template-rows:1.72fr repeat(9,1fr) 1.72fr;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
  overflow:hidden;user-select:none;
}

/* ---------- casa ---------- */
.tile{
  position:relative;background:#fbfdfb;border:1.5px solid #24402a;
  overflow:hidden;cursor:pointer;display:flex;
}
.tile:hover{background:#fff}
.tile.hi{animation:tilehi 1.1s ease}
@keyframes tilehi{0%,100%{box-shadow:inset 0 0 0 0 #ffc93c00}50%{box-shadow:inset 0 0 0 5px #ffc93c}}

/* orientação: a barra de cor e as peças ficam do lado do CENTRO do tabuleiro,
   mas o TEXTO nunca gira — sempre horizontal. */
.tile.bottom{flex-direction:column}
.tile.top   {flex-direction:column-reverse}
.tile.left  {flex-direction:row-reverse}
.tile.right {flex-direction:row}
.tile.corner{flex-direction:column}

/* ---------- faixa das peças (lado interno) ---------- */
.lane{
  flex:none;background:#00000010;display:flex;align-items:center;justify-content:center;
  gap:2px;padding:1px;position:relative;
}
.tile.bottom .lane,.tile.top .lane{width:100%;height:26%}
.tile.left .lane,.tile.right .lane{height:100%;width:26%;flex-direction:column}
.tile.corner .lane{width:100%;height:30%}

/* ---------- barra de cor + construções ---------- */
.bar{
  flex:none;position:relative;display:flex;align-items:center;justify-content:center;gap:4%;
  border:1px solid #24402a52;
}
.tile.bottom .bar,.tile.top .bar{width:100%;height:23%}
.tile.left .bar,.tile.right .bar{height:100%;width:23%;flex-direction:column}

/* ---------- corpo: nome + preço, sempre horizontal ---------- */
.tbody{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2px;text-align:center;gap:2px;min-width:0;min-height:0;
}
.tname{
  font-size:var(--fname);font-weight:900;line-height:1;color:#14261a;
  letter-spacing:-.3px;word-break:break-word;hyphens:auto;width:100%;
}
.tprice{
  font-size:var(--fprice);font-weight:800;color:#1f6b3d;line-height:1;
  background:#1f6b3d18;padding:1px 5px;border-radius:5px;
}
.ticon{font-size:var(--ficon);line-height:1}
.tile.corner .tname{font-size:var(--fcorner)}
.tile.corner .ticon{font-size:var(--fcornericon)}

/* ---------- construções ---------- */
.house{
  width:18%;height:62%;min-width:5px;background:#2ecc71;border:1.5px solid #0b3d20;
  border-radius:2px;box-shadow:0 1px 2px #0007;animation:pop .3s cubic-bezier(.2,1.6,.4,1);
}
.tile.left .house,.tile.right .house{width:62%;height:18%}
.hotel{
  width:58%;height:74%;background:#e03131;border:1.5px solid #6d1212;border-radius:3px;
  box-shadow:0 2px 4px #0007;animation:pop .35s cubic-bezier(.2,1.6,.4,1);
  display:grid;place-items:center;color:#fff;font-size:60%;font-weight:900;
}
.tile.left .hotel,.tile.right .hotel{width:74%;height:58%}
@keyframes pop{from{transform:scale(0) rotate(-25deg);opacity:0}to{transform:none;opacity:1}}

/* ---------- dono ---------- */
.tile.owned .bar{box-shadow:inset 0 0 0 2px #fff8}
.ownbadge{
  position:absolute;z-index:3;border-radius:99px;font-size:var(--fowner);font-weight:900;
  color:#fff;padding:1px 5px;line-height:1.35;white-space:nowrap;
  border:1.5px solid #fff;box-shadow:0 1px 4px #0007;max-width:96%;overflow:hidden;text-overflow:ellipsis;
}
.tile.bottom .ownbadge{bottom:2px;left:50%;transform:translateX(-50%)}
.tile.top .ownbadge{top:2px;left:50%;transform:translateX(-50%)}
.tile.left .ownbadge{left:2px;top:50%;transform:translateY(-50%)}
.tile.right .ownbadge{right:2px;top:50%;transform:translateY(-50%)}

.mortband{
  position:absolute;inset:0;z-index:2;
  background:repeating-linear-gradient(45deg,#0000 0 7px,#00000026 7px 14px);
  display:grid;place-items:center;pointer-events:none;
}
.mortband span{font-size:var(--ficon);filter:drop-shadow(0 1px 2px #000a)}

/* ---------- centro ---------- */
.board-center{
  grid-column:2/11;grid-row:2/11;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3%;position:relative;
  background:
    repeating-linear-gradient(45deg,#0000 0 22px,#ffffff14 22px 44px),
    linear-gradient(150deg,#8fd19e 0%,#5fb277 100%);
}
.center-logo{
  position:absolute;font-weight:900;letter-spacing:6px;color:#12351f;opacity:.14;
  font-size:clamp(16px,3.6vh,40px);transform:rotate(-45deg);pointer-events:none;
}
.dice-area{display:flex;gap:3%;z-index:2}
.die{
  width:clamp(30px,5.4vh,52px);aspect-ratio:1;background:#fff;border-radius:20%;
  box-shadow:0 5px 14px #0005,inset 0 -4px 0 #0000000d;
  display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:13%;gap:5%;
  opacity:0;transition:opacity .2s;
}
.die.show{opacity:1;animation:diedrop .45s cubic-bezier(.2,1.5,.4,1)}
.die.rolling{animation:dieroll .55s linear}
@keyframes diedrop{0%{transform:scale(.4) rotate(-90deg)}100%{transform:none}}
@keyframes dieroll{0%{transform:rotate(0) scale(1)}25%{transform:rotate(90deg) scale(1.15)}50%{transform:rotate(180deg) scale(.9)}75%{transform:rotate(270deg) scale(1.1)}100%{transform:rotate(360deg) scale(1)}}
.pip{background:#1b1b1b;border-radius:50%;width:100%;height:100%}

.turn-banner{
  z-index:2;background:#0f172ae6;color:#fff;padding:8px 20px;border-radius:99px;
  font-size:clamp(12px,2vh,17px);font-weight:800;border:2px solid #ffffff2e;
  max-width:92%;text-align:center;box-shadow:0 6px 20px #0005;
}

/* ---------- relógio da jogada ---------- */
.clock{
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:5px;
  min-width:min(260px,60%);
}
.clock-num{
  font-size:clamp(22px,4.4vh,42px);font-weight:900;line-height:1;
  color:#0d3b1e;text-shadow:0 2px 0 #ffffff6b;font-variant-numeric:tabular-nums;
}
.clock-bar{width:100%;height:9px;background:#00000026;border-radius:99px;overflow:hidden}
.clock-fill{height:100%;width:100%;background:linear-gradient(90deg,#2ecc71,#16a34a);transition:width .25s linear}
.clock.warn .clock-fill{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.clock.danger .clock-fill{background:linear-gradient(90deg,#f87171,#dc2626)}
.clock.danger .clock-num{color:#b91c1c;animation:tick .5s ease infinite}
@keyframes tick{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}

/* ---------- peças ---------- */
.tk{
  position:relative;flex:none;width:var(--tk);height:var(--tk);border-radius:50%;
  display:grid;place-items:center;font-size:calc(var(--tk)*.6);
  border:2.5px solid #fff;box-shadow:0 2px 6px #0007;
  transition:transform .18s ease;
}
.tk.active{box-shadow:0 0 0 3px #ffc93c,0 3px 10px #0008;z-index:2}
.tk.jailed{filter:grayscale(.55)}
.tk.hop{animation:hop .24s ease}
@keyframes hop{50%{transform:scale(1.45) translateY(-14%)}}

/* peça viajando entre casas (camada por cima, some ao chegar) */
.tokens{position:absolute;inset:0;pointer-events:none;z-index:7}
.tk-fly{
  position:absolute;width:var(--tk);height:var(--tk);border-radius:50%;
  display:grid;place-items:center;font-size:calc(var(--tk)*.6);
  border:2.5px solid #fff;box-shadow:0 4px 12px #0009;transform:translate(-50%,-50%);
  transition:left .17s cubic-bezier(.4,0,.2,1),top .17s cubic-bezier(.4,0,.2,1);
}

/* ---------- efeitos ---------- */
.fx{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.fx-money{
  position:absolute;font-weight:900;font-size:clamp(13px,2.4vh,22px);
  text-shadow:0 2px 6px #000a,0 0 2px #000;animation:floatup 1.4s ease-out forwards;
}
@keyframes floatup{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1;transform:translate(-50%,-16px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-76px) scale(1)}}
.confetti{position:absolute;width:10px;height:15px;top:-20px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:.2}}

/* ---------------- MODAIS ---------------- */
.overlay{position:fixed;inset:0;background:#000a;backdrop-filter:blur(3px);z-index:40;animation:fadein .2s}
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;pointer-events:none}
.modal-box{
  background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);
  border-radius:16px;padding:22px;width:min(560px,100%);max-height:86vh;overflow:auto;
  box-shadow:var(--shadow);pointer-events:auto;animation:zoomin .22s cubic-bezier(.2,1.4,.4,1);
}
@keyframes zoomin{from{opacity:0;transform:scale(.88) translateY(12px)}to{opacity:1;transform:none}}
.modal-box h3{margin-bottom:14px;font-size:19px}
.modal-actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:120px}

.modal-card{position:fixed;inset:0;z-index:60;display:grid;place-items:center;pointer-events:none}
.card-face{
  width:min(360px,88vw);min-height:200px;border-radius:14px;padding:24px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;
  animation:cardin .5s cubic-bezier(.2,1.3,.4,1);box-shadow:0 30px 70px #000b;
}
@keyframes cardin{0%{opacity:0;transform:rotateY(90deg) scale(.7)}60%{opacity:1}100%{opacity:1;transform:none}}
.card-face.chance{background:linear-gradient(160deg,#ff8a3d,#e2571a);color:#2a1002;border:3px solid #ffd9b8}
.card-face.chest{background:linear-gradient(160deg,#7ec8ff,#2b8ed6);color:#06202f;border:3px solid #cbe9ff}
.card-kind{font-weight:900;letter-spacing:2px;font-size:13px;opacity:.75}
.card-text{font-size:17px;font-weight:700;line-height:1.4}

.toast{
  position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:80;
  background:#111827ee;border:1px solid var(--line);padding:11px 18px;border-radius:10px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow);animation:toastin .25s;max-width:90vw;text-align:center;
}
.toast.err{border-color:#7f1d1d;background:#3f1212ee;color:#fecaca}
@keyframes toastin{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}

/* listas em modais */
.plist{display:flex;flex-direction:column;gap:7px;max-height:290px;overflow-y:auto}
.prow{
  display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;
  background:#0e131c;border:1px solid var(--line);
}
.prow.sel{border-color:var(--accent);background:#12241a}
.pswatch{width:16px;height:26px;border-radius:4px;flex:none;border:1px solid #0006}
.pinfo{flex:1;min-width:0}
.ptitle{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psub{font-size:11px;color:var(--muted)}
.prow .btn{padding:5px 10px;font-size:12px}
.tabsel{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabsel button{padding:7px 12px;border-radius:8px;background:#0e131c;border:1px solid var(--line);font-size:13px}
.tabsel button.on{background:#173226;border-color:var(--accent)}
.trade-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.trade-col h4{font-size:13px;margin-bottom:8px;color:var(--muted)}
.money-in{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.money-in input{padding:8px 10px}
.bid-row{display:flex;gap:8px;align-items:center;margin:14px 0}
.bid-row input{flex:1;text-align:center;font-weight:800;font-size:18px}
.auction-info{text-align:center;margin-bottom:6px}
.auction-info .big{font-size:28px;font-weight:900;color:var(--gold)}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:1180px){
  .game-layout{grid-template-columns:200px minmax(0,1fr) 240px}
}
@media (max-width:960px){
  body{overflow:auto}
  .game-layout{
    height:auto;min-height:100dvh;grid-template-columns:1fr;
    grid-template-areas:"board" "bar" "left" "right";
    grid-template-rows:auto auto auto auto;padding-bottom:12px;
  }
  .board{width:min(100%,86vh)}
  .panel-left,.panel-right{max-height:340px}
  .action-bar{position:sticky;bottom:0;z-index:20}
  .lobby-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .trade-grid{grid-template-columns:1fr}
  .modal-actions .btn{min-width:100%}
  .room-code{font-size:30px;letter-spacing:6px}
}

/* ---------------- ajustes finais ---------------- */
/* muita gente na mesma casa: sobrepõe um pouco em vez de espremer */
.tile.bottom .lane.crowded .tk + .tk,
.tile.top .lane.crowded .tk + .tk,
.tile.corner .lane.crowded .tk + .tk{margin-left:calc(var(--tk) * -.45)}
.tile.left .lane.crowded .tk + .tk,
.tile.right .lane.crowded .tk + .tk{margin-top:calc(var(--tk) * -.45)}

/* presets de regras no lobby */
.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.preset{
  padding:12px 8px;border-radius:12px;background:#0e131c;border:2px solid var(--line);
  text-align:center;transition:all .15s;
}
.preset:hover:not(:disabled){transform:translateY(-2px)}
.preset.on{border-color:var(--accent);background:#12281c;box-shadow:0 0 0 3px #22c55e26}
.preset b{display:block;font-size:14px;margin-bottom:3px}
.preset small{display:block;font-size:10.5px;color:var(--muted);line-height:1.35}
.adv-toggle{
  width:100%;text-align:center;font-size:12px;color:var(--muted);
  padding:8px;border-top:1px solid var(--line);margin-top:4px;
}
.adv-toggle:hover{color:var(--txt)}
.tname.long{font-size:calc(var(--fname) * .86)}
.tname.xlong{font-size:calc(var(--fname) * .74);letter-spacing:-.5px}