/* ═══════════════════════════════════════════════════════════════
   HOTELISH – Complete stylesheet (mobile-first, portrait)
═══════════════════════════════════════════════════════════════ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
  --board-size: min(358px, calc(100vw - 14px));
  --corner-size: calc(var(--board-size) * 0.125);
  --field-size: calc((var(--board-size) - 2 * var(--corner-size)) / 9);

  /* Group colours */
  --c-brown:    #955436;
  --c-lightblue:#64B5F6;
  --c-pink:     #C2185B;
  --c-orange:   #F4511E;
  --c-red:      #E53935;
  --c-yellow:   #FDD835;
  --c-green:    #2E7D32;
  --c-darkblue: #1565C0;

  /* UI palette */
  --bg:         #F5ECD7;
  --bg2:        #EDE0C4;
  --board-bg:   #E8F5E9;
  --card:       #FFFFFF;
  --text:       #2C1810;
  --muted:      #8B7355;
  --accent:     #7B3F00;
  --accent2:    #4E342E;
  --green:      #2E7D32;
  --red-btn:    #B71C1C;
  --border:     #D7C9B0;
  --shadow:     0 2px 8px rgba(0,0,0,.14);
  --radius:     8px;
  --radius-lg:  16px;
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ── Screens ─────────────────────────────────────────────────── */
.screen { display: none; position: fixed; inset: 0; flex-direction: column; overflow: hidden; }
.screen.active { display: flex; }

/* ══════════════════════════════════════════════════════════════
   START SCREEN
══════════════════════════════════════════════════════════════ */
#screen-start {
  background: linear-gradient(165deg, #4E342E 0%, #1A0A00 100%);
  align-items: center;
  justify-content: center;
  gap: 0;
}

.lang-switcher {
  position: absolute;
  top: env(safe-area-inset-top, 14px);
  right: 14px;
  display: flex;
  gap: 6px;
}

.lang-btn {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.7);
  padding: 5px 12px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .05em;
}
.lang-btn.active {
  background: rgba(255,215,0,.2);
  border-color: #FFD700;
  color: #FFD700;
}

.start-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2.8rem, 12vw, 4rem);
  font-weight: 900;
  color: #FFD700;
  letter-spacing: .06em;
  text-shadow: 0 3px 12px rgba(0,0,0,.6);
  margin-bottom: 6px;
}

.start-sub {
  color: rgba(255,255,255,.45);
  font-size: .75rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: 52px;
}

.start-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(260px, 80vw);
}

/* ══════════════════════════════════════════════════════════════
   SETUP SCREEN
══════════════════════════════════════════════════════════════ */
#screen-setup { background: var(--bg); }

.screen-header {
  background: var(--accent2);
  color: #fff;
  padding: max(env(safe-area-inset-top, 0px), 14px) 16px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.screen-header h1 { font-size: 1.05rem; font-weight: 700; }

.screen-body { flex: 1; overflow-y: auto; padding: 16px; }
.screen-footer { padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px); border-top: 1px solid var(--border); flex-shrink: 0; }

.section-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 10px;
}

.count-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.count-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--card);
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
  transition: all .15s;
}
.count-btn.active { border-color: var(--green); background: var(--green); color: #fff; }

.player-slot {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity .2s;
}
.player-slot.disabled { opacity: .3; }

.player-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.slot-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.slot-fields input, .slot-fields select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: .85rem;
  background: var(--bg);
  color: var(--text);
  width: 100%;
  appearance: auto;
}

/* ══════════════════════════════════════════════════════════════
   GAME SCREEN
══════════════════════════════════════════════════════════════ */
#screen-game { background: var(--bg); overflow: hidden; }

/* Top chips bar */
.chips-bar {
  background: var(--accent2);
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-shrink: 0;
}
.chips-bar::-webkit-scrollbar { display: none; }

.player-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  padding: 4px 9px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all .2s;
}
.player-chip.active-player { background: rgba(255,215,0,.22); border-color: #FFD700; }
.player-chip.bankrupt { opacity: .35; }
.player-chip-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,.4); }
.player-chip-name { font-size: .72rem; font-weight: 600; color: #fff; }
.player-chip-money { font-size: .68rem; color: rgba(255,255,255,.65); }

/* Board wrap */
.board-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  flex-shrink: 0;
}

/* ── BOARD GRID ─────────────────────────────────────────────── */
#board {
  display: grid;
  grid-template-columns: var(--corner-size) repeat(9, var(--field-size)) var(--corner-size);
  grid-template-rows:    var(--corner-size) repeat(9, var(--field-size)) var(--corner-size);
  width:  var(--board-size);
  height: var(--board-size);
  border: 2px solid #333;
  background: var(--board-bg);
  flex-shrink: 0;
  position: relative;
}

