/* ===================== Catan-stilusu tema =====================
   Paletta: teal keret #13ad7b / #15d798, arany felirat, fa hatter.
   A gombok fa + teal keret + arany ragyogo szoveg, hover=fenyesebb,
   :active = besullyed (lenyomott allapot). */
:root {
  --teal: #13ad7b;
  --teal-bright: #15d798;
  --gold: #ffd76a;
  --gold-dim: #c8992f;
  --ink: #f2e6d0;
  --panel: rgba(28, 18, 10, .82);
  --panel-line: #13ad7b66;
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 1rem; min-height: 100vh; color: var(--ink);
  font-family: system-ui, sans-serif;
  background: linear-gradient(rgba(20,12,6,.55), rgba(20,12,6,.72)),
              url('/static/wood_bg.png') center / cover fixed, #2b1d12;
}
header h1 {
  text-align: left; margin: 0 0 .6rem; font-size: clamp(1.2rem, 4vw, 1.7rem);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800; color: var(--gold);
  text-shadow: 0 0 12px #ffcc4d66, 0 2px 3px #000; letter-spacing: .03em;
}

/* ---- panelek / kartyak ---- */
.card {
  margin: 0 0 .6rem; padding: 1.1rem 1.1rem 1.3rem;
  background: var(--panel); border: 2px solid var(--teal);
  border-radius: 14px; box-shadow: 0 10px 30px #000a, inset 0 0 24px #0006;
}
label { display: block; margin: .5rem 0; font-size: .9rem; }
input {
  width: 100%; padding: .6rem .7rem; margin-top: .3rem;
  border: 2px solid #7c5a34; border-radius: 8px;
  background: #1c130b; color: var(--ink); font-size: 1rem;
}
input:focus { outline: none; border-color: var(--teal-bright);
  box-shadow: 0 0 8px var(--teal); }
.row { display: flex; gap: .5rem; margin-top: .6rem; }
.row input { margin-top: 0; }

