/* Visual plano ao estilo do Beatball: relva às riscas, discos com contorno escuro, HUD em pílulas escuras */
:root {
  --bg: #2f7026;        /* relva fora do campo */
  --ink: #1d1f1e;       /* pílulas e cartões */
  --ink-2: #2b2f2d;
  --ink-3: #3a3f3c;
  --text: #f5f7f4;
  --muted: #a9b2ac;
  --red: #e0534f;
  --blue: #4c77dd;
  --accent: #ffd23f;
  --danger: #ff6b5e;
  --display: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  --ui: 'Fredoka', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--ui); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.hidden, [hidden] { display: none !important; }
button { font-family: var(--ui); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.screen {
  position: fixed; inset: 0; z-index: 20; display: flex; padding: 16px;
  background: rgba(16, 24, 15, .62);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.card {
  width: min(420px, 100%); margin: auto; background: var(--ink); border-radius: 22px;
  padding: 26px 22px; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 14px;
}
.logo { font-family: var(--display); font-weight: 400; font-size: 56px; letter-spacing: 1px; line-height: 1; color: var(--red); text-shadow: 0 4px 0 #7b2523; }
.logo span { color: var(--blue); text-shadow: 0 4px 0 #233f86; }
h2 { font-family: var(--display); font-size: 32px; font-weight: 400; }

.field { display: flex; flex-direction: column; gap: 6px; text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; }
.field input {
  background: var(--ink-2); border: 2px solid var(--ink-3); color: var(--text); border-radius: 12px;
  padding: 11px 14px; font: 600 16px var(--ui); outline: none;
}
.field input:focus { border-color: var(--accent); }

.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mode {
  background: var(--ink-2); color: var(--muted); border: 2px solid transparent; border-radius: 12px;
  padding: 11px 0; font: 400 20px var(--display); cursor: pointer; transition: .12s;
}
.mode:hover { color: var(--text); }
.mode.active { color: var(--text); border-color: var(--accent); background: var(--ink-3); }

.btn { border: 0; border-radius: 14px; padding: 14px; font: 400 22px var(--display); cursor: pointer; transition: transform .08s; }
.btn:active { transform: translateY(2px); }
.btn.primary { background: var(--accent); color: #2b2100; box-shadow: 0 5px 0 #b38f13; }
.btn.primary:disabled { opacity: .5; cursor: default; }
.btn.ghost { background: transparent; color: var(--muted); border: 2px solid var(--ink-3); font-size: 18px; }
.btn.ghost:hover { color: var(--text); }
.btn.danger { background: transparent; color: var(--danger); border: 2px solid rgba(255, 107, 94, .45); font-size: 18px; }

.howto { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); line-height: 1.45; }
kbd { background: var(--ink-3); border-radius: 6px; padding: 1px 6px; font: 600 12px var(--ui); color: var(--text); }
.conn { font-size: 12px; color: var(--muted); }
.conn.ok { color: #6ee08a; }
.conn.err { color: var(--danger); }
.muted { color: var(--muted); }
.big { font: 400 44px var(--display); }
.final { font: 400 64px var(--display); }
.red-text { color: var(--red); }
.blue-text { color: var(--blue); }

.spinner {
  width: 46px; height: 46px; margin: 4px auto; border-radius: 50%;
  border: 5px solid var(--ink-3); border-top-color: var(--accent); animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Marcador: pílula escura com o resultado, os jogadores de cada equipa e o tempo */
#hud {
  position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px; pointer-events: none;
}
#hud .board {
  background: rgba(29, 31, 30, .92); border-radius: 16px; padding: 6px 22px 7px; min-width: 150px;
  display: flex; flex-direction: column; align-items: center; gap: 1px; box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
#hud .score { font: 400 28px/1 var(--display); display: flex; gap: 14px; align-items: center; font-variant-numeric: tabular-nums; }
#hud .dash { color: var(--text); font-size: 22px; }
#hud .dots { display: flex; gap: 18px; font-size: 7px; letter-spacing: 3px; color: #7d8580; height: 9px; line-height: 9px; }
#hud .dots i { font-style: normal; color: #5d645f; }
#hud .dots i.on { color: #f5f7f4; }
#clock { font: 600 13px var(--ui); color: var(--text); font-variant-numeric: tabular-nums; }
#clock.ot { color: var(--accent); }
#mode-label { font: 600 11px var(--ui); color: rgba(255, 255, 255, .85); background: rgba(29, 31, 30, .7); padding: 2px 10px; border-radius: 10px; }
#mode-label:empty { display: none; }

/* Contador de FPS e ping no canto superior esquerdo */
#stats {
  position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px));
  display: flex; gap: 8px; pointer-events: none; font: 600 11px var(--ui); font-variant-numeric: tabular-nums;
  background: rgba(29, 31, 30, .7); color: rgba(255, 255, 255, .9); padding: 3px 8px; border-radius: 8px;
}
body.no-stats #stats { display: none !important; }
#stats .warn { color: #ffd23f; }
#stats .bad { color: #ff6b5b; }

#banner {
  position: fixed; top: 38%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
  font: 400 clamp(48px, 12vw, 116px) var(--display); text-shadow: 0 6px 0 rgba(0, 0, 0, .3);
  animation: pop .35s cubic-bezier(.2, 1.6, .5, 1); white-space: nowrap; text-align: center;
}
#banner small { display: block; font: 600 clamp(14px, 3vw, 22px) var(--ui); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
@keyframes pop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } }

