/* =====================================================================
   MILIONEREK — wygląd „z górnej półki” (nadpisuje style.css)
   ===================================================================== */
:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --font-display: "Bahnschrift", "Segoe UI Semibold", "Arial Narrow", "Roboto Condensed", sans-serif;
  --felt-1: #1c6a4b; --felt-2: #0b2f22;
  --paper: #fbf8ef; --paper-2: #f3eedf;
  --grid: #26382e;
  --frame-1: #efe3c3; --frame-2: #a2834a;
  --ink: #1c2620;
  --gold: #e8b008; --gold-2: #ffd34d;
  --btn: #1f6a4e; --btn-h: #27805f;
}
body {
  font-family: var(--font-ui);
  background:
    radial-gradient(ellipse at 45% 38%, rgba(255,255,255,.07), transparent 55%),
    radial-gradient(ellipse at 50% 50%, var(--felt-1), var(--felt-2) 78%);
}

/* ---------- plansza: rama, siatka, papier ---------- */
#board {
  --size: min(calc(100vh - 28px), calc(100vw - 372px));
  gap: 2px; padding: 3px;
  background: var(--grid);
  border: 0; border-radius: 6px;
  box-shadow:
    0 0 0 7px var(--frame-1),
    0 0 0 9px var(--frame-2),
    0 0 0 10px rgba(0,0,0,.35),
    0 30px 70px rgba(0,0,0,.55);
}
.cell {
  border: 0; border-radius: 1px;
  background: linear-gradient(180deg, var(--paper), var(--paper-2));
  justify-content: flex-start;
}
.cell:hover { filter: none; box-shadow: inset 0 0 0 2px rgba(232,176,8,.65); z-index: 2; }
.cell.owned { background: linear-gradient(180deg, color-mix(in srgb, var(--oc) 13%, var(--paper)), color-mix(in srgb, var(--oc) 9%, var(--paper-2))); }

/* nazwy: wąski, czytelny krój, wersaliki */
.cell .name {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase;
  font-size: 1.32em; letter-spacing: .02em; line-height: 1.05; color: var(--ink);
  padding: .35em .2em 0;
}
.cell .price {
  font-family: var(--font-display); font-weight: 600; font-size: 1.15em; color: #4c5a51;
  background: rgba(28,38,32,.06); border-radius: 999px; padding: .05em .55em; margin-bottom: .35em;
}
.cell .icon { font-size: 2.1em; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }

/* pasek koloru z połyskiem */
.cell .bar {
  height: 21%; border: 0 !important;
  background-image: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 55%, rgba(0,0,0,.12)) !important;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
  justify-content: flex-start; padding: 0 .3em; gap: .15em;
}
.cell.side-left .bar, .cell.side-right .bar { width: 21%; justify-content: flex-start; padding: .3em 0; box-shadow: none; }
.cell.side-top .bar { box-shadow: inset 0 1px 0 rgba(0,0,0,.25); }

/* domki i hotele — kształt domku */
.house { width: 1.05em; height: 1.05em; background: #2fa04a; border: 0; border-radius: 1px;
  clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); box-shadow: none; }
.hotel { width: 2.4em; height: 1.15em; background: #d6332f; border: 0; border-radius: 1px;
  clip-path: polygon(12% 0, 88% 0, 100% 35%, 100% 100%, 0 100%, 0 35%); }

/* znaczek właściciela — pionek w kolorze gracza na końcu paska */
.cell .owner {
  position: absolute; width: 1.9em; height: 1.9em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 1em; line-height: 1;
  border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.45); z-index: 3;
  left: auto; bottom: auto; top: auto; right: auto;
}
.cell .owner:empty { display: none; }
.cell.side-bottom .owner { top: .15em; right: .2em; bottom: auto; left: auto; }
.cell.side-top .owner { bottom: .15em; right: .2em; top: auto; left: auto; }
.cell.side-left .owner { right: .15em; bottom: .25em; top: auto; left: auto; width: 1.9em; height: 1.9em; }
.cell.side-right .owner { left: .15em; bottom: .25em; top: auto; right: auto; width: 1.9em; height: 1.9em; }
.cell.side-bottom.special .owner, .cell.side-top.special .owner { top: auto; bottom: .3em; right: .25em; width: 1.7em; height: 1.7em; }
.cell.side-left.special .owner { right: .25em; }
.cell.side-right.special .owner { left: .25em; }

