:root {
  --gold: #e2b65e;
  --gold-dim: #9b7a3a;
  --ink: #f3e6c8;
  --ink-dim: #bfa985;
  --blood: #a3171b;
  --panel: rgba(20, 11, 7, .82);
  --wood: url(../assets/textures/dark_paneled_wood/diff.jpg);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0a0605; color: var(--ink);
  font-family: 'Oswald', system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

h1, h2, h3, .btn, #table-rank, #announce h2 { font-family: 'Rye', Georgia, serif; font-weight: 400; }
h1 { color: var(--gold); text-shadow: 0 3px 0 #3b1d0b, 0 0 24px rgba(226,182,94,.35); letter-spacing: .02em; margin: 0 0 .2em; font-size: clamp(30px, 6vw, 58px); text-align: center; }

.panel {
  background: linear-gradient(var(--panel), var(--panel)), var(--wood) center / 420px;
  border: 2px solid var(--gold-dim);
  box-shadow: 0 0 0 4px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.6), inset 0 0 30px rgba(0,0,0,.6);
  border-radius: 10px;
  padding: 22px;
}

.btn {
  font-size: 18px; color: var(--ink); cursor: pointer;
  padding: 10px 22px; border-radius: 8px;
  border: 2px solid var(--gold-dim);
  background: linear-gradient(rgba(60,30,14,.55), rgba(25,12,6,.75)), var(--wood) center / 300px;
  box-shadow: inset 0 1px 0 rgba(255,220,160,.25), 0 4px 0 #1a0d06, 0 8px 18px rgba(0,0,0,.5);
  transition: transform .12s, filter .12s, border-color .12s;
}
.btn:hover:not(:disabled) { filter: brightness(1.25); border-color: var(--gold); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,220,160,.2), 0 1px 0 #1a0d06; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.big { font-size: 24px; padding: 12px 34px; display: block; margin: 18px auto 12px; }
.btn.small { font-size: 14px; padding: 7px 14px; font-family: 'Oswald', sans-serif; }
.btn.liar { background: linear-gradient(rgba(150,18,22,.75), rgba(70,6,8,.9)), var(--wood) center / 300px; border-color: #e0605c; font-size: 22px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* telas */
.screen { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 20; }
.menu-panel { width: min(640px, 100%); text-align: center; }
.tag { color: var(--ink-dim); margin: 0 0 14px; letter-spacing: .08em; text-transform: uppercase; font-size: 14px; }
.menu-panel h3 { color: var(--gold); margin: 6px 0 10px; font-size: 18px; }

.menu-panel { max-height: calc(100vh - 32px); overflow: auto; }

.modal { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); z-index: 40; padding: 16px; }
.modal .panel { width: min(620px, 100%); max-height: 90vh; overflow: auto; }
.modal h2 { color: var(--gold); margin-top: 0; }
.modal li { margin: 6px 0; line-height: 1.4; color: var(--ink); }
.modal p { color: var(--ink-dim); }
#end .panel { text-align: center; width: min(520px, 100%); }
#end-sub { color: var(--ink-dim); font-size: 18px; }

/* efeitos de tela */
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.7) 100%); transition: background .6s; }
#vignette.tense { background: radial-gradient(ellipse at center, transparent 30%, rgba(60,0,0,.85) 100%); }
#flash { position: fixed; inset: 0; pointer-events: none; z-index: 6; background: #fff3d6; opacity: 0; transition: opacity .25s; }
#flash.on { opacity: .55; transition: none; }
#flash.dead { background: #4a0000; opacity: .92; transition: opacity .08s; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#hud button, #hud .card { pointer-events: auto; }

.bubble, .my-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 6px) scale(.9); opacity: 0;
  background: #f5eedb; color: #2a1a10; padding: 6px 12px; border-radius: 12px; font-weight: 600; font-size: 16px;
  transition: opacity .2s, transform .2s; box-shadow: 0 6px 14px rgba(0,0,0,.5);
}
.bubble::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: #f5eedb; }
.bubble.show, .my-bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bubble.loud, .my-bubble.loud { background: var(--blood); color: #fff; font-family: 'Rye', serif; font-size: 22px; }
.my-bubble { position: fixed; bottom: 270px; left: 50%; }

#announce { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%) scale(.9); text-align: center; opacity: 0; transition: opacity .25s, transform .25s; width: 90vw; }
#announce.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#announce h2 { margin: 0; font-size: clamp(32px, 6vw, 60px); color: var(--gold); text-shadow: 0 3px 0 #3b1d0b, 0 0 30px rgba(0,0,0,.8); }
#announce p { margin: 4px 0 0; font-size: 20px; color: var(--ink); text-shadow: 0 2px 6px #000; }

#bottom { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; padding: 0 16px 14px; }
#hand { display: flex; justify-content: center; height: 170px; align-items: flex-end; margin-bottom: 8px; }
.card {
  width: 110px; margin: 0 -14px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateY(var(--lift)) rotate(var(--rot)); transform-origin: 50% 120%;
  transition: transform .15s;
}
.card img {
  width: 100%; display: block; border-radius: 8px; background: #f5eedb;
  border: 2px solid #2a1a10; box-shadow: 0 8px 16px rgba(0,0,0,.6);
}
.card:hover { transform: translateY(calc(var(--lift) - 14px)) rotate(var(--rot)); }
.card.selected { transform: translateY(calc(var(--lift) - 34px)) rotate(var(--rot)); }
.card.selected img { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 12px 22px rgba(0,0,0,.7); }
#actions { text-align: center; }
#hint { margin: 0 0 8px; color: var(--ink-dim); text-shadow: 0 2px 4px #000; font-size: 14px; }

@media (max-width: 700px) {
  .card { width: 76px; margin: 0 -10px; }
  #hand { height: 130px; }
  .my-bubble { bottom: 220px; }
  .btn.liar { font-size: 18px; }
}

#rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  #rotate-hint { display: block; position: absolute; top: 12px; right: 10px; max-width: 150px; font-size: 12px; text-align: right; color: var(--ink-dim); background: rgba(10,5,3,.6); padding: 4px 8px; border-radius: 6px; }
}

#mode-tag:empty { display: none; }
@keyframes pulse { to { transform: scale(1.15); } }
.card.devil img { box-shadow: 0 0 0 2px #ff5a2a, 0 0 18px rgba(255,90,42,.6), 0 8px 16px rgba(0,0,0,.6); }

/* revelação da carta da mesa no início da rodada */
#table-reveal { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(0,0,0,.35), rgba(0,0,0,.75)); z-index: 12; transition: opacity .4s; }
#table-reveal.out { opacity: 0; }
#table-reveal h2 { font-family: 'Rye', serif; font-weight: 400; color: var(--gold); font-size: clamp(34px, 7vw, 72px); margin: 18px 0 0; text-shadow: 0 3px 0 #3b1d0b, 0 0 30px rgba(226,182,94,.4); opacity: 0; transform: translateY(10px); transition: all .5s .7s; }
#table-reveal p { color: var(--ink); margin: 4px 0 0; font-size: 18px; letter-spacing: .1em; text-transform: uppercase; opacity: 0; transition: opacity .5s .9s; }
#table-reveal.flip h2 { opacity: 1; transform: none; }
#table-reveal.flip p { opacity: 1; }
.reveal-card { width: min(190px, 34vw); aspect-ratio: 222 / 323; position: relative; transform-style: preserve-3d; transform: rotateY(180deg) scale(.6); transition: transform .9s cubic-bezier(.2,.8,.2,1.2); perspective: 800px; }
#table-reveal.flip .reveal-card { transform: rotateY(0) scale(1); }
.reveal-card > div { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px var(--gold), 0 0 50px rgba(226,182,94,.45), 0 20px 40px rgba(0,0,0,.7); background: #f5eedb; }
.reveal-card .back { transform: rotateY(180deg); }
.reveal-card img { width: 100%; height: 100%; display: block; }
#hand { display: none; }

/* carimbo "MENTIROSO!" */
#stamp { position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); opacity: 0;
  font-family: 'Rye', serif; font-size: clamp(30px, 6vw, 64px); color: #ff3b30; padding: 6px 22px; border: 6px solid #ff3b30; border-radius: 10px;
  text-shadow: 0 0 18px rgba(255,59,48,.5); box-shadow: 0 0 30px rgba(255,59,48,.3), inset 0 0 20px rgba(255,59,48,.25); background: rgba(30,0,0,.35); white-space: nowrap; pointer-events: none; }
#stamp.show { animation: stamp 1.6s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.4); }
  12% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  80% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(.96); } }
/* aviso de tensão na roleta */
#tension { position: absolute; bottom: 30%; left: 50%; transform: translateX(-50%); font-family: 'Rye', serif; font-size: 22px; color: #ffb3a8;
  text-shadow: 0 2px 8px #000; opacity: 0; transition: opacity .4s; letter-spacing: .04em; }
#tension.show { opacity: 1; animation: beat 1s infinite; }
@keyframes beat { 0%, 100% { transform: translateX(-50%) scale(1); } 15% { transform: translateX(-50%) scale(1.07); } 30% { transform: translateX(-50%) scale(1); } }
#vignette.tense { animation: vpulse 1s infinite; }
@keyframes vpulse { 0%, 100% { opacity: 1; } 15% { opacity: .75; } }

/* composição do baralho na revelação da mesa */
#table-reveal .deck { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-top: 16px; max-width: 92vw; opacity: 0; transition: opacity .5s 1.1s; }
#table-reveal.flip .deck { opacity: 1; }
#table-reveal .deck small { width: 100%; text-align: center; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; }
#table-reveal .deck span { display: flex; align-items: center; gap: 6px; background: rgba(10,5,3,.65); border: 1px solid rgba(155,122,58,.5); border-radius: 8px; padding: 4px 10px 4px 4px; color: var(--ink); font-size: 15px; }
#table-reveal .deck span.is-table { border-color: var(--gold); box-shadow: 0 0 14px rgba(226,182,94,.35); }
#table-reveal .deck img { width: 26px; border-radius: 3px; background: #f5eedb; }
#table-reveal .deck b { font-family: 'Rye', serif; font-weight: 400; color: var(--gold); font-size: 18px; }
#table-reveal .deck em { width: 100%; text-align: center; color: #ff8a70; font-style: normal; font-size: 14px; }
#deck-info { display: block; font-size: 11px; color: var(--ink-dim); margin-top: 3px; }


