*{box-sizing:border-box}body{margin:0;background:#03121e;color:#f7f0dc;font-family:var(--rosa-font-interface)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default}#city-app{min-height:100dvh;padding:12px max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom));background:linear-gradient(#03121e88,#03121ee8),url('../../assets/backgammon/royal-terrace.webp') center/cover fixed}#city-app:fullscreen{overflow:auto}.carved{border:2px solid #b68e42;border-radius:19px;box-shadow:inset 0 0 0 4px #081726,inset 0 0 0 5px #ae874751,0 10px 25px #0008;background:var(--rosa-menu-fill);position:relative}.carved:after{content:'';position:absolute;inset:0;border:18px solid transparent;border-image:url('../../assets/mahjong-reference/filigree-frame.webp') 115 / 26px / 0 stretch;pointer-events:none;border-radius:inherit}.city-header{min-height:76px;display:flex;align-items:center;gap:16px;padding:4px 18px;border:1px solid #bc9348;border-radius:18px;background:var(--rosa-menu-fill);box-shadow:inset 0 0 0 3px #b48c2f26}.city-brand img{width:170px;height:64px;object-fit:contain}.city-header .rosa-header-nav{display:flex;flex:1;align-items:stretch}.city-header .rosa-header-nav button,.city-header-actions button{background:none;border:0;color:#f8e3ad;min-height:58px;padding:4px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.city-header .rosa-header-nav button[aria-current]{background:radial-gradient(ellipse at bottom,#a4702188,transparent 75%)}.city-header img.rosa-art-icon{width:32px;height:32px;object-fit:contain}.city-header-actions{display:flex}.city-header-actions button{font-size:24px;padding:4px 12px}.city-layout{display:grid;grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(210px,260px);gap:18px;max-width:1900px;margin:12px auto}.city-left,.city-right{min-width:0;padding-top:64px}.rosa-panel.carved{padding:20px}.rosa-panel h2{font-size:17px;color:var(--rosa-gold-light,#ffe4a2);margin:0 0 14px}.city-heading{text-align:center;height:64px;display:flex;gap:15px;align-items:center;justify-content:center}.city-heading h1{font-size:34px;margin:0;letter-spacing:.04em;font-weight:900}.city-heading p{font-size:12px;max-width:130px;color:#c5d4dc}.board-scroll{overflow:auto;max-width:100%;border-radius:18px}.city-board{display:grid;grid-template:repeat(11,minmax(0,1fr))/repeat(11,minmax(0,1fr));aspect-ratio:1;width:100%;min-width:620px;padding:10px;gap:2px;background:linear-gradient(145deg,#b2873e,#ffe0a0 2%,#745021 3%,#072b3d 4%,#061a28 96%,#bc9448 97%)}.city-main{min-width:0}.city-space{min-width:0;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:0 2px 3px;border:1px solid #a68e61;border-radius:4px;background:linear-gradient(135deg,#fff9e6,#e4d5b6);color:#172b37;box-shadow:inset 1px 1px 1px #fff,1px 2px 0 #806839;font-size:clamp(6px,.6vw,10px);text-align:center;overflow:hidden}.space-band{background:var(--group);height:17%;min-height:7px;width:calc(100% + 4px);color:#fff;font-size:11px;font-weight:900}.space-name{font-weight:800;line-height:1.05;overflow-wrap:anywhere}.city-space small{font-size:inherit;margin-top:auto}.city-space.selected{outline:3px solid #fce08b;outline-offset:-3px;z-index:2}.city-space:focus-visible{outline:3px solid #00bfff;outline-offset:-3px;z-index:3}.city-space.mortgaged{background:linear-gradient(135deg,#97a2a4,#c1c3b5);color:#33424a}.city-space .owner-dot{position:absolute;bottom:2px;right:2px;width:8px;height:8px;border:1px solid #fff;border-radius:50%}.tokens{position:absolute;inset:30% 4% 2%;display:flex;align-items:flex-end;justify-content:center;gap:1px;pointer-events:none}.token{display:inline-block;flex-shrink:0;width:18px;height:23px;border:1px solid #ffedb7;border-radius:42% 42% 30% 30%;box-shadow:inset -3px -3px 3px #0008,inset 2px 2px 2px #fff9,1px 3px 2px #0009;background:linear-gradient(110deg,#fef2b3,#c18a26);position:relative}.token:before{content:'';position:absolute;top:2px;left:26%;width:48%;height:37%;background:inherit;border-radius:50%;box-shadow:0 2px 2px #0008}.token-b{background:linear-gradient(110deg,#9ce8ff,#1762ac)}.token-g{background:linear-gradient(110deg,#99ffc6,#0c765c)}.token-r{background:linear-gradient(110deg,#ffb0bc,#a11e47)}.buildings{position:absolute;top:0;left:0;right:0;color:#064c31;text-shadow:0 1px #fff;font-size:12px;letter-spacing:1px}.city-center{grid-area:2/2/11/11;position:relative;overflow:hidden;background:#052334;border:1px solid #b69758;display:flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate}.city-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;z-index:-2}.city-center:before{content:'';position:absolute;inset:0;background:linear-gradient(#03121e22,#03121e00 40%,#03121e 98%);z-index:-1}.city-logo{position:absolute;top:4%;left:5%;width:22%;filter:drop-shadow(0 3px 5px #000)}.center-copy{margin-top:auto;text-align:center;text-shadow:0 3px 5px #000}.city-kicker{letter-spacing:.2em;font-size:clamp(8px,.8vw,13px);color:#ffdda0}.center-copy strong{display:block;font-size:clamp(30px,4vw,72px);font-family:var(--rosa-font-display);color:#ffe8a6;line-height:1.1;filter:drop-shadow(0 3px #7f4b16)}.center-copy p{margin:4px 0;color:#fff1d2}.dice{display:flex;gap:14px;justify-content:center;padding:14px}.die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px;width:49px;height:49px;padding:8px;border-radius:9px;border:1px solid #fcdf9b;background:linear-gradient(130deg,#fff9df,#d3b976);box-shadow:inset 2px 2px 2px #fff,3px 5px 0 #92702c,5px 10px 10px #0009;transform:rotate(-7deg)}.die:nth-child(2){transform:rotate(7deg)}.die .pip{border-radius:50%;background:#0b2f49;box-shadow:inset 1px 1px 2px #000}.center-bank{font-size:11px;color:#c9d6da;padding:10px}.player-card{display:grid;grid-template-columns:25px 1fr;gap:4px 8px;border:1px solid #8c783c55;border-radius:10px;padding:10px;margin-bottom:8px;background:var(--rosa-menu-item-fill)}.player-card.active{border-color:#f9ce6e;box-shadow:inset 0 0 17px #c89a342e}.player-card strong{font-size:13px}.player-card b{grid-column:2;color:#ffe09c;font-size:22px;font-variant-numeric:tabular-nums}.player-card small{grid-column:2;color:#b6c9d4;font-size:11px}.player-card.out{opacity:.5}.options{display:grid;gap:6px}.rosa-button{min-height:44px;font-size:12px;gap:8px}.options .rosa-button img{width:25px;height:25px;object-fit:contain}.save-state{font-size:10px;color:#a6b7c4;line-height:1.5}.journal{margin-top:15px}.journal ol{margin:0;padding:0;list-style:none;font-size:11px;line-height:1.5;color:#b6c8d2}.journal li{padding:6px 0;border-bottom:1px solid #bd9b4329}.deed h2{padding:12px;border-radius:5px;background:var(--group);color:#fff;text-shadow:0 1px 2px #000;margin:0 0 12px;text-align:center}.deed-tag{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#b8cad4}.deed dl{margin:0;font-size:13px}.deed dl div,.rent-list li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #d6b96328}.deed dd{margin:0;color:#ffdfa0}.rent-list{list-style:none;margin:10px 0;padding:0;font-size:11px}.deed p{font-size:11px;line-height:1.4}.estate-actions{display:grid;gap:5px}.estate-actions button{min-height:38px;font-size:11px}.estate-actions button:disabled{opacity:.3}.action-panel{margin-top:12px;text-align:center}.status{font-size:18px;font-weight:800;color:#ffe3a0}.event{font-size:13px;color:#bad2df;margin:8px 0}.turn-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.turn-actions p{flex-basis:100%;margin:0}.turn-actions button{min-width:140px}.feedback:empty{display:none}.feedback{color:#ffabb0;font-size:13px}.online-details{margin-top:16px;font-size:13px}.online-details summary{cursor:pointer;min-height:32px;color:#ffdfa3}.online-panel{border:0!important;box-shadow:none!important;padding:10px 0!important;background:transparent!important}.city-modal{background:none;border:0;color:inherit;width:min(590px,96vw);max-height:92dvh;padding:0;overflow:auto}.city-modal::backdrop{background:#000b;backdrop-filter:blur(5px)}.city-modal .rosa-panel{padding:30px}.dismiss{float:right;min-width:44px;font-size:22px}.modal-body{clear:both}.modal-body label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0;font-size:14px}.modal-body input,.modal-body select{background:#081c2b;color:#ffe5b1;border:1px solid #af8f48;border-radius:6px;padding:10px;max-width:100%;min-height:44px}.modal-body input[type=checkbox]{width:20px;height:20px;min-height:20px}.rules-copy{line-height:1.8;color:#d1dee4}.trade-lists fieldset{border:1px solid #ab8c41;border-radius:8px;margin:14px 0;padding:12px}.trade-lists label{justify-content:flex-start}.trade-lists input[type=number]{width:140px;margin-left:auto}.large-board .city-board{min-width:920px}.no-motion *{animation:none!important;transition:none!important}@media(min-width:1900px){.city-board{max-width:1060px;margin:auto}.city-space{font-size:11px}}@media(max-width:1200px){.city-layout{grid-template-columns:180px minmax(0,1fr)}.city-right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:0}.online-details{margin:0}.city-board{min-width:580px}.city-space{font-size:8px}.city-left{padding-top:64px}.deed .estate-actions{grid-template-columns:repeat(2,1fr)}.rent-list{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}}@media(max-width:900px){.city-layout{grid-template-columns:minmax(0,1fr)}.city-main{grid-row:1}.city-left{padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.journal{margin:0}.city-right{grid-column:1}.city-board{min-width:600px}.city-space{font-size:9px}.city-header{gap:4px}.city-header .rosa-header-nav button{padding:4px 10px}.city-brand img{width:135px}}@media(max-width:600px){#city-app{padding:6px}.city-header{display:grid;grid-template-columns:1fr auto;padding:4px 10px;gap:0}.city-brand img{width:120px;height:48px}.city-header-actions{grid-column:2;grid-row:1}.city-header .rosa-header-nav{grid-column:1/-1;grid-row:2;justify-content:space-around}.city-header .rosa-header-nav button{font-size:11px;min-height:48px;flex:1}.city-header img.rosa-art-icon{width:23px;height:23px}.city-layout{gap:10px;margin:4px auto}.city-heading{height:57px;gap:10px}.city-heading h1{font-size:27px}.city-heading p{font-size:10px}.city-board{min-width:0;padding:5px;gap:1px;border-radius:10px}.city-space{font-size:5px;border-radius:2px;padding:0 1px 1px;gap:1px}.space-band{min-height:4px;font-size:6px}.city-space small{font-size:6px}.city-space .token{width:9px;height:12px}.city-space .owner-dot{width:5px;height:5px}.buildings{font-size:6px}.city-kicker{font-size:6px}.center-copy strong{font-size:28px}.center-copy p{font-size:10px}.city-logo{width:28%}.dice{gap:10px;padding:8px}.die{width:34px;height:34px;padding:5px;gap:2px;border-radius:6px}.center-bank{font-size:7px;padding:7px}.rosa-panel.carved{padding:17px}.action-panel .status{font-size:16px}.city-left,.city-right{display:block}.journal,.online-details{margin-top:10px}.players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.player-card{margin:0}.options{grid-template-columns:repeat(2,minmax(0,1fr))}.large-board .city-board{min-width:720px}.large-board .city-space{font-size:9px}.large-board .token{width:18px;height:23px}.large-board .center-copy strong{font-size:58px}.large-board .center-copy p{font-size:17px}.large-board .die{width:49px;height:49px}.large-board .city-kicker{font-size:12px}.large-board .center-bank{font-size:12px}.journal ol{font-size:12px}.city-space:focus-visible{outline-width:2px}.city-right .deed{margin-top:0}}@media(prefers-reduced-motion:reduce){#city-app *{animation:none!important;transition:none!important}}
@media(min-width:901px){.city-board{width:min(100%,calc(100dvh - 335px));min-width:450px;margin-inline:auto}.city-space{font-size:8px}.center-copy strong{font-size:clamp(30px,3vw,56px)}.center-copy p{font-size:12px}.city-left,.city-right{padding-top:64px}.city-header .rosa-header-nav{justify-content:center}.action-panel{padding:14px!important}.center-bank{font-size:10px}.die{width:40px;height:40px;padding:6px}}@media(min-width:1700px){.city-space{font-size:10px}}@media(max-width:600px){.board-scroll{border:1px solid #b68e4255}.city-space{font-size:6px}.space-name{line-height:1.05}.city-header-actions [data-label]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.city-header-actions button{min-width:44px;min-height:44px}}

.board-guide{display:none}@media(max-width:600px){.board-guide{display:block;font-size:11px;line-height:1.5;color:#c7d2d9;text-align:center;margin:0 10px 8px}.city-space{font-size:6px}.city-right .deed{scroll-margin-top:15px}}

.buildings{display:flex;justify-content:center;gap:2px;top:2px;pointer-events:none}.buildings i{display:block;width:8px;height:8px;background:linear-gradient(110deg,#87d6a1,#09573f);border:1px solid #d8e1a4;box-shadow:1px 2px 1px #0008;position:relative}.buildings i:before{content:"";position:absolute;left:-2px;right:-2px;top:-3px;height:4px;background:linear-gradient(#c0e5b6,#285b39);clip-path:polygon(50% 0,100% 100%,0 100%)}.buildings .hotel{width:15px;background:linear-gradient(110deg,#ffaaa1,#a13935)}.buildings .hotel:before{background:#d88451}@media(max-width:600px){.buildings{gap:1px;top:1px}.buildings i{width:4px;height:4px}.buildings .hotel{width:8px}.large-board .buildings i{width:8px;height:8px}.large-board .buildings .hotel{width:15px}}
@media(max-width:600px){#city-app .city-header{display:grid;grid-template-columns:1fr auto;gap:0}#city-app .city-header .rosa-header-nav{grid-area:2/1/3/3;width:100%;gap:0}#city-app .city-header .city-brand{grid-area:1/1/2/2}#city-app .city-header-actions{grid-area:1/2/2/3;margin:0}#city-app .city-header .rosa-header-nav .rosa-button{min-height:48px;font-size:11px;padding:3px 5px}.deed-return{display:block;width:100%;margin-top:12px}}@media(min-width:601px){.deed-return{display:none}}

.city-space.traveling{overflow:visible;z-index:10}