/* zastaw: przygaszone pole + pieczątka */
.cell.mortgaged > :not(.tokens):not(.owner) { opacity: .42; filter: grayscale(.6); }
.cell.mortgaged::after {
  content: 'ZASTAW'; inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg);
  background: rgba(255,255,255,.85); border: 2px solid #b3261e; color: #b3261e; border-radius: .3em;
  padding: .1em .4em; font-family: var(--font-display); font-size: 1em; letter-spacing: .08em;
}

/* pionki: niżej, nie zasłaniają nazw */
.token { width: 2.35em; height: 2.35em; font-size: 1.05em; border-width: 2px; }
.cell .tokens { inset: auto 0 .35em 0; align-content: flex-end; gap: .15em; z-index: 4; }
.cell.side-top .tokens { inset: auto 0 calc(21% + .3em) 0; }
.cell.side-left .tokens, .cell.side-right .tokens { inset: auto 21% .25em 0; justify-content: center; }
.cell.side-right .tokens { inset: auto 0 .25em 21%; }
.cell.side-left .body, .cell.side-right .body { justify-content: flex-start; padding-top: .25em; }
.cell.corner .tokens { inset: auto 0 .5em 0; }
.cell.highlight { box-shadow: inset 0 0 0 3px var(--gold), 0 0 14px rgba(232,176,8,.75); z-index: 3; }

