/* Game screen: board, panels, dialogs. The board is artwork and keeps one palette in both themes. */
#app.hidden{ display:none !important; }
#app{
  display:grid; grid-template-columns:minmax(240px,300px) minmax(0,1fr) minmax(250px,310px);
  gap:var(--s-5); align-items:start; width:min(100% - 2*var(--s-5), 1640px); margin:var(--s-5) auto var(--s-7);
}
#leftbar, #sidebar{ display:flex; flex-direction:column; gap:var(--s-4); position:sticky; top:calc(var(--header-h) + var(--s-4)); max-height:calc(100dvh - var(--header-h) - 2*var(--s-4)); overflow-y:auto; padding:2px; }
.card{ background:var(--surface); border:var(--bw) solid var(--border); border-radius:var(--r-lg); padding:var(--s-4); box-shadow:var(--shadow-1); }
.card h3{ font-size:var(--fs-md); letter-spacing:-0.02em; margin:0 0 var(--s-3); }

/* Board frame (Nigerian flag stripes) */
.board-wrap{
  padding:12px; border-radius:var(--r-xl); display:flex; flex-direction:column; gap:var(--s-2); min-width:0;
  background:linear-gradient(90deg,#008751 0 33.3%, #ffffff 33.3% 66.6%, #008751 66.6% 100%);
  box-shadow:var(--shadow-3);
}
#boardViewport{
  width:100%; max-width:calc(100dvh - var(--header-h) - 150px); min-width:260px; margin-inline:auto; aspect-ratio:1;
  overflow:hidden; position:relative; border-radius:var(--r-lg); background:#0a3d24; contain:layout paint;
}
#frameLog{ background:rgba(4,12,8,.82); border-radius:var(--r-md); padding:var(--s-2) var(--s-3); display:flex; flex-direction:column; gap:4px; border:var(--bw) solid rgba(255,255,255,.1); color:#d7ece0; }
#frameLogTitle{ color:var(--gold2); font-weight:800; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; }
#log{ max-height:96px; overflow-y:auto; font-size:var(--fs-xs); line-height:1.45; text-align:left; }
#log div{ margin-bottom:3px; animation:logIn var(--dur-2) var(--ease-out); }
@keyframes logIn{ from{ opacity:0; transform:translateX(-6px); } }
#board{
  display:grid; grid-template-columns:repeat(11,var(--tile)); grid-template-rows:repeat(11,var(--tile));
  background:#0a3d24; border:8px solid var(--gold-fill); border-radius:14px; position:absolute; top:0; left:0;
  box-shadow:inset 0 0 40px rgba(0,0,0,.5); transform-origin:0 0; will-change:transform; color:#fff;
}
.cam-label{
  position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:30; max-width:90%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:rgba(0,0,0,.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:var(--gold2); font-weight:800;
  font-size:var(--fs-xs); padding:5px 14px; border-radius:var(--r-pill); border:1px solid rgba(255,215,94,.4); pointer-events:none; transition:opacity .3s ease;
}
.tile{ border:1px solid #14311f; position:relative; background:linear-gradient(160deg,#0f5230,#0a3d24); font-size:13px; overflow:hidden; display:flex; flex-direction:column; transition:filter .3s ease; }
.tile[role="button"]{ cursor:pointer; }
.tile[role="button"]:hover{ filter:brightness(1.12); }
.tile[role="button"]:focus-visible{ box-shadow:inset 0 0 0 4px var(--gold2); border-radius:0; z-index:5; }
.tile .bar{ height:20px; width:100%; flex-shrink:0; box-shadow:inset 0 -2px 4px rgba(0,0,0,.25); }
.tile .name{ padding:4px 5px 0; line-height:1.12; font-weight:800; color:#fff; font-size:12px; text-shadow:0 1px 3px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.5); position:relative; z-index:2; }
.tile .price{ margin-top:auto; padding:3px 5px; color:#e9f7ee; font-size:11.5px; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.9); position:relative; z-index:2; }
.tile .icon{ position:absolute; top:24px; right:4px; font-size:22px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.tile .bld{ position:absolute; bottom:16px; left:3px; display:flex; gap:2px; z-index:3; }
.tile.corner{ align-items:center; justify-content:center; text-align:center; font-size:12px; font-weight:800; background:radial-gradient(circle at 50% 30%,#0f5a34,#0a3320); padding:6px; gap:3px; }
.tile.corner .corner-icon{ font-size:32px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.tile.mortgaged{ filter:grayscale(.75) brightness(.55); }
.tile.mortgaged::after{ content:'MORTGAGED'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.55); color:#ffb; font-size:9px; font-weight:800; letter-spacing:.08em; text-align:center; z-index:6; }
.tile.tile-flash{ animation:tileFlash .8s ease; }
@keyframes tileFlash{ 0%{ box-shadow:0 0 0 5px var(--gold2) inset; background-color:rgba(255,215,94,.35); } 100%{ box-shadow:none; } }
.owner-ribbon{ position:absolute; left:0; right:0; bottom:0; height:18px; display:flex; align-items:center; justify-content:center; gap:3px; font-size:10px; font-weight:800; color:#fff; z-index:4; text-shadow:0 1px 2px rgba(0,0,0,.6); border-top:1px solid rgba(255,255,255,.35); }
.owner-ribbon .otok{ font-size:12px; }
.center-area{ grid-column:2/11; grid-row:2/11; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:14px; text-align:center; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 45%, rgba(232,185,62,.12), transparent 70%); }
.center-area h2{ margin:0; font-family:var(--font-display); font-weight:800; font-size:44px; line-height:.95; color:var(--gold2); text-shadow:0 3px 14px #000; letter-spacing:-0.04em; }
.center-area .sub{ color:#bfe9d3; font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.85; }
.token-badge{
  position:absolute; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:19px; border:3px solid #fff;
  box-shadow:0 3px 8px rgba(0,0,0,.65), 0 0 0 2px rgba(0,0,0,.25); z-index:20; pointer-events:none;
  transition:left .42s cubic-bezier(.45,.05,.55,.95), top .42s cubic-bezier(.45,.05,.55,.95), transform .3s ease;
}
.token-badge.hopping{ animation:tokenHop .42s ease; }
@keyframes tokenHop{ 0%{ transform:translateY(0) scale(1); } 40%{ transform:translateY(-22px) scale(1.12); } 100%{ transform:translateY(0) scale(1); } }
.token-badge.landed{ animation:tokenBounce .55s ease; }
@keyframes tokenBounce{ 0%{ transform:translateY(-6px) scale(1.2); } 35%{ transform:translateY(-14px) scale(1.05); } 60%{ transform:translateY(0) scale(1); } 80%{ transform:translateY(-5px); } 100%{ transform:translateY(0); } }
.bld svg{ animation:popIn .35s ease; }
@keyframes popIn{ 0%{ transform:scale(0) rotate(-15deg); opacity:0; } 70%{ transform:scale(1.25); } 100%{ transform:scale(1) rotate(0); opacity:1; } }
.jail-shake{ animation:jailShake .5s ease; }
@keyframes jailShake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } }

/* Dice and actions */
#dice{ display:flex; gap:var(--s-4); justify-content:center; margin-bottom:var(--s-4); padding:var(--s-4); background:var(--surface-2); border-radius:var(--r-md); }
.die-face{ width:54px; height:54px; background:linear-gradient(160deg,#fff,#e8e8e2); border-radius:12px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:8px; gap:2px; box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 -3px 4px rgba(0,0,0,.1); }
.die-face.rolling{ animation:diceShake .12s linear infinite; }
@keyframes diceShake{ 0%{ transform:rotate(0) scale(1); } 50%{ transform:rotate(-14deg) scale(1.05); } 100%{ transform:rotate(14deg) scale(1); } }
.dot{ border-radius:50%; }
.dot.on{ background:#14201a; box-shadow:inset 0 1px 2px rgba(0,0,0,.5); }
#actions{ display:flex; flex-direction:column; gap:var(--s-2); }
#actions button{ width:100%; }
#rollBtn{ min-height:56px; font-size:var(--fs-md); border-radius:var(--r-lg); }
#rollBtn:not(:disabled){ animation:rollPulse 1.9s ease-in-out infinite; }
@keyframes rollPulse{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--green) 45%, transparent); } 50%{ box-shadow:0 0 0 10px transparent; } }

/* Player cards */
.player-card{ position:relative; border-radius:var(--r-md); padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4); margin-bottom:var(--s-2); background:var(--surface-2); border:var(--bw) solid var(--border); overflow:hidden; transition:box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.player-card::before{ content:""; position:absolute; inset:0 auto 0 0; width:6px; background:var(--pc,#666); }
.player-card.current{ border-color:var(--green); box-shadow:var(--glow); }
.player-card.out{ opacity:.55; }
.pname{ display:flex; align-items:center; gap:var(--s-2); font-weight:800; font-size:var(--fs-sm); }
.ptoken{ font-size:1.25rem; }
.pnametext{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tag{ font-size:.625rem; font-weight:800; letter-spacing:.06em; padding:2px 6px; border-radius:var(--r-pill); background:var(--surface-3); color:var(--text-muted); vertical-align:middle; }
.tag-out{ background:var(--error); color:#fff; }
.player-card .cash{ color:var(--success); font-weight:800; font-size:var(--fs-md); font-variant-numeric:tabular-nums; display:inline-block; }
.player-card .cash.flash-pos{ animation:flashGreen .6s ease; }
.player-card .cash.flash-neg{ animation:flashRed .6s ease; }
@keyframes flashGreen{ 0%{ transform:scale(1.4); } 100%{ transform:scale(1); } }
@keyframes flashRed{ 0%{ color:var(--error); transform:scale(1.4); } 100%{ transform:scale(1); } }
.prop-list{ list-style:none; margin:var(--s-2) 0 0; padding:0; font-size:var(--fs-xs); color:var(--text-muted); max-height:68px; overflow-y:auto; line-height:1.5; }
.prop-list li{ display:inline; } .prop-list li:not(:last-child)::after{ content:", "; } .prop-list .none::after{ content:""; }
.jail-note{ color:var(--error); font-size:var(--fs-xs); font-weight:700; margin-top:var(--s-1); }
.cash-float{ position:fixed; font-weight:900; font-size:16px; animation:floatUp 1.5s ease forwards; pointer-events:none; z-index:var(--z-float); text-shadow:0 2px 6px rgba(0,0,0,.6); }
@keyframes floatUp{ 0%{ transform:translateY(0) scale(1); opacity:1; } 15%{ transform:translateY(-6px) scale(1.3); } 100%{ transform:translateY(-56px) scale(1); opacity:0; } }
.emoji-burst{ position:fixed; font-size:20px; pointer-events:none; z-index:var(--z-float); animation:burstFly 1.1s ease forwards; }
@keyframes burstFly{ 0%{ transform:translate(0,0) rotate(0) scale(.6); opacity:1; } 100%{ transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1.1); opacity:0; } }

/* Property management */
#buildPanel{ display:flex; flex-direction:column; gap:var(--s-2); max-height:340px; overflow-y:auto; }
.build-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-2); background:var(--surface-2); padding:var(--s-2) var(--s-3); border-radius:var(--r-sm); font-size:var(--fs-xs); font-weight:600; transition:background-color var(--dur-2) var(--ease-out); }
.build-row:hover{ background:var(--surface-3); }
.build-label{ flex:1; min-width:0; }
.build-row button{ min-height:44px; padding:0 var(--s-3); font-size:var(--fs-xs); white-space:nowrap; }
.bank-stock{ margin:0 0 var(--s-1); }

/* Dialogs */
.modal-bg{ position:fixed; inset:0; background:rgba(3,10,6,.7); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; z-index:var(--z-modal); padding:var(--s-4); animation:fadeIn var(--dur-2) ease; }
@keyframes fadeIn{ from{ opacity:0; } }
.modal{ background:var(--surface); color:var(--text); border:var(--bw) solid var(--border-strong); border-radius:var(--r-xl); padding:var(--s-6); width:min(100%, 500px); text-align:center; max-height:88dvh; overflow-y:auto; box-shadow:var(--shadow-3); animation:modalIn var(--dur-3) var(--ease-spring); }
@keyframes modalIn{ from{ opacity:0; transform:scale(.92) translateY(14px); } }
.modal:focus{ outline:none; }
.modal h3{ font-size:var(--fs-xl); letter-spacing:-0.03em; margin-bottom:var(--s-3); }
.modal .row{ display:flex; gap:var(--s-3); margin-top:var(--s-5); justify-content:center; flex-wrap:wrap; }
.modal .row button{ flex:1 1 140px; }
.modal-bg:has(.rules-in-modal) .modal{ text-align:left; width:min(100%, 620px); }
.rules-in-modal details > div{ font-size:var(--fs-sm); }
.card-flip{ animation:cardFlip .5s cubic-bezier(.2,1.2,.4,1); transform-style:preserve-3d; }
@keyframes cardFlip{ 0%{ transform:rotateY(90deg) scale(.8); opacity:0; } 60%{ transform:rotateY(-8deg) scale(1.02); opacity:1; } 100%{ transform:rotateY(0) scale(1); opacity:1; } }
.deck-title{ display:flex; align-items:center; justify-content:center; gap:var(--s-2); padding-bottom:var(--s-3); border-bottom:3px solid var(--gold); }
.deck-chest .deck-title{ border-color:var(--green); }
.deck-emoji{ font-size:1.6rem; }
.card-msg{ font-size:var(--fs-lg); line-height:1.5; margin:var(--s-5) var(--s-1); font-weight:600; }
.deed-title{ border-bottom:5px solid var(--deed,#444); padding-bottom:var(--s-2); }
.rent-table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); margin-top:var(--s-3); }
.rent-table th{ text-align:left; font-weight:600; color:var(--text-muted); } .rent-table td{ text-align:right; font-weight:800; font-variant-numeric:tabular-nums; }
.rent-table tr+tr{ border-top:var(--bw) solid var(--border); } .rent-table th,.rent-table td{ padding:6px 0; }
.owner-chip{ display:inline-flex; align-items:center; gap:6px; color:#fff; padding:4px 12px; border-radius:var(--r-pill); font-weight:800; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.owner-line{ display:flex; align-items:center; justify-content:center; gap:var(--s-2); }
.warn-text{ color:var(--warning); }
.trade-form{ text-align:left; display:flex; flex-direction:column; gap:var(--s-3); }
.trade-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
.trade-cash{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
@media (max-width:480px){ .trade-cols{ grid-template-columns:1fr; } .modal{ padding:var(--s-5); } }

#winnerConfetti{ position:fixed; inset:0; pointer-events:none; z-index:var(--z-confetti); overflow:hidden; }
.confetti-piece{ position:absolute; top:-20px; width:10px; height:16px; opacity:.95; animation:confettiFall linear forwards; }
@keyframes confettiFall{ to{ transform:translateY(110vh) rotate(540deg); opacity:.2; } }

/* Tablet and phone: board first, then actions, players and properties */
@media (max-width:1100px){
  #app{ grid-template-columns:1fr; width:min(100% - 2*var(--s-3), 720px); gap:var(--s-4); margin-top:var(--s-3); }
  #leftbar, #sidebar{ position:static; max-height:none; overflow:visible; }
  .board-wrap{ order:-1; }
  #boardViewport{ max-width:none; }
  #sidebar{ display:grid; grid-template-columns:1fr; }
  #sidebar .card.actions-card{ order:-1; }
}
@media (min-width:700px) and (max-width:1100px){
  #sidebar{ grid-template-columns:1fr 1fr; align-items:start; }
}
@media print{ .site-header, #app, .progress{ display:none !important; } }