/* ── FIELDS ─────────────────────────────────────────────────── */
.field {
  position: relative;
  border: .5px solid rgba(0,0,0,.18);
  cursor: pointer;
  overflow: hidden;
  background: #FAFFF9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 1px;
}
.field:active { filter: brightness(.88); }

/* Color stripe – outer edge of the board */
.color-stripe {
  position: absolute;
  background: var(--group-color, #aaa);
  z-index: 1;
}
/* Bottom row: stripe at bottom */
.field-side-bottom .color-stripe { bottom:0; left:0; right:0; height:28%; }
/* Top row: stripe at top */
.field-side-top    .color-stripe { top:0;    left:0; right:0; height:28%; }
/* Left column: stripe at left */
.field-side-left   .color-stripe { left:0;   top:0; bottom:0; width:28%; }
/* Right column: stripe at right */
.field-side-right  .color-stripe { right:0;  top:0; bottom:0; width:28%; }

/* Group stripe colours */
.group-brown     .color-stripe { background: var(--c-brown);    }
.group-lightblue .color-stripe { background: var(--c-lightblue);}
.group-pink      .color-stripe { background: var(--c-pink);     }
.group-orange    .color-stripe { background: var(--c-orange);   }
.group-red       .color-stripe { background: var(--c-red);      }
.group-yellow    .color-stripe { background: var(--c-yellow);   }
.group-green     .color-stripe { background: var(--c-green);    }
.group-darkblue  .color-stripe { background: var(--c-darkblue); }

/* Field name & price */
.field-name {
  font-size: 5px;
  text-align: center;
  line-height: 1.15;
  color: #222;
  word-break: break-word;
  hyphens: auto;
  z-index: 2;
  max-width: 100%;
  padding: 0 1px;
}
.field-price {
  font-size: 5px;
  color: #555;
  z-index: 2;
  line-height: 1;
}

/* Side fields: rotate name text */
.field-side-left  .field-name,
.field-side-left  .field-price {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.field-side-right .field-name,
.field-side-right .field-price {
  writing-mode: vertical-rl;
}
.field-side-top   .field-name,
.field-side-top   .field-price {
  transform: rotate(180deg);
}

/* Corner fields */
.field-corner {
  background: var(--board-bg);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1px;
  padding: 2px;
}
.corner-icon  { font-size: clamp(10px, 2.8vw, 16px); }
.corner-label {
  font-size: 5px;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  color: #333;
}

/* Ownership dot (top-left of field) */
.owned-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: .5px solid rgba(0,0,0,.4);
  z-index: 4;
}

/* Buildings (houses / hotel) */
.field-buildings {
  position: absolute;
  display: flex;
  gap: 1px;
  z-index: 3;
}
.field-side-bottom .field-buildings { top: 2px; left: 50%; transform: translateX(-50%); }
.field-side-top    .field-buildings { bottom: 2px; left: 50%; transform: translateX(-50%); }
.field-side-left   .field-buildings { right: 2px; top: 50%; transform: translateY(-50%); flex-direction: column; }
.field-side-right  .field-buildings { left: 2px;  top: 50%; transform: translateY(-50%); flex-direction: column; }

.house-dot {
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background: #2E7D32;
  border: .5px solid #1B5E20;
}
.house-dot.hotel {
  width: 7px;
  height: 5px;
  background: #B71C1C;
  border-color: #7F0000;
}

/* Player tokens */
.token-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  width: 18px;
  z-index: 10;
  pointer-events: none;
}
.token {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.5);
  flex-shrink: 0;
}

/* Board centre */
.board-center {
  grid-row: 2 / 11;
  grid-column: 2 / 11;
  background: var(--board-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: .5px solid rgba(0,0,0,.1);
  pointer-events: none;
}
.board-logo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1rem, 5vw, 1.5rem);
  font-weight: 900;
  color: var(--accent);
  letter-spacing: .06em;
  opacity: .7;
  line-height: 1;
}
.board-round {
  font-size: .55rem;
  color: var(--muted);
  letter-spacing: .08em;
}

/* Flash animation when a token lands */
.field-flash { animation: flash .35s ease-out; }
@keyframes flash {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.6) saturate(1.5); }
}