/* ---- Catan-stilusu fa gombok ---- */
button {
  padding: .6rem 1rem; border-radius: 10px; cursor: pointer;
  font-family: Georgia, "Times New Roman", serif; font-size: 1rem; font-weight: 800;
  letter-spacing: .02em; color: var(--gold);
  text-shadow: 0 0 7px #ffcc4d88, 0 1px 2px #000;
  background: url('/static/wood_bg.png') center / cover, #4a3420;
  border: 3px solid var(--teal);
  box-shadow: 0 3px 0 #0007, inset 0 0 14px #0008;
  transition: filter .08s, border-color .08s, transform .05s, box-shadow .05s;
}
button:hover:not(:disabled) {
  border-color: var(--teal-bright); color: #ffe49a;
  text-shadow: 0 0 12px var(--gold); filter: brightness(1.1);
}
button:active:not(:disabled) {
  transform: translateY(2px); color: var(--gold-dim); text-shadow: none;
  box-shadow: 0 1px 0 #0007, inset 0 0 18px #000b;
}
button:disabled { filter: grayscale(.6) brightness(.55); color: #9c8b5f; cursor: not-allowed; }
button.primary { border-color: var(--teal-bright); }
button.ghost { background: rgba(28,18,10,.6); border-color: #7c5a34; }

.sep { text-align: center; opacity: .7; margin: .8rem 0; }
.hidden { display: none !important; }
.err { color: #fca5a5; min-height: 1.2em; margin: .5rem 0 0; }
.hint { opacity: .8; font-size: .85rem; margin-top: .8rem; }

/* ---- lobby ---- */
.lobbyhead { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.code { font-family: monospace; font-size: 1.4rem; letter-spacing: .2em; color: var(--gold); font-weight: 800; }
#players { list-style: none; padding: 0; margin: 1rem 0; }
#players li {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem .6rem; border-radius: 8px; background: rgba(0,0,0,.35);
  border: 1px solid var(--panel-line); margin-bottom: .4rem;
}
.dot { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; border: 1px solid #fff8;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.pname { flex: 1; font-weight: 600; }
.tag { font-size: .75rem; padding: .1rem .45rem; border-radius: 999px; }
.tag.off { background: #7f1d1d; }
.star { color: var(--gold); font-size: 1.15rem; line-height: 1; text-shadow: 0 0 8px #ffcc4d99; }
.rmark { font-weight: 900; font-size: 1.15rem; line-height: 1; }
.rmark.off { color: #8a8a8a; }
.rmark.on  { color: #22c55e; text-shadow: 0 0 8px #22c55e66; }
li.me { outline: 2px solid var(--teal-bright); }

/* ===================== JATEK ===================== */
/* panel balra zarva, a terkep a lap kozepen (a ket szelso sav egyenlo) */
#shell { display: grid; grid-template-columns: 340px minmax(0, 1fr) 340px;
         align-items: start; gap: 1rem; max-width: 1620px; margin: 0 auto; }
#side { grid-column: 1; }
#board {
  position: relative; grid-column: 2; justify-self: center;
  width: min(100%, 1000px); aspect-ratio: 982 / 967;
  background: url('/static/board.png') center / 100% 100% no-repeat;
  border-radius: 6px; box-shadow: 0 8px 24px #000a, 0 0 0 3px var(--teal);
  display: grid;
  grid-template-columns: 6fr 104fr repeat(9, 84.7fr) 104fr 6fr;
  grid-template-rows:    6fr 104fr repeat(9, 83fr)   104fr 6fr;
}
.cell { position: relative; }
.tokens {
  position: absolute; inset: 0; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1px; padding: 1px;
}
.token {
  width: clamp(32px, 4.5vw, 50px); aspect-ratio: 1; border-radius: 50%;
  font-size: clamp(18px, 2.6vw, 28px); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; box-shadow: 0 2px 5px #000b;
}
.token.jailed { outline: 3px solid #ef4444; }

/* vendeghazak (sotetkek) / szalloda (sarga) a telkeken */
.houses { position: absolute; top: 1px; left: 0; right: 0; z-index: 4;
  display: flex; justify-content: center; gap: 2px; pointer-events: none; }
.house { width: clamp(6px, .95vw, 12px); aspect-ratio: 1; border-radius: 2px;
  background: #0d3b8c; border: 1px solid #ffffffcc; box-shadow: 0 1px 2px #0009; }
.hotel { width: clamp(13px, 2vw, 24px); height: clamp(7px, 1.1vw, 13px); border-radius: 2px;
  background: #f5c518; border: 1px solid #ffffffcc; box-shadow: 0 1px 2px #0009; }

/* ---- kartya-paklik a tablan (hatlap) + felhuzott kartya ---- */
.deck { position: absolute; width: 15%; z-index: 5;
  transform: translate(-50%, -50%) rotate(45deg); }
#deckChance   { left: 35%;   top: 72%; }
#deckSurprise { left: 71.5%; top: 32%; }
.deck img { width: 100%; display: block; border-radius: 5px;
  border: 3px solid transparent; box-shadow: 0 4px 10px #000b; }
.deck.flash { cursor: pointer; }
.deck.flash img { animation: deckflash .8s ease-in-out infinite; }
@keyframes deckflash {
  0%, 100% { border-color: transparent; box-shadow: 0 4px 10px #000b; }
  50%      { border-color: var(--gold);
             box-shadow: 0 0 24px 6px var(--gold), 0 4px 10px #000b; }
}
#drawncard { position: absolute; left: 50%; top: 50%; z-index: 10;
  transform: translate(-50%, -50%); width: 32%; }
#drawncard img { width: 100%; border-radius: 8px;
  box-shadow: 0 10px 40px #000e, 0 0 0 3px var(--gold); }
.cardchoice { display: flex; gap: .5rem; margin-top: .6rem; }
.cardchoice button { flex: 1; padding: .5rem .5rem; font-size: .8rem; }

/* birtoklevel-nagyito (kepnezo) + zalog info */
#deedzoom { position: fixed; inset: 0; z-index: 100; background: #000d;
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.dzbox { display: flex; flex-direction: column; align-items: center; gap: .6rem; cursor: default; }
.dzbox img { max-width: 88vw; max-height: 70vh; border-radius: 10px;
  box-shadow: 0 12px 60px #000f, 0 0 0 3px var(--gold); }
#dzinfo:not(:empty) { display: flex; flex-direction: column; align-items: center; gap: .4rem;
  background: #1c130b; border: 2px solid var(--teal); border-radius: 10px; padding: .5rem .8rem; }
.dzrow b { color: var(--gold); }
.dzbtn { padding: .5rem .9rem; }

/* csod-ablak */
#debtpopup { position: fixed; inset: 0; z-index: 95; background: #000c;
  display: flex; align-items: center; justify-content: center; }
#debtpopup .bphead { color: #fca5a5; }
.dpbtn { padding: .35rem .6rem; font-size: .82rem; }
#bankruptBtn { width: 100%; margin-top: .7rem; border-color: #b91c1c; color: #fca5a5; }

/* gyoztes kepernyo */
#winoverlay { position: fixed; inset: 0; z-index: 110; background: #000e;
  display: flex; align-items: center; justify-content: center; }
#wintext { font-family: Georgia, serif; text-align: center; line-height: 1.15;
  font-size: clamp(2rem, 8vw, 4rem); color: var(--gold);
  text-shadow: 0 0 26px #ffcc4d99, 0 4px 10px #000; }

/* epites-ablak (egyenletes epites) */
#buildpopup { position: fixed; inset: 0; z-index: 90; background: #000b;
  display: flex; align-items: center; justify-content: center; }
.bpbox { background: #1c130b; border: 2px solid var(--teal); border-radius: 14px;
  padding: 1rem 1.1rem; width: min(90vw, 460px); max-height: 85vh; overflow-y: auto;
  box-shadow: 0 12px 50px #000e; }
.bphead { display: flex; justify-content: space-between; align-items: center;
  font-family: Georgia, serif; color: var(--gold); font-weight: 700; margin-bottom: .7rem; }
.bphead button { padding: .2rem .55rem; }
.bpgroup { border: 1px solid var(--panel-line); border-radius: 8px; padding: .5rem .6rem; margin-bottom: .6rem; }
.bpgtitle { margin-bottom: .3rem; }
.bprow { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }
.bpname { flex: 1; font-weight: 600; font-size: .9rem; }
.bpmarks { display: flex; gap: 3px; min-width: 66px; align-items: center; }
.bpmarks .house, .bpmarks .hotel { position: static; }
.bpbuild { padding: .35rem .6rem; font-size: .82rem; }
.bpdone { opacity: .6; font-size: .82rem; padding: 0 .4rem; }
.bpnote { font-size: .78rem; opacity: .75; margin-top: .2rem; }
.mnone { opacity: .5; }

/* ---- panel (a bal oszlopban, a cim/lobby alatt) ---- */
#panel { margin-top: .2rem; }

/* kis kepernyon egymas ala */
@media (max-width: 900px) {
  #shell { grid-template-columns: 1fr; }
  #side, #board, #rightcol { grid-column: 1; }
}

/* ---- birtokok (birtoklevel-kepek) ---- */
#rightcol { grid-column: 3; }
#mydeeds { margin-top: .7rem; }
.deedhead { font-family: Georgia, serif; font-weight: 700; color: var(--gold);
  font-size: .85rem; margin-bottom: .4rem; display: flex; align-items: center; gap: .35rem; }
.deedrow { display: flex; flex-wrap: wrap; gap: .35rem; }
.deed { width: 80px; border-radius: 3px; border: 1px solid #0007;
  box-shadow: 0 1px 3px #0008; display: block; cursor: zoom-in; }
.nodeeds { opacity: .55; font-size: .8rem; }
.playerdeeds { background: var(--panel); border: 2px solid var(--teal);
  border-radius: 10px; padding: .5rem .6rem; margin-bottom: .6rem; }
#turnbox { display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); border: 2px solid var(--teal);
  padding: .6rem .8rem; border-radius: 12px; }
#turnlabel { font-family: Georgia, serif; }
#dice { display: flex; gap: .3rem; }
.die { font-size: 1.9rem; line-height: 1; color: var(--gold);
  text-shadow: 0 0 8px #ffcc4d66; }
.gamebtns { display: flex; gap: .5rem; margin: .6rem 0; }
.gamebtns button { flex: 1; }
#scoreboard { list-style: none; padding: 0; margin: .3rem 0; }
#scoreboard li { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem;
  border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid var(--panel-line);
  margin-bottom: .3rem; }
#scoreboard li.active { outline: 2px solid var(--gold); }
#scoreboard .pn { flex: 1; font-weight: 600; }
#scoreboard .pm { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--gold); }

/* ---- penztarca (bankjegy-kepek) ---- */
#wallet { background: var(--panel); border: 2px solid var(--teal);
  border-radius: 12px; padding: .6rem .7rem; margin-top: .6rem; }
.wallethead { font-family: Georgia, serif; font-weight: 700; margin-bottom: .5rem; }
.wallethead span { color: var(--gold); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 8px #ffcc4d55; }
#bills { display: flex; flex-wrap: wrap; gap: .5rem; }
.bill { position: relative; width: 84px; }
.bill img { width: 100%; border-radius: 3px; display: block;
  box-shadow: 0 1px 3px #0009; border: 1px solid #0006; }
.bill .cnt { position: absolute; right: -4px; bottom: -6px; background: #1c130b;
  color: var(--gold); border: 1px solid var(--teal); border-radius: 999px;
  font-size: .72rem; font-weight: 800; padding: 1px 6px; }
.broke { opacity: .8; font-size: .9rem; }