:root {
  --bg: #1b1410;
  --bg2: #261c16;
  --card: #2f231b;
  --line: #4a382b;
  --ink: #f2e6cf;
  --muted: #b9a888;
  --gold: #d9b45a;
  --red: #8b1a1a;
  --host: #e0b43a;
  --guest: #2bb39b;
  --danger: #d9534f;
  --radius: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: radial-gradient(ellipse at top, #33241a, var(--bg) 60%) fixed; color: var(--ink); font-family: 'Noto Serif', Georgia, serif; }
a { color: var(--gold); }
h1, h2, h3 { font-family: 'Cinzel', serif; letter-spacing: .5px; margin: 0 0 .6em; }
h1 { font-size: 1.8rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; }
.muted { color: var(--muted); }
.center { text-align: center; padding: 3rem 1rem; }
.hidden { display: none !important; }

header.top { display: flex; align-items: center; gap: 1rem; padding: .6rem 1.2rem; border-bottom: 1px solid var(--line); background: rgba(0,0,0,.25); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700; }
.brand img { width: 34px; height: 34px; }
#nav { display: flex; gap: .3rem; flex: 1; flex-wrap: wrap; }
#nav a { text-decoration: none; color: var(--muted); padding: .35rem .7rem; border-radius: 8px; }
#nav a.on, #nav a:hover { color: var(--ink); background: var(--card); }
#user { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
#user img { width: 30px; height: 30px; border-radius: 50%; }
.rank-badge { font-size: .75rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }

main { max-width: 1240px; margin: 0 auto; padding: 1.2rem; min-height: 70vh; }
.foot { text-align: center; color: var(--muted); font-size: .8rem; padding: 1.5rem; font-style: italic; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; }
button, .btn { font: inherit; cursor: pointer; border: 1px solid var(--gold); background: linear-gradient(#5a1414, #3c0d0d); color: var(--ink); padding: .5rem 1rem; border-radius: 8px; text-decoration: none; display: inline-block; }
button:hover:not(:disabled), .btn:hover { filter: brightness(1.2); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.ghost { background: transparent; border-color: var(--line); }
button.small { padding: .25rem .6rem; font-size: .85rem; }
button.danger { border-color: var(--danger); background: transparent; color: #f3b5b3; }
input[type=text], select { font: inherit; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem; }
label.chk { display: flex; gap: .5rem; align-items: flex-start; margin: .35rem 0; cursor: pointer; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.discord-btn { background: #5865f2; border-color: #5865f2; font-size: 1.1rem; padding: .7rem 1.4rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .85rem; }
td img.av { width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; margin-right: .4rem; }

/* ---------- Partida ---------- */
.game { display: grid; grid-template-columns: minmax(320px, 1fr) 360px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .game { grid-template-columns: 1fr; } }
.board-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem; position: relative; }
svg.board { width: 100%; height: auto; display: block; user-select: none; }
svg.board .pt { fill: transparent; cursor: pointer; }
svg.board .tgt { fill: rgba(255, 255, 255, .85); stroke: #000; stroke-width: .04; pointer-events: none; }
svg.board .tgt.cap { fill: rgba(255, 60, 60, .9); }
svg.board .tile { cursor: pointer; }
svg.board .tile.sel circle.ring { stroke: #fff; stroke-width: .12; }
svg.board .last { fill: none; stroke: #fff; stroke-width: .06; stroke-dasharray: .15 .1; }
.side .player { display: flex; flex-direction: column; gap: .4rem; }
.player-head { display: flex; align-items: center; gap: .5rem; }
.player-head img { width: 32px; height: 32px; border-radius: 50%; }
.dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.turn-on { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(217, 180, 90, .35); }
.hand { display: flex; flex-wrap: wrap; gap: .3rem; }
.hand .ht { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 3px solid transparent; padding: 0; background: none; }
.hand .ht img { width: 100%; height: 100%; display: block; }
.hand .ht .n { position: absolute; right: -4px; bottom: -4px; background: #000; color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 .35rem; border: 1px solid var(--line); }
.hand .ht.zero { opacity: .25; }
.hand .ht.sel { border-color: #fff; }
.hand .ht:disabled { cursor: default; opacity: 1; }
.hand .ht.zero:disabled { opacity: .25; }
.status { font-size: 1.02rem; padding: .7rem .9rem; border-radius: 10px; background: #3b2a1f; border-left: 4px solid var(--gold); margin-bottom: .8rem; }
.log { max-height: 240px; overflow: auto; font-size: .85rem; color: var(--muted); padding-left: 1.1rem; margin: 0; }
.log li { margin: .15rem 0; }
.picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; text-align: center; }
.picker img { width: 64px; height: 64px; }
.picker .cnt { font-size: 1.3rem; font-weight: 700; }
.legend { font-size: .8rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .4rem; }
.legend span { display: inline-flex; align-items: center; gap: .3rem; }
.code { font-family: monospace; font-size: 1.4rem; letter-spacing: 3px; color: var(--gold); }
.result { text-align: center; }
.result .big { font-family: 'Cinzel', serif; font-size: 1.6rem; color: var(--gold); }
.toast { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); background: #000d; color: #fff; padding: .7rem 1.2rem; border-radius: 10px; border: 1px solid var(--gold); z-index: 20; max-width: 90vw; }
.rules p, .rules li { line-height: 1.55; }
.tilechip { width: 28px; height: 28px; vertical-align: middle; }