/* Map-first game chrome. The board and pawn coordinates remain owned by motion.js. */
body.in-game{background:#e6eddb}
.app{max-width:none;max-height:none;border:0;border-radius:0;box-shadow:none;height:100vh;height:100dvh}
.lobby,.results{max-width:480px;margin-inline:auto}
.game{position:relative;display:block;padding:0;isolation:isolate;--edge:16px;--top:max(14px,env(safe-area-inset-top));--bottom:max(18px,env(safe-area-inset-bottom));--float-shadow:0 5px 20px #3c51361a}
.game-header{position:absolute;top:var(--top);left:var(--edge);right:var(--edge);z-index:6;min-height:58px;gap:10px;pointer-events:none;align-items:center}
.game-header>*{pointer-events:auto}
.wallet{position:relative;display:flex;gap:9px;align-items:center;margin:0;padding:8px 12px 8px 8px;min-height:60px;text-align:left;background:var(--card);border:1px solid #dce4d0;border-radius:19px;box-shadow:var(--float-shadow)}
.wallet>div{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.wallet-label{font-size:10px;color:#7c8b6e;line-height:1.4}
.wallet strong{font-size:23px;line-height:1.15;letter-spacing:-.5px}
.wallet-avatar{display:block;width:38px;height:40px;border-radius:12px;overflow:hidden;flex-shrink:0}
.wallet-avatar svg{display:block;width:100%;height:100%}
.wallet.active{border-color:var(--accent)}
.wallet .save-light{position:absolute;bottom:8px;right:7px}
.round-counter{background:#fffff3e8;padding:6px 10px;border-radius:12px;box-shadow:0 2px 10px #4a653009;gap:4px;font-size:10px}
.round-counter strong{font-size:17px}
.game-header>.round-button{width:44px;height:44px;border-radius:15px;box-shadow:var(--float-shadow)}
.players{position:absolute;left:var(--edge);top:calc(var(--top) + 72px);z-index:6;display:flex;gap:7px;max-width:calc(100% - 32px)}
.player{padding:5px 8px 5px 5px;border-radius:15px;min-height:43px;gap:6px;box-shadow:0 3px 12px #4863340c;text-align:left;background:var(--card)}
.player .avatar{width:26px;height:29px}
.player strong{font-size:10px;line-height:1.3}
.player small{font-size:10px;line-height:1.4;color:#738464}
.player.active{box-shadow:0 0 0 2px color-mix(in srgb,var(--player-color) 20%,transparent)}
.world-event{position:absolute;z-index:5;top:calc(var(--top) + 123px);left:var(--edge);max-width:calc(100% - 32px);padding:7px 10px;border-radius:12px;box-shadow:var(--float-shadow);text-align:left;justify-content:flex-start}
.world-event:not(.festival){display:none}
.location-strip{position:absolute;z-index:5;left:var(--edge);bottom:calc(var(--bottom) + 78px);max-width:calc(100% - 168px);display:flex;flex-direction:column;align-items:flex-start;gap:2px;font-size:11px;padding:6px 9px;border-radius:11px;background:#f9fcefec;pointer-events:none}
.location-strip>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.location-strip>span:last-child{font-size:10px;color:#728563}
.map-frame{position:absolute;inset:0;min-height:0;border:0;border-radius:0;overflow:hidden;background:#e6eddb;z-index:0}
.map-viewport{background:radial-gradient(ellipse at 19% 35%,#d9e6cb 0 12%,transparent 12.5%),radial-gradient(ellipse at 86% 72%,#d2e5d8 0 17%,transparent 17.5%),radial-gradient(circle,#cbd8be 1px,transparent 1.5px) 0 0/30px 30px,#e6eddb}
.world-board{background:transparent}
.world-board:before{content:'';position:absolute;inset:40px 32px 40px;border:24px solid #cdddc2;border-radius:20px;pointer-events:none}
.map-toolbar{left:auto;right:var(--edge);top:auto;bottom:calc(var(--bottom) + 180px);width:44px;height:auto;display:flex;flex-direction:column;gap:8px}
.map-button{width:44px;height:46px;min-height:44px;padding:5px 0;display:flex;flex-direction:column;gap:2px;border-radius:14px;background:var(--card);font-size:10px;box-shadow:var(--float-shadow);backdrop-filter:none}
.map-button .icon{width:18px;height:18px}
.zoom-tools{top:auto;bottom:calc(var(--bottom) + 290px);right:var(--edge);width:44px;height:auto;display:flex;flex-direction:column;align-items:center;background:var(--card);border-radius:14px;box-shadow:var(--float-shadow);backdrop-filter:none}
.zoom-tools button{width:42px;height:44px;min-height:44px}
.map-bottom{left:50%;right:auto;bottom:7px;transform:translateX(-50%);width:max-content;z-index:1}
.map-bottom>span{font-size:9px;background:#e6eddbbd;padding:3px 7px;white-space:nowrap}
.board-middle{position:relative;display:block;overflow:hidden;padding:0;border:0;border-radius:65px;background:#d8e6c9;pointer-events:none}
.map-park{position:absolute;inset:0;overflow:hidden}
.park-river{position:absolute;top:270px;left:35%;width:76%;height:840px;transform:rotate(-12deg);border-radius:100px;background:#bfdbd0;box-shadow:0 0 0 10px #cee2c8}
.park-path{position:absolute;left:-35%;top:170px;width:175%;height:21px;background:#ece8cd;transform:rotate(26deg)}
.park-path.second{top:840px;transform:rotate(-28deg)}
.park-path.third{top:1260px;transform:rotate(25deg)}
.park-neighborhood{position:absolute;left:0;right:0;height:240px}
.park-neighborhood img{position:absolute;left:-9%;width:118%;top:30px;filter:drop-shadow(0 9px 5px #6080570c)}
.park-label{position:absolute;top:20px;left:0;right:0;text-align:center;color:#83996e;font-size:10px;letter-spacing:3px}
.park-tree{position:absolute;width:21px;height:33px;border-radius:50%;background:#87a87a;box-shadow:7px 9px 0 #65895d18}
.park-tree:after{content:'';position:absolute;width:3px;height:17px;background:#a6a080;bottom:-8px;left:9px}
.park-tree:nth-of-type(even){background:#9cb988;width:26px;height:28px}
.action-dock{position:absolute;right:var(--edge);bottom:var(--bottom);z-index:6;display:flex;flex-direction:column;align-items:flex-end;width:112px;gap:7px;padding:0;border:0;background:none;box-shadow:none;pointer-events:none}
.action-dock>*{pointer-events:auto}
.turn-status{display:flex;justify-content:center;align-items:center;gap:5px;padding:7px 9px;min-height:29px;max-width:180px;min-width:112px;border:1px solid #e0e6d5;border-radius:18px;background:var(--card);box-shadow:var(--float-shadow);white-space:normal;text-align:center}
.turn-status strong{font-size:10px;font-weight:500;line-height:1.35}
#turn-dot{width:5px;height:5px;flex:none}
#secondary-action{background:var(--card);padding:8px 10px;min-height:38px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--float-shadow);font-size:11px;max-width:160px}
.main-action{position:relative;width:96px;height:96px;display:block}
.main-action .dice{position:absolute;left:33px;top:13px;width:31px;height:31px;min-width:31px;padding:5px;border-radius:9px;gap:2px;box-shadow:0 2px 3px #733b2720;z-index:1;pointer-events:none}
.main-action .dice span{width:4px;height:4px}
#primary-action{width:96px;height:96px;min-height:0;display:flex;justify-content:center;align-items:center;text-align:center;padding:48px 7px 11px;border-radius:31px;font-size:12px;line-height:1.4;gap:0;box-shadow:0 6px 0 #b2674429,0 8px 23px #85583d22}
#primary-action .icon{display:none}
.bottom-nav{position:absolute;bottom:var(--bottom);left:var(--edge);z-index:6;display:flex;gap:9px;align-items:flex-end;padding:0;border:0;background:none;width:auto}
.bottom-nav>button{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:59px;height:65px;padding:8px 5px;border:1px solid #dce4d0;border-radius:18px;background:var(--card);box-shadow:var(--float-shadow);font-size:11px;color:#5d7750}
.bottom-nav .icon{width:22px;height:22px}
.bottom-nav b{position:absolute;right:4px;top:-5px;display:grid;place-items:center;min-width:19px;height:19px;border:2px solid var(--card);border-radius:7px;background:var(--accent);color:#fffdf3;font-size:10px;margin:0}
.receipt{position:absolute;left:var(--edge);top:calc(var(--top) + 125px);z-index:7;width:calc(100% - 32px);max-width:400px;min-height:60px;max-height:90px;border-radius:16px;background:var(--card);box-shadow:var(--float-shadow);padding:9px 12px;gap:9px}
.receipt:not(.visible-feedback){display:none}
.receipt-copy strong{font-size:12px}
.receipt-copy small{font-size:11px;-webkit-line-clamp:2;color:#758768}
.receipt-amount{font-size:16px}
.coach{bottom:calc(var(--bottom) + 156px);left:var(--edge);right:calc(var(--edge) + 60px);max-width:330px;z-index:7;background:var(--card);backdrop-filter:none}
.wallet .money-float{right:-6px;top:34px;font-size:13px}
.tile .money-float{z-index:5;top:8px;right:1px;font-size:12px}
.tile.money-event{overflow:visible}
.sheet{display:none;inset:auto 0 0;width:min(100%,520px);max-width:100%;max-height:72dvh;margin:0 auto;padding:12px 20px max(20px,env(safe-area-inset-bottom));border:1px solid #dce5cf;border-bottom:0;border-radius:25px 25px 0 0;background:var(--card);box-shadow:0 -10px 40px #30452b25;overflow:auto;overscroll-behavior:contain}
.sheet[open]{display:block}
.sheet::backdrop{background:#263d2c35;backdrop-filter:none}
.sheet-header{margin-bottom:8px}
.sheet-header .round-button{width:40px;height:40px}
.sheet-handle{margin:0 auto 8px}
.sheet-content h2{font-size:23px;line-height:1.35}
.sheet-content>p{font-size:12px;line-height:1.8}
.management-nav{display:flex;gap:8px;padding:4px 0 13px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.management-nav button{padding:9px 17px;min-height:42px;border-radius:11px;background:#eff3e7;color:#6c805b;font-size:13px}
.management-nav button[aria-current=page]{background:#496447;color:#fffef7}
.sheet[data-mode=cards] .card-list{display:flex;gap:10px;align-items:stretch;margin-top:20px}
.sheet[data-mode=cards] .inventory-card{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 11px;min-height:192px;border-radius:16px;text-align:left;background:#f0f4e7}
.sheet[data-mode=cards] .inventory-card>span:nth-child(2){flex:1}
.sheet[data-mode=cards] .inventory-card strong{font-size:12px}
.sheet[data-mode=cards] .inventory-card small{font-size:11px;line-height:1.6}
.sheet[data-mode=cards] .card-tail{align-self:flex-end;position:static;font-size:11px}
.sheet[data-mode=cards] .card-icon{width:35px;height:38px}
.sheet[data-mode=city] .property-art{height:90px}
.sheet[data-mode=city] .sheet-link{min-height:35px;padding:7px}
.sheet[data-mode=city] .action-muted{font-size:11px;line-height:1.5}
.sheet[data-mode=city]{max-height:min(58dvh,calc(100dvh - 260px))}
/* Upgrade decisions keep their actions outside the scrolling information pane. */
.sheet[data-mode=city][data-layout=upgrade]{max-height:min(70dvh,calc(100dvh - 180px));min-height:0;padding:12px 0 0;overflow:hidden}
.sheet[data-layout=upgrade][open]{display:flex;flex-direction:column}
.sheet[data-layout=upgrade]>.sheet-handle,.sheet[data-layout=upgrade]>.sheet-header,.sheet[data-layout=upgrade]>.sheet-turn-notice,.sheet[data-layout=upgrade]>.sheet-footer{flex-shrink:0}
.sheet[data-layout=upgrade]>.sheet-header{margin:0 20px 6px;position:static}
.sheet[data-layout=upgrade]>.sheet-header .round-button{width:34px;height:34px;min-height:34px}
.sheet[data-layout=upgrade]>.sheet-content{min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 20px;scrollbar-width:thin}
.sheet[data-layout=upgrade]>.sheet-turn-notice{width:auto;margin-inline:20px}
.upgrade-city-header{gap:10px;margin:0 0 10px}
.upgrade-city-header .city-emblem{width:40px;height:40px;border-radius:13px}
.upgrade-city-header .city-emblem .icon{width:23px;height:23px}
.upgrade-city-header>div:nth-child(2){min-width:0}
.upgrade-city-header h2{font-size:21px;line-height:1.3;overflow-wrap:anywhere;margin:0 0 3px}
.upgrade-city-header small{color:#788968}
.upgrade-level{margin-left:auto;color:#718360;font-size:12px;white-space:nowrap}
.sheet[data-layout=upgrade] .upgrade-comparison{background:none;border:0;border-radius:0;padding:0;margin:4px 0;grid-template-columns:1fr 24px 1fr;gap:12px;text-align:left}
.sheet[data-layout=upgrade] .upgrade-comparison small{color:#788968;font-size:12px}
.sheet[data-layout=upgrade] .upgrade-comparison strong{display:block;font-size:30px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
.sheet[data-layout=upgrade] .upgrade-comparison>div:first-child strong{color:#788968;font-size:26px}
.sheet[data-layout=upgrade] .upgrade-gain{font-size:12px;line-height:1.5;margin:3px 0 12px;color:#617951}
.upgrade-balance{display:flex;justify-content:space-between;flex-wrap:wrap;gap:3px 12px;background:#eff3e7;border-radius:11px;padding:10px 12px;font-size:12px;line-height:1.6;color:#758667}
.upgrade-balance strong{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.upgrade-details-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:9px 0;color:#718360;font-size:12px;text-align:left}
.upgrade-details-toggle>span{font-size:18px}
#upgrade-detail-panel .group-badge{margin-bottom:9px}
#upgrade-detail-panel .upgrade-rules{font-size:12px;line-height:1.7;margin:10px 0}
.upgrade-detail-links{display:flex;justify-content:space-between;gap:8px;margin:0 0 8px;flex-wrap:wrap}
.upgrade-detail-links .text-button{padding:4px 0;font-size:12px;display:flex;align-items:center;gap:5px}
.upgrade-detail-links .icon{width:15px;height:15px}
.sheet-footer{background:var(--card);border-top:1px solid var(--line);padding:11px 20px max(18px,env(safe-area-inset-bottom))}
.sheet-footer .upgrade-footer-note{font-size:11px;line-height:1.6;margin:0 0 9px;color:#758667}
.sheet-footer .sheet-actions{margin:0;gap:9px;align-items:stretch}
.sheet-footer .sheet-actions>*{min-width:0;white-space:normal}
.sheet-footer .sheet-actions .secondary{padding:10px 8px;font-size:13px}
.sheet-footer .sheet-actions .primary{padding:10px 8px;font-size:14px;flex:1.8}
.upgrade-funding{margin:14px 0;padding:13px;border:1px solid #dce5cf;background:#eff3e7;border-radius:13px}
.upgrade-funding>strong{font-size:14px;color:var(--ink)}
.upgrade-funding .secondary{font-size:12px;min-height:44px;padding:8px 12px;background:var(--card)}
.asset-entry{display:flex;align-items:stretch;gap:6px;min-width:0}
.asset-entry .city-row{flex:1;min-width:0;padding:10px;gap:7px}
.asset-entry .city-row>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
.asset-entry .city-row>.icon{width:20px;height:20px}
.asset-sell{flex:0 0 44px;min-height:44px;padding:8px 3px;font-size:12px;color:#99744f;border-radius:10px}
.asset-sell:hover:not(:disabled){background:#f6eede}
.sheet[data-mode=bankruptcy]{max-height:88dvh}
.player-details{display:flex;align-items:center;gap:12px;margin:12px 0 20px}
.player-details .avatar{width:52px;height:56px}
.player-details h2{margin:0}
.player-details small{color:var(--sub)}
.board-pawn .money-float{top:-22px;right:auto;left:0;font-size:12px;z-index:9}
.toast{bottom:calc(env(safe-area-inset-bottom) + 140px);max-width:min(400px,calc(100% - 32px));z-index:20}
.connection{max-width:min(500px,calc(100% - 24px));z-index:30}
@media(min-width:768px){
  .game{--edge:26px;--top:24px;--bottom:28px}
  .game-header{right:26px}
  .round-counter{margin-left:auto}
  .players{gap:9px;top:100px}
  .player{min-width:86px;padding:7px 10px}
  .player strong{font-size:11px}.player small{font-size:11px}
  .receipt{top:24px;left:50%;transform:translateX(-50%);width:min(390px,calc(100% - 550px))}
  .world-event{top:153px;max-width:320px}
  .park-neighborhood img{left:50%;width:320px;max-width:95%;transform:translateX(-50%)}
  .park-neighborhood{height:320px}
  .location-strip{bottom:111px}
  .zoom-tools{bottom:calc(var(--bottom) + 288px)}
  .coach{left:26px;bottom:180px;width:300px}
  .sheet{inset:18px 18px 18px auto;margin:0;width:370px;max-width:calc(100% - 36px);max-height:calc(100dvh - 36px);height:fit-content;min-height:260px;border:1px solid #dce5cf;border-radius:22px;padding:18px 22px 24px}
  .sheet[data-mode=city],.sheet[data-mode=bankruptcy]{max-height:calc(100dvh - 36px)}
  .sheet[data-mode=city][data-layout=upgrade]{max-height:calc(100dvh - 36px);padding-top:12px}
  .sheet-handle{display:none}
  .sheet::backdrop{background:#263d2c18}
  .sheet[data-mode=cards] .inventory-card{padding:12px 9px}
}
@media(max-width:359px){
  .game{--edge:10px}.game-header{gap:7px}.wallet{padding-right:10px;gap:7px}.wallet strong{font-size:20px}.wallet-avatar{width:32px;height:35px}.round-counter{padding:5px 7px;font-size:9px}.round-counter strong{font-size:15px}
  .players{gap:5px}.player{padding:4px 7px 4px 4px}.player .avatar{width:23px;height:26px}.player strong{font-size:10px}.player small{font-size:9px}
  .sheet{padding-inline:16px}.sheet-content h2{font-size:21px}.sheet[data-mode=cards] .inventory-card{padding:12px 8px}
  .sheet[data-layout=upgrade]>.sheet-header{margin-inline:16px}.sheet[data-layout=upgrade]>.sheet-content,.sheet[data-layout=upgrade]>.sheet-footer{padding-inline:16px}.upgrade-level{font-size:11px}
  .sheet[data-mode=city][data-layout=upgrade]{padding-top:8px}.sheet[data-layout=upgrade]>.sheet-handle{margin-bottom:4px}.sheet[data-layout=upgrade]>.sheet-header{margin-bottom:2px}.sheet[data-layout=upgrade] .upgrade-city-header{margin-bottom:6px}.sheet[data-layout=upgrade] .upgrade-gain{margin-bottom:8px}.sheet[data-layout=upgrade] .upgrade-balance{padding-block:8px}
  .location-strip{max-width:calc(100% - 148px)}
}
@media(max-height:540px) and (max-width:767px){
  .game{--top:8px;--bottom:10px}.players{top:78px}.world-event{top:124px}.map-toolbar{bottom:142px}.zoom-tools{display:none}.receipt{top:122px;max-width:calc(100% - 160px)}.coach{bottom:130px;max-width:250px}.sheet,.sheet[data-mode=city]{max-height:84dvh}
  .sheet[data-mode=city][data-layout=upgrade]{max-height:84dvh}
}
@media(prefers-reduced-motion:reduce){.receipt,.sheet{animation:none!important}}