/* ── Game panel (below board) ───────────────────────────────── */
.game-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.current-bar {
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
#cur-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,.2); }
#cur-name  { flex: 1; font-weight: 700; font-size: .88rem; }
#cur-money { font-weight: 700; color: var(--green); font-size: .95rem; }

/* Dice area */
.dice-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px 12px;
  flex-shrink: 0;
}
.die {
  width: 34px;
  height: 34px;
  background: #fff;
  border-radius: 7px;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: var(--shadow);
}
.die.rolling { animation: roll .5s ease-out; }
@keyframes roll {
  0%   { transform: rotate(0)   scale(1);   }
  30%  { transform: rotate(120deg) scale(1.2); }
  60%  { transform: rotate(240deg) scale(.9); }
  100% { transform: rotate(360deg) scale(1);  }
}
.dice-total { font-size: 1rem; font-weight: 700; color: var(--muted); min-width: 28px; text-align: center; }

/* Action buttons */
.action-row {
  display: flex;
  gap: 7px;
  padding: 0 10px 7px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* Game log */
.game-log {
  flex: 1;
  overflow-y: auto;
  padding: 6px 12px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.log-entry { font-size: .72rem; color: var(--muted); line-height: 1.35; padding-bottom: 3px; border-bottom: 1px solid var(--border); }
.log-entry:first-child { color: var(--text); font-weight: 500; border-color: transparent; }
.log-latest { color: var(--text) !important; }

/* ══════════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 16px;
  border-radius: var(--radius);
  border: none;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  transition: filter .1s, transform .08s;
}
.btn:active:not(:disabled) { filter: brightness(.88); transform: scale(.96); }
.btn:disabled { opacity: .38; cursor: default; }

.btn-primary { background: var(--green); color: #fff; width: 100%; }
.btn-secondary { background: var(--card); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--red-btn); color: #fff; }
.btn-sm { padding: 8px 12px; font-size: .8rem; min-height: 38px; flex: 1; }
.btn-icon { width: 36px; height: 36px; padding: 0; background: rgba(255,255,255,.14); color: #fff; border-radius: 50%; font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════
   MODAL OVERLAYS (bottom sheets)
══════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 100;
  align-items: flex-end;
  justify-content: center;
}
.modal-overlay.active { display: flex; animation: fadeIn .15s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.bottom-sheet {
  background: var(--card);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 430px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  animation: slideUp .22s ease-out;
  max-height: 88vh;
  overflow-y: auto;
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 14px; }

/* Property card inside sheet */
.prop-card { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-bottom: 14px; }
.prop-card-header { padding: 12px 14px; color: #fff; text-align: center; }
.prop-card-title  { font-size: 1rem; font-weight: 800; }
.prop-card-group  { font-size: .75rem; opacity: .85; margin-top: 2px; }
.prop-card-body   { padding: 10px 14px; background: #fff; }
.prop-price       { font-size: 1.4rem; font-weight: 900; text-align: center; margin: 6px 0 10px; color: var(--accent); }
.rent-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.rent-table td { padding: 3px 0; border-bottom: 1px solid #F0EEE8; }
.rent-table td:last-child { text-align: right; font-weight: 700; }
.sheet-actions { display: flex; gap: 10px; }

/* Build sheet */
.build-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.build-row:last-child { border-bottom: none; }
.build-dot  { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.build-info { flex: 1; }
.build-name { font-size: .85rem; font-weight: 600; }
.build-state{ font-size: .75rem; color: var(--muted); margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════ */
#toast {
  position: fixed;
  bottom: 72px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: rgba(30,20,10,.82);
  color: #fff;
  padding: 7px 18px;
  border-radius: 20px;
  font-size: .82rem;
  font-weight: 600;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  white-space: nowrap;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════════
   END SCREEN
══════════════════════════════════════════════════════════════ */
#screen-end {
  background: var(--bg);
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px 16px;
}
.end-title   { font-size: 1.4rem; font-weight: 900; color: var(--accent); }
.end-trophy  { font-size: 3.5rem; line-height: 1; }
.end-winner  { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; }
#end-winner-dot { width: 16px; height: 16px; border-radius: 50%; }
.end-rankings {
  background: var(--card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 340px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.rank-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.rank-row:last-child { border-bottom: none; }
.rank-medal { font-size: 1.2rem; width: 28px; text-align: center; }
.rank-dot   { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.rank-name  { flex: 1; font-weight: 600; font-size: .9rem; }
.rank-money { font-weight: 700; color: var(--green); font-size: .9rem; }

/* ══════════════════════════════════════════════════════════════
   RULES SCREEN
══════════════════════════════════════════════════════════════ */
#screen-rules { background: var(--bg); }
.rules-body  { flex: 1; overflow-y: auto; padding: 16px; }
.rules-body p { font-size: .85rem; line-height: 1.7; color: var(--text); margin-bottom: 8px; }
.rules-body strong { color: var(--accent); }
.rules-body br { display: block; height: 8px; }

/* ══════════════════════════════════════════════════════════════
   SETTINGS SCREEN
══════════════════════════════════════════════════════════════ */
#screen-settings { background: var(--bg); }

.settings-section {
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 14px;
  margin-bottom: 12px;
}

.settings-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 10px;
}

.settings-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.setting-option {
  flex: 1;
  min-width: 70px;
  padding: 9px 10px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all .15s;
  min-height: 42px;
}
.setting-option:active { filter: brightness(.9); }
.setting-option.active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   MONEY FLOAT ANIMATION
══════════════════════════════════════════════════════════════ */
.money-float {
  position: fixed;
  font-size: .85rem;
  font-weight: 800;
  pointer-events: none;
  z-index: 500;
  transform: translateX(-50%);
  animation: floatUp 1.1s ease-out forwards;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.money-positive { color: #2E7D32; }
.money-negative { color: #B71C1C; }

@keyframes floatUp {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(-32px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
}

/* ══════════════════════════════════════════════════════════════
   CARD OVERLAY  (Ereignis / Gemeinschaft)
══════════════════════════════════════════════════════════════ */
#card-overlay .bottom-sheet { text-align: center; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }

.card-flip-wrap {
  perspective: 800px;
  height: 200px;
  margin: 0 auto 14px;
  width: 160px;
}

.card-face {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  transform: rotateY(180deg);
}

.card-face.flipped {
  transform: rotateY(0deg);
}

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

.card-back {
  background: linear-gradient(135deg, #4E342E 0%, #7B4F3A 100%);
  font-size: 2.5rem;
  transform: rotateY(180deg);
}

.card-front {
  background: #fff;
  border: 3px solid transparent;
  flex-direction: column;
  gap: 8px;
}

.card-type-label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
}

.card-chance    { background: #FFF3E0; color: #E65100; }
.card-community { background: #E3F2FD; color: #0D47A1; }

.card-title {
  font-size: .95rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
}

.card-desc {
  font-size: .78rem;
  color: var(--muted);
  line-height: 1.4;
}

.card-player-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

#card-player-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
#card-player-name { font-size: .8rem; font-weight: 600; color: var(--muted); }

/* ══════════════════════════════════════════════════════════════
   SELL / LIQUIDATE DIALOG
══════════════════════════════════════════════════════════════ */
.sell-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.sell-player-line {
  font-size: .85rem;
  font-weight: 700;
}

.sell-amounts {
  display: flex;
  gap: 12px;
  font-size: .8rem;
  color: var(--muted);
}

.sell-amounts span { font-weight: 700; color: var(--red-btn); }
#sell-balance { color: var(--green) !important; }

.sell-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

/* ══════════════════════════════════════════════════════════════
   CONTINUE SAVE DIALOG (on start screen)
══════════════════════════════════════════════════════════════ */
#continue-overlay {
  background: rgba(0,0,0,.6);
}

.continue-sheet {
  text-align: center;
}

.continue-sheet h2 {
  font-size: 1rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text);
}

.continue-sheet p {
  font-size: .8rem;
  color: var(--muted);
  margin-bottom: 14px;
  line-height: 1.4;
}

.continue-actions {
  display: flex;
  gap: 10px;
}

/* ══════════════════════════════════════════════════════════════
   LANDSCAPE WARNING
══════════════════════════════════════════════════════════════ */
#landscape-warning {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  z-index: 999;
  text-align: center;
  padding: 24px;
  font-size: 1rem;
}
@media (orientation: landscape) and (max-height: 480px) {
  #landscape-warning { display: flex; }
}

/* ══════════════════════════════════════════════════════════════
   ACCESSIBILITY – focus rings (keyboard & switch navigation)
══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 3px solid #FFD700;
  outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

/* ══════════════════════════════════════════════════════════════
   BUTTON – CSS ripple on tap
══════════════════════════════════════════════════════════════ */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}
.btn:active::after { animation: ripple .32s ease-out; }
@keyframes ripple {
  0%   { opacity: .55; transform: scale(0); }
  100% { opacity: 0;   transform: scale(2.5); }
}

/* ══════════════════════════════════════════════════════════════
   ONLINE TURN INDICATOR  (in game screen)
══════════════════════════════════════════════════════════════ */
.online-turn-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .03em;
  flex-shrink: 0;
  transition: background .2s;
}

.online-turn-mine {
  background: rgba(46, 125, 50, .18);
  color: #2E7D32;
  border-bottom: 1px solid rgba(46,125,50,.2);
}

.online-turn-waiting {
  background: rgba(121, 85, 72, .12);
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

/* pulse dot when waiting for remote player */
.online-turn-waiting::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  margin-right: 6px;
  flex-shrink: 0;
  animation: pulse .9s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .35; transform: scale(.85); }
  50%       { opacity: 1;   transform: scale(1);   }
}

/* ══════════════════════════════════════════════════════════════
   GAME LOG  – improved readability
══════════════════════════════════════════════════════════════ */
.log-entry { transition: color .15s; }
.log-entry:first-child {
  font-size: .75rem;
  padding: 4px 0 6px;
}

/* ══════════════════════════════════════════════════════════════
   WIDER SCREEN  – cap game screen width on tablets/desktops
══════════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
  .screen { max-width: 430px; left: 50%; transform: translateX(-50%); }
  .screen.active { display: flex; }
  #toast { max-width: 390px; }
}

/* ══════════════════════════════════════════════════════════════
   PWA STANDALONE MODE  – hide browser chrome artifacts
══════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  body { overscroll-behavior: none; }
  .chips-bar { padding-top: max(env(safe-area-inset-top, 8px), 8px); }
}

/* ══════════════════════════════════════════════════════════════
   CONFETTI
══════════════════════════════════════════════════════════════ */
#confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -24px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
  will-change: transform, opacity;
}

@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(110vh) rotate(720deg); }
}

/* ══════════════════════════════════════════════════════════════
   MUTE BUTTON
══════════════════════════════════════════════════════════════ */
.btn-mute {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.75);
  width: 30px;
  height: 28px;
  padding: 0;
  border-radius: 20px;
  font-size: .8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: opacity .15s;
}
.btn-mute.muted { opacity: .45; }

/* Mute button overlaying the game screen chips bar */
#btn-mute-game {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 40;
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.15);
}

/* ══════════════════════════════════════════════════════════════
   START SCREEN  – decorative skyline strip
══════════════════════════════════════════════════════════════ */
#screen-start::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90px;
  background:
    /* windows */
    repeating-linear-gradient(90deg,
      transparent 0, transparent 6px,
      rgba(255,215,0,.08) 6px, rgba(255,215,0,.08) 9px
    ),
    /* building silhouettes */
    linear-gradient(
      to top,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.0) 100%
    );
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   ONLINE SCREEN
══════════════════════════════════════════════════════════════ */
#screen-online { background: var(--bg); }

.online-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: .9rem;
  background: var(--bg);
  color: var(--text);
}
.online-input:focus { outline: none; border-color: var(--green); }