/* narożniki */
.cell.corner { justify-content: center; gap: .2em; }
.cell.corner .name { font-size: 1.55em; padding-top: 0; }
.cell.corner .icon { font-size: 3.4em; }
.cell.corner .price { background: none; }
.cell[data-i="0"]  { background: linear-gradient(135deg, #e6f6e8, #cfeccf); }
.cell[data-i="10"] { background: linear-gradient(135deg, #fbefd9, #f2dcb2); }
.cell[data-i="20"] { background: linear-gradient(135deg, #e3eefc, #cadcf6); }
.cell[data-i="30"] { background: linear-gradient(135deg, #fbe3e1, #f2c6c2); }

/* ---------- środek planszy ---------- */
#center {
  background:
    radial-gradient(ellipse at 50% 22%, rgba(255,255,255,.85), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f6f1e2, #ece4cf);
  gap: .9em;
}
.logo {
  font-family: "Arial Black", "Segoe UI Black", var(--font-display);
  font-size: 4.2em; letter-spacing: .06em;
  background: linear-gradient(180deg, #e0342c, #b1201b);
  border: .06em solid #f4d27a; border-radius: .14em;
  box-shadow: 0 .07em 0 #6d1210, 0 .3em .5em rgba(0,0,0,.28);
  text-shadow: 0 .05em 0 rgba(0,0,0,.25);
}
.sublogo { font-family: var(--font-display); font-size: 1.7em; letter-spacing: .35em; color: #6a5b3d; }
#turnInfo { font-family: var(--font-display); font-weight: 600; }
.die {
  background: linear-gradient(145deg, #ffffff, #e9e4d6); border: 0; border-radius: .9em;
  box-shadow: inset 0 -.25em .4em rgba(0,0,0,.12), inset 0 .15em .2em rgba(255,255,255,.9), 0 .35em .7em rgba(0,0,0,.3);
}
.die span { background: radial-gradient(circle at 35% 35%, #444, #111); box-shadow: inset 0 .08em .1em rgba(255,255,255,.25); }
#actions button {
  background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #2d2200; border-radius: .5em;
  box-shadow: 0 .18em 0 #9a7400, 0 .35em .7em rgba(0,0,0,.25); font-family: var(--font-display); letter-spacing: .02em;
}
#actions button:hover:not(:disabled) { background: linear-gradient(180deg, #ffe07a, #f5c11c); }
#actions button.secondary { background: linear-gradient(180deg, #ffffff, #e7e1d0); color: var(--ink); box-shadow: 0 .18em 0 #b9b19b, 0 .35em .7em rgba(0,0,0,.18); }
#log { background: rgba(255,255,255,.7); border: 1px solid #ddd3bb; box-shadow: inset 0 1px 3px rgba(0,0,0,.06); }
#log li { border-bottom-color: #ebe3cf; }

/* ---------- panel boczny ---------- */
.pcard { border-radius: 14px; border-left-width: 7px; box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.pcard .pname, .pcard .money { font-family: var(--font-display); }
.pcard.current { box-shadow: 0 0 0 3px var(--gold), 0 8px 20px rgba(0,0,0,.4); }
#sideButtons button { font-family: var(--font-display); letter-spacing: .02em; box-shadow: 0 3px 8px rgba(0,0,0,.25); }
#sideTabs button { font-family: var(--font-display); }

/* ---------- okna ---------- */
.box { border-radius: 18px; box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.05); }
.box h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }
button { border-radius: 9px; }

/* okna „przyklejone” do środka planszy — miasta dookoła zostają widoczne */
.overlay.docked { position: fixed; padding: 8px; background: rgba(8, 24, 16, .28); border-radius: 4px; z-index: 50; }
#panel.docked { z-index: 80; }
.overlay.docked .box { max-width: 100%; max-height: 100%; padding: 16px 18px; }
.overlay.docked .box.wide { width: 100%; }
.box { container-type: inline-size; }
@container (max-width: 640px) {
  .trade, .debtOpts { grid-template-columns: 1fr; }
  .achGrid { grid-template-columns: 1fr 1fr; }
}

/* ---------- wybór planszy ---------- */
.boardPick { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 4px 0 14px; }
.boardPick .bp {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  background: #f4f6f4; color: var(--ink); border: 2px solid #e1e8e3; border-radius: 12px; padding: 8px 10px; font-weight: 400;
}
.boardPick .bp:hover:not(:disabled) { background: #eef3ef; border-color: #b9cbbf; }
.boardPick .bp.on { background: #fff8de; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(232,176,8,.25); }
.boardPick .bi { font-size: 22px; line-height: 1; }
.boardPick b { font-family: var(--font-display); font-size: 15px; }
.boardPick small { color: var(--muted); font-size: 11.5px; line-height: 1.3; }
@media (max-width: 900px) { .boardPick { grid-template-columns: 1fr 1fr; } }

/* powiadomienia nad panelem bocznym — nie zasłaniają pól planszy */
#toast { left: auto; right: 16px; top: 12px; transform: translateY(-220%); max-width: 330px; }
#toast.show { transform: translateY(0); }
#achPop { left: auto; right: 14px; bottom: auto; top: 12px; transform: translateX(130%); max-width: 330px; }
#achPop.show { transform: translateX(0); }
@media (max-width: 900px) {
  #toast { right: 50%; transform: translate(50%, -220%); }
  #toast.show { transform: translate(50%, 0); }
}

/* długie nazwy pól */
.cell.long .name { font-size: 1.12em; letter-spacing: 0; }
.cell.xlong .name { font-size: .98em; letter-spacing: -.01em; }

/* ekran startowy: zwarty układ, przyciski zawsze widoczne na dole */
#startBox { padding-bottom: 0; }
#startBox .startLogo { margin: 0 0 10px; }
#startBox .startLogo .logo { font-size: 40px; }
#startBox .sublogo { font-size: 17px; }
#startBox h3 { margin: 10px 0 6px; }
.setupRow { margin-bottom: 6px; }
.boardPick { margin: 2px 0 10px; }
.boardPick .bp { padding: 6px 9px; }
.boardPick small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#startBox > .btns:last-child {
  position: sticky; bottom: 0; z-index: 2; margin: 12px -22px 0; padding: 12px 22px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0), #fff 30%); border-radius: 0 0 18px 18px;
}

/* przełącznik języka */
.langSwitch { position: absolute; top: 14px; right: 16px; display: flex; gap: 4px; z-index: 3; }
.langSwitch button { padding: 4px 10px; font-size: 12px; letter-spacing: .05em; }
#startBox { position: relative; }