#bottom {
  position: fixed; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
}
.pill {
  background: rgba(29, 31, 30, .92); color: var(--text); border: 0; border-radius: 16px; padding: 8px 22px;
  font: 600 16px var(--ui); cursor: pointer;
}
.chat-hint { background: rgba(29, 31, 30, .72); color: rgba(255, 255, 255, .85); border-radius: 14px; padding: 5px 10px; font: 500 12px var(--ui); display: flex; gap: 4px; align-items: center; }
.chat-hint kbd { background: rgba(255, 255, 255, .14); }

/* Controlos de toque, translúcidos como no Beatball para telemóvel.
   --s (tamanho) e --a (opacidade) vêm das definições da HUD; com posições à medida, o JS põe left/top no centro de cada um. */
#touch { position: fixed; inset: 0; pointer-events: none; --s: 1; --a: 1; }
#stick-zone { position: absolute; left: 0; top: 64px; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; display: none; }
#touch.dynamic #stick-zone { display: block; }
#touch.swap #stick-zone { left: auto; right: 0; }
#stick {
  position: absolute; left: calc(24px + env(safe-area-inset-left, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: calc(150px * var(--s)); height: calc(150px * var(--s)); border-radius: 50%; opacity: var(--a);
  background: rgba(255, 255, 255, .22); border: 2px solid rgba(20, 20, 20, .55); pointer-events: auto; touch-action: none;
}
/* Joystick dinâmico: aparece onde o polegar toca na metade do ecrã; parado fica mais discreto */
#touch.dynamic #stick { pointer-events: none; }
#touch.dynamic:not(.editing) #stick:not(.active) { opacity: calc(var(--a) * .45); }
#knob {
  position: absolute; left: 50%; top: 50%; width: calc(62px * var(--s)); height: calc(62px * var(--s)); margin: calc(-31px * var(--s));
  border-radius: 50%; background: rgba(255, 255, 255, .55); border: 2px solid rgba(20, 20, 20, .4);
}
#kick-btn {
  position: absolute; right: calc(24px + env(safe-area-inset-right, 0px)); bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  width: calc(124px * var(--s)); height: calc(124px * var(--s)); border-radius: 50%; pointer-events: auto; touch-action: none; opacity: var(--a);
  background: rgba(255, 255, 255, .3); border: 0; color: #fff; font: 700 calc(18px * var(--s)) var(--ui); letter-spacing: .5px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35); user-select: none; -webkit-user-select: none;
}
#kick-btn.down { background: rgba(255, 255, 255, .45); transform: scale(.96); }
#chat-btn {
  position: absolute; right: calc(24px + 35px * var(--s) + env(safe-area-inset-right, 0px)); bottom: calc(40px + 124px * var(--s) + env(safe-area-inset-bottom, 0px));
  width: calc(54px * var(--s)); height: calc(54px * var(--s)); border-radius: 50%; pointer-events: auto; border: 0; opacity: var(--a);
  background: rgba(255, 255, 255, .25); color: #bfe0ff; display: grid; place-items: center;
}
#chat-btn svg { width: calc(26px * var(--s)); height: calc(26px * var(--s)); }
/* Canhotos: joystick à direita e remate à esquerda */
#touch.swap #stick { left: auto; right: calc(24px + env(safe-area-inset-right, 0px)); }
#touch.swap #kick-btn { right: auto; left: calc(24px + env(safe-area-inset-left, 0px)); }
#touch.swap #chat-btn { right: auto; left: calc(24px + 35px * var(--s) + env(safe-area-inset-left, 0px)); }
#touch.custom #stick, #touch.custom #kick-btn, #touch.custom #chat-btn { right: auto; bottom: auto; translate: -50% -50%; }
/* O JS abre o menu do chat ao lado do botão */
#chat-menu {
  position: absolute; display: flex; flex-direction: column; gap: 6px; pointer-events: auto;
}
#chat-menu button { background: rgba(29, 31, 30, .92); color: var(--text); border: 0; border-radius: 12px; padding: 9px 14px; font: 600 15px var(--ui); text-align: right; }

