:root {
  --pixel-bg: #f7f7fb;
  --pixel-surface: #ffffff;
  --pixel-border: #cfd2dc;
  --pixel-text: #1f2330;
  --pixel-accent: #6b7cff;
  --pixel-accent-dark: #4350ff;
  --pixel-muted: #70768c;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--pixel-bg);
  color: var(--pixel-text);
  font: 14px/1.4 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Inter, Arial, sans-serif;
}
.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.site-header {
  background: var(--pixel-surface);
  border-bottom: 1px solid var(--pixel-border);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.brand { font-weight: 600; }
.pixel-nav { display: flex; gap: 8px; }
.pixel-nav a {
  display: inline-block;
  text-decoration: none;
  color: var(--pixel-text);
  background: var(--pixel-surface);
  border: 1px solid var(--pixel-border);
  padding: 8px 12px;
}
.pixel-nav a.active { background: #eef0ff; border-color: #b8bef1; }

.main { padding: 20px 0; }

.pixel-card {
  background: var(--pixel-surface);
  border: 1px solid var(--pixel-border);
  box-shadow: 4px 4px 0 rgba(0,0,0,0.05);
  padding: 16px;
}
.pixel-grid {
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 16px 16px;
}
.pixel-button {
  display: inline-block;
  background: var(--pixel-accent);
  color: #fff;
  border: 1px solid var(--pixel-border);
  padding: 10px 14px;
  text-decoration: none;
}
.pixel-button:hover { background: var(--pixel-accent-dark); }
.pixel-input {
  width: 100%;
  border: 1px solid var(--pixel-border);
  padding: 10px 12px;
  background: var(--pixel-surface);
}
.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row { display: flex; gap: 8px; align-items: center; }
.muted { color: var(--pixel-muted); }

@media (max-width: 768px) {
  .grid.cols-2, .grid.cols-3 { grid-template-columns: 1fr; }
}

/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; }
.toast { background: var(--pixel-surface); border: 1px solid var(--pixel-border); box-shadow: 4px 4px 0 rgba(0,0,0,0.05); padding: 10px 12px; transform: translateY(8px); opacity: 0; transition: all .18s ease; }
.toast.show { transform: translateY(0); opacity: 1; }
.toast-success { border-color: #7fdc9b; }
.toast-error { border-color: #ff9a9a; }

/* Map */
.map { display: grid; grid-template-columns: repeat(12, 24px); gap: 4px; padding: 12px; }
.map .tile { width: 24px; height: 24px; border: 1px solid var(--pixel-border); background: #ffffffb3; display: flex; align-items: center; justify-content: center; }
.bld { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 600; }
.bld-house { background: #e7f7ff; }
.bld-shop { background: #eef7e9; }
.bld-factory { background: #f8eef7; }


/* Home scene */
.scene { position: relative; height: 420px; background: var(--pixel-surface); }
.grass-layer { position: absolute; inset: 0; background-image: linear-gradient(#a9e190 2px, transparent 2px), linear-gradient(90deg, #a9e190 2px, transparent 2px), linear-gradient(#c9f2b1 1px, transparent 1px), linear-gradient(90deg, #c9f2b1 1px, transparent 1px); background-size: 32px 32px, 32px 32px, 8px 8px, 8px 8px; background-position: 0 0, 0 0, 0 0, 0 0; }
.house { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 96px; height: 64px; background: #d7c4a3; border: 1px solid var(--pixel-border); box-shadow: 4px 4px 0 rgba(0,0,0,0.05); }
.house:before { content: ; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); width: 0; height: 0; border-left: 56px solid transparent; border-right: 56px solid transparent; border-bottom: 24px solid #b1835a; }
.upgrade-btn { position: absolute; left: 50%; top: calc(45% + 56px); transform: translateX(-50%); }

/* Info panels */
.info-panels { display: grid; gap: 12px; }

/* Bottom navbar */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; background: var(--pixel-surface); border-top: 1px solid var(--pixel-border); }
.bn-item { text-align: center; border: 1px solid var(--pixel-border); padding: 10px 0; text-decoration: none; color: var(--pixel-text); background: #fff; }


/* Crossy Road-like theme overrides */
:root { --cr-grass1:#8fd14f; --cr-grass2:#7cc043; --cr-dirt:#caa66a; --cr-roof:#b1733c; --cr-shadow: rgba(0,0,0,0.18); }
.scene { position: relative; height: 440px; background: #eaf7e1; border: 1px solid var(--pixel-border); box-shadow: 8px 8px 0 var(--cr-shadow); }
.grass-layer { position:absolute; inset:0; background-image: repeating-linear-gradient(0deg, var(--cr-grass1) 0 32px, var(--cr-grass2) 32px 64px), repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 64px); background-size: 64px 64px, 64px 64px; }
.house { position:absolute; left:50%; top:44%; transform:translate(-50%,-50%); width:120px; height:88px; background: var(--cr-dirt); border:2px solid #9c8357; box-shadow: 10px 10px 0 var(--cr-shadow); }
.house:before { content:; position:absolute; left:0; right:0; top:-26px; height:26px; background: var(--cr-roof); border:2px solid #8e5f30; border-bottom:none; }
.house:after { content:; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:22px; height:30px; background:#5b4a3a; }
.upgrade-btn { position:absolute; left:50%; top: calc(44% + 74px); transform:translateX(-50%); background:#ffb84d; border-color:#e0a03f; box-shadow: 6px 6px 0 var(--cr-shadow); }
.pixel-button { border:2px solid #2e2e2e22; box-shadow: 6px 6px 0 var(--cr-shadow); }
.pixel-button:active { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--cr-shadow); }
.bottom-nav { position:fixed; left:0; right:0; bottom:0; display:flex; gap:10px; padding:10px; background:#ffffffcc; backdrop-filter:saturate(1.1) blur(4px); border-top:2px solid #2e2e2e22; box-shadow: 0 -6px 0 var(--cr-shadow); }
.bottom-nav { max-width: 460px; margin: 0 auto; }
.bn-item { text-align:center; padding:14px 0; border:2px solid #2e2e2e22; background:#fff; box-shadow: 6px 6px 0 var(--cr-shadow); font-weight:600; }
.bn-item:active { transform: translateY(2px); box-shadow: 3px 3px 0 var(--cr-shadow); }
.info-panels .pixel-card { box-shadow: 8px 8px 0 var(--cr-shadow); }


/* Cartoony animations */
@keyframes floatY { 0%,100% { transform: translate(-50%, -50%) translateY(0); } 50% { transform: translate(-50%, -50%) translateY(-6px); } }
@keyframes grassMove { 0% { background-position: 0 0, 0 0; } 100% { background-position: 64px 0, 64px 0; } }
@keyframes drift { 0% { transform: translateX(-10%); } 100% { transform: translateX(110%); } }
@keyframes wobble { 0% { transform: translate(-50%,-50%) rotate(0deg); } 20% { transform: translate(-50%,-50%) rotate(-3deg); } 50% { transform: translate(-50%,-50%) rotate(3deg); } 80% { transform: translate(-50%,-50%) rotate(-2deg); } 100% { transform: translate(-50%,-50%) rotate(0deg); } }
@keyframes bounce { 0% { transform: translateY(0); } 40% { transform: translateY(-6px); } 100% { transform: translateY(0); } }
@keyframes coinPop { 0% { opacity: 0; transform: translate(var(--sx,0), var(--sy,0)) scale(0.6) rotate(0deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--sx,0) + var(--dx,0)), calc(var(--sy,0) + var(--dy,-60px))) scale(1.1) rotate(360deg); } }
.scene { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sky-layer { position:absolute; inset:0; background: linear-gradient(#cbe9ff 0%, #dff6ff 60%, transparent 60%); z-index: 0; }
.grass-layer { bottom: 0; height: 60%; top: auto; animation: grassMove 12s linear infinite; z-index: 1; }
.house { z-index: 2; animation: floatY 3.2s ease-in-out infinite; }
.house.wobble { animation: wobble 0.6s ease; }
.cloud { position:absolute; top: 12%; left: -20%; width: 120px; height: 36px; background:#fff; border: 2px solid #e6eef7; border-radius: 18px; filter: drop-shadow(6px 6px 0 rgba(0,0,0,0.08)); animation: drift 28s linear infinite; }
.cloud.small { top: 22%; width: 80px; height: 28px; animation-duration: 22s; }
.coin { position:absolute; width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #ffe9a6, #ffc83d 60%, #e39c1a 100%); border: 2px solid #d08b17; border-radius: 50%; box-shadow: 4px 4px 0 rgba(0,0,0,0.12); animation: coinPop 900ms ease-out forwards; z-index: 3; }
.bn-item.bounce { animation: bounce 260ms ease; }
.pixel-card:hover { transform: translateY(-2px); transition: transform .15s ease; }


/* 3D Tower styles */
.building-wrap { position:absolute; left:0; right:0; top:8%; bottom:80px; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; justify-content:center; }
.tower { width: 86%; max-width: 420px; display:flex; flex-direction:column; gap: 14px;   transform-origin: top center; }
.floor3d { position:relative; background:#fff; border:2px solid #2e2e2e22; box-shadow: 8px 12px 0 rgba(0,0,0,0.18); padding: 12px; min-height: 100px; }
.floor3d:before { content:""; position:absolute; left:0; right:0; top:-10px; height:10px; background: linear-gradient(180deg, #d6c5a3, #c2ae8c); border:2px solid #b49b78; border-bottom:none; }
.floor3d:after { content:""; position:absolute; right:-10px; top:0; width:10px; bottom:0; background: linear-gradient(180deg, #e9e1d4, #d3c7b4); border:2px solid #c1b29b; border-left:none; }
.floor-head { font-weight:700; margin-bottom:8px; }
.floor-list { display:grid; gap:8px; }
.user-row { justify-content:flex-start; gap:10px; }
.user-avatar { width:28px; height:28px; display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid #2e2e2e22; box-shadow: 4px 4px 0 rgba(0,0,0,0.12); }
.user-info .user-name { font-weight:600; }
.floor-actions { justify-content:flex-end; }
.upgrade-fab { position:absolute; right:16px; bottom:96px; background:#ffb84d; border-color:#e0a03f; box-shadow: 8px 8px 0 rgba(0,0,0,0.18); }


/* 3D House/Tower visual enhancements and animations */
/* Push grass to deep background */
.grass-layer { z-index: 0; opacity: .7; height: 28%; top: auto; bottom: 0; }
.sky-layer { z-index: 0; }
.building-wrap { z-index: 3; }

/* Tower structure */
.tower { position: relative; }
.tower:before { content:; position:absolute; left:-14px; top:0; bottom:0; width:14px; background: linear-gradient(180deg, #d0c4b1, #b8a68d); border:2px solid #b29b7c; border-right:none; }
.tower:after { content:; position:absolute; right:-14px; top:0; bottom:0; width:14px; background: linear-gradient(180deg, #e9e1d4, #d3c7b4); border:2px solid #c1b29b; border-left:none; }
.roof3d { position: sticky; top: 0; height: 28px; background: #b1733c; border: 2px solid #8e5f30; border-bottom: none; box-shadow: 8px 8px 0 rgba(0,0,0,0.18); z-index: 2; }
.base3d { height: 16px; background: #a58b66; border: 2px solid #8e7656; box-shadow: 8px 8px 0 rgba(0,0,0,0.18) inset; }

/* Windows */
.floor3d .windows { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 6px 0; }
.win { height: 14px; background: linear-gradient(180deg, #def5ff, #b7e6ff); border: 2px solid #9ecbe6; box-shadow: 3px 3px 0 rgba(0,0,0,0.12); }
.win.shimmer { animation: shimmer 2.4s ease-in-out infinite; }
@keyframes shimmer { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.2); } }

/* Upgrade/build animations */
@keyframes buildDrop { 0% { transform: translateY(-40px) scale(0.98); opacity: 0; } 60% { transform: translateY(6px) scale(1.02); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,200,61,0.0); } 50% { box-shadow: 0 0 24px 8px rgba(255,200,61,0.25); } }
.floor-drop { animation: buildDrop .48s cubic-bezier(.2,.8,.2,1); }
.tower.upgrade-glow .floor3d { animation: glowPulse 1.2s ease 1; }

/* Dust puffs & sparkles */
@keyframes dust { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: .8; } 100% { opacity: 0; transform: translateY(-24px) scale(1.2); } }
.dust { position:absolute; bottom: 76px; left: 50%; width: 18px; height: 8px; background: radial-gradient(ellipse at center, rgba(175, 157, 130, .9), rgba(175, 157, 130, 0)); transform: translateX(-50%); animation: dust 600ms ease-out forwards; }
.spark { position:absolute; width: 8px; height: 8px; background: radial-gradient(circle, #fff2b8, #ffc83d); border:1px solid #e39c1a; border-radius: 50%; box-shadow: 3px 3px 0 rgba(0,0,0,.12); animation: coinPop 900ms ease-out forwards; }


/* Floor overflow fixes and mobile FAB */
.floor-list { display: flex; flex-direction: column; gap: 6px; max-height: 120px; overflow: auto; padding-right: 4px; }
.user-row { gap: 6px; flex-wrap: nowrap; align-items: center; }
.user-row > * { flex-shrink: 0; }
.user-info { min-width: 0; }
.user-info .user-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 460px) { .building-wrap { bottom: 130px; } }
.upgrade-fab { position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%); width: min(340px, 86%); text-align: center; z-index: 9; }


/* Decor positions */
.decor { position:absolute; z-index: 4; image-rendering: pixelated; }
.decor-antenna { top: -10px; left: 12px; }
.decor-billboard { top: 36px; right: -6px; }
.decor-pipe { bottom: 36px; left: -8px; }
.decor-banner { top: 90px; left: 24px; }


/* Floor actions sticky footer & visible invite button */
.floor3d { display: flex; flex-direction: column; }
.floor-list { flex: 1 1 auto; max-height: 140px; overflow: auto; padding-right: 4px; }
.floor-actions { position: sticky; bottom: 0; margin-top: 8px; padding: 10px 8px 8px; border-top: 2px solid #2e2e2e22; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.96) 30%, #fff 100%); z-index: 3; }
.floor-actions .pixel-button { width: 100%; text-align: center; }
/* Ensure last floors not hidden under fixed bars */
.tower { padding-bottom: 24px; }


/* Floor detail page styles */
.floor-detail { padding: 12px; }
.fd-header { position: sticky; top: 0; z-index: 5; display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; gap: 8px; padding: 8px 0; background: linear-gradient(180deg, #ffffff, #ffffffcc); backdrop-filter: blur(4px); }
.fd-title { text-align: center; font-weight: 700; }
.fd-meta { margin: 6px 0 10px; color: var(--pixel-muted); }
.rooms { display: grid; gap: 10px; }
.room { border: 2px solid #2e2e2e22; background: #fff; box-shadow: 6px 6px 0 rgba(0,0,0,0.12); padding: 10px; display: grid; grid-template-columns: 32px 1fr; gap: 8px; align-items: center; }
.room.occupied { border-color: #e9c56b; }
.room-avatar { width: 32px; height: 32px; display:flex; align-items:center; justify-content:center; border: 2px solid #2e2e2e22; background:#fff; }
.room-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Crane overlay */
.crane { position: absolute; top: 0; left: 0; right: 0; height: 0; z-index: 6; }
.crane-hook { position: absolute; top: -140px; left: 50%; width: 2px; height: 140px; background: #606060; animation: hookDrop 1s ease-out; }
.crane-slab { position: absolute; top: 140px; left: -60px; width: 120px; height: 16px; background: #b49b78; border: 2px solid #8e7656; animation: slabWiggle 1s ease-out; }
@keyframes hookDrop { 0% { transform: translateY(-120px); } 60% { transform: translateY(8px); } 100% { transform: translateY(0); } }
@keyframes slabWiggle { 0% { transform: rotate(-6deg); } 60% { transform: rotate(4deg); } 100% { transform: rotate(0deg); } }


/* Use assets for sky, windows, decor */
.sky-layer { background-image: url(../assets/cloud.svg), url(../assets/cloud.svg); background-repeat: repeat-x, repeat-x; background-size: 256px 96px, 160px 60px; background-position: 0 8%, 0 18%; animation: skyDrift 60s linear infinite; }
@keyframes skyDrift { 0% { background-position: 0 8%, 0 18%; } 100% { background-position: 1024px 8%, 640px 18%; } }
.windows { grid-template-columns: repeat(6, 24px); gap: 8px; }
.win { width: 24px; height: 18px; background-image: url(../assets/window.svg); background-size: cover; border: none; box-shadow: 3px 3px 0 rgba(0,0,0,0.12); }
.user-avatar { background-image: url(../assets/avatar-frame.svg); background-repeat: no-repeat; background-size: cover; }
.room.empty { background-image: url(../assets/room-empty.svg); background-repeat: no-repeat; background-position: right bottom; background-size: 60px 45px; }
.decor-antenna { content: url(../assets/antenna.svg); }
.decor-billboard { content: url(../assets/billboard.svg); }
.decor-pipe { content: url(../assets/pipe.svg); }
.decor-banner { content: url(../assets/banner.svg); }


/* Adjust grass smaller and hide banners */
.grass-layer { height: 14%; opacity: .5; }
.decor-billboard, .decor-banner { display: none !important; }

/* Floor layout fixes */
.floor3d { min-height: 140px; }
.floor-list { margin-bottom: 56px; }
.floor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.floor-actions .pixel-button { padding: 8px 10px; font-size: 13px; }


/* Non-overlap fixes for floor content */
.floor-list { padding-bottom: 120px !important; margin-bottom: 0 !important; max-height: 180px; }
.floor-actions { position: sticky; bottom: 0; }
@media (max-width: 380px) { .floor-actions { grid-template-columns: 1fr !important; } }


/* Main screen HUD, sides, and system nav */
.hud { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 12px; color: #eaf0ff; background: linear-gradient(180deg, #141c2a, #101726); border-bottom: 1px solid #26324a; }
.hud .badge { padding: 4px 8px; border: 1px solid #2f3a54; background: #1b2538; }
.scene { position: relative; height: 560px; background: #0f1621; }
.city-layer { position:absolute; inset:0; background: url(../assets/city.svg) repeat-x bottom; background-size: 800px 200px; opacity: .6; z-index: 0; }
.scene .content-grid { position:absolute; inset: 0 0 0 0; display: grid; grid-template-columns: 320px 1fr 320px; gap: 16px; padding: 16px; z-index: 3; }
.side-card { background: #111927cc; border: 1px solid #223049; color: #eaf0ff; box-shadow: 8px 8px 0 rgba(0,0,0,.3); padding: 12px; }
.side-card h3 { margin: 0 0 8px; }
.right-actions .action { display: block; text-align: left; padding: 12px; background:#152238; border:1px solid #223049; box-shadow: 6px 6px 0 rgba(0,0,0,.3); color:#eaf0ff; margin-bottom: 10px; }
.right-actions .sub { color:#9fb0d0; font-size: 12px; }
.right-actions .meta { color:#7c8fb0; font-size: 11px; }
.building-wrap { position: relative; }
.tower-home .floor3d { min-height: 36px; padding: 6px; background: #24324a; border: 1px solid #33425f; }
.tower-home .floor3d.lit { background: #2f3f5f; }
.tower-home .floor3d.locked { background: #1a2333; opacity: .5; }
.tower-home .windows { grid-template-columns: repeat(12, 12px); gap: 4px; }
.tower-home .win { width: 12px; height: 10px; background-image: none; background: #b1d8ff; border: none; box-shadow: none; }
.tower-home .locked .win { background: #2c3a55; }
.system-nav { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; padding: 8px; background: #0e1522cc; color:#cfe0ff; border-top: 1px solid #26324a; z-index: 9; }
.system-nav a { text-align: center; padding: 10px 6px; border:1px solid #223049; background:#152238; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50; display:flex; align-items:center; justify-content:center; }
.modal { width: min(680px, 92%); max-height: 80vh; overflow:auto; background:#0f1621; border:1px solid #223049; color:#eaf0ff; box-shadow: 12px 12px 0 rgba(0,0,0,.4); padding: 16px; }
.modal h3 { margin: 0 0 8px; }
.modal .muted { color:#9fb0d0; }
@media (max-width: 980px){ .scene .content-grid { grid-template-columns: 1fr; } }


/* Mobile responsiveness & safe areas */
:root { --safe-bottom: env(safe-area-inset-bottom, 0px); }
.content-grid { grid-template-areas: "left center right"; }
.left-col { grid-area: left; }
.center-col { grid-area: center; }
.right-col { grid-area: right; }
@media (max-width: 980px){ .scene { height: auto; } .scene .content-grid { grid-template-columns: 1fr; grid-template-areas: "center" "right" "left"; } }
.system-nav { padding-bottom: calc(8px + var(--safe-bottom)); }
/* Larger tap targets */
.action, .pixel-button { -webkit-tap-highlight-color: transparent; }
.action { transition: transform .09s ease; }
.action:active { transform: scale(.985); }
.btn-wide { width: 100%; text-align: center; }
/* Entrance animations & reduced motion */
@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
.enter { animation: fadeInUp .26s ease backwards; }
html.reduce-motion * { animation: none !important; transition: none !important; }
/* Modal bottom-sheet on mobile */
@keyframes sheetUp { 0% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@media (max-width: 680px){ .modal { border-radius: 14px 14px 0 0; width: 100%; max-width: 100%; position: fixed; left: 0; right: 0; bottom: 0; animation: sheetUp .18s ease; } .modal-backdrop { align-items: flex-end; } }
/* Lighter shadows on mobile for perf */
@media (max-width: 480px){ .side-card, .pixel-card, .room, .action { box-shadow: 3px 3px 0 rgba(0,0,0,.2) !important; } }


/* Mobile white gap fixes */
.scene.pixel-card { background: #0f1621 !important; border: 0; }
@media (max-width: 980px){ .scene { min-height: 100svh; } .scene .content-grid { position: relative; padding-bottom: calc(72px + var(--safe-bottom)); } }
body { background: #0b111b; }


/* Modern buttons and cards */
.pixel-button, .btn { border-radius: 12px; border: 1px solid #24324a; background: linear-gradient(180deg, #1e2a40, #162137); color: #eaf0ff; padding: 12px 14px; box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); }
.btn-primary { background: linear-gradient(180deg, #3d69ff, #294ce0); border-color: #1f3db8; }
.btn-ghost { background: #111927; border-color: #223049; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.action-card { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 12px; border-radius: 12px; background: #152238; border: 1px solid #223049; }
.action-card .icon { width: 40px; height: 40px; }
.action-card .title { color: #eaf0ff; font-weight: 600; }
.action-card .sub { color:#9fb0d0; font-size: 12px; }
/* Mobile tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: #0e1522f2; border-top: 1px solid #223049; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 8px 8px calc(8px + var(--safe-bottom)); }
.tabbar a { display: grid; justify-items: center; gap: 4px; color: #cfe0ff; text-decoration: none; }
.tabbar img { width: 22px; height: 22px; }
/* Hide previous system nav on small screens */
@media (max-width: 980px){ .system-nav { display: none; } }


/* Parallax stars & moon, neon floors, chips */
.stars-layer { position:absolute; inset:0; background: url(../assets/stars.svg) repeat; background-size: 256px 128px; opacity:.7; z-index:0; animation: starsDrift 160s linear infinite; }
@keyframes starsDrift { 0% { background-position: 0 0; } 100% { background-position: 1024px 0; } }
.moon { position:absolute; top: 8%; right: 10%; width: 64px; height: 64px; background: url(../assets/moon.svg) no-repeat center/contain; z-index:1; opacity:.9; }
.tower-home .floor3d.lit { box-shadow: 0 0 0 1px #33425f, 0 0 18px 4px rgba(88, 146, 255, .25); }
.chip { display:inline-block; padding: 4px 8px; border-radius: 999px; background: #152238; border: 1px solid #223049; color: #cfe0ff; font-size: 12px; }
.btn { border-radius: 12px; border: 1px solid #24324a; background: linear-gradient(180deg, #273754, #1b2740); color: #eaf0ff; padding: 12px 14px; box-shadow: 0 6px 16px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.06); }
.btn-primary { background: linear-gradient(180deg, #4b79ff, #2f57ee); border-color: #2547c8; }


/* Perf: GPU hints, contain, low-data */
.side-card, .floor3d, .action-card, .tabbar { contain: content; }
.cloud, .coin, .spark, .dust, .bn-item, .btn:active { will-change: transform; }
.low-data .stars-layer, .low-data .cloud, .low-data .moon { display: none !important; }


/* Polished topbar */
.topbar { position: sticky; top: 0; z-index: 12; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px; background: linear-gradient(180deg, #0f1621f2, #0f1621cc); backdrop-filter: blur(8px); border-bottom: 1px solid #223049; }
.topbar .row { display: grid; grid-auto-flow: column; gap: 10px; align-items: center; justify-content: start; }
.hud-chip { display: inline-grid; grid-auto-flow: column; gap: 6px; align-items: center; padding: 6px 10px; background: #111927; border: 1px solid #223049; color: #cfe0ff; border-radius: 999px; }
.hud-chip img { width: 16px; height: 16px; }
.hud-actions { display: grid; grid-auto-flow: column; gap: 8px; justify-content: end; }
@media (max-width: 680px){ .topbar .row { grid-auto-flow: row; gap: 8px; } .hud-actions { justify-content: start; } }


/* Mobile home facade */
.mobile-home { padding: 12px; display: grid; gap: 12px; }
.house-card { background: linear-gradient(180deg,#131c2a,#0f1621); border:1px solid #223049; border-radius: 16px; padding: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.house-facade { position: relative; margin: 0 auto; width: min(380px, 92%); aspect-ratio: 3/4; background: #1a2333; border:1px solid #2a3954; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.house-roof { position:absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 70%; height: 18px; background: #b1733c; border:2px solid #8e5f30; border-bottom:none; border-radius: 6px 6px 0 0; }
.house-windows { position:absolute; inset: 14% 10% 12% 10%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.house-window { height: 36px; background: #b1d8ff; border:2px solid #9ecbe6; border-radius: 6px; box-shadow: 0 0 10px rgba(88,146,255,.25); }
.house-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 680px){ .scene .content-grid { display: none; } }


@media (max-width: 680px){ .topbar { display: none !important; } }


body.mobile .topbar { display: none !important; }


/* House facade details */
.house-sign { position:absolute; top: 6%; left: 50%; transform: translateX(-50%); padding: 4px 10px; border-radius: 8px; background: #152238cc; border:1px solid #223049; color:#cfe0ff; font-weight:600; font-size: 12px; }
.house-door { position:absolute; bottom: 3%; left: 50%; transform: translateX(-50%); width: 18%; height: 14%; background: #5b4a3a; border:2px solid #3f3228; border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.04); }
.house-balcony { position:absolute; left: 8%; right: 8%; bottom: 20%; height: 6px; background: #2b3b58; border:1px solid #3a4b6d; border-radius: 3px; box-shadow: 0 0 8px rgba(88,146,255,.15); }
.chimney { position:absolute; top: -10px; right: 12%; width: 12px; height: 22px; background:#6b5a4a; border:2px solid #514436; border-bottom:none; border-radius: 4px 4px 0 0; }
.smoke { position:absolute; top: -8px; left: 50%; width: 8px; height: 8px; background: radial-gradient(circle,#e5eef9,#b8c7df); border-radius: 50%; opacity:.8; animation: puff 2.2s ease-in-out infinite; }
.smoke.s2 { left: 60%; animation-delay:.6s; }
.smoke.s3 { left: 40%; animation-delay:1.2s; }
@keyframes puff { 0% { transform: translate(-50%,0) scale(.6); opacity:.0 } 30% { opacity:.8 } 100% { transform: translate(-50%,-24px) scale(1.1); opacity:0 } }
.house-window.window-lit { background: #ffd34d; border-color:#e0c06b; box-shadow: 0 0 16px rgba(255,211,77,.45); }
.house-window.window-empty { opacity:.35; }
@media (max-width:680px){ .house-card { margin-top: 8px; } }


/* Native per-floor rows in mobile house */
.floors-stack { position:absolute; inset: 14% 6% 12% 6%; display: flex; flex-direction: column; gap: 6px; }
.floor-row { position: relative; display: grid; grid-template-columns: auto 10px 1fr; align-items: center; gap: 8px; height: 34px; background: #1b263a; border:1px solid #2a3954; border-radius: 6px; padding: 4px 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.02); }
.floor-label { font-size: 11px; padding: 3px 8px; border-radius: 999px; background:#152238; border:1px solid #223049; color:#cfe0ff; }
.shaft { width: 10px; height: 100%; background: linear-gradient(180deg,#2a3954,#1c2940); border-radius: 3px; }
.floor-windows { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.floor-windows .w { height: 20px; border-radius: 4px; border:1px solid #2a3954; background:#2a3954; }
.floor-windows .w.lit { background:#ffd34d; border-color:#e0c06b; box-shadow: 0 0 12px rgba(255,211,77,.45); }
.floor-row:active { transform: translateY(1px); }


/* Ensure decorative layers do not block touches */
.stars-layer, .city-layer, .cloud, .moon, .grass-layer { pointer-events: none; }
/* Raise mobile home UI above background */
.mobile-home, .house-card, .house-facade, .house-actions { position: relative; z-index: 5; }
/* Scrollable window for floors */
.house-scroll { position: absolute; inset: 14% 10% 16% 10%; overflow-y: auto; -webkit-overflow-scrolling: touch; pointer-events: auto; }
/* Keep actions above any overlays and tabbar */
.house-actions { z-index: 6; }


/* Mobile dashboard like screenshot */
.dash { padding: 12px; }
.dash-card { background:#0f1621f2; border:1px solid #223049; border-radius:16px; padding: 14px; color:#eaf0ff; box-shadow: 0 10px 24px rgba(0,0,0,.45); }
.dash-grid { display:grid; grid-template-columns: 100px 1fr; gap: 12px; align-items:center; }
.metric { font-size:28px; font-weight:700; }
.subtle { color:#9fb0d0; }
.tiles { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.tile { background:#152238; border:1px solid #223049; border-radius:12px; padding:12px; text-align:center; }
.big-cta { display:block; margin-top:12px; padding:14px; border-radius:12px; background: linear-gradient(180deg,#33c06b,#25a857); border:1px solid #1c8c47; color:#fff; text-align:center; font-weight:700; }
.floor-widget { background:#111927; border:1px solid #223049; border-radius:16px; padding: 12px; margin-top: 12px; }
.progress { height: 6px; background:#1d2a3d; border-radius: 999px; overflow:hidden; }
.progress > div { height: 100%; background:#2fce7a; }
.room-grid { display:grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 12px; }
.room { height: 52px; border-radius: 12px; display:flex; align-items:center; justify-content:center; border:1px solid #223049; }
.room.occ { background:#1f3d2e; color:#9ff0b7; }
.room.empty { background:#1a2333; }
.room.lock { background:#2b1f1f; color:#caa; }



/* Tile inner text boxes */
.tile .title { font-weight: 700; margin-bottom: 4px; }
.tile .desc { font-size: 12px; color: #9fb0d0; }
/* Label "pill" window style */
.pill { display: inline-block; padding: 6px 10px; border-radius: 12px; background: #ffffff0d; border: 1px solid #223049; }
/* Make tiles look like boxed windows */
.tile { background:#152238; border:1px solid #223049; border-radius:12px; padding:12px; text-align:center; box-shadow: 0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04); }


/* Bring dashboard card to front and create button-like tiles */
.dash, .dash-card { position: relative; z-index: 6; }
.scene .sky-layer, .scene .stars-layer, .scene .city-layer, .scene .moon, .scene .grass-layer, .scene .cloud { z-index: 1; }
.tiles .btn-tile { display:flex; align-items:center; gap:12px; padding:14px; border-radius:16px; background:#f1f5f9; border:1px solid #e2e8f0; box-shadow: 0 2px 6px rgba(15,23,42,.08); cursor:pointer; transition: transform .06s ease, box-shadow .2s ease; text-align:left; min-height:64px; }
.tiles .btn-tile:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(15,23,42,.1); }
.tiles .btn-tile .icon { width:28px; height:28px; display:block; }
.tiles .btn-tile .title { font-weight:700; color:#0f172a; }
.tiles .btn-tile .desc { font-size:12px; color:#475569; }
@media (prefers-color-scheme: dark){
  .tiles .btn-tile { background:#0f172a; border-color:#1e293b; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
  .tiles .btn-tile .title { color:#e2e8f0; }
  .tiles .btn-tile .desc { color:#94a3b8; }
}


/* Separate tile grids for stable layout */
.tiles-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tiles-3 { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 540px){ .tiles-3 { grid-template-columns: 1fr 1fr; } }
.tile { min-height: 56px; }


/* Expand button tiles and rows so labels fit */
.tiles, .tiles-2, .tiles-3 { width: 100%; grid-auto-rows: minmax(72px, auto); }
.tiles .btn-tile { padding:16px; min-height:72px; text-decoration:none; align-items:center; }
.tiles .btn-tile:hover { text-decoration:none; }
.tiles .btn-tile > div { display:grid; gap:2px; line-height:1.15; word-break: normal; white-space: normal; hyphens: auto; }
@media (max-width: 390px){ .tiles-3 { grid-template-columns: 1fr; } .tiles .btn-tile { min-height: 76px; } }


/* Compact 3-in-row action buttons */
.actions-compact { display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.actions-compact .btn-tile { padding:10px; min-height:auto; aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.actions-compact .btn-tile .icon { width:22px; height:22px; }
.actions-compact .btn-tile .title { font-size:12px; line-height:1.15; }
@media (max-width: 360px){ .actions-compact { grid-template-columns: repeat(3, 1fr); } }


/* Smaller, no-wrap titles for 2-col action tiles */
.tiles-2 .btn-tile .title { font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.tiles-2 .btn-tile > div { hyphens: auto; word-break: keep-all; }


@media (max-width: 420px){
  .tiles-2 .btn-tile { flex-direction: column; align-items: center; text-align: center; min-height: 76px; }
  .tiles-2 .btn-tile .icon { width: 26px; height: 26px; }
  .tiles-2 .btn-tile .title { font-size: 13px; -webkit-line-clamp: 2; }
  .tiles-2 .btn-tile > div { width: 100%; }
}

.dash-card .metric, .dash-card .subtle { text-shadow: 0 1px 0 rgba(0,0,0,.55); }

.dash-grid img { filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }


/* Floor widget title emphasis */
.floor-widget .floor-title { font-weight: 800; color: #eaf0ff; letter-spacing: 0.2px; text-shadow: 0 1px 0 rgba(0,0,0,.45); }

.floor-widget { touch-action: pan-y; }


/* Swipe animation for floor widget */
.swipe-stage { position: relative; overflow: hidden; }
.swipe-stage .floor-widget { position: relative; }
.slide-in-from-right { animation: slideInRight .22s ease both; }
.slide-in-from-left { animation: slideInLeft .22s ease both; }
.slide-out-to-left { animation: slideOutLeft .22s ease both; }
.slide-out-to-right { animation: slideOutRight .22s ease both; }
@keyframes slideInRight { 0% { transform: translateX(100%); opacity:.01; } 100% { transform: translateX(0); opacity:1; } }
@keyframes slideInLeft  { 0% { transform: translateX(-100%); opacity:.01; } 100% { transform: translateX(0); opacity:1; } }
@keyframes slideOutLeft  { 0% { transform: translateX(0); opacity:1; } 100% { transform: translateX(-40%); opacity:0; } }
@keyframes slideOutRight { 0% { transform: translateX(0); opacity:1; } 100% { transform: translateX(40%); opacity:0; } }


/* Floor detail redesign */
.floor-detail { padding: 14px; color:#eaf0ff; }
.fd-title-big { text-align:center; font-weight: 800; font-size: 28px; margin: 4px 0 6px; }
.fd-sub { text-align:center; color:#9fb0d0; margin-bottom: 10px; }
.fd-progress { height: 8px; background:#1d2a3d; border-radius:999px; overflow:hidden; margin: 0 auto 14px; }
.fd-progress > div { height:100%; background:#2fce7a; }
.fd-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 420px){ .fd-grid { grid-template-columns: repeat(3, 1fr); } }
.fd-card { background:#111927; border:1px solid #223049; border-radius:14px; padding: 10px; text-align:center; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.fd-ava { width: 56px; height: 56px; margin: 0 auto 8px; border-radius: 50%; background: #c2d4ea; opacity: .9; box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.fd-name { font-weight: 700; }
.fd-rent { color:#9fb0d0; font-size: 12px; }

.floor-detail { padding-bottom: calc(72px + var(--safe-bottom)); }


/* Plan page - minimal list */
.plan-page { padding: 12px; color:#eaf0ff; }
.plan-title { text-align:center; font-weight:800; font-size:22px; margin: 6px 0 10px; }
.plan-grid { display:grid; grid-template-columns: 1fr; gap: 10px; padding-bottom: calc(72px + var(--safe-bottom)); }
.plan-card { display:block; padding: 12px; border-radius: 12px; background:#111927; border:1px solid #223049; color:#eaf0ff; text-decoration: none; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.plan-level { font-weight: 700; }
.plan-meta { color:#9fb0d0; font-size: 12px; margin-top: 4px; }


/* Plan page redesigned to match template */
.plan-page { padding: 12px; color:#eaf0ff; }
.plan-search { margin-bottom: 10px; }
.plan-input { width: 100%; padding: 12px 14px; border-radius: 12px; background:#0f1621; border:1px solid #223049; color:#eaf0ff; }
.plan-list { display: grid; gap: 12px; padding-bottom: calc(72px + var(--safe-bottom)); }
.plan-card { background:#111927; border:1px solid #223049; border-radius: 14px; padding: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.plan-card-head { display: grid; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 6px; }
.plan-level { font-size: 20px; font-weight: 800; }
.plan-right { color:#cfe0ff; font-weight: 700; }
.plan-meta { color:#9fb0d0; margin-bottom: 8px; }
.plan-progress { height: 8px; background:#1d2a3d; border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.plan-progress > div { height: 100%; background:#2fce7a; }
.plan-avatars { display: grid; grid-auto-flow: column; grid-auto-columns: 40px; gap: 10px; margin-bottom: 10px; }
.plan-avatars .av { width: 40px; height: 40px; border-radius: 10px; background:#243142; border:1px solid #2a3a52; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.plan-avatars .av.filled { background:#89a8c8; border-color:#9fb3cf; }
.plan-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan-ctas .btn { text-align: center; }
@media (max-width: 380px){ .plan-card-head { grid-template-columns: 1fr; gap: 4px; } }


/* Upgrade page styles */
.upgrade-page { padding: 12px; color:#eaf0ff; padding-bottom: calc(90px + var(--safe-bottom)); }
.up-header-card { display:grid; grid-template-columns: 1fr 120px; gap: 10px; align-items:center; background:#111927; border:1px solid #223049; border-radius:16px; padding: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.25); margin-bottom: 12px; }
.up-header-title { font-weight: 800; font-size: 22px; margin-bottom: 6px; }
.up-header-meta { color:#9fb0d0; line-height: 1.5; }
.up-weights { font-weight: 800; margin-top: 8px; }
.up-ill { width: 100%; height: 90px; border-radius: 10px; background:#243142; display:flex; align-items:center; justify-content:center; border:1px solid #2a3a52; }
.up-ill img { max-width: 100%; max-height: 100%; opacity: .9; }
.up-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
@media (max-width: 480px){ .up-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px; } .up-card { padding: 6px; } .up-card .title { font-size: 14px; } .up-row { font-size: 11.5px; } .up-badge { width:22px; height:22px; } .up-card .btn { padding:7px 9px; font-size:12.5px; } }
.up-card { background:#111927; border:1px solid #223049; border-radius:12px; padding: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.22); }
.up-card .title { font-weight: 800; font-size: 15px; margin: 4px 0; }
.up-row { color:#9fb0d0; margin: 4px 0; font-size: 12px; line-height: 1.3; }
.up-cost { color:#77e08f; font-weight: 700; }
.up-badge { width:24px; height:24px; border-radius: 8px; display:flex; align-items:center; justify-content:center; background:#0f172a; border:1px solid #1e293b; color:#cfe0ff; font-size: 12px; }
.up-cta { margin-top: 10px; }
.up-progress-wrap { background:#0f172a; border:1px solid #223049; border-radius: 12px; padding: 10px 12px; }
.up-progress-text { font-weight: 700; margin-bottom: 6px; }
.up-progress { height: 8px; background:#1d2a3d; border-radius:999px; overflow:hidden; }
.up-progress > div { height: 100%; background:#2fce7a; }
.up-note { color:#9fb0d0; margin-top: 12px; }

.up-card .btn { padding: 8px 10px; font-size: 13px; }


/* Upgrade card text wrapping and button alignment */
.up-card { display: flex; flex-direction: column; min-height: 150px; }
.up-card .title { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; hyphens: auto; }
.up-row { word-break: break-word; hyphens: auto; }
.up-cta { margin-top: auto; }
.up-card .btn { width: 100%; display: inline-block; text-align: center; }


/* Treasury page */
.treasury-page { padding: 12px; color:#eaf0ff; padding-bottom: calc(90px + var(--safe-bottom)); }
.tr-head { display:grid; grid-template-columns: 96px 1fr; gap: 14px; align-items:center; background:#111927; border:1px solid #223049; border-radius:16px; padding: 14px; box-shadow: 0 6px 16px rgba(0,0,0,.25); margin-bottom: 12px; }
.tr-head .ill { width:96px; height:96px; border-radius: 14px; background:#243142; border:1px solid #2a3a52; display:flex; align-items:center; justify-content:center; }
.tr-title { font-weight: 800; font-size: 22px; letter-spacing:.4px; }
.tr-sub { color:#9fb0d0; margin-top: 2px; }
.tr-amount { font-weight: 900; font-size: 36px; color:#35e07b; margin: 6px 0; }
.tr-metrics { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; color:#cfe0ff; margin-top: 6px; }
.tr-actions { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.tr-actions .btn { text-align:center; }
.tr-board { background:#111927; border:1px solid #223049; border-radius:16px; padding: 12px; box-shadow: 0 6px 16px rgba(0,0,0,.25); }
.tr-board h3 { margin: 0 0 8px; font-size: 18px; }
.tr-list { list-style:none; padding:0; margin:0; display:grid; gap: 8px; }
.tr-row { display:grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items:center; }
.tr-you { color:#7af7a5; }
.tr-warn { display:grid; grid-template-columns: 18px 1fr; gap: 8px; align-items:start; margin-top: 12px; color:#cfe0ff; }
.tr-warn .icon { font-size: 18px; line-height: 18px; }


/* Home tiles text polish */
.tiles .btn-tile, .tiles .tile { text-align: center; }
.tiles .btn-tile .title, .tiles .tile .title { white-space: normal; word-break: break-word; hyphens: auto; overflow: visible; display: block; line-height: 1.2; }
.tiles .btn-tile .desc { font-size: 12px; color:#9fb0d0; }
.tiles .btn-tile { min-height: auto; }
.tiles.tiles-2 { grid-template-columns: 1fr 1fr; gap: 10px; }

.tiles { grid-auto-rows: minmax(72px, auto); }

@media (max-width: 680px){ .scene { height: auto; min-height: 100svh; } }

.dash { padding-bottom: calc(96px + var(--safe-bottom)); }

.floor-widget { cursor: grab; margin-bottom: 16px; }