.online-join-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.online-join-row .online-input { flex: 1; }
.online-code {
  font-family: monospace;
  font-size: 1.1rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.online-status {
  font-size: .8rem;
  color: var(--muted);
  text-align: center;
  padding: 6px 0;
  min-height: 1.4em;
}
.online-status.error { color: var(--red-btn); }

/* ══════════════════════════════════════════════════════════════
   LOBBY SCREEN
══════════════════════════════════════════════════════════════ */
#screen-lobby { background: var(--bg); }

.lobby-code-section {
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  padding: 20px 16px;
  margin-bottom: 14px;
  text-align: center;
}

.lobby-code-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 8px;
}

.lobby-code-display {
  font-family: 'Courier New', monospace;
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: .22em;
  color: var(--accent);
  margin-bottom: 10px;
}

.lobby-share-hint {
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.lobby-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.lobby-player:last-child { border-bottom: none; }

.lobby-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.lobby-pname {
  flex: 1;
  font-size: .9rem;
  font-weight: 600;
}
.lobby-tag   { font-style: italic; font-weight: 400; color: var(--muted); font-size: .8rem; }
.lobby-crown { font-size: .9rem; }

/* Waiting spinner dots */
.lobby-dots::after {
  content: '…';
  animation: dots 1.2s steps(4, end) infinite;
}
@keyframes dots {
  0%   { content: '.';   }
  25%  { content: '..';  }
  50%  { content: '...'; }
  75%  { content: '';    }
}

/* ── Building shapes via box-shadow on a pseudo element */
#screen-start::after {
  content: '🏨 🏢 🏩 🏦 🏢 🏨';
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.6rem;
  letter-spacing: .2em;
  opacity: .18;
  pointer-events: none;
  filter: grayscale(1) brightness(10);
}