/* Instruções de teclado (kb) ou de toque (tc) consoante o aparelho */
.tc { display: none; }
@media (pointer: coarse) {
  .chat-hint, .kb { display: none; }
  .tc { display: block; }
}
/* Com um comando ligado (body.has-pad) as instruções passam a ser as do comando (pd) */
.pd { display: none; }
body.has-pad .kb, body.has-pad .tc, body.has-pad .chat-hint:not(.pd), body.has-pad #touch { display: none; }
body.has-pad .pd { display: block; }
body.has-pad .chat-hint.pd, body.has-pad .howto.pd { display: flex; }
.pad-focus { outline: 3px solid #fff; outline-offset: 3px; }

/* Símbolos dos botões do comando */
.pg {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  background: #101211; color: var(--text); border: 1px solid rgba(255, 255, 255, .18);
  font: 700 12px var(--ui); line-height: 1;
}
.pg-round { width: 22px; height: 22px; border-radius: 50%; }
.pg-round svg { width: 18px; height: 18px; }
.pg-pill { height: 20px; padding: 0 7px; border-radius: 7px; font-size: 10px; letter-spacing: .4px; }
.pg-stick { color: var(--muted); }

/* ---------- Definições ---------- */
#settings { z-index: 25; }
.setting { display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; }
.setting b { color: var(--text); font-weight: 600; float: right; }
.setting small { font-weight: 500; font-size: 12px; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.seg button {
  background: var(--ink-2); color: var(--muted); border: 2px solid transparent; border-radius: 12px;
  padding: 9px 0; font: 600 15px var(--ui); cursor: pointer;
}
.seg button.active { color: var(--text); border-color: var(--accent); background: var(--ink-3); }
.set-preview { display: flex; gap: 6px; justify-content: center; }
.setting input[type=range] { width: 100%; accent-color: var(--accent); }
.lang-select {
  appearance: none; -webkit-appearance: none; width: 100%; padding: 10px 36px 10px 12px; border-radius: 12px; cursor: pointer;
  background: var(--ink-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23a9b2ac' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
  border: 2px solid var(--ink-3); color: var(--text); font: 600 15px var(--ui);
}
.lang-select:focus, .lang-select.pad-focus { outline: none; border-color: var(--accent); }
.pad-tip {
  display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 12px;
  background: rgba(255, 210, 63, .1); border: 1px solid rgba(255, 210, 63, .35); font-size: 13px; color: var(--muted);
}
.pad-tip b { color: var(--accent); font-weight: 600; font-size: 14px; }
.pad-tip b::before { content: ''; display: inline-block; width: 1.25em; height: 1.25em; margin-right: 5px; vertical-align: -.3em; background: var(--ic-gamepad) center / contain no-repeat; }
body.has-pad .pad-tip { background: rgba(110, 224, 138, .1); border-color: rgba(110, 224, 138, .35); }
body.has-pad .pad-tip b { color: #6ee08a; }

@media (prefers-reduced-motion: reduce) {
  #banner { animation: none; }
  .spinner { animation-duration: 3s; }
}

/* ---------- Apostas ---------- */
.small { font-size: 12px; line-height: 1.4; }
.wager { display: flex; flex-direction: column; gap: 8px; }
.stakes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.stake {
  min-width: 0; background: var(--ink-2); color: var(--muted); border: 2px solid transparent; border-radius: 12px;
  padding: 8px 0; font: 600 14px var(--ui); cursor: pointer; transition: .12s; white-space: nowrap;
}
.stake:hover { color: var(--text); }
.stake.active { color: var(--text); border-color: #9b7bff; background: var(--ink-3); }
.stake small { display: block; font-size: 10px; color: var(--muted); font-weight: 500; }
.stake-info { font-size: 13px; color: var(--muted); min-height: 18px; }
.stake-info b { color: #6ee08a; }
.wallet-btn {
  background: #ab9ff2; color: #1c1640; border: 0; border-radius: 12px; padding: 10px; font: 600 15px var(--ui); cursor: pointer;
}
.wallet-btn:hover { background: #bcb2f5; }
.wallet-info {
  display: flex; align-items: center; gap: 8px; justify-content: center; background: var(--ink-2); border-radius: 12px;
  padding: 8px 12px; font: 600 14px var(--ui);
}
.wallet-icon { width: 20px; height: 20px; border-radius: 5px; flex: none; object-fit: contain; }
.wallet-dot { width: 8px; height: 8px; border-radius: 50%; background: #6ee08a; flex: none; }
.link { background: none; border: 0; color: var(--muted); font: 500 12px var(--ui); text-decoration: underline; cursor: pointer; margin-left: auto; }
.faucet { font-size: 12px; color: var(--muted); }

/* Escolher a carteira: por cima de qualquer ecrã (pagamento, cacifo) */
.screen.wallets { z-index: 40; }
.wl-list { display: flex; flex-direction: column; gap: 6px; }
.wl-list:empty { display: none; }
.wl-title { font: 600 12px var(--ui); color: var(--muted); text-align: left; text-transform: uppercase; letter-spacing: .05em; }
.wl-item {
  display: flex; align-items: center; gap: 12px; background: var(--ink-2); color: var(--text); border: 2px solid transparent;
  border-radius: 12px; padding: 9px 12px; font: 600 16px var(--ui); cursor: pointer; text-decoration: none; text-align: left;
}
.wl-item:hover, .wl-item:focus-visible { border-color: #9b7bff; }
.wl-item.ghost { background: transparent; border-color: var(--ink-3); color: var(--muted); font-size: 14px; }
.wl-item.ghost:hover { color: var(--text); border-color: #9b7bff; }
.wl-item small { margin-left: auto; font: 500 12px var(--ui); color: var(--muted); }
.wl-item:not(.ghost) small { color: #6ee08a; }
.wl-icon {
  width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center;
  color: #fff; font: 700 15px var(--ui);
}
.wl-item.ghost .wl-icon { width: 24px; height: 24px; font-size: 12px; border-radius: 6px; }
img.wl-icon { object-fit: contain; }
.faucet a, .end-wager a, .toast a { color: var(--accent); }

.pay-prize { font-size: 15px; }
.pay-prize b { color: #6ee08a; }
.seats { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.seats li {
  background: var(--ink-2); border-radius: 10px; padding: 7px 10px; font: 600 14px var(--ui);
  display: flex; justify-content: space-between; gap: 6px; color: var(--muted);
}
.seats li.paid { color: var(--text); }
.seats li.paid::after { content: '✓'; color: #6ee08a; }
.seats li:not(.paid)::after { content: '…'; }
.seats li.me { outline: 2px solid var(--ink-3); }
.pay-msg { font-size: 13px; color: var(--muted); min-height: 18px; }
.pay-msg.err { color: var(--danger); }
.pay-msg.ok { color: #6ee08a; }
.end-wager { font: 600 16px var(--ui); }
.end-wager.won { color: #6ee08a; }
.end-wager.lost { color: var(--muted); }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 40;
  background: var(--ink); color: var(--text); border-radius: 14px; padding: 10px 16px; font: 600 14px var(--ui);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4); max-width: calc(100% - 32px); text-align: center;
}
.stake-info .closed { color: var(--accent); }
.house-addr {
  display: block; margin: 6px auto 0; max-width: 100%; overflow-wrap: anywhere; background: var(--ink-2); color: var(--text);
  border: 1px dashed var(--ink-3); border-radius: 8px; padding: 6px 8px; font: 500 12px ui-monospace, monospace; cursor: copy;
}

/* ---------- Torneios ---------- */
.btn.tour { background: #9b7bff; color: #1c1640; box-shadow: 0 5px 0 #5f45c4; font-size: 20px; }
.tour-info { font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: -6px; }
.tour-info b { color: #6ee08a; }
.card.wide { width: min(760px, 100%); }
.tour-msg { font-size: 15px; line-height: 1.5; }
.tour-msg .note { color: var(--accent); font-weight: 600; }
.bracket { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; text-align: left; }
.round { flex: 1 0 150px; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.round h3 { font: 600 12px var(--ui); color: var(--muted); text-transform: uppercase; letter-spacing: .5px; text-align: center; }
.bm { background: var(--ink-2); border-radius: 10px; overflow: hidden; border: 2px solid transparent; }
.bm.live { border-color: var(--accent); }
.bm small { display: block; font: 600 10px var(--ui); color: var(--muted); padding: 4px 8px 0; }
.bt { padding: 6px 8px; font: 600 13px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt + .bt { border-top: 1px solid var(--ink-3); }
.bt.win { color: #6ee08a; }
.bt.win::after { content: ' ✓'; }
.bt.lose { color: #6d756f; text-decoration: line-through; }
.bt.me { background: rgba(155, 123, 255, .18); }
.set-preview .pg-round { width: 28px; height: 28px; font-size: 14px; }
.set-preview .pg-round svg { width: 22px; height: 22px; }
.set-preview .pg-pill { height: 26px; font-size: 11px; }

/* ---------- Menu principal ---------- */
.me-card { display: flex; flex-direction: column; gap: 8px; }
.me-preview { width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; background: #2f7026; }
.me-skins { font: 600 12px var(--ui); color: var(--muted); min-height: 16px; }
.btn.locker {
  background: linear-gradient(135deg, #ff7a59, #ff4fa3 55%, #9b7bff); color: #fff; box-shadow: 0 5px 0 #8d2f6a;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.btn.locker small { font: 600 12px var(--ui); opacity: .9; text-shadow: none; }
.howto-box { text-align: left; }
.howto-box summary { cursor: pointer; font: 600 14px var(--ui); color: var(--text); list-style: none; display: flex; justify-content: space-between; }
.howto-box summary::-webkit-details-marker { display: none; }
.howto-box summary::after { content: '+'; color: var(--muted); }
.howto-box[open] summary::after { content: '−'; }
.howto-box .howto { margin-top: 8px; }

/* ---------- Cacifo ---------- */
#locker { z-index: 22; }
.card.locker-card { gap: 12px; width: min(760px, calc(100vw - 32px)); }
.locker-card > * { min-width: 0; }
.locker-head { display: flex; align-items: center; justify-content: space-between; }
.btn.slim { padding: 8px 22px; font-size: 18px; box-shadow: 0 4px 0 #b38f13; }
.locker-stage { position: relative; border-radius: 16px; overflow: hidden; background: #2f7026; }
#locker-preview { width: 100%; height: clamp(150px, 30vh, 260px); display: block; }
.stage-btn { position: absolute; right: 10px; bottom: 10px; font-size: 14px; padding: 7px 14px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.tab {
  flex: none; background: var(--ink-2); color: var(--muted); border: 2px solid transparent; border-radius: 12px;
  padding: 8px 14px; font: 600 14px var(--ui); cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-color: var(--accent); background: var(--ink-3); }
.locker-note { font-size: 13px; color: var(--muted); text-align: left; }
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-height: 40vh; overflow-y: auto; padding: 3px; }
.item {
  background: var(--ink-2); border: 2px solid transparent; border-radius: 14px; padding: 8px 6px 7px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); transition: transform .08s, border-color .12s;
}
.item:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.item.on { border-color: var(--accent); background: var(--ink-3); }
.item canvas { width: 64px; height: 64px; border-radius: 10px; }
.item-name { font: 600 13px var(--ui); line-height: 1.2; }
.item-tag { font: 600 10px var(--ui); color: #6ee08a; text-transform: uppercase; letter-spacing: .4px; }
.item.on .item-tag { color: var(--accent); }
@media (max-height: 560px) {
  #locker-preview { height: 120px; }
  .items { max-height: 34vh; }
}

/* ---------- Conta, moedas e loja ---------- */
:root { --comum: #a9b2ac; --rara: #4fb3ff; --epica: #b67bff; --lendaria: #ffb02e; }
.account { background: var(--ink-2); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.account small { font: 500 12px var(--ui); color: var(--muted); line-height: 1.4; }
/* Ícones do jogo (icons.js) dentro de texto */
.ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.25em; flex: none; }
.item-tag .ic { width: 1.35em; height: 1.35em; vertical-align: -.35em; }
.acc-row { display: flex; align-items: center; gap: 10px; }
.coins { font: 600 16px var(--ui); color: #ffd94a; white-space: nowrap; }
.coins b { font-weight: 700; }
.streak { font: 600 13px var(--ui); color: #ffb27a; }
.acc-login {
  background: #ab9ff2; color: #1c1640; border: 0; border-radius: 12px; padding: 10px; font: 600 15px var(--ui); cursor: pointer;
}
.acc-login:disabled { opacity: .6; cursor: default; }
.end-coins { font: 600 18px var(--ui); color: #ffd94a; }
.locker-head .coins { margin-left: auto; margin-right: 12px; background: var(--ink-2); padding: 6px 12px; border-radius: 12px; }
.locker-buy {
  display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--ink-2);
  border-radius: 14px; padding: 10px 12px; text-align: left;
}
.buy-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buy-info b { font: 400 20px var(--display); }
.buy-info span { font: 500 12px var(--ui); color: var(--muted); }
.btn.sol { background: linear-gradient(135deg, #9b5cff, #19c98c); color: #fff; box-shadow: 0 4px 0 #4b2a8a; }
.btn.slim:disabled { opacity: .55; cursor: default; }
.locker-buy .btn { flex: none; white-space: nowrap; }
@media (max-width: 520px) { .locker-buy { flex-direction: column; align-items: stretch; } }
.item { position: relative; }
.item.locked canvas { filter: saturate(.75) brightness(.8); }
.item.trying { border-color: #fff; }
.item.locked .item-tag { color: #ffd94a; }
.item-rarity { position: absolute; z-index: 1; top: 5px; left: 6px; font: 700 9px var(--ui); text-transform: uppercase; letter-spacing: .4px; padding: 1px 5px; border-radius: 6px; background: rgba(0, 0, 0, .55); }
.r-comum { --r: var(--comum); } .r-rara { --r: var(--rara); } .r-epica { --r: var(--epica); } .r-lendaria { --r: var(--lendaria); }
.item-rarity, b.r-rara, b.r-epica, b.r-lendaria, b.r-comum { color: var(--r); }
.item.r-epica, .item.r-lendaria { background: linear-gradient(180deg, color-mix(in srgb, var(--r) 16%, var(--ink-2)), var(--ink-2)); }
.item.r-lendaria:not(.on):not(.trying) { border-color: color-mix(in srgb, var(--r) 45%, transparent); }

/* ---------- Telemóvel deitado ---------- */
/* Ecrãs baixos (telemóvel na horizontal): tudo mais compacto para caber sem andar sempre a deslizar */
@media (max-height: 520px) and (orientation: landscape) {
  .screen { padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  .card { padding: 14px 16px; gap: 9px; border-radius: 18px; }
  h2 { font-size: 24px; }
  .btn { padding: 9px; font-size: 18px; border-radius: 12px; }
  .btn.ghost, .btn.danger { font-size: 15px; }
  .btn.primary { box-shadow: 0 4px 0 #b38f13; }
  .big { font-size: 34px; }
  .final { font-size: 44px; }
  .spinner { width: 34px; height: 34px; border-width: 4px; }

  /* Definições em duas colunas, com o "Feito" sempre à vista */
  #settings .card { width: min(760px, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; text-align: left; padding-bottom: 0; }
  #settings .card > h2, #settings .card > .set-group, #settings .card > .btn { grid-column: 1 / -1; }
  #settings .card > .btn { position: sticky; bottom: 0; margin: 0 -16px; border-radius: 0 0 18px 18px; box-shadow: none; }
  .seg button { padding: 6px 0; font-size: 14px; }

  /* Cacifo: pré-visualização à esquerda, separadores e skins à direita */
  .card.locker-card {
    width: min(900px, 100%); height: 100%; max-height: 440px; padding: 12px 14px; gap: 8px;
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas: 'head head' 'stage tabs' 'stage note' 'stage items' 'buy items';
  }
  .locker-head { grid-area: head; }
  .locker-head h2 { font-size: 24px; }
  .locker-stage { grid-area: stage; min-height: 110px; }
  #locker-preview { position: absolute; inset: 0; height: 100%; }
  .locker-buy { grid-area: buy; align-self: start; flex-direction: column; align-items: stretch; }
  .tabs { grid-area: tabs; align-self: start; }
  .locker-note { align-self: start; }
  .tab { padding: 6px 11px; font-size: 13px; }
  .locker-note { grid-area: note; font-size: 12px; }
  .items { grid-area: items; max-height: none; min-height: 0; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .item canvas { width: 50px; height: 50px; }
  .item-name { font-size: 12px; }

  /* Pausa, fim de jogo, fila e pagamento: botões lado a lado quando há espaço */
  #pause .card, #end .card { width: min(560px, 100%); }
  #pause .card { display: grid; grid-template-columns: 1fr 1fr; }
  #pause .card > h2, #pause .card > p, #pause #resume, #pause .howto { grid-column: 1 / -1; }
  #end .card { display: grid; grid-template-columns: 1fr 1fr; }
  #end .card > :not(.btn) { grid-column: 1 / -1; }
  .card.wide { width: min(860px, 100%); }
  .seats { grid-template-columns: repeat(4, 1fr); }
  .round { flex-basis: 130px; }

  /* Marcador e contador mais pequenos para deixar o campo à vista */
  #hud { top: calc(6px + env(safe-area-inset-top, 0px)); flex-direction: row; gap: 6px; align-items: flex-start; }
  #hud .board { padding: 3px 14px 4px; min-width: 112px; border-radius: 12px; }
  #hud .score { font-size: 21px; gap: 10px; }
  #hud .dash { font-size: 16px; }
  #hud .dots { font-size: 6px; height: 7px; line-height: 7px; gap: 12px; }
  #clock { font-size: 11px; }
  #mode-label { font-size: 10px; margin-top: 4px; }
  #stats { top: calc(6px + env(safe-area-inset-top, 0px)); font-size: 10px; padding: 2px 7px; }
  #banner { font-size: clamp(40px, 9vw, 84px); }
}

/* Em ecrãs de toque o botão do menu vai para o canto de cima, longe dos polegares */
@media (pointer: coarse) {
  #bottom { top: calc(6px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); bottom: auto; left: auto; transform: none; }
  #menu-btn { padding: 6px 16px; font-size: 14px; border-radius: 12px; }
  body.has-pad #bottom { top: auto; right: auto; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
}

/* Telemóvel ao alto durante a partida: pede para rodar */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  body.in-match #rotate {
    display: flex; position: fixed; inset: 0; z-index: 30; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    background: rgba(16, 24, 15, .9); backdrop-filter: blur(4px); text-align: center; padding: 24px; font: 600 16px var(--ui);
  }
  #rotate b { font: 400 30px var(--display); }
  #rotate .phone { width: 46px; height: 78px; border: 4px solid var(--text); border-radius: 10px; animation: turn 2s ease-in-out infinite; }
}
@keyframes turn { 0%, 25% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }

/* ---------- Definições da HUD ---------- */
.set-group { font: 600 12px var(--ui); color: var(--accent); text-transform: uppercase; letter-spacing: .06em; text-align: left; margin-top: 4px; }
.tc-only { display: none !important; }
@media (pointer: coarse) {
  .tc-only { display: flex !important; }
  .set-group.tc-only { display: block !important; }
  /* No telemóvel os controlos de toque vêm primeiro */
  #settings .card > h2 { order: -2; }
  #settings .card > .tc-only { order: -1; }
}
#hud-edit-btn { font-size: 15px; padding: 9px; }
/* Editor: arrasta os controlos para onde quiseres */
#hud-edit { position: fixed; inset: 0; z-index: 26; pointer-events: none; background: rgba(16, 24, 15, .35); }
.hud-edit-bar {
  position: absolute; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); pointer-events: auto;
  display: flex; align-items: center; gap: 8px; background: var(--ink); border-radius: 14px; padding: 8px 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  font: 600 13px var(--ui); white-space: nowrap;
}
.hud-edit-bar .btn { padding: 6px 14px; font-size: 15px; }
body.hud-editing #touch { z-index: 27; }
/* A editar vê-se só o campo e os botões */
body.hud-editing .screen { visibility: hidden; }
#touch.editing #stick, #touch.editing #kick-btn, #touch.editing #chat-btn { outline: 2px dashed var(--accent); outline-offset: 4px; cursor: grab; pointer-events: auto; }
#touch.editing #stick-zone { display: none; }

/* ---------- Filas à espera (painel da esquerda do menu) ---------- */
.lobby { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.lobby-title { font: 700 13px var(--ui); color: var(--text); }
.lobby-title::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #6ee08a; margin-right: 6px; }
.lobby-list { display: flex; flex-direction: column; gap: 4px; }
.lobby-list button {
  display: flex; justify-content: space-between; gap: 8px; background: var(--ink-2); color: var(--text); border: 0; border-radius: 8px;
  padding: 6px 8px; font: 600 13px var(--ui); cursor: pointer; text-align: left;
}
.lobby-list button:hover { background: var(--ink-3); }
.lobby-list button b { color: #6ee08a; }
.lobby-region { display: block; font: 500 11px var(--ui); color: var(--muted); }
#set-region button small { display: block; font-size: 11px; opacity: .75; }
.lobby p { margin: 0; font-size: 12px; }
/* ---------- Menu principal ao estilo da damnbruh ---------- */
/* Barra de cima (logo, comando, definições) e três colunas: filas | jogar | carteira e jogador.
   Ecrãs médios e telemóvel deitado: jogar à esquerda, o resto à direita. Ecrãs estreitos: tudo numa coluna. */
.menu-screen {
  flex-direction: column; gap: 18px; padding: 18px 28px 24px;
  background: radial-gradient(ellipse at 50% 35%, rgba(18, 26, 20, .78), rgba(8, 11, 9, .93));
}
.menu-top { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 1180px; margin: 0 auto; }
.menu-top .logo { font-size: 40px; }
.menu-top .pad-tip { margin-left: auto; flex-direction: row; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; }
.menu-top .pad-tip span { display: none; }
body.has-pad .menu-top .pad-tip span { display: inline; }
.top-btn { flex: none; font-size: 15px; padding: 8px 16px; }
.menu-grid {
  display: grid; grid-template-columns: 250px minmax(0, 430px) 250px; grid-template-areas: "left main right";
  gap: 20px; justify-content: center; align-items: start; width: 100%; max-width: 1180px; margin: auto;
}
.panel {
  background: var(--ink); border: 1px solid rgba(255, 255, 255, .06); border-radius: 18px; padding: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
}
.menu-main { grid-area: main; display: flex; flex-direction: column; gap: 14px; padding: 22px; text-align: center; }
.menu-left, .menu-right { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.menu-left { grid-area: left; }
.menu-right { grid-area: right; }
.panel-title, .lobby-title { font: 700 12px var(--ui); color: var(--muted); text-transform: uppercase; letter-spacing: .6px; text-align: left; }

/* Valores: poucos botões grandes; o "+" mostra os outros */
.stakes { grid-template-columns: repeat(5, 1fr); gap: 8px; }
.stakes:not(.open) .stake.more { display: none; }
.stake { padding: 10px 0; font-size: 16px; }
.stake-more { color: var(--muted); font-size: 20px; line-height: 1; }
.play-btn { font-size: 30px; padding: 18px; }
.alt-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.alt-row .btn { font-size: 17px; padding: 11px 8px; }
.alt-row .btn.tour { box-shadow: 0 4px 0 #5f45c4; }
.tour-info { margin-top: -4px; }

/* Carteira à direita, com o saldo em grande */
.wallet-panel { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.wallet-bal { font: 400 22px var(--display); color: var(--text); }
.wallet-bal:empty { display: none; }
.wallet-panel .wallet-info { margin: 0; }
.account { padding: 12px 14px; }

/* Ecrãs médios: duas colunas */
@media (max-width: 1080px) {
  .menu-grid { grid-template-columns: minmax(0, 430px) minmax(0, 300px); grid-template-areas: "main right" "main left"; }
}
/* Ecrãs estreitos (telemóvel ao alto, janela pequena): uma coluna */
@media (max-width: 640px) and (min-height: 521px), (max-width: 640px) and (orientation: portrait) {
  .menu-screen { padding: 14px; gap: 12px; }
  .menu-top .logo { font-size: 32px; }
  body:not(.has-pad) .menu-top .pad-tip { display: none; }
  .menu-top .top-btn { margin-left: auto; }
  .menu-grid { grid-template-columns: minmax(0, 440px); grid-template-areas: "main" "right" "left"; gap: 12px; margin-top: 0; }
  .menu-main { padding: 16px; }
}
/* Telemóvel deitado: compacto, a página desliza se for preciso */
@media (max-height: 520px) and (orientation: landscape) {
  .menu-screen { gap: 8px; }
  .menu-top .logo { font-size: 28px; text-shadow: 0 3px 0 #7b2523; }
  .menu-top .logo span { text-shadow: 0 3px 0 #233f86; }
  .menu-top .pad-tip { padding: 4px 10px; font-size: 12px; }
  .top-btn { font-size: 13px; padding: 6px 12px; }
  .menu-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "main right" "main left"; gap: 10px; max-width: 860px; margin: 0 auto; }
  .panel { padding: 10px; border-radius: 14px; }
  .menu-main { padding: 12px 14px; gap: 9px; }
  .menu-left, .menu-right { gap: 10px; }
  .field { flex-direction: row; align-items: center; gap: 10px; }
  .field input { flex: 1; min-width: 0; padding: 7px 12px; font-size: 15px; }
  .mode { padding: 6px 0; font-size: 17px; }
  .stakes { gap: 6px; }
  .stake { padding: 6px 0; font-size: 14px; }
  .play-btn { font-size: 22px; padding: 10px; }
  .alt-row .btn { font-size: 14px; padding: 8px 6px; }
  .wallet-btn, .acc-login { padding: 8px; font-size: 14px; }
  .wallet-bal { font-size: 18px; }
  .me-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 6px 8px; }
  .me-preview { grid-row: span 2; }
  .me-skins { text-align: left; font-size: 11px; }
  .btn.locker { padding: 8px; font-size: 17px; }
  .btn.locker small { font-size: 10px; }
}