:root {
  --bg: #010a13; --bg2: #091428; --panel: #0a1428; --line: #463714; --text: #f0e6d2; --muted: #a09b8c;
  --accent: #c8aa6e; --accent2: #f0d38c; --good: #3fb950; --bad: #e84057; --blue: #0ac8b9;
  --c1: #9aa4b1; --c2: #3fb950; --c3: #3b82f6; --c4: #b05cf6; --c5: #f5b301;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 14px; }
body { background: radial-gradient(ellipse at top, #0b2a3c 0%, #04121e 45%, var(--bg) 80%) fixed; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
h1, h2 { margin: 0 0 8px; }
h2 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--accent2); margin-top: 14px; }
input { background: var(--bg2); border: 1px solid var(--line); color: var(--text); padding: 9px 10px; border-radius: 8px; font: inherit; flex: 1; min-width: 0; }
input.code { text-transform: uppercase; letter-spacing: .3em; font-weight: 800; max-width: 120px; }
.row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.check { display: flex; gap: 6px; align-items: center; margin: 4px 0 10px; color: var(--muted); }
.btn { background: #2a2433; color: var(--text); border: 1px solid var(--line); padding: 8px 14px; border-radius: 8px; font: inherit; font-weight: 600; cursor: pointer; transition: .15s; }
.btn:hover { background: #3a3146; border-color: #4d4159; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #ff6a3d, #d83a1c); border-color: #ff7b50; }
.btn.primary:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; }
.btn.big { padding: 12px 20px; font-size: 15px; }
.btn.tiny { padding: 4px 8px; font-size: 12px; }
.btn.on { background: #1f4d2b; border-color: var(--good); }
.panel { background: rgba(29, 25, 36, .92); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.conn { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); background: var(--bad); padding: 6px 14px; border-radius: 99px; z-index: 99; font-weight: 600; }

/* ---------- home ---------- */
.home-wrap { max-width: 980px; margin: 0 auto; padding: 40px 16px; }
.logo { font-family: 'Metal Mania', cursive; font-size: clamp(44px, 9vw, 84px); text-align: center; color: var(--accent); text-shadow: 0 0 24px rgba(255, 77, 46, .45), 3px 3px 0 #000; font-weight: 400; margin: 0; }
.sub { text-align: center; color: var(--muted); margin: 4px 0 28px; }
.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .home-grid { grid-template-columns: 1fr; } }
.room-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; min-height: 120px; }
.room-item { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.room-item .info { flex: 1; min-width: 0; }
.room-item .name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- sala ---------- */
.room-wrap { max-width: 1100px; margin: 0 auto; padding: 28px 16px; }
.room-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.room-head h2 { font-family: 'Metal Mania'; font-size: 34px; color: var(--text); text-transform: none; letter-spacing: 0; margin: 0; font-weight: 400; }
.code-tag { background: var(--bg2); border: 1px solid var(--line); padding: 2px 8px; border-radius: 6px; letter-spacing: .25em; color: var(--accent2); }
.room-body { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
@media (max-width: 860px) { .room-body { grid-template-columns: 1fr; } }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
@media (max-width: 600px) { .slots { grid-template-columns: repeat(2, 1fr); } }
.slot { position: relative; background: linear-gradient(180deg, #241e2c, #18141e); border: 1px solid var(--line); border-radius: 14px; padding: 18px 10px 14px; text-align: center; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.slot .ava { font-size: 40px; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #2c2436; border: 2px solid var(--line); }
.slot.human .ava { border-color: var(--accent2); }
.slot.ready .ava { border-color: var(--good); box-shadow: 0 0 14px rgba(63, 185, 80, .5); }
.slot.empty { border-style: dashed; opacity: .55; }
.slot .nm { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .st { font-size: 12px; color: var(--muted); }
.slot.ready .st { color: var(--good); }
.slot .crown { position: absolute; top: 6px; left: 8px; }
.slot .kick { position: absolute; top: 4px; right: 6px; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.slot .kick:hover { color: var(--bad); }
.room-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.chat { display: flex; flex-direction: column; height: 420px; }
.chat-log { flex: 1; overflow-y: auto; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.chat-log .sys { color: var(--muted); font-style: italic; font-size: 12px; }
.chat-log b { color: var(--accent2); }

/* ---------- jogo ---------- */
#game { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: rgba(0, 0, 0, .45); border-bottom: 1px solid var(--line); }
.round { font-weight: 800; font-size: 18px; white-space: nowrap; }
.phase { font-size: 12px; font-weight: 600; color: var(--accent2); text-transform: uppercase; margin-left: 6px; }
.timer { flex: 1; height: 10px; background: #2a2433; border-radius: 99px; position: relative; overflow: hidden; max-width: 420px; }
.timer-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); width: 100%; }
#gTimerTxt { position: absolute; right: 6px; top: -3px; font-size: 11px; font-weight: 700; }
.next-rounds { display: flex; gap: 6px; font-size: 12px; color: var(--muted); }
.next-rounds span { background: #231e2b; padding: 2px 8px; border-radius: 99px; }
.top-right { margin-left: auto; display: flex; gap: 6px; }
.game-main { flex: 1; display: grid; grid-template-columns: 190px 1fr 210px; min-height: 0; }
.traits { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.trait { display: flex; align-items: center; gap: 6px; background: #1b1722; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; cursor: default; }
.trait .ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: #2a2433; font-size: 16px; }
.trait.l0 .ic { background: #6b4a2b; } .trait.l1 .ic { background: #7d8a96; } .trait.l2 .ic { background: #c8a032; } .trait.l3 .ic { background: linear-gradient(135deg, #ff6ad5, #6ad5ff); }
.trait.off { opacity: .55; }
.trait .tn { font-weight: 700; font-size: 12px; }
.trait .bk { font-size: 11px; color: var(--muted); }
.trait .bk b { color: var(--text); }
.board-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; }
#cv { display: block; touch-action: none; }
.scout, .vs { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, .7); border: 1px solid var(--line); padding: 4px 12px; border-radius: 99px; font-weight: 600; z-index: 2; cursor: pointer; white-space: nowrap; }
.vs { cursor: default; color: var(--accent2); }
.players { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.pl { display: flex; align-items: center; gap: 8px; background: #1b1722; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; cursor: pointer; }
.pl:hover { border-color: #5a4c68; }
.pl.me { border-color: var(--accent2); }
.pl.dead { opacity: .4; }
.pl .hpn { font-weight: 800; width: 30px; text-align: right; }
.pl .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.pl .lv { font-size: 11px; color: var(--muted); }
.pl .hpb { height: 4px; background: #333; border-radius: 99px; overflow: hidden; margin-top: 3px; }
.pl .hpb div { height: 100%; background: var(--good); }
.pl.low .hpb div { background: var(--bad); }
.shopbar { display: grid; grid-template-columns: 190px 1fr 210px; gap: 10px; padding: 8px 12px 10px; background: rgba(0, 0, 0, .55); border-top: 1px solid var(--line); }
.shop-left, .shop-right { display: flex; flex-direction: column; gap: 5px; justify-content: center; }
.shopbtn { text-align: left; }
.shopbtn small { color: var(--muted); font-weight: 400; float: right; }
.lvl { font-weight: 700; }
.xpbar { height: 6px; background: #2a2433; border-radius: 99px; overflow: hidden; }
.xpbar div { height: 100%; background: var(--blue); width: 0; }
.gold { font-size: 22px; font-weight: 800; color: var(--accent2); }
.odds { display: flex; gap: 6px; font-size: 11px; font-weight: 700; }
.odds span:nth-child(1) { color: var(--c1); } .odds span:nth-child(2) { color: var(--c2); } .odds span:nth-child(3) { color: var(--c3); } .odds span:nth-child(4) { color: var(--c4); } .odds span:nth-child(5) { color: var(--c5); }
.shop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.card { position: relative; border-radius: 10px; border: 2px solid var(--c1); background: linear-gradient(180deg, #2a2433, #17131c); padding: 8px; cursor: pointer; min-height: 96px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .1s; user-select: none; }
.card:hover { transform: translateY(-3px); }
.card.empty { opacity: .25; cursor: default; border-style: dashed; }
.card.poor { filter: grayscale(.7) brightness(.7); }
.card.owned { box-shadow: 0 0 0 2px #fff6, 0 0 16px #fff3; }
.card .ic { font-size: 30px; line-height: 1; }
.card .nm { font-weight: 800; font-size: 13px; }
.card .tr { font-size: 11px; color: var(--muted); }
.card .cs { position: absolute; top: 6px; right: 8px; font-weight: 800; color: var(--accent2); }
.c1 { border-color: var(--c1) !important; } .c2 { border-color: var(--c2) !important; } .c3 { border-color: var(--c3) !important; } .c4 { border-color: var(--c4) !important; } .c5 { border-color: var(--c5) !important; }
.shop.sell-hover { outline: 3px dashed var(--accent2); outline-offset: 2px; border-radius: 10px; }
.shop.sell-hover::after { content: 'Solte para vender'; }
@media (max-width: 900px) {
  .game-main { grid-template-columns: 1fr; }
  .traits, .players { display: none; }
  .shopbar { grid-template-columns: 1fr; }
}

/* tooltip */
.tip { position: fixed; z-index: 50; max-width: 320px; background: rgba(18, 15, 23, .97); border: 1px solid #4d4159; border-radius: 10px; padding: 10px 12px; pointer-events: none; font-size: 12.5px; line-height: 1.4; box-shadow: 0 8px 30px #000a; }
.tip h4 { margin: 0 0 4px; font-size: 15px; }
.tip .tags { color: var(--accent2); font-size: 12px; margin-bottom: 6px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin: 6px 0; color: var(--muted); }
.stats b { color: var(--text); }
.ab { background: #231d2b; border-radius: 8px; padding: 6px 8px; margin-top: 6px; }
.ab b { color: var(--blue); }
.tip .it { margin-top: 4px; }

/* toasts */
.toasts { position: fixed; right: 220px; bottom: 140px; display: flex; flex-direction: column; gap: 6px; z-index: 40; pointer-events: none; }
.toast { background: rgba(20, 16, 26, .95); border: 1px solid var(--line); border-left: 4px solid var(--blue); padding: 8px 12px; border-radius: 8px; max-width: 360px; animation: tin .25s ease-out; }
.toast.bad { border-left-color: var(--bad); } .toast.loot { border-left-color: var(--accent2); }
@keyframes tin { from { transform: translateX(30px); opacity: 0; } }

/* modais */
.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal.passthrough { background: transparent; pointer-events: none; }
.modal.passthrough .modal-box { pointer-events: auto; }
.modal-box { background: var(--panel); border: 1px solid #4d4159; border-radius: 16px; padding: 20px; max-width: 980px; width: 100%; max-height: 90vh; overflow: auto; }
.modal-box h3 { margin: 0 0 12px; font-family: 'Metal Mania'; font-weight: 400; font-size: 30px; color: var(--accent2); }
.aug-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .aug-grid { grid-template-columns: 1fr; } }
.aug { background: linear-gradient(180deg, #2b2436, #1a1520); border: 2px solid #5c4d6e; border-radius: 14px; padding: 16px; cursor: pointer; text-align: center; transition: .15s; }
.aug:hover { transform: translateY(-4px); border-color: var(--accent2); }
.aug.t2 { border-color: #c8a032; } .aug.t3 { border-color: #ff6ad5; }
.aug .ic { font-size: 42px; }
.aug .nm { font-weight: 800; font-size: 16px; margin: 6px 0; }
.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.car { border: 2px solid var(--c1); border-radius: 12px; padding: 10px; background: #1b1722; cursor: pointer; text-align: center; }
.car.taken { opacity: .35; cursor: default; }
.car .ic { font-size: 34px; }
.car .it { margin-top: 6px; font-size: 13px; color: var(--accent2); }
.rank { list-style: none; padding: 0; margin: 0 0 16px; }
.rank li { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; font-size: 16px; }
.rank li.me { color: var(--accent2); font-weight: 800; }

/* guia */
.guide-box { max-width: 1100px; }
.guide-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab { background: transparent; border: 1px solid var(--line); color: var(--muted); padding: 6px 12px; border-radius: 99px; cursor: pointer; font: inherit; font-weight: 600; }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.guide-body table { border-collapse: collapse; font-size: 12px; }
.guide-body td, .guide-body th { border: 1px solid var(--line); padding: 4px; text-align: center; vertical-align: middle; }
.guide-body th { background: #231d2b; }
.recipe-cell { font-size: 22px; cursor: help; }
.glist { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.gcard { background: #1b1722; border: 1px solid var(--line); border-radius: 10px; padding: 10px; font-size: 12.5px; line-height: 1.4; }
.gcard h4 { margin: 0 0 4px; font-size: 14px; }
.gcard .muted { font-size: 12px; }
.rules p { line-height: 1.6; }

/* ---------- tema azul e dourado ---------- */
h2, .round, .room-head h2, .modal-box h3, .gold, .lvl { font-family: Cinzel, serif; }
.logo { font-family: Cinzel, serif; font-weight: 800; letter-spacing: .04em; background: linear-gradient(180deg, #f0e6d2, #c8aa6e 55%, #785a28); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 3px 10px rgba(200,170,110,.35)); }
.modal-box h3, .room-head h2 { font-weight: 800; color: var(--accent2); }
.btn { background: linear-gradient(180deg, #1e2328, #10151b); border: 1.5px solid #785a28; color: #f0e6d2; border-radius: 4px; }
.btn:hover { border-color: #c8aa6e; background: linear-gradient(180deg, #2a3038, #151b22); }
.btn.primary { background: linear-gradient(180deg, #1e6c7a, #0a3a48); border-color: #0ac8b9; color: #e8fffc; }
.btn.on { background: linear-gradient(180deg, #2a4a1e, #12260b); border-color: #8fd36c; }
.panel, .modal-box { background: linear-gradient(180deg, rgba(10,20,40,.96), rgba(1,10,19,.96)); border: 1.5px solid #785a28; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(200,170,110,.08), 0 10px 40px #000a; }
input { border-radius: 3px; background: #010a13; border-color: #463714; }
.slot { background: linear-gradient(180deg, #0f1c2c, #07101a); border: 1.5px solid #463714; border-radius: 6px; }
.slot .ava { background: #091428; border-color: #785a28; }
.slot.human .ava { border-color: #c8aa6e; }
.topbar { background: linear-gradient(180deg, rgba(1,10,19,.95), rgba(1,10,19,.75)); border-bottom: 1.5px solid #463714; }
.timer { background: #0a1428; border: 1px solid #463714; }
.timer-fill { background: linear-gradient(90deg, #785a28, #f0d38c); }
.trait, .pl { background: linear-gradient(90deg, #0d1a2a, #08111c); border-color: #3a3020; border-radius: 4px; }
.pl.me { border-color: #c8aa6e; }
.shopbar { background: linear-gradient(180deg, rgba(1,10,19,.85), #010a13); border-top: 1.5px solid #785a28; }
.card { padding: 0; overflow: hidden; border-radius: 4px; min-height: 120px; background: #010a13; justify-content: flex-end; }
.card .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.card .tr { position: relative; padding: 4px 6px; font-size: 11px; color: #f0e6d2; text-shadow: 0 1px 3px #000, 0 0 6px #000; margin-bottom: auto; }
.card .nmbar { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 4px 7px; background: linear-gradient(180deg, rgba(1,10,19,.6), #010a13); border-top: 1px solid rgba(200,170,110,.35); }
.card .nm { font-family: Cinzel, serif; font-weight: 800; font-size: 13px; }
.card .cs { position: static; color: var(--accent2); font-weight: 800; }
.car .art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; margin-bottom: 6px; }
.tip { background: linear-gradient(180deg, #0a1428, #010a13); border: 1.5px solid #785a28; border-radius: 4px; }
.tiphead { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.tiphead img { width: 56px; height: 56px; border-radius: 4px; border: 1.5px solid #785a28; }
.tiphead h4 { font-family: Cinzel, serif; }
.aug { background: linear-gradient(180deg, #0f1c2c, #07101a); border-radius: 6px; border-color: #785a28; }
.aug.t2 { border-color: #f0d38c; } .aug.t3 { border-color: #b98cff; box-shadow: 0 0 18px rgba(185,140,255,.3); }
.check input { flex: none; width: auto; }

.gi { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; }
.gi.big { width: 26px; height: 26px; }
.trait .ic .gi { width: 20px; height: 20px; }
.aug .ic .gi { width: 64px; height: 64px; filter: drop-shadow(0 0 10px rgba(240,211,140,.35)); }
.card .tr { display: flex; flex-direction: column; gap: 1px; }
.card .role-badge { position: absolute; top: 5px; right: 6px; width: 24px; height: 24px; display: grid; place-items: center; background: rgba(1,10,19,.8); border: 1px solid #785a28; border-radius: 50%; }
.card .role-badge .gi { width: 15px; height: 15px; }
.badges { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.itemtile { width: 34px; height: 34px; display: grid; place-items: center; background: linear-gradient(180deg, #1e2a3a, #05090f); border: 1.5px solid #c8aa6e; border-radius: 4px; }
.itemtile .gi { width: 26px; height: 26px; }
.car .it .gi { width: 18px; height: 18px; }

.trait-units { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 8px; }
.tu { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 2px solid; border-radius: 6px; padding: 3px; background: #05090f; }
.tu img { width: 52px; height: 52px; border-radius: 4px; object-fit: cover; }
.tu span { font-size: 10.5px; text-align: center; line-height: 1.1; }
.tu.off { filter: grayscale(1) brightness(.55); }
.tu.bench { opacity: .7; }
.tu.on { box-shadow: 0 0 10px rgba(240,211,140,.45); }
.tip { max-width: 340px; }

.trait-pop { position: fixed; z-index: 55; width: 330px; max-height: 80vh; overflow: auto; background: linear-gradient(180deg, #0a1428, #010a13); border: 1.5px solid #785a28; border-radius: 6px; padding: 12px; box-shadow: 0 10px 40px #000c; font-size: 12.5px; }
.trait-pop .close { position: absolute; top: 8px; right: 8px; }
.trait-pop .tu { cursor: help; }
.tu .tc { font-size: 10px; color: var(--accent2); }
.tu .tc .gi { width: 11px; height: 11px; }

/* ---------- tabuleiro em tela inteira, painéis por cima ---------- */
#game { position: relative; display: block; }
#game .game-main { position: absolute; inset: 0; display: block; }
#game .board-wrap { position: absolute; inset: 0; }
#game .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
#game .traits { position: absolute; left: 6px; top: 50px; bottom: 150px; width: 186px; z-index: 4; background: none; }
#game .players { position: absolute; right: 6px; top: 50px; bottom: 150px; width: 206px; z-index: 4; }
#game .shopbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: linear-gradient(180deg, rgba(1,10,19,.55), rgba(1,10,19,.95) 30%); }
#game .scout, #game .vs { top: 52px; }
.trait, .pl { background: linear-gradient(90deg, rgba(13,26,42,.88), rgba(8,17,28,.75)); }
@media (max-width: 900px) { #game .traits, #game .players { display: none; } }

/* ---------- loja: figura de corpo inteiro sobre a cor do traço ---------- */
.card { --tc: #888; background: radial-gradient(ellipse 80% 70% at 50% 35%, color-mix(in srgb, var(--tc) 38%, #0a1428) 0%, #040912 80%); transition: transform .14s, box-shadow .14s; isolation: isolate; }
.card .glow { position: absolute; left: 18%; right: 18%; top: 6%; height: 62%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--tc) 70%, transparent), transparent 70%); filter: blur(8px); opacity: .7; z-index: -1; }
.card .fig { position: absolute; left: 50%; top: 3px; height: 205%; transform: translateX(-50%); transform-origin: 50% 0; filter: drop-shadow(0 3px 5px #000c); pointer-events: none; transition: transform .25s; z-index: -1; }
.card:hover .fig { transform: translateX(-50%) scale(1.07); }
.card .shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 48%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.card:hover .shine { transform: translateX(120%); transition: transform .6s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 6px 18px #000a, 0 0 12px color-mix(in srgb, var(--tc) 50%, transparent); }
.card.c4 { box-shadow: 0 0 10px rgba(176,92,246,.45); }
.card.c5 { box-shadow: 0 0 14px rgba(245,179,1,.55); animation: lendaGlow 2.2s ease-in-out infinite; }
@keyframes lendaGlow { 50% { box-shadow: 0 0 22px rgba(245,179,1,.85); } }
.card .nmbar { background: linear-gradient(180deg, rgba(1,10,19,.25), rgba(1,10,19,.92) 45%); }
.card.owned::before { content: '★'; position: absolute; left: 6px; bottom: 30px; color: #fff; text-shadow: 0 0 6px #fff, 0 0 2px #000; font-size: 13px; z-index: 2; animation: ownedPulse 1s ease-in-out infinite; }
@keyframes ownedPulse { 50% { opacity: .4; } }

/* ícones de item em HTML (dicas, carrossel) no mesmo estilo do tabuleiro */
.itemtile { background: radial-gradient(circle at 50% 40%, rgba(70,110,170,.55), #03070d 80%); border: 1.5px solid #e0bd6e; box-shadow: inset 0 0 0 1px #000a, 0 2px 6px #000a; }
.itemtile .gi { filter: drop-shadow(0 0 4px currentColor); }

/* ---------- carrossel em roda ---------- */
.car-ring { position: relative; height: min(520px, 62vh); margin-top: 6px; overflow: hidden; border-radius: 8px; background: radial-gradient(ellipse at 50% 55%, rgba(200,170,110,.12), transparent 65%); }
.car-floor { position: absolute; left: 6%; right: 6%; top: 27%; height: 46%; border-radius: 50%; border: 2px solid rgba(200,170,110,.5); background: radial-gradient(ellipse, rgba(30,50,80,.55), rgba(5,10,20,.2) 70%); box-shadow: 0 0 40px rgba(200,170,110,.15) inset; }
.car-hub { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #1c2c44, #050b16); border: 2px solid #c8aa6e; box-shadow: 0 0 24px rgba(240,211,140,.35); z-index: 60; }
.car-hub .gi { width: 52px; height: 52px; animation: hubSpin 12s linear infinite; }
@keyframes hubSpin { to { transform: rotate(360deg); } }
.car-ring .car { position: absolute; left: 0; top: 0; width: 132px; padding: 0; border: none; background: none; text-align: center; will-change: transform; }
.car-ring .car-fig { position: relative; height: 150px; display: flex; align-items: flex-end; justify-content: center; }
.car-ring .car-fig .fig { max-height: 150px; max-width: 128px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tc) 70%, transparent)) drop-shadow(0 4px 4px #000); transition: transform .2s; }
.car-ring .car-fig .art { width: 96px; height: 96px; border-radius: 50%; border: 2px solid var(--tc); }
.car-ring .car:hover .fig { transform: translateY(-6px) scale(1.06); }
.car-ring .car-ped { height: 16px; margin: -8px 14px 0; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--tc) 80%, #fff) 0%, color-mix(in srgb, var(--tc) 40%, transparent) 45%, transparent 72%); }
.car-ring .car .it { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--accent2); text-shadow: 0 1px 3px #000; }
.car-ring .car .it .itemtile { width: 28px; height: 28px; flex: none; }
.car-ring .car .it .itemtile .gi { width: 20px; height: 20px; }
.car-ring .car b { display: block; font-family: Cinzel, serif; font-size: 13px; text-shadow: 0 1px 3px #000; }
.car-ring .car.c1 b { color: var(--c1); } .car-ring .car.c2 b { color: var(--c2); } .car-ring .car.c3 b { color: var(--c3); } .car-ring .car.c4 b { color: var(--c4); } .car-ring .car.c5 b { color: var(--c5); }
.car-ring .taken-by { font-size: 11px; color: #fff; background: rgba(0,0,0,.7); border-radius: 10px; padding: 1px 6px; display: inline-block; margin-top: 2px; }
.car-ring.myturn .car:not(.taken) { cursor: pointer; }
.car-ring:not(.myturn) .car { cursor: default; }
.car-ring.myturn .car:not(.taken) .car-ped { animation: pedPulse 1s ease-in-out infinite; }
@keyframes pedPulse { 50% { filter: brightness(1.8); } }

/* ---------- menus do botão direito ---------- */
.ctx-pop { width: 360px; z-index: 70; }
.ctx-pop .ctx-fig { float: right; height: 120px; margin: 0 0 4px 8px; filter: drop-shadow(0 4px 6px #000); }
.ctx-pop .ctx-traits { clear: both; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.ctx-pop .ct { background: rgba(255,255,255,.03); border: 1px solid rgba(200,170,110,.2); border-radius: 4px; padding: 5px 7px; }
.ctx-pop .stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0; font-size: 12px; }
.rcp { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-radius: 4px; border: 1px solid transparent; margin-bottom: 3px; }
.rcp.no { opacity: .45; }
.rcp.ok { cursor: pointer; border-color: rgba(240,211,140,.35); background: rgba(240,211,140,.06); }
.rcp.ok:hover { background: rgba(240,211,140,.16); border-color: #f0d38c; }
.rcp .itemtile.sm { width: 28px; height: 28px; flex: none; }
.rcp .itemtile.sm .gi { width: 20px; height: 20px; }
.rcp .arr { color: var(--muted); }
.rcp .rn { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 12.5px; }
.rcp .rn small { color: var(--muted); font-size: 11px; line-height: 1.25; }
.rcp .go { font-size: 11px; font-weight: 800; color: #010a13; background: #f0d38c; border-radius: 3px; padding: 2px 6px; }
.trait-link { cursor: help; border-bottom: 1px dotted rgba(240,211,140,.6); white-space: nowrap; }
.trait-link:hover { color: #f0d38c; border-bottom-color: #f0d38c; }
#tip { z-index: 80; }
.trait-pop { z-index: 75; }

/* barra da rodada centralizada no topo, alinhada com o meio do tabuleiro */
#game .topbar { display: grid; grid-template-columns: 1fr auto 1fr; }
#game .top-center { display: flex; align-items: center; gap: 12px; justify-content: center; }
#game .top-center .timer { width: 320px; flex: none; }
#game .top-right { justify-self: end; display: flex; gap: 6px; }
@media (max-width: 900px) { #game .top-center .timer { width: 140px; } #game .top-center .next-rounds { display: none; } }

/* ---------- tudo maior e proporcional (10/11) ---------- */
#game .topbar { padding: 6px 14px; min-height: 40px; }
#game .round { font-size: 21px; }
#game .top-center .timer { height: 12px; width: 360px; }
#game .next-rounds span { font-size: 13px; padding: 3px 9px; }
#game .top-right .btn { font-size: 13px; padding: 6px 12px; }
#game .shopbar { grid-template-columns: 210px 1fr 230px; gap: 12px; padding: 10px 14px 12px; }
#game .shop { gap: 10px; }
#game .card { min-height: 158px; border-width: 2.5px; }
#game .card .nm { font-size: 15.5px; }
#game .card .cs { font-size: 15px; }
#game .card .tr { font-size: 12.5px; padding: 6px 8px; }
#game .card .nmbar { padding: 6px 9px; }
#game .card .role-badge { width: 30px; height: 30px; }
#game .card .role-badge .gi { width: 19px; height: 19px; }
#game .card .fig { height: 215%; }
#game .shopbtn { font-size: 15px; padding: 11px 12px; }
#game .shop-right { font-size: 14px; }
#game .gold { font-size: 26px; }
#game .traits { width: 188px; top: 48px; overflow-y: auto; }
#game .trait { padding: 6px 8px; }
#game .trait .tn { font-size: 13.5px; }
#game .players { width: 188px; gap: 6px; overflow-y: auto; }
#game .pl { padding: 8px 9px; }
#game .pl .nm { font-size: 14px; }
#game .pl .hpn { font-size: 16px; width: 34px; }
#game .pl .hpb { height: 6px; }
#game .players { overflow: visible; padding: 0; }
#game .pl { padding: 6px 8px; }
#game .pl .nm { font-size: 13.5px; }

/* botões da loja com ícone */
#game .shopbtn { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 6px; border: 1.5px solid #785a28; background: linear-gradient(180deg, #13243a, #0a1422); transition: transform .1s, box-shadow .15s, border-color .15s; }
#game .shopbtn:hover:not(:disabled) { transform: translateY(-2px); border-color: #f0d38c; box-shadow: 0 0 14px rgba(240,211,140,.35); }
#game .shopbtn:active:not(:disabled) { transform: translateY(1px); }
#game .shopbtn .bi { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--bc) 85%, #fff), var(--bc) 55%, color-mix(in srgb, var(--bc) 40%, #000)); box-shadow: 0 0 0 2px #c8aa6e, 0 0 12px color-mix(in srgb, var(--bc) 60%, transparent), inset 0 -3px 6px #0006; }
#game .shopbtn .bi .gi { width: 25px; height: 25px; filter: drop-shadow(0 1px 1px #000a); }
#game .shopbtn:hover:not(:disabled) .bi .gi { animation: biSpin .5s ease; }
@keyframes biSpin { 50% { transform: rotate(-12deg) scale(1.15); } }
#game .shopbtn .bl { display: flex; flex-direction: column; line-height: 1.15; }
#game .shopbtn .bl b { font-family: Cinzel, serif; font-size: 15px; color: #f0e6d2; }
#game .shopbtn .bl small { float: none; font-size: 11.5px; color: var(--muted); }
#game .shopbtn .coin { width: 13px; height: 13px; vertical-align: -2px; }
#game .shopbtn:disabled { filter: grayscale(.8) brightness(.7); }
#btnLock .gi { width: 16px; height: 16px; vertical-align: -3px; }

/* layout final: topo maior, jogadores na coluna da direita de alto a baixo */
#game .topbar { min-height: 56px; padding: 8px 16px; }
#game .round { font-size: 26px; }
#game .round .phase { font-size: 15px; }
#game .top-center { gap: 16px; }
#game .top-center .timer { height: 16px; width: 440px; }
#game #gTimerTxt { font-size: 13px; top: -1px; }
#game .next-rounds span { font-size: 15px; padding: 5px 11px; }
#game .top-right .btn { font-size: 14px; padding: 8px 14px; }
#game .players { width: 180px; display: flex; flex-direction: column; justify-content: space-evenly; gap: 4px; overflow: hidden; }
#game .pl { flex: 1 1 0; max-height: 70px; min-height: 0; }
#game .traits { left: 6px; top: 64px; width: 160px; }
#game .trait .tn { font-size: 13px; }

/* ícones pintados */
.gi.pimg { border-radius: 22%; object-fit: cover; box-shadow: 0 0 0 1px #c8aa6e88, 0 1px 3px #000a; }
.trait .ic .gi.pimg { width: 30px; height: 30px; }
.itemtile .gi.pimg { width: 100%; height: 100%; border-radius: 3px; box-shadow: none; }
#game .shopbtn .bi:has(.pimg) { background: none; box-shadow: 0 0 0 2px #c8aa6e, 0 0 12px rgba(240,211,140,.35); overflow: hidden; }
#game .shopbtn .bi .gi.pimg { width: 100%; height: 100%; border-radius: 50%; box-shadow: none; filter: none; }
#game .shopbtn .coin.pimg { width: 15px; height: 15px; border-radius: 50%; }
#btnLock .gi.pimg { width: 20px; height: 20px; border-radius: 50%; }
#game .pl .av { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #c8aa6e; object-fit: cover; flex: none; }
#game .pl.me .av { border-color: #f0d38c; box-shadow: 0 0 8px #f0d38c88; }
#game .pl.dead .av { filter: grayscale(1); }
#sInterest .juros { width: 22px; height: 22px; vertical-align: -6px; border-radius: 50%; }
#game .players { width: 214px; }
#game .pl { gap: 7px; }
#game .pl .av { width: 36px; height: 36px; }
#game .pl .hpn { width: 30px; font-size: 15px; }
#game .pl .lv { white-space: nowrap; overflow: hidden; font-size: 10.5px; }
#game .pl .nm { font-size: 13px; }
/* lista de jogadores: um painel só, compacto, empilhado no topo da coluna direita */
#game .players { justify-content: flex-start; gap: 4px; padding: 8px; background: linear-gradient(180deg, rgba(1,10,19,.88), rgba(1,10,19,.78)); border: 1.5px solid #785a28; border-radius: 8px; box-shadow: 0 8px 30px #000a; overflow-y: auto; }
#game .pl { flex: none; max-height: none; background: rgba(255,255,255,.03); border-color: rgba(200,170,110,.18); }
#game .pl .hpb { height: 5px; }

/* ---------- contas, elos, ranking ---------- */
.elo-card { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.03); border: 1px solid rgba(200,170,110,.25); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.ac-name { font-family: Cinzel, serif; font-size: 20px; font-weight: 800; color: #f0e6d2; }
.elo-badge { display: inline-flex; align-items: center; gap: 7px; color: var(--tc); }
.elo-badge img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 8px color-mix(in srgb, var(--tc) 60%, transparent); }
.elo-badge .gem { font-size: 20px; text-shadow: 0 0 8px var(--tc); }
.elo-badge b { display: block; font-family: Cinzel, serif; font-size: 13px; line-height: 1.1; }
.elo-badge small { color: var(--muted); font-size: 11px; }
.elo-badge.big img { width: 52px; height: 52px; }
.elo-badge.big .gem { font-size: 34px; }
.elo-badge.big b { font-size: 16px; }
.elo-mini img { width: 16px; height: 16px; vertical-align: -3px; border-radius: 50%; }
.slot .elo-badge { margin-top: 4px; transform: scale(.85); }
.rank-res { display: flex; align-items: center; gap: 14px; justify-content: center; margin: 10px 0; font-size: 22px; }
.rank-res.up b { color: #3fb950; } .rank-res.down b { color: #e5484d; }
.page-box { max-width: 860px; position: relative; }
.page-close { position: absolute; right: 12px; top: 12px; }
.rank-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.rank-table th, .rank-table td { padding: 7px 8px; border-bottom: 1px solid rgba(200,170,110,.15); text-align: left; }
.rank-table tr.me td { background: rgba(240,211,140,.08); }
.rank-table a { color: #f0e6d2; font-weight: 700; }
.hist { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hm { display: flex; gap: 12px; align-items: flex-start; background: rgba(255,255,255,.03); border: 1px solid rgba(200,170,110,.15); border-radius: 6px; padding: 8px 10px; }
.hm .hp { font-family: Cinzel, serif; font-size: 26px; font-weight: 800; width: 48px; text-align: center; }
.hinfo { flex: 1; min-width: 0; font-size: 13px; }
.hboard { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0; }
.hu { position: relative; width: 44px; height: 44px; border: 2px solid var(--c1); border-radius: 5px; overflow: hidden; background: #050b16; }
.hu.c2 { border-color: var(--c2); } .hu.c3 { border-color: var(--c3); } .hu.c4 { border-color: var(--c4); } .hu.c5 { border-color: var(--c5); }
.hu img { width: 100%; height: 100%; object-fit: cover; }
.hu i { position: absolute; top: 0; left: 1px; font-style: normal; font-size: 9px; color: #f0d38c; text-shadow: 0 0 2px #000; }
.hu em { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 1px; }
.hu em .gi { width: 12px; height: 12px; }