/* ---------- online ---------- */
.btn.alt { background: linear-gradient(rgba(20,40,30,.55), rgba(6,18,12,.8)), var(--wood) center / 300px; }
.notice { color: #ffb4a8; margin: 0 0 8px; }
#online { background: radial-gradient(circle at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.75) 75%); }
.online-panel { width: min(460px, 100%); text-align: center; }
.online-panel h2 { color: var(--gold); margin: 0 0 14px; font-size: 30px; }
.field { display: block; text-align: left; color: var(--ink-dim); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.online-panel input {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 8px;
  border: 2px solid var(--gold-dim); background: rgba(0,0,0,.5); color: var(--ink);
  font: 18px 'Oswald', sans-serif; -webkit-user-select: text; user-select: text;
}
.online-panel input:focus { outline: none; border-color: var(--gold); }
.or { display: flex; align-items: center; gap: 10px; color: var(--ink-dim); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 6px 0 12px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: rgba(155,122,58,.5); }
.join-row { display: flex; gap: 8px; }
.join-row input { margin: 0; text-transform: uppercase; letter-spacing: .3em; text-align: center; font-family: 'Rye', serif; }
.net-status { min-height: 1.4em; color: var(--ink-dim); margin: 12px 0 0; }
.net-status.error { color: #ff9c8f; }
.room-label { margin: 0; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .1em; font-size: 13px; }
.room-code-row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 14px; }
#room-code { font-family: 'Rye', serif; font-weight: 400; font-size: 40px; color: var(--gold); letter-spacing: .18em; text-shadow: 0 3px 0 #3b1d0b; -webkit-user-select: text; user-select: text; }
#room-players { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; counter-reset: seat; }
#room-players li { counter-increment: seat; text-align: left; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(155,122,58,.5); background: rgba(0,0,0,.35); }
#room-players li::before { content: counter(seat) '. '; color: var(--gold); }
#room-players li.empty { color: var(--ink-dim); font-style: italic; border-style: dashed; }
#lobby-mode { justify-content: center; gap: 8px; }
#lobby-mode .mode.active { border-color: var(--gold); filter: brightness(1.3); box-shadow: 0 0 14px rgba(226,182,94,.35), 0 4px 0 #1a0d06; }
.muted { color: var(--ink-dim); }
.btn.ghost { background: transparent; box-shadow: none; margin-top: 8px; }
#end .row { justify-content: center; align-items: center; gap: 10px; }
#end .row .btn.big { margin: 18px 0 12px; }


/* ---------- menu inicial (Bluff Bar) ---------- */
#menu {
  place-items: stretch; padding: 0;
  background: linear-gradient(90deg, rgba(8,4,3,.94) 0%, rgba(8,4,3,.8) 26%, rgba(8,4,3,.25) 46%, rgba(8,4,3,0) 60%);
}
.menu-side { width: min(470px, 100%); height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3.2vh; padding: 5vh 3.5vw; }
.logo { position: relative; padding-top: 34px; }
.logo .crown { position: absolute; left: 16%; top: -6px; font-size: 54px; color: #f5c21b; transform: rotate(-8deg); text-shadow: 0 3px 0 #3a2400; }
.logo-title {
  font-family: 'Permanent Marker', 'Rye', sans-serif; font-weight: 400; margin: 0; text-align: left;
  font-size: clamp(56px, 7.4vw, 112px); line-height: .82; color: #fffaf0; text-transform: uppercase;
  transform: rotate(-5deg); letter-spacing: .02em;
  text-shadow: 0 5px 0 #000, 0 0 30px rgba(0,0,0,.6);
}
.logo-title b { display: block; margin-left: 1.25em; color: #f5c21b; font-weight: 400; text-shadow: 0 5px 0 #3a2400, 0 0 26px rgba(245,194,27,.35); }
.logo-title.small { font-size: 54px; text-align: center; }
.logo-title.small b { display: inline; margin: 0; }
.logo-cards { position: absolute; left: 0; bottom: 4px; display: flex; transform: rotate(-14deg); }
.logo-cards i {
  width: 34px; height: 48px; border-radius: 5px; background: #fffaf0; border: 2px solid #111; color: #111;
  font: 400 18px 'Permanent Marker', sans-serif; display: grid; place-items: center; font-style: normal; box-shadow: 0 3px 0 #000;
}
.logo-cards i + i { margin-left: -14px; transform: rotate(14deg) translateY(-4px); }

#main-nav { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.menu-card {
  --tilt: -1deg;
  position: relative; overflow: hidden; width: min(330px, 86vw); height: 66px; padding: 0 22px 0 18px;
  display: flex; align-items: center; gap: 16px; cursor: pointer; text-align: left;
  border-radius: 11px; border: 2px solid #fff6df;
  background: linear-gradient(160deg, #fbf4e3 0%, #efe2c4 100%);
  color: #23160d; font: 400 26px 'Permanent Marker', sans-serif; text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 0 5px 0 #8b6b3a, 0 12px 22px rgba(0,0,0,.55);
  transform: rotate(var(--tilt));
  transform-origin: 18% 60%;
  transition: transform .32s cubic-bezier(.2,.9,.3,1.25), box-shadow .32s ease, filter .32s ease, border-color .32s ease;
  will-change: transform;
}
.menu-card:nth-child(even) { --tilt: 1deg; }
/* naipes nos cantos, como numa carta de baralho */
.menu-card::before, .menu-card::after { content: attr(data-suit); position: absolute; font: 400 14px 'Rye', serif; color: inherit; opacity: .55; }
.menu-card::before { left: 7px; top: 3px; }
.menu-card::after { right: 7px; bottom: 3px; transform: rotate(180deg); }
.menu-card.red { color: #7a1214; }
.menu-card .ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; background: #23160d; color: #fbf4e3; flex: none; transition: background .3s, transform .32s; }
.menu-card.red .ico { background: #8d1518; }
.menu-card .label { position: relative; z-index: 1; }
/* reflexo que atravessa a carta quando ela fica ativa */
.menu-card .shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 48%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0; opacity: 0;
  transition: background-position .75s ease, opacity .3s;
}
#main-nav:has(.menu-card.active) .menu-card:not(.active) { filter: brightness(.82) saturate(.85); }
.menu-card.active {
  transform: translate(14px, -6px) scale(1.08) rotate(-3deg);
  border-color: #ffe08a;
  box-shadow: 0 0 0 3px #f5c21b, 0 0 34px rgba(255,196,60,.75), 0 8px 0 #8b6b3a, 0 22px 34px rgba(0,0,0,.6);
  filter: brightness(1.06);
}
.menu-card.active .shine { background-position: -30% 0; opacity: 1; }
.menu-card.active .ico { transform: scale(1.12); background: #f5c21b; color: #23160d; }
.menu-card:focus-visible { outline: none; }
.tagline { font: 400 20px 'Permanent Marker', sans-serif; color: #f3e6c8; transform: rotate(-4deg); margin: 2vh 0 0; opacity: .9; }
#menu .notice { max-width: 330px; }

.panel-title { color: var(--gold); margin: 0 0 12px; font-size: 30px; }
.settings-panel { width: min(520px, 100%); }
.set-group { margin-bottom: 14px; }
.set-group h3 { color: var(--gold); margin: 4px 0 8px; font-size: 18px; }
.set-row { display: grid; grid-template-columns: 1fr 180px 44px; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink); border-bottom: 1px solid rgba(155,122,58,.25); }
.set-row input[type=checkbox] { grid-column: 2; justify-self: start; width: 22px; height: 22px; accent-color: #f5c21b; }
.set-row select { grid-column: 2; background: rgba(0,0,0,.5); color: var(--ink); border: 1px solid var(--gold-dim); border-radius: 6px; padding: 5px 8px; font: 16px 'Oswald', sans-serif; }
.set-row input[type=range] { accent-color: #f5c21b; width: 100%; }
.set-row output { text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  #menu { background: linear-gradient(180deg, rgba(8,4,3,.9), rgba(8,4,3,.55)); }
  .menu-side { width: 100%; align-items: center; }
  #main-nav { align-items: center; }
}

/* transições de entrada: painéis surgem com leve zoom, o menu desliza da esquerda carta por carta */
@keyframes pop-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
.modal:not(.hidden) > .panel, #online:not(.hidden) > .panel, #end:not(.hidden) > .panel { animation: pop-in .32s cubic-bezier(.2, .9, .3, 1.1) both; }
#menu:not(.hidden) .logo, #menu:not(.hidden) .menu-card, #menu:not(.hidden) .tagline { animation: slide-in .55s cubic-bezier(.2, .9, .3, 1) both; }
#menu:not(.hidden) .menu-card:nth-child(1) { animation-delay: .08s; }
#menu:not(.hidden) .menu-card:nth-child(2) { animation-delay: .14s; }
#menu:not(.hidden) .menu-card:nth-child(3) { animation-delay: .2s; }
#menu:not(.hidden) .menu-card:nth-child(4) { animation-delay: .26s; }
#menu:not(.hidden) .tagline { animation-delay: .34s; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ---------- tela de Aparência ---------- */
/* A tela não captura o mouse no centro: arrastar ali gira o personagem 3D. */
#appearance {
  display: block; padding: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,4,3,.9) 0%, rgba(8,4,3,.55) 20%, rgba(8,4,3,0) 34%, rgba(8,4,3,0) 64%, rgba(8,4,3,.6) 78%, rgba(8,4,3,.9) 100%);
}
#appearance .ap-left, #appearance .ap-right, #appearance .ap-bottom { pointer-events: auto; }
.ap-left { position: absolute; left: 3vw; top: 50%; transform: translateY(-50%); width: 250px; }
.ap-title { font: 400 48px/1 'Permanent Marker', sans-serif; color: #fffaf0; margin: 0 0 18px; transform: rotate(-4deg); text-shadow: 0 4px 0 #000; text-transform: uppercase; }
#ap-cats { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ap-right { position: absolute; right: 2.5vw; top: 50%; transform: translateY(-50%); width: min(360px, 32vw); max-height: 78vh; overflow: auto; padding: 10px 16px 14px 10px; }
#ap-cat-title { font: 400 30px 'Permanent Marker', sans-serif; color: #f5c21b; margin: 0 0 8px 4px; text-transform: uppercase; text-shadow: 0 3px 0 #000; }
.opt-group h4 { margin: 12px 0 8px 4px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 400; }
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.ap-bottom { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; }
.ap-hint { position: absolute; left: 50%; top: 3vh; transform: translateX(-50%); margin: 0; color: var(--ink-dim); font-size: 14px; text-shadow: 0 2px 4px #000; white-space: nowrap; }
.ap-toast { position: absolute; left: 50%; bottom: 15vh; transform: translateX(-50%); margin: 0; font: 400 34px 'Permanent Marker', sans-serif; color: #f5c21b; text-shadow: 0 4px 0 #000; opacity: 0; pointer-events: none; }
.ap-toast.show { animation: ap-toast 1.4s ease both; }
@keyframes ap-toast { 0% { opacity: 0; translate: 0 14px; } 15%, 75% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 -10px; } }

/* cartas menores (categorias e opções) com o mesmo destaque do menu */
.menu-card.cat { width: 240px; height: 52px; font-size: 22px; }
.menu-card.mini { width: 100%; height: 46px; font-size: 16px; padding: 0 12px; gap: 10px; border-radius: 9px; box-shadow: 0 4px 0 #8b6b3a, 0 8px 16px rgba(0,0,0,.5); }
.menu-card.mini::before, .menu-card.mini::after { font-size: 11px; }
.ap-bottom .menu-card.mini { width: 170px; height: 54px; font-size: 24px; justify-content: center; }
.menu-card .swatch { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid rgba(35,22,13,.6); box-shadow: inset 0 1px 2px rgba(255,255,255,.4); }
.menu-card:hover:not(.selected):not(.active) { transform: translateY(-3px) rotate(var(--tilt)); border-color: #ffe9b0; }
.menu-card.selected {
  transform: translate(6px, -5px) scale(1.06) rotate(-2.5deg);
  border-color: #ffe08a;
  box-shadow: 0 0 0 3px #f5c21b, 0 0 26px rgba(255,196,60,.7), 0 6px 0 #8b6b3a, 0 16px 26px rgba(0,0,0,.55);
  filter: brightness(1.06); z-index: 1;
}
.menu-card.selected .shine { background-position: -30% 0; opacity: 1; }
.menu-card.mini.selected { transform: translateY(-4px) scale(1.05) rotate(-2deg); }
@media (max-width: 900px) {
  .ap-left { top: 12px; transform: none; width: auto; right: 12px; }
  #ap-cats { flex-direction: row; flex-wrap: wrap; }
  .menu-card.cat { width: auto; padding: 0 14px; height: 42px; font-size: 16px; }
  .ap-title { font-size: 30px; margin-bottom: 8px; }
  .ap-right { top: auto; bottom: 90px; transform: none; width: auto; left: 12px; right: 12px; max-height: 34vh; }
  .ap-hint { display: none; }
}
#appearance:not(.hidden) .ap-left, #appearance:not(.hidden) .ap-right { animation: slide-in .5s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes slide-in-right { from { opacity: 0; translate: 40px 0; } to { opacity: 1; translate: 0 0; } }
#appearance:not(.hidden) .ap-right { animation-name: slide-in-right; }

/* =====================================================================
   Tela JOGAR — coluna à esquerda (como o menu), o bar continua visível à direita
   ===================================================================== */
#play {
  place-items: stretch; padding: 0;
  background: linear-gradient(90deg, rgba(8,4,3,.95) 0%, rgba(8,4,3,.84) 30%, rgba(8,4,3,.32) 52%, rgba(8,4,3,0) 66%);
}
.play-side { width: min(560px, 100%); height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 5vh 3.5vw; gap: 1.2vh; overflow-y: auto; }
.play-title {
  font: 400 clamp(52px, 6vw, 88px)/.9 'Permanent Marker', sans-serif; color: #fffaf0; text-transform: uppercase;
  margin: 0 0 1.6vh; transform: rotate(-4deg); transform-origin: left; text-shadow: 0 5px 0 #000, 0 0 30px rgba(0,0,0,.6);
}
.play-title::after { content: '♠ ♥ ♣ ♦'; display: block; font: 400 15px 'Rye', serif; letter-spacing: .5em; color: #f5c21b; margin: 8px 0 0 4px; text-shadow: 0 2px 0 #000; }
.sec-label { display: flex; align-items: center; gap: 12px; margin: 1.6vh 0 .6vh; font: 400 13px 'Oswald', sans-serif; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.sec-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(226,182,94,.55), transparent); }

/* modo de jogo: dois cartões; o escolhido fica dourado, um pouco maior e mais alto */
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mode-card {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; min-height: 78px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(226,182,94,.16); color: var(--ink-dim);
  background: linear-gradient(160deg, rgba(40,22,12,.62), rgba(14,7,4,.7));
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  transition: transform .28s cubic-bezier(.2,.9,.3,1.2), border-color .28s, box-shadow .28s, background .28s, color .28s, filter .28s;
  filter: saturate(.75) brightness(.88);
}
.mc-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; font-size: 24px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.12), rgba(0,0,0,.35)); box-shadow: inset 0 0 0 1px rgba(226,182,94,.25); transition: box-shadow .28s; }
.mc-text b { display: block; font: 400 20px 'Rye', serif; color: var(--ink); letter-spacing: .02em; }
.mc-text small { display: block; font-size: 13px; line-height: 1.25; margin-top: 2px; }
.mc-check { position: absolute; top: -9px; right: -9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 700 13px 'Oswald', sans-serif; color: #23160d; background: #f5c21b; box-shadow: 0 2px 8px rgba(0,0,0,.5); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s cubic-bezier(.2,1.6,.4,1); }
.mode-card:hover, .mode-card:focus-visible { outline: none; transform: translateY(-3px) scale(1.02); border-color: rgba(226,182,94,.45); filter: none; box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 18px rgba(245,194,27,.12); }
.mode-card.active {
  transform: translateY(-4px) scale(1.035); filter: none; color: #e9d7b0;
  border-color: #e2b65e; background: linear-gradient(160deg, rgba(92,58,20,.72), rgba(30,16,6,.8));
  box-shadow: 0 0 0 1px rgba(245,194,27,.5), 0 0 26px rgba(245,194,27,.28), 0 12px 24px rgba(0,0,0,.55);
}
.mode-card.active .mc-ico { box-shadow: inset 0 0 0 2px #f5c21b, 0 0 14px rgba(245,194,27,.45); }
.mode-card.devil.active .mc-ico { box-shadow: inset 0 0 0 2px #f5c21b, 0 0 16px rgba(255,90,42,.55); }
.mode-card.active .mc-text b { color: #ffe6a6; }
.mode-card.active .mc-check { opacity: 1; transform: scale(1); }
.mode-card.picked { animation: mode-pick .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes mode-pick { 0% { transform: translateY(-4px) scale(.98); } 45% { transform: translateY(-6px) scale(1.07); } 100% { transform: translateY(-4px) scale(1.035); } }

/* como quer jogar: "Jogar local" é a carta principal (creme, como o menu); "online" é mais discreta */
.how-row { display: grid; gap: 12px; }
.how-card {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; cursor: pointer;
  padding: 0 22px 0 16px; border-radius: 12px;
  transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s, border-color .3s, filter .3s;
}
.how-card::before, .how-card::after { content: attr(data-suit); position: absolute; font: 400 13px 'Rye', serif; opacity: .5; }
.how-card::before { left: 8px; top: 4px; }
.how-card::after { right: 8px; bottom: 4px; transform: rotate(180deg); }
.how-card.primary {
  min-height: 88px; border: 2px solid #fff6df; color: #23160d;
  background: linear-gradient(160deg, #fbf4e3 0%, #efe2c4 100%);
  box-shadow: 0 5px 0 #8b6b3a, 0 14px 26px rgba(0,0,0,.55), 0 0 30px rgba(245,194,27,.18);
}
.how-card:not(.primary) {
  min-height: 66px; border: 1px solid rgba(226,182,94,.42); color: var(--ink);
  background: linear-gradient(160deg, rgba(44,26,14,.78), rgba(16,8,4,.82));
  box-shadow: 0 8px 18px rgba(0,0,0,.45);
}
.hc-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; font-size: 25px; border-radius: 50%; background: #23160d; box-shadow: 0 0 0 2px rgba(245,194,27,.6); transition: transform .3s; }
.how-card:not(.primary) .hc-ico { width: 40px; height: 40px; font-size: 21px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 1px rgba(226,182,94,.4); }
.hc-text { flex: 1; position: relative; z-index: 1; }
.hc-text b { display: block; font: 400 30px/1 'Permanent Marker', sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.how-card:not(.primary) .hc-text b { font-size: 22px; color: #f3e6c8; }
.hc-text small { display: block; margin-top: 4px; font-size: 14px; letter-spacing: .04em; opacity: .75; }
.hc-go { font-size: 14px; opacity: .45; transition: transform .3s, opacity .3s; }
.how-card .shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.6) 48%, transparent 62%);
  background-size: 260% 100%; background-position: 130% 0; transition: background-position .75s ease, opacity .3s;
}
.how-card:not(.primary) .shine { background-image: linear-gradient(105deg, transparent 35%, rgba(255,214,120,.18) 48%, transparent 62%); }
.how-card:hover, .how-card:focus-visible { outline: none; transform: translate(6px, -3px) scale(1.02); }
.how-card.primary:hover, .how-card.primary:focus-visible { border-color: #ffe08a; box-shadow: 0 0 0 3px #f5c21b, 0 0 34px rgba(255,196,60,.6), 0 7px 0 #8b6b3a, 0 20px 32px rgba(0,0,0,.6); }
.how-card:not(.primary):hover, .how-card:not(.primary):focus-visible { border-color: #e2b65e; box-shadow: 0 0 0 1px rgba(245,194,27,.4), 0 0 22px rgba(245,194,27,.2), 0 12px 24px rgba(0,0,0,.55); }
.how-card:hover .shine, .how-card:focus-visible .shine { background-position: -30% 0; opacity: 1; }
.how-card:hover .hc-go, .how-card:focus-visible .hc-go { transform: translateX(4px); opacity: .9; }
.how-card:hover .hc-ico, .how-card:focus-visible .hc-ico { transform: scale(1.08) rotate(-6deg); }
.how-card:active { transform: translate(6px, 0) scale(1); }

/* botões secundários: só texto, sem caixa */
.play-foot { display: flex; gap: 26px; margin-top: 2.6vh; padding-left: 4px; }
.foot-btn { background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--ink-dim); font: 400 15px 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.foot-btn .q { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; border: 1px solid currentColor; font-size: 12px; letter-spacing: 0; }
.foot-btn:hover, .foot-btn:focus-visible { outline: none; color: #f5c21b; border-color: rgba(245,194,27,.6); }

#play:not(.hidden) .play-side > * { animation: slide-in .5s cubic-bezier(.2, .9, .3, 1) both; }
#play:not(.hidden) .play-side > :nth-child(2) { animation-delay: .05s; }
#play:not(.hidden) .play-side > :nth-child(3) { animation-delay: .1s; }
#play:not(.hidden) .play-side > :nth-child(4) { animation-delay: .15s; }
#play:not(.hidden) .play-side > :nth-child(5) { animation-delay: .2s; }
#play:not(.hidden) .play-side > :nth-child(6) { animation-delay: .26s; }
@media (max-width: 720px) {
  #play { background: linear-gradient(180deg, rgba(8,4,3,.92), rgba(8,4,3,.6)); }
  .play-side { width: 100%; }
}
@media (max-height: 640px) {
  .play-title { font-size: 46px; margin-bottom: 0; }
  .play-title::after { display: none; }
  .how-card.primary { min-height: 70px; }
  .how-card:not(.primary) { min-height: 56px; }
  .mode-card { min-height: 64px; padding: 10px 12px; }
}

/* =====================================================================
   Carregamento
   ===================================================================== */
#loading { overflow: hidden; background: #070403; transition: opacity .9s ease; }
#loading.out { opacity: 0; pointer-events: none; }
#loading::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, rgba(30,14,6,0) 0%, rgba(8,4,2,.55) 55%, rgba(4,2,1,.92) 100%); }
.ld-bg { position: absolute; inset: -40px; background: #1a0d07 url(../assets/ui/loading_bg.jpg) center / cover; filter: blur(7px) brightness(.34) saturate(1.1); animation: ld-drift 26s ease-in-out infinite alternate; }
@keyframes ld-drift { from { transform: scale(1.06) translateX(-14px); } to { transform: scale(1.12) translateX(14px); } }
.ld-light { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: radial-gradient(circle at 50% 50%, rgba(255,170,70,.28), transparent 38%); animation: ld-light 14s ease-in-out infinite alternate; }
@keyframes ld-light { from { transform: translate(-22vw, -6vh); } to { transform: translate(20vw, 4vh); } }
.ld-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ld-dust i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #ffcf8a; box-shadow: 0 0 6px #ffb24a; opacity: 0; animation: ld-dust 13s linear infinite; }
.ld-dust i:nth-child(1) { left: 12%; animation-delay: 0s; }
.ld-dust i:nth-child(2) { left: 24%; animation-delay: -3s; animation-duration: 16s; }
.ld-dust i:nth-child(3) { left: 33%; animation-delay: -7s; }
.ld-dust i:nth-child(4) { left: 47%; animation-delay: -1s; animation-duration: 18s; }
.ld-dust i:nth-child(5) { left: 58%; animation-delay: -9s; }
.ld-dust i:nth-child(6) { left: 66%; animation-delay: -5s; animation-duration: 15s; }
.ld-dust i:nth-child(7) { left: 74%; animation-delay: -11s; }
.ld-dust i:nth-child(8) { left: 82%; animation-delay: -2s; animation-duration: 17s; }
.ld-dust i:nth-child(9) { left: 90%; animation-delay: -8s; }
.ld-dust i:nth-child(10) { left: 6%; animation-delay: -12s; animation-duration: 19s; }
@keyframes ld-dust { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .55; } 85% { opacity: .35; } 100% { transform: translate(40px, -85vh); opacity: 0; } }
.ld-props { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .3; filter: blur(.8px); }
.ld-shuffle { position: absolute; right: 12vw; bottom: 17vh; width: 80px; height: 116px; }
.ld-shuffle img { position: absolute; inset: 0; width: 80px; border-radius: 6px; box-shadow: 0 8px 18px rgba(0,0,0,.6); }
.ld-shuffle img:nth-child(1) { transform: rotate(-4deg); }
.ld-shuffle img:nth-child(2) { animation: ld-shuf 2.8s ease-in-out infinite; }
.ld-shuffle img:nth-child(3) { animation: ld-shuf 2.8s ease-in-out infinite reverse; animation-delay: -1.4s; }
@keyframes ld-shuf { 0%, 100% { transform: translate(0, 0) rotate(3deg); z-index: 1; } 30% { transform: translate(-56px, -10px) rotate(-14deg); z-index: 3; } 60% { transform: translate(0, -4px) rotate(5deg); z-index: 3; } }
.ld-chip { position: absolute; left: 11vw; bottom: 20vh; width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; color: #f3e6c8; font: 400 24px 'Rye', serif;
  background: radial-gradient(circle, #8d1518 0 48%, #f3e6c8 49% 53%, transparent 54%), repeating-conic-gradient(#f3e6c8 0 14deg, #8d1518 14deg 45deg);
  box-shadow: 0 0 0 3px #5a0c0e, 0 10px 22px rgba(0,0,0,.6); animation: ld-chip 9s linear infinite; }
@keyframes ld-chip { to { transform: rotate(360deg); } }
.ld-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: -6vh; }
.ld-logo { display: inline-block; margin-bottom: 4vh; animation: ld-logo 1s cubic-bezier(.2,.9,.3,1) both; }
@keyframes ld-logo { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.ld-msg { margin: 0 0 14px; min-height: 1.4em; font: 400 17px 'Oswald', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); text-shadow: 0 2px 6px #000; transition: opacity .35s, transform .35s; }
.ld-msg.swap { opacity: 0; transform: translateY(6px); }
.ld-track { width: min(420px, 72vw); height: 10px; padding: 2px; border-radius: 99px; background: rgba(0,0,0,.6);
  box-shadow: inset 0 1px 3px #000, 0 0 0 1px rgba(226,182,94,.38), 0 0 24px rgba(0,0,0,.6); }
#load-bar { position: relative; overflow: hidden; height: 100%; width: 0; border-radius: 99px; transition: width .4s ease-out;
  background: linear-gradient(90deg, #7a4513, #c88a2c 55%, #f5c21b 85%, #ffe6a0); box-shadow: 0 0 12px rgba(245,194,27,.55); }
.ld-sheen { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); background-size: 220% 100%; animation: ld-sheen 1.8s linear infinite; }
@keyframes ld-sheen { from { background-position: 160% 0; } to { background-position: -60% 0; } }
.ld-pct { margin-top: 10px; font: 400 15px 'Rye', serif; color: var(--gold); letter-spacing: .08em; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px #000; }
.ld-tip { position: absolute; z-index: 2; left: 50%; bottom: 6vh; transform: translateX(-50%); width: min(680px, 90vw); margin: 0; text-align: center;
  color: var(--ink-dim); font-size: 17px; line-height: 1.4; text-shadow: 0 2px 6px #000; transition: opacity .5s; }
.ld-tip b { display: block; margin-bottom: 4px; font: 400 12px 'Oswald', sans-serif; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); }
.ld-tip.swap { opacity: 0; }
@media (max-height: 560px) { .ld-props { display: none; } .ld-logo { margin-bottom: 2vh; transform: scale(.8); } }

/* =====================================================================
   HUD da partida — pouco contorno, hierarquia por tamanho e cor; o bar continua protagonista
   ===================================================================== */
#table-info {
  position: absolute; top: 14px; left: 14px; display: flex; gap: 12px; align-items: center; padding: 9px 26px 9px 10px;
  border-radius: 10px; border-left: 2px solid var(--gold);
  background: linear-gradient(100deg, rgba(14,7,4,.84) 0%, rgba(14,7,4,.6) 70%, rgba(14,7,4,0) 100%);
}
#table-card { width: 44px; border-radius: 5px; background: #f5eedb; transform: rotate(-4deg); box-shadow: 0 0 0 1px rgba(226,182,94,.6), 0 4px 10px rgba(0,0,0,.6); }
.ti-text small { display: block; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-dim); }
#table-rank { display: block; font-size: 26px; line-height: 1.05; color: var(--gold); text-shadow: 0 2px 0 #000; }
#turn { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
#turn::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-dim); }
#turn:empty { display: none; }
#turn.mine { padding: 2px 10px; border-radius: 99px; color: #23160d; background: #f5c21b; font-weight: 600; animation: glow-pulse 1.6s ease-in-out infinite; }
#turn.mine::before { background: #23160d; }
#mode-tag { display: block; margin-top: 3px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
#mode-tag.devil { color: #ff7a5c; }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(245,194,27,0); } 50% { box-shadow: 0 0 14px rgba(245,194,27,.6); } }

/* placas dos adversários: nome, cartas na mão e balas restantes */
.plate { position: absolute; left: 0; top: 0; text-align: center; white-space: nowrap; transition: opacity .3s; }
.p-box { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 12px 6px; border-radius: 10px;
  background: rgba(12,6,3,.5); border: 1px solid rgba(226,182,94,.14); transition: border-color .3s, box-shadow .3s, background .3s; }
.p-name { font: 400 16px 'Rye', serif; color: var(--ink); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 2px 4px #000; transition: color .3s; }
.p-row { display: flex; align-items: center; gap: 9px; }
.p-cards { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--ink); }
.p-cards img { width: 11px; border-radius: 2px; }
.p-out { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #ff8a70; }
.plate.turn .p-box { border-color: #e2b65e; background: rgba(48,28,8,.62); animation: plate-glow 1.6s ease-in-out infinite; }
.plate.turn .p-name { color: #ffd76a; }
.plate.turn::after { content: '▼'; display: block; margin-top: 2px; font-size: 11px; color: #f5c21b; text-shadow: 0 0 8px rgba(245,194,27,.8); animation: bob 1s ease-in-out infinite; }
@keyframes plate-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(245,194,27,.35), 0 0 12px rgba(245,194,27,.2); } 50% { box-shadow: 0 0 0 1px rgba(245,194,27,.6), 0 0 24px rgba(245,194,27,.45); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.plate.dead { opacity: .55; }
.plate.dead .p-name { color: var(--ink-dim); text-decoration: line-through rgba(255,90,74,.7); }
.plate.human .p-name::after { content: ' ●'; color: #7fd18b; font-size: .6em; vertical-align: middle; }

/* balas: ● disponível, ○ já puxada (as gastas ficam à direita) */
.pips { display: inline-flex; gap: 3px; align-items: flex-end; }
.pips i { width: 6px; height: 12px; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, #a8742a, #ffe19a 45%, #b07a26); box-shadow: 0 0 4px rgba(245,194,27,.35); }
.pips i.spent { background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px rgba(226,182,94,.45); }
.pips i.just { animation: pip-spend .9s ease-out; }
@keyframes pip-spend { 0% { transform: scale(1.9); background: #ffcf6a; box-shadow: 0 0 12px 3px rgba(255,120,60,.9); } 100% { transform: none; } }

/* seu revólver (canto inferior esquerdo) */
#me { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 6px; padding: 9px 16px 10px 12px; border-radius: 10px;
  background: linear-gradient(100deg, rgba(14,7,4,.8), rgba(14,7,4,.45)); border-left: 2px solid var(--gold); }
#my-status { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
#me.out #my-status { color: #ff8a70; }
.chambers { display: inline-flex; gap: 5px; align-items: flex-end; }
.chambers .ch { position: relative; width: 14px; height: 32px; }
.chambers .ch img { display: block; width: 14px; height: 32px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); transition: opacity .3s, transform .3s; }
/* câmara vazia: um furo escuro com aro de latão */
.chambers .ch::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle, #050302 0 45%, #6b4a1c 52% 68%, transparent 72%); }
.chambers .ch.spent img { opacity: 0; transform: translateY(-6px); }
.chambers .ch.spent::after { opacity: 1; }
.chambers .ch.just img { animation: eject .8s ease-out both; }
.chambers .ch.just::after { animation: hole-flash .8s ease-out; }
@keyframes eject { 0% { opacity: 1; transform: none; filter: brightness(2) drop-shadow(0 0 6px #ff9a3c); } 100% { opacity: 0; transform: translate(8px, -22px) rotate(35deg); } }
@keyframes hole-flash { 0% { box-shadow: 0 0 14px 4px rgba(255,150,60,.9); } 100% { box-shadow: none; } }

/* acontecimentos: texto grande por um instante, sem caixa e sem lista */
#feed { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 92vw; text-align: center; pointer-events: none; z-index: 11; }
.feed-line { display: inline-block; font: 400 clamp(22px, 2.6vw, 34px) 'Permanent Marker', sans-serif; color: #f3e6c8; text-transform: uppercase; letter-spacing: .02em;
  text-shadow: 0 3px 0 #000, 0 0 22px rgba(245,194,27,.35); animation: feed var(--dur, 1.6s) ease both; }
.feed-line.good { color: #b9f0a6; text-shadow: 0 3px 0 #000, 0 0 24px rgba(120,220,110,.45); font-size: clamp(26px, 3.2vw, 44px); }
.feed-line.bad { color: #ff5a4a; text-shadow: 0 4px 0 #2a0000, 0 0 30px rgba(255,60,40,.6); font-size: clamp(32px, 4.6vw, 64px); rotate: -3deg; }
.feed-line.warn { color: #ffb4a8; font-size: clamp(18px, 2vw, 26px); }
@keyframes feed { 0% { opacity: 0; transform: translateY(14px) scale(.88); } 12% { opacity: 1; transform: translateY(0) scale(1.06); } 22% { transform: scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12px) scale(.98); } }

/* troca de vez (parte de baixo, some sozinho) */
#turn-banner { position: absolute; left: 50%; bottom: 29vh; transform: translateX(-50%); text-align: center; white-space: nowrap; pointer-events: none; opacity: 0; }
#turn-banner b { display: block; font: 400 24px 'Rye', serif; color: #f3e6c8; text-transform: uppercase; letter-spacing: .08em; text-shadow: 0 2px 0 #000, 0 0 14px rgba(0,0,0,.8); }
#turn-banner b::before, #turn-banner b::after { content: ''; display: inline-block; width: 36px; height: 1px; margin: 0 12px; vertical-align: middle; background: linear-gradient(90deg, transparent, var(--gold)); }
#turn-banner b::after { background: linear-gradient(90deg, var(--gold), transparent); }
#turn-banner span { display: block; margin-top: 2px; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); text-shadow: 0 2px 4px #000; }
#turn-banner span:empty { display: none; }
#turn-banner.mine b { font-size: 40px; color: #ffd76a; text-shadow: 0 3px 0 #3a2400, 0 0 26px rgba(245,194,27,.55); }
#turn-banner.show { animation: banner 1.6s ease both; }
#turn-banner.mine.show { animation-duration: 2.3s; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, 10px); } 14% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }

/* ações na sua vez */
#timer { width: 46px; height: 46px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; font: 400 20px 'Rye', serif; color: var(--gold);
  background: rgba(10,5,3,.65); box-shadow: inset 0 0 0 2px rgba(226,182,94,.55), 0 4px 12px rgba(0,0,0,.5); }
#timer.urgent { color: #ff5a4a; box-shadow: inset 0 0 0 2px #ff5a4a, 0 0 16px rgba(255,90,74,.5); animation: pulse .5s infinite alternate; }
#actions .btn { border-radius: 10px; }
#btn-play:not(:disabled) { color: #23160d; border-color: #ffe08a; background: linear-gradient(160deg, #fbf4e3, #ecd9ae); box-shadow: 0 4px 0 #8b6b3a, 0 0 22px rgba(245,194,27,.35), 0 10px 18px rgba(0,0,0,.5); }
#btn-play:disabled { background: rgba(14,7,4,.75); border-color: rgba(226,182,94,.3); opacity: .8; font-size: 16px; }

/* gestos (F): botão discreto e uma roda de gestos */
#gestures { position: absolute; right: 14px; bottom: 14px; display: flex; flex-direction: column; align-items: flex-end; pointer-events: auto; }
#btn-gestures { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; cursor: pointer; border-radius: 99px;
  border: 1px solid rgba(226,182,94,.4); background: rgba(12,6,3,.7); color: var(--ink); font: 400 14px 'Oswald', sans-serif; letter-spacing: .16em; text-transform: uppercase;
  transition: border-color .2s, box-shadow .2s, color .2s; }
#btn-gestures:hover, #btn-gestures.open { border-color: #f5c21b; color: #ffe6a6; box-shadow: 0 0 16px rgba(245,194,27,.3); }
#btn-gestures kbd { display: grid; place-items: center; min-width: 24px; height: 24px; border-radius: 50%; background: #f5c21b; color: #23160d; font: 600 13px 'Oswald', sans-serif; letter-spacing: 0; }
#gesture-menu { position: absolute; right: -6px; bottom: 50px; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(24,12,6,.92) 0 30%, rgba(12,6,3,.78) 31% 100%);
  box-shadow: 0 0 0 1px rgba(226,182,94,.35), 0 18px 40px rgba(0,0,0,.6); animation: wheel-in .22s cubic-bezier(.2,.9,.3,1.3); }
@keyframes wheel-in { from { opacity: 0; transform: scale(.7) rotate(-20deg); } to { opacity: 1; transform: none; } }
.gw-item { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; padding: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center; font-size: 26px;
  transform: rotate(var(--a)) translate(76px) rotate(calc(-1 * var(--a))); background: rgba(255,250,240,.06); border: 1px solid rgba(226,182,94,.3); color: #fff;
  transition: background .2s, border-color .2s, scale .2s, box-shadow .2s; }
.gw-item:hover, .gw-item:focus-visible { outline: none; scale: 1.14; background: rgba(245,194,27,.22); border-color: #f5c21b; box-shadow: 0 0 16px rgba(245,194,27,.4); }
.gw-item kbd { position: absolute; right: -4px; top: -4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #23160d; color: var(--gold); border: 1px solid var(--gold-dim); font: 400 11px 'Oswald', sans-serif; }
.gw-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 74px; text-align: center; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); line-height: 1.2; pointer-events: none; }

#spectating { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 8px 18px; border-radius: 99px; background: rgba(60,0,0,.7); border: 1px solid rgba(255,90,74,.6); color: #ffd2c8; letter-spacing: .06em; }

@media (max-width: 900px), (max-height: 600px) {
  #table-card { width: 36px; }
  #table-rank { font-size: 21px; }
  #turn-banner { bottom: 34vh; }
  #turn-banner.mine b { font-size: 30px; }
  .p-name { font-size: 13px; }
  .chambers .ch, .chambers .ch img { width: 11px; height: 25px; }
}
/* placa presa na borda de cima: a fala aparece embaixo dela */
.plate.pinned .bubble { bottom: auto; top: calc(100% + 10px); }
.plate.pinned .bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #f5eedb; }
.plate.pinned .bubble.loud::after { border-bottom-color: var(--blood); }
/* ações um pouco à direita do centro: o leque fica embaixo à esquerda e as cartas não ficam atrás dos botões */
#actions { translate: clamp(0px, calc(50vw - 400px), 210px) 0; }
#turn-banner.mine { margin-left: clamp(0px, calc(50vw - 400px), 210px); }
.plate .bubble { margin-left: var(--bx, 0px); }

/* ---------- menu de pausa ---------- */
/* Cena ao fundo escurecida (luz quente no centro, bordas escuras); painel de madeira com moldura dourada. */
#pause {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(ellipse at 50% 45%, rgba(40,20,8,.35), rgba(6,3,2,.82) 75%);
  -webkit-backdrop-filter: blur(3px) saturate(.85); backdrop-filter: blur(3px) saturate(.85);
  opacity: 0; transition: opacity .26s ease;
}
#pause.open { opacity: 1; }
/* telas abertas a partir da pausa (configurações, regras) ficam por cima dela */
#settings, #rules { z-index: 45; }
#pause.sub .pz-panel { opacity: 0; transform: scale(.96); pointer-events: none; }
.pz-panel {
  position: relative; width: min(400px, 100%); padding: 30px 30px 20px; text-align: center;
  border-radius: 14px; border: 2px solid var(--gold-dim);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255,190,90,.22), transparent 60%),
    linear-gradient(rgba(22,11,6,.86), rgba(12,6,3,.92)), var(--wood) center / 420px;
  box-shadow: 0 0 0 1px #000, inset 0 0 0 6px rgba(0,0,0,.35), inset 0 0 0 7px rgba(226,182,94,.28),
    inset 0 0 40px rgba(0,0,0,.7), 0 24px 60px rgba(0,0,0,.7), 0 0 80px rgba(255,170,70,.08);
  transform: translateY(10px) scale(.94);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.15), opacity .22s ease;
}
#pause.open .pz-panel { transform: none; }
#pause.open.sub .pz-panel { transform: scale(.96); }
.pz-corner { position: absolute; font: 400 15px 'Rye', serif; color: var(--gold-dim); opacity: .8; }
.pz-corner.tl { left: 14px; top: 10px; } .pz-corner.tr { right: 14px; top: 10px; color: #a8463e; }
.pz-corner.bl { left: 14px; bottom: 10px; color: #a8463e; } .pz-corner.br { right: 14px; bottom: 10px; }
.pz-panel h2 { margin: 0; color: var(--gold); font-size: 40px; letter-spacing: .12em; text-transform: uppercase;
  text-shadow: 0 3px 0 #3b1d0b, 0 0 26px rgba(226,182,94,.35); }
.pz-rule { display: flex; align-items: center; gap: 12px; margin: 6px 0 18px; color: var(--gold-dim); font: 400 13px 'Rye', serif; letter-spacing: .3em; }
.pz-rule::before, .pz-rule::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim)); }
.pz-rule::after { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.pz-view { display: grid; gap: 10px; animation: pz-swap .28s ease both; }
@keyframes pz-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pz-view h3 { margin: 0; color: var(--gold); font-size: 26px; text-transform: uppercase; letter-spacing: .06em; }
.pz-view p { margin: 2px 0 10px; color: var(--ink-dim); font-size: 16px; }
.pz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pz-btn {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; height: 56px; padding: 0 18px;
  border-radius: 10px; border: 1px solid rgba(155,122,58,.55); cursor: pointer; text-align: left;
  font: 400 21px 'Rye', serif; color: var(--ink); letter-spacing: .03em;
  background: linear-gradient(rgba(48,24,11,.72), rgba(20,10,5,.88));
  box-shadow: inset 0 1px 0 rgba(255,220,160,.12), 0 3px 0 rgba(0,0,0,.55);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.3), border-color .2s, box-shadow .2s, color .2s, background .2s;
}
.pz-btn.small { height: 48px; justify-content: center; font-size: 19px; }
.pz-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 400 15px system-ui, sans-serif;
  background: #23160d; color: var(--gold); border: 1px solid var(--gold-dim); transition: background .2s, color .2s, transform .25s; }
/* reflexo que atravessa o botão escolhido */
.pz-btn::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,226,150,.22) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0;
  transition: background-position .7s ease, opacity .25s; }
.pz-btn.sel { transform: scale(1.035); border-color: #f0c96a; color: #fff3d6;
  background: linear-gradient(rgba(92,52,18,.78), rgba(40,20,8,.9));
  box-shadow: 0 0 0 1px rgba(245,194,27,.55), 0 0 22px rgba(255,180,60,.35), inset 0 1px 0 rgba(255,230,170,.25), 0 3px 0 rgba(0,0,0,.55); }
.pz-btn.sel::after { opacity: 1; background-position: -30% 0; }
.pz-btn.sel .pz-ico { background: #f5c21b; color: #23160d; transform: scale(1.08); }
.pz-btn.danger.sel { border-color: #e0605c; background: linear-gradient(rgba(110,22,20,.8), rgba(48,8,8,.92));
  box-shadow: 0 0 0 1px rgba(224,96,92,.55), 0 0 22px rgba(224,70,60,.35), 0 3px 0 rgba(0,0,0,.55); }
.pz-btn.danger.sel .pz-ico { background: #e0605c; color: #2a0806; }
.pz-btn:active { transform: scale(.99); }
.pz-btn:focus-visible { outline: none; }
.pz-note { margin: 14px 0 0; min-height: 1em; color: var(--ink-dim); font-size: 13px; letter-spacing: .06em; }
.pz-note kbd { font: 400 11px 'Oswald', sans-serif; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--gold-dim); color: var(--gold); }

/* ---------- online: telas, lobby, painel TAB ---------- */
.online-panel { width: min(500px, 100%); }
.on-view h2 { margin-bottom: 16px; }
.on-choices { display: grid; gap: 4px; margin-top: 10px; }
.on-choices .btn.big { width: 100%; margin: 8px 0 4px; }
.on-rows { display: grid; gap: 8px; margin: 0 0 14px; }
.on-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 9px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(155,122,58,.45); }
.on-row > span { color: var(--ink-dim); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.on-row > b { font: 400 20px 'Rye', serif; color: var(--gold); letter-spacing: .06em; }
.seg { display: inline-flex; border: 1px solid var(--gold-dim); border-radius: 8px; overflow: hidden; }
.seg button { font: 400 15px 'Oswald', sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); background: rgba(0,0,0,.35);
  border: 0; padding: 7px 14px; cursor: pointer; transition: background .2s, color .2s; }
.seg button + button { border-left: 1px solid var(--gold-dim); }
.seg button.active { background: linear-gradient(rgba(92,52,18,.85), rgba(40,20,8,.9)); color: #fff3d6; box-shadow: inset 0 0 0 1px rgba(245,194,27,.45); }
.on-check { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 6px 0 2px; cursor: pointer;
  font: 400 18px 'Rye', serif; color: var(--ink); letter-spacing: .04em; text-transform: uppercase; }
.on-check input { position: absolute; opacity: 0; pointer-events: none; }
.on-check .box { width: 24px; height: 24px; border-radius: 6px; border: 2px solid var(--gold-dim); background: rgba(0,0,0,.45); display: grid; place-items: center; transition: border-color .2s, background .2s; }
.on-check input:checked + .box { border-color: var(--gold); background: #f5c21b; }
.on-check input:checked + .box::after { content: '✓'; color: #23160d; font: 700 16px system-ui, sans-serif; }
.on-check input:focus-visible + .box { box-shadow: 0 0 0 3px rgba(245,194,27,.4); }
.on-hint { margin: 6px 0 0; color: var(--ink-dim); font-size: 14px; min-height: 1.3em; }
.join-row { align-items: center; justify-content: center; margin-top: 8px; }
.join-row .code-prefix { font: 400 26px 'Rye', serif; color: var(--gold-dim); letter-spacing: .12em; }
.join-row input { width: 170px; flex: none; font-size: 26px; padding: 8px 10px; }
.lobby-tags { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.lobby-tags span { font: 400 12px 'Oswald', sans-serif; letter-spacing: .16em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px;
  border: 1px solid rgba(155,122,58,.6); color: var(--ink-dim); background: rgba(0,0,0,.35); }
.lobby-tags .t-bots { color: #23160d; background: #f5c21b; border-color: #f5c21b; }
#room-players li::before { content: none; }
#room-players li.slot { display: grid; grid-template-columns: 12px 1fr auto 56px; align-items: center; gap: 10px; padding: 9px 12px; }
#room-players li.slot .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#room-players li.slot .ms, #tab-list .ms { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-dim); font-size: 14px; }
#room-players li.bot { color: var(--ink-dim); border-style: dashed; }
#room-players li.empty { border-style: dashed; }
#room-players li.ready { border-color: rgba(123,211,137,.55); }
.tags { display: flex; gap: 6px; }
.tags em { font: 400 11px 'Oswald', sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px;
  background: rgba(0,0,0,.4); border: 1px solid rgba(155,122,58,.6); color: var(--ink-dim); }
.tags .t-host { color: #23160d; background: var(--gold); border-color: var(--gold); }
.tags .t-bot { color: #c9b8f0; border-color: rgba(201,184,240,.5); }
li.ready .t-ready { color: #7bd389; border-color: rgba(123,211,137,.6); }
/* bolinha de conexão: conectado / instável / reconectando / desconectado */
.dot { width: 10px; height: 10px; border-radius: 50%; background: #5f574c; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.dot.connected { background: #7bd389; box-shadow: 0 0 8px rgba(123,211,137,.6); }
.dot.unstable { background: #f0c96a; box-shadow: 0 0 8px rgba(240,201,106,.6); }
.dot.reconnecting { background: #e8914a; animation: dot-blink 1s infinite; }
.dot.left { background: #b4483f; }
.dot.bot { background: #8f80b8; }
.dot.none { background: transparent; border: 1px dashed var(--gold-dim); box-shadow: none; }
@keyframes dot-blink { 50% { opacity: .3; } }
#lobby-host-opts { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap; margin: 4px 0 4px; }
#lobby-host-opts .on-check { margin: 0; font-size: 15px; }
#on-lobby .btn.big { width: 100%; margin: 12px 0 4px; }
#on-lobby .btn.big:disabled { filter: grayscale(.6); }

/* painel TAB: informação rápida, não bloqueia nada */
#tab-panel { position: fixed; left: 50%; top: 14vh; transform: translateX(-50%); z-index: 35; width: min(520px, calc(100vw - 32px));
  padding: 18px 20px 14px; border-radius: 12px; pointer-events: none;
  background: linear-gradient(rgba(22,11,6,.9), rgba(12,6,3,.94)); border: 1px solid var(--gold-dim);
  box-shadow: inset 0 0 0 4px rgba(0,0,0,.35), inset 0 0 0 5px rgba(226,182,94,.22), 0 18px 50px rgba(0,0,0,.6);
  animation: tab-in .16s ease-out both; }
@keyframes tab-in { from { opacity: 0; transform: translate(-50%, -6px); } to { opacity: 1; transform: translateX(-50%); } }
#tab-panel h3 { margin: 0 0 10px; text-align: center; color: var(--gold); font-size: 22px; letter-spacing: .2em; text-transform: uppercase; }
#tab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
#tab-list li { display: grid; grid-template-columns: 12px 1fr auto 118px 56px; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 7px; background: rgba(0,0,0,.3); }
#tab-list li.me { background: rgba(226,182,94,.1); }
#tab-list .who { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-list .st { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); text-align: right; }
#tab-list li.unstable .st { color: #f0c96a; } #tab-list li.reconnecting .st { color: #e8914a; } #tab-list li.left .st { color: #d06a60; }
#tab-list .ms.good { color: #7bd389; } #tab-list .ms.ok { color: #f0c96a; } #tab-list .ms.bad { color: #e8914a; }
#tab-count { margin: 10px 0 0; text-align: center; color: var(--ink-dim); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }

/* aviso de reconexão (a minha conexão) */
#net-banner { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 99px; background: rgba(20,10,5,.88); border: 1px solid #e8914a; color: #ffd2a8;
  font: 400 15px 'Oswald', sans-serif; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
#net-banner .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(232,145,74,.35); border-top-color: #e8914a; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- modo DADOS ---------- */
#mode-pick { grid-template-columns: repeat(3, 1fr); gap: 12px; }
#mode-pick .mode-card { padding: 12px 10px; gap: 10px; }
#mode-pick .mc-ico { width: 38px; height: 38px; font-size: 21px; }
#mode-pick .mc-text b { font-size: 18px; }
#mode-pick .mc-text small { font-size: 12px; }
.mode-preview { margin: 12px 0 2px; padding: 10px 14px; border-radius: 10px; border-left: 2px solid var(--gold);
  background: linear-gradient(100deg, rgba(14,7,4,.72), rgba(14,7,4,.35)); color: var(--ink-dim); font-size: 14px; animation: pz-swap .3s ease both; }
.mode-preview b { font: 400 17px 'Rye', serif; color: var(--gold); margin-right: 10px; letter-spacing: .04em; }
.mode-preview ul { margin: 6px 0 0; padding-left: 18px; }
.mode-preview li { margin: 2px 0; }
#rules[data-game="bluff"] .rules-dice, #rules[data-game="dice"] .rules-bluff { display: none; }

/* dado em SVG (HUD) */
svg.die { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
svg.die rect { fill: #f6ecd4; stroke: #b99a62; stroke-width: 1; }
svg.die circle { fill: #2a1a10; }
svg.die circle.one { fill: #a3171b; }
svg.die.hidden-die rect { fill: #3a2414; stroke: #8a6a34; }
svg.die.hidden-die text { fill: #c9a25a; font: 700 12px 'Oswald', sans-serif; text-anchor: middle; }
svg.die.mini { width: 13px; height: 13px; filter: none; }
svg.die.big { width: 46px; height: 46px; }

.doses { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; color: #8fe39a; }
.doses i { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #4fbf5f; background: transparent; }
.doses i.on { background: radial-gradient(circle at 35% 35%, #b8ffbf, #3fcf4a 60%, #1e7a2a); box-shadow: 0 0 8px rgba(70,211,90,.6); }
#dice-doses .doses { font-size: 18px; }
#dice-doses .doses i { width: 15px; height: 15px; }
.plate.dice .p-dice { display: inline-flex; gap: 2px; }
.plate.dice .p-row { gap: 10px; }

/* HUD do modo dados: usa os mesmos componentes do BLUFF (card da mesa, "Seu revólver", painel de ações) */
#hud.dice-mode #hand { display: none !important; }
#table-card.die-card { background: transparent; box-shadow: none; transform: rotate(-6deg); }
#my-chambers .die { width: 30px; height: 30px; }
#my-chambers .doses { margin-left: 8px; font-size: 16px; }
#dice-pick { display: flex; gap: 18px; justify-content: center; margin: 0 0 10px; }
#dice-pick.hidden { display: none; }
#dice-pick .pick { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; align-items: center; justify-items: center; column-gap: 8px; }
#dice-pick small { grid-column: 1 / 4; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-dim); text-shadow: 0 2px 4px #000; margin-bottom: 4px; }
#dice-pick b { min-width: 46px; display: grid; place-items: center; font: 400 30px 'Rye', serif; color: #ffd76a; text-shadow: 0 2px 0 #000; }
#dice-pick b .die { width: 40px; height: 40px; }
#dice-pick .btn.small { width: 34px; height: 34px; padding: 0; font: 700 18px system-ui, sans-serif; border-radius: 50%; }
.tags .t-out { color: #ff8a70; border-color: rgba(255,138,112,.5); }
@media (max-width: 720px) { #mode-pick { grid-template-columns: 1fr; } }

/* ---------- cursor do jogo (assets/ui/cursor*.svg) ---------- */
html, body, #scene, .screen, .modal { cursor: url("../assets/ui/cursor.svg") 3 2, auto; }
button:not(:disabled), a, label, select, .btn:not(:disabled), .menu-card, .mode-card, .how-card, .foot-btn, .pz-btn, .gw-item,
.on-check, #btn-gestures, .seg button, .dp-row button, [data-act], [role="radio"] { cursor: url("../assets/ui/cursor-hand.svg") 3 2, pointer; }
input:not([type]), input[type="text"] { cursor: text; }
.btn:disabled, button:disabled { cursor: url("../assets/ui/cursor.svg") 3 2, not-allowed; }