:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --coral: #e86f68;
  --yellow: #f6c632;
  --ink: #584732;
  --cream: #fffaf0;
  --mint: #68bca7;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: #20211f; overflow: hidden; }
button { font: inherit; touch-action: manipulation; }
button:focus-visible { outline: 4px solid #258d7c; outline-offset: 2px; }
.game-shell { position: relative; width: min(100vw, calc(100dvh * .45)); height: min(100dvh, calc(100vw / .45)); min-height: 620px; margin: 0 auto; overflow: hidden; background: #fff4df; box-shadow: 0 0 42px #050504aa; isolation: isolate; }
.world { position: absolute; inset: 0; background: url("assets/apartment-scene.png") center top / 100% 100% no-repeat; }
.world::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 0 47%, #6f51401c 59%, transparent 68%); }
.hud { position: absolute; z-index: 8; top: max(24px, env(safe-area-inset-top)); left: 4.5%; right: 4.5%; display: grid; grid-template-columns: 19% 39% 25% 12%; gap: 2%; align-items: center; }
.level-badge, .money-chip, .gem-chip { height: clamp(34px, 4.1vh, 48px); border-radius: 999px; background: #fffdf1; border: 3px solid #fff; box-shadow: 0 3px 0 #8c6e3e52; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.level-badge { position:relative; border:3px solid #fff; background: var(--yellow); gap: 4px; transform: rotate(-2deg); cursor:pointer; }
.level-badge span { font-size: 10px; font-weight: 900; }
.level-badge strong { font-size: 22px; }
.level-badge i { position:absolute; right:-5px; top:-7px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:#e95f51; color:white; border:2px solid white; font-style:normal; font-weight:900; font-size:12px; animation:badge-pop 1.15s ease-in-out infinite; }
@keyframes badge-pop { 50% { transform:scale(1.14) rotate(7deg); } }
.money-chip { justify-content: flex-start; gap: 8px; padding: 0 12px; }
.cash-mark { display: grid; place-items: center; width: 26px; height: 19px; border-radius: 6px; background: #27aa87; color: white; font-weight: 900; transform: rotate(-9deg); }
.money-chip strong { font-size: clamp(17px, 2.4vh, 27px); letter-spacing: .02em; }
.gem-chip { gap: 8px; }
.gem-chip i { width: 22px; height: 11px; border-radius: 8px 3px 3px 8px; background: #e7a92e; transform: rotate(-12deg); box-shadow: inset 0 0 0 3px #ffd96b; }
.gem-chip i::after { content:""; display:block; width:8px; height:7px; margin:2px 0 0 16px; border-bottom:4px solid #e7a92e; border-right:4px solid #e7a92e; }
.gem-chip strong { font-size:12px; }
.menu-button { height: 40px; border: 0; border-radius: 50%; background: #fffdf1; padding: 9px; display: grid; align-content: center; gap: 3px; box-shadow: 0 3px 0 #8c6e3e52; }
.menu-button span { height: 3px; border-radius: 99px; background: #d49b29; }
.room-hit { position: absolute; z-index: 4; top: 13%; left: 6%; width: 88%; height: 42%; border: 0; background: transparent; cursor: pointer; }
.room-hit:focus-visible { outline: none; background: #5cb8a00d; }
.interior-layer { position:absolute; z-index:4; inset:0; overflow:hidden; pointer-events:none; clip-path:polygon(7% 15%,93% 15%,93% 55%,7% 55%); }
.world.room-102-world { filter:hue-rotate(-8deg) saturate(.96); }
.world.room-103-world { filter:hue-rotate(7deg) saturate(.92); }
.world.room-104-world { filter:hue-rotate(-18deg) saturate(1.02); }
.world.room-105-world { filter:hue-rotate(18deg) saturate(.94); }
.world[class*="room-10"] .hud,.world[class*="room-10"] .task-ribbon,.world[class*="room-10"] .room-switcher,.world[class*="room-10"] .tenant,.world[class*="room-10"] .placed-furniture,.world[class*="room-10"] .hint,.world[class*="room-10"] .task-toast { filter:none; }
.sprite { background-image: url("assets/sprites.png"); background-repeat: no-repeat; background-size: 300% 200%; }
.tenant { position: absolute; z-index: 5; top: 27%; left: 43%; width: 15%; aspect-ratio: 2 / 3; background-position: 0 0; filter: drop-shadow(0 4px 2px #68462a55); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.tenant.alt { background-position:50% 0; }
.tenant.walking { animation: tenant-arrive 1.7s cubic-bezier(.2,.8,.2,1) both; }
.tenant.absent { opacity:0; pointer-events:none; }
@keyframes tenant-arrive { 0% { transform: translate(-140%, 70%) scale(.78); opacity: .2; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
.placed-furniture { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.placed { position: absolute; background: url("assets/sprites.png") no-repeat; background-size: 300% 200%; filter: drop-shadow(0 5px 3px #68462a42); animation: place-pop .55s cubic-bezier(.18,.89,.32,1.35) both; }
.placed.desk { width: 30%; aspect-ratio: 1.15; top: 29%; left: 12%; background-position: 100% 0; }
.placed.kitchen { width: 23%; aspect-ratio: .82; top: 26%; right: 6%; background-position: 0 100%; }
.placed.mailbox { width: 13%; aspect-ratio: .7; top: 18%; left: 23%; background-position: 50% 100%; }
.placed.rug { width: 29%; aspect-ratio: 1.16; top: 38%; left: 37%; background-position: 100% 100%; }
@keyframes place-pop { 0% { transform: translateY(-18px) scale(.55); opacity: 0; } 72% { transform: translateY(0) scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.placement-glow { position: absolute; z-index: 3; width: 26%; height: 7%; top: 42%; left: 32%; border-radius: 20%; background: #20dc45b5; transform: skewY(-13deg) scale(0); box-shadow: 0 0 20px #20dc45; }
.placement-glow.active { animation: glow .62s ease-out; }
@keyframes glow { 0% { transform: skewY(-13deg) scale(.2); opacity: 0; } 35% { transform: skewY(-13deg) scale(1); opacity: 1; } 100% { transform: skewY(-13deg) scale(1.25); opacity: 0; } }
.hint { position: absolute; z-index: 7; top: 48.5%; left: 50%; transform: translateX(-50%); white-space: nowrap; border: 3px solid #fff; border-radius: 999px; padding: 9px 16px; color: #fff; background: #5a4537db; font-weight: 900; font-size: clamp(12px, 1.8vh, 18px); animation: hint-bob 1.2s ease-in-out infinite; }
@keyframes hint-bob { 50% { transform: translate(-50%, -5px); } }
.task-ribbon { position:absolute; z-index:9; top:calc(max(24px, env(safe-area-inset-top)) + clamp(47px, 5.1vh, 57px)); left:20%; right:20%; min-height:39px; padding:5px 11px; display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; border:3px solid #fff; border-radius:13px; color:#60482b; background:#fff9dfeb; box-shadow:0 3px 0 #7c5a3242; text-align:left; }
.task-ribbon span { grid-row:1/3; padding:4px 7px; border-radius:8px; background:#e9a94a; color:white; font-size:9px; font-weight:900; }
.task-ribbon strong { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }.task-ribbon b { font-size:9px; color:#5ca04a; }
.task-ribbon.claimable { background:#f4ffdc; animation:ribbon-ready 1.4s ease-in-out infinite; }
@keyframes ribbon-ready { 50% { transform:translateY(-2px); box-shadow:0 6px 0 #7aaa3f42; } }
.room-switcher { position:absolute; z-index:10; right:2.3%; top:16%; display:grid; gap:5px; }
.room-pill { width:54px; min-height:43px; padding:3px; border:3px solid #fff; border-radius:12px; background:#fff8e7e8; color:#614a31; box-shadow:0 3px 0 #674a3040; }
.room-pill strong,.room-pill span { display:block; }.room-pill strong { font-size:14px; line-height:1; }.room-pill span { margin-top:2px; font-size:7px; line-height:1; font-weight:900; color:#9e7442; }
.room-pill.active { background:#f4c737; transform:translateX(-4px); }.room-pill.locked { filter:grayscale(.8); opacity:.66; }
.world.building-transition { animation:building-swipe .75s cubic-bezier(.3,.75,.2,1); }
@keyframes building-swipe { 0% { transform:translateX(0); opacity:1; } 42% { transform:translateX(-18%); opacity:.18; } 43% { transform:translateX(18%); } 100% { transform:translateX(0); opacity:1; } }
.management { position: absolute; z-index: 12; left: 0; right: 0; bottom: 0; height: 48%; background: #fffdf7; border-radius: 24px 24px 0 0; box-shadow: 0 -8px 24px #6a3f2855; transform: translateY(102%); transition: transform .42s cubic-bezier(.2,.85,.2,1); }
.management.open { transform: translateY(0); }
.panel-handle { position: absolute; top: 8px; left: 42%; width: 16%; height: 5px; border-radius: 9px; background: #b9916388; }
.unit-header { height: 22%; padding: 18px 7% 8px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 13px; color: var(--ink); background: linear-gradient(135deg, #f5c42c, #ffd857); border-radius: 24px 24px 0 0; }
.unit-header small { display: block; font-weight: 800; opacity: .7; }
.unit-header h1 { margin: -2px 0 0; font-size: clamp(25px, 3.6vh, 38px); line-height: 1; }
.occupancy { width: 54px; aspect-ratio: 1; border-radius: 50%; background: #fffdf5; box-shadow: inset 0 0 0 7px #8fcf77; display: grid; place-items: center; align-content: center; line-height: 1; transform: rotate(3deg); }
.occupancy strong { font-size: 14px; }.occupancy span { font-size: 8px; margin-top: 3px; }
.close-panel { border: 0; width: 32px; height: 32px; border-radius: 10px; background: #fff5bd; color: #916d20; font-size: 25px; font-weight: 900; }
.tabs { height: 12%; display: grid; grid-template-columns: repeat(3,1fr); background: #f7c93b; }
.tab { border: 0; color: #8b6125; background: #efb931; font-weight: 900; font-size: clamp(14px, 2vh, 20px); }
.tab.active { background: #fffdf7; color: #493722; border-radius: 12px 12px 0 0; }
.income-row { height: 17%; padding: 7px 6%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eadfc9; }
.income-row > div { color: #7b6a55; }.income-row span { display:block; font-size: 11px; font-weight: 800; }.income-row strong { color: #4d9f45; font-size: 16px; }.income-row b { font-size: 23px; }.income-row small { display:block; margin-top:1px; color:#9a856b; font-size:9px; font-weight:800; }
.rent-button { border: 0; border-radius: 13px; min-width: 34%; padding: 7px 12px; color: white; background: #62aa3d; box-shadow: 0 4px 0 #3d7d28; }
.rent-button:disabled { filter:grayscale(.7); opacity:.65; }.rent-button.ready { animation:rent-ready 1.05s ease-in-out infinite; }
@keyframes rent-ready { 50% { transform:translateY(-2px) scale(1.02); } }
.rent-button span { font-size: 10px; }.rent-button strong { display: block; color: white; font-size: 16px; }.rent-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #3d7d28; }
.catalog { height: 49%; padding: 12px 5% calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; overflow-y: auto; }
.item-card { position: relative; border: 0; border-radius: 14px; padding: 4px; background: #f4eddf; color: var(--ink); display: grid; grid-template-rows: 1fr auto auto; place-items: center; min-height: 92px; }
.item-card .mini-sprite { width: 80%; aspect-ratio: 1.15; background: url("assets/sprites.png") no-repeat; background-size: 300% 200%; }
.item-card[data-item="bed"] .mini-sprite { background: none; position: relative; }
.item-card[data-item="bed"] .mini-sprite::before { content: ""; position:absolute; inset: 22% 7%; background:#f8e9ca; border:3px solid #8d693b; border-radius:10px 15px 6px 6px; transform:skewY(-8deg); }
.item-card[data-item="desk"] .mini-sprite { background-position: 100% 0; }
.item-card[data-item="kitchen"] .mini-sprite { background-position: 0 100%; }
.item-card[data-item="mailbox"] .mini-sprite { background-position: 50% 100%; }
.item-card[data-item="rug"] .mini-sprite { background-position: 100% 100%; }
.item-card span { font-weight: 900; font-size: 11px; }.item-card strong { padding: 2px 7px; border-radius: 99px; color: #fff; background: #e1943c; font-size: 11px; }
.item-card.owned { background: #f8cb35; }.item-card.owned strong { background: #8b782d; }.item-card.locked { filter: grayscale(.7); opacity: .6; }
.task-toast { position: absolute; z-index: 16; top: 8%; left: 9%; right: 9%; display: flex; gap: 12px; align-items: center; padding: 12px 15px; border: 3px solid #fff; border-radius: 18px; background: #fffdf3; color: #5a4a36; box-shadow: 0 6px 14px #4f392b42; transform: translateY(-180%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .45s cubic-bezier(.2,.85,.2,1), opacity .2s; }
.task-toast.show { transform: translateY(0); opacity: 1; visibility: visible; }.task-toast .check { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#77bf44; color:white; font-size:28px; font-weight:900; }.task-toast strong { display:block; font-size:15px; }.task-toast small { font-size:11px; color:#8b7457; }
.modal-layer { position: absolute; z-index: 30; inset: 0; background: #34413786; backdrop-filter: blur(1px); }
.modal-layer.hidden { display: none; }
.building-layer,.tenant-select-layer { position:absolute; z-index:38; inset:0; display:none; place-items:center; padding:7%; background:#3d382fc9; backdrop-filter:blur(4px); }
.building-layer.open,.tenant-select-layer.open { display:grid; }
.building-card,.tenant-select-card { width:100%; padding:25px 22px 22px; border:3px solid white; border-radius:25px; background:#fff9e9; color:#5b4831; text-align:center; box-shadow:0 15px 45px #25180f66; }
.building-card>small,.tenant-select-card>small { color:#ce873d; font-weight:900; }
.building-card h2,.tenant-select-card h2 { margin:6px 0 8px; font-size:29px; }.building-card p,.tenant-select-card>p { margin:0 auto 17px; max-width:30ch; color:#826f57; font-size:12px; line-height:1.55; }
.building-icon { position:relative; width:105px; height:92px; margin:-64px auto 15px; display:grid; place-items:center; border:5px solid white; border-radius:18px 18px 10px 10px; background:#e18d55; box-shadow:inset 0 -16px 0 #c46b40; transform:rotate(-2deg); }
.building-icon::before { content:""; position:absolute; top:-25px; border-left:60px solid transparent; border-right:60px solid transparent; border-bottom:36px solid #9b5942; }
.building-icon span { position:relative; z-index:1; padding:6px 12px; border-radius:8px; background:#fff0cf; font-size:23px; font-weight:900; }.building-icon i { position:absolute; z-index:2; right:-14px; bottom:-11px; width:42px; height:42px; display:grid; place-items:center; border:4px solid white; border-radius:50%; background:#f4c73b; color:#77531d; font-size:9px; font-style:normal; font-weight:900; }
.building-card button { width:100%; min-height:48px; border:0; border-radius:13px; font-weight:900; }.building-card #unlockBuilding { display:flex; align-items:center; justify-content:center; gap:13px; color:white; background:#5aa63a; box-shadow:0 5px 0 #397624; font-size:16px; }.building-card #unlockBuilding strong { color:#fff1a6; }.building-card .quiet-button { margin-top:10px; min-height:38px; color:#8a745b; background:transparent; }
.tenant-select-card { text-align:left; }.tenant-select-card h2,.tenant-select-card>p,.tenant-select-card>small { display:block; text-align:center; }
.tenant-options { display:grid; gap:10px; }.tenant-options button { width:100%; padding:10px; display:grid; grid-template-columns:54px 1fr auto; gap:10px; align-items:center; border:2px solid #e7d9bf; border-radius:15px; color:#5b4831; background:#fffdf5; text-align:left; }.tenant-options button:active { transform:translateY(2px); }.tenant-choice-avatar { width:52px; height:52px; border-radius:15px; background-position:0 0; background-color:#f0d3b8; }.tenant-choice-avatar.alt { background-position:50% 0; }.tenant-options span strong,.tenant-options span small { display:block; }.tenant-options span strong { font-size:14px; }.tenant-options span small { margin-top:4px; color:#917b60; font-size:10px; }.tenant-options b { padding:7px 10px; border-radius:9px; color:white; background:#56a642; font-size:11px; }
.contract { position: absolute; top: 17%; left: 7%; right: 7%; min-height: 45%; padding: 24px 9% 22px; border-radius: 21px; background: #fffdf3; color: #64533b; box-shadow: 0 14px 40px #2b1d1466; transform: rotate(-.35deg); }
.contract::before { content:""; position:absolute; inset:10px; border:2px dashed #d7cdb9; border-radius:14px; pointer-events:none; }
.contract h2 { margin: 0; text-align:center; font-size: clamp(25px, 3.8vh, 40px); }.contract-sub { text-align:center; margin:5px 0 14px; font-size:11px; font-weight:800; }
.contract-x { position:absolute; z-index:1; right:12px; top:11px; width:38px; height:38px; border:0; border-radius:50%; background:#e3b72b; color:white; font-size:25px; font-weight:900; }
.tenant-card { display:flex; align-items:center; justify-content:center; gap:9px; margin:0 auto 7px; }.tenant-card strong { padding:4px 10px; border-radius:7px; color:white; background:#45a78f; }.avatar-crop { width:58px; height:58px; overflow:hidden; border-radius:50%; background:#f1d8bf; border:3px solid #fff; box-shadow:0 2px 0 #d7b98c; }.tenant-avatar { width:100%; height:150%; background-position:0 0; transform:scale(1.4) translateY(8%); }
.contract ol { position:relative; z-index:1; margin:9px 0 17px; padding-left:22px; font-size:12px; font-weight:800; line-height:1.8; }
.confirm-button { position:relative; z-index:2; width:100%; min-height:48px; border:0; border-radius:13px; background:#5aab36; color:white; box-shadow:0 5px 0 #397d23; font-size:17px; font-weight:900; display:flex; justify-content:center; gap:14px; align-items:center; }.confirm-button:active { transform:translateY(3px); box-shadow:0 2px 0 #397d23; }.confirm-button strong { color:#fff8bd; }
.agent { position:absolute; z-index:3; width:31%; aspect-ratio: .66; right:3%; bottom:9%; background-position:50% 0; filter:drop-shadow(0 5px 3px #3c251c55); }
.dialogue { position:absolute; z-index:2; left:2%; right:2%; bottom:1.6%; min-height:12%; padding:16px 33% 12px 7%; border:3px solid #fff; border-radius:28px 28px 8px 8px; background:linear-gradient(#fffdf1,#e9e8da); color:#635541; box-shadow:0 -3px 12px #34261e55; }.dialogue strong { position:absolute; top:-11px; left:7%; padding:4px 18px; border-radius:10px; background:#ef9855; color:white; }.dialogue p { margin:0; font-size:12px; line-height:1.5; }
.menu-sheet { position:absolute; z-index:40; inset:0; display:none; place-content:center; background:#4b382bcf; backdrop-filter:blur(4px); }.menu-sheet.open { display:grid; }.menu-card { min-width:250px; padding:25px 24px; display:grid; gap:11px; border:3px solid white; border-radius:22px; background:#fff9e9; color:#59452f; text-align:center; box-shadow:0 14px 40px #24170e5c; }.menu-card small { font-weight:900; color:#d98a43; }.menu-card h2 { margin:-6px 0 6px; }.menu-card button { min-width:200px; padding:12px 20px; border:2px solid #ead5af; border-radius:13px; font-weight:900; color:#55442f; background:#fff7e7; }.menu-card button.primary { border-color:white; background:#ffd14b; box-shadow:0 4px 0 #b98d25; }
.task-sheet,.finish-layer { position:absolute; z-index:35; inset:0; display:none; place-items:center; padding:7%; background:#3f382cc7; backdrop-filter:blur(4px); }.task-sheet.open,.finish-layer.open { display:grid; }
.sheet-card { width:100%; max-height:83%; overflow:hidden; border:3px solid white; border-radius:24px; background:#fffaf0; color:#5b4731; box-shadow:0 14px 45px #2b1b115e; }
.sheet-card header { padding:18px 20px 12px; display:flex; justify-content:space-between; align-items:center; background:#f5c73b; }.sheet-card header small { font-weight:900; color:#8f6720; }.sheet-card h2 { margin:0; font-size:28px; }.sheet-card header button { width:38px; height:38px; border:0; border-radius:12px; color:#8a6527; background:#fff2b5; font-size:24px; font-weight:900; }
.xp-track { position:relative; height:34px; margin:14px 18px 8px; overflow:hidden; border:3px solid #e5d5b9; border-radius:99px; background:#efe6d8; }.xp-track i { position:absolute; inset:0 auto 0 0; width:0; background:linear-gradient(90deg,#6cbd52,#a7d94e); transition:width .4s ease; }.xp-track span { position:relative; z-index:1; display:grid; place-items:center; height:100%; font-size:11px; font-weight:900; }
.task-list { padding:5px 15px 18px; display:grid; gap:9px; overflow:auto; max-height:calc(83vh - 155px); }.task-row { display:grid; grid-template-columns:32px 1fr auto; gap:9px; align-items:center; padding:11px; border:2px solid #eadfc9; border-radius:14px; background:#f8f2e8; }.task-row.complete { border-color:#b6d78f; background:#f3fbe8; }.task-row.claimed { opacity:.63; }.task-check { display:grid; place-items:center; width:31px; height:31px; border-radius:10px; background:#dfd4c4; color:white; font-weight:900; }.complete .task-check { background:#78b84a; }.task-row strong,.task-row small,.task-row b { display:block; }.task-row strong { font-size:12px; }.task-row small { margin:3px 0; color:#8b765c; font-size:9px; }.task-row b { color:#cf8834; font-size:9px; }.task-row button { min-width:54px; padding:8px 7px; border:0; border-radius:10px; background:#62ad3e; color:white; font-size:10px; font-weight:900; }.task-row button:disabled { background:#d7cbbb; color:#8e806d; }
.finish-card { width:100%; padding:28px 22px 24px; border:3px solid white; border-radius:25px; background:#fff9e9; color:#58442d; text-align:center; box-shadow:0 15px 45px #25180f66; }.finish-seal { width:68px; height:68px; margin:-62px auto 12px; display:grid; place-items:center; border:5px solid white; border-radius:22px; background:#74bb48; color:white; font-size:41px; font-weight:900; transform:rotate(-5deg); }.finish-card>small { color:#d9883e; font-weight:900; }.finish-card h2 { margin:7px 0 10px; font-size:31px; line-height:1.08; }.finish-card p { margin:0 auto 18px; max-width:32ch; color:#806c54; font-size:12px; line-height:1.6; }.finish-card dl { margin:0 0 19px; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }.finish-card dl div { padding:10px 4px; border-radius:13px; background:#f3e7d1; }.finish-card dt { font-size:9px; }.finish-card dd { margin:3px 0 0; color:#559a3c; font-size:17px; font-weight:900; }.finish-card button { width:100%; padding:13px; border:3px solid white; border-radius:14px; background:#f4c737; color:#59441e; box-shadow:0 5px 0 #b88d28; font-weight:900; }
.toast { position:absolute; z-index:50; left:50%; bottom:11%; transform:translate(-50%,30px); opacity:0; max-width:86%; padding:10px 17px; border-radius:99px; color:white; background:#543f33e8; font-weight:900; font-size:13px; text-align:center; transition:.25s; pointer-events:none; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-aspect-ratio: 9 / 20) { .game-shell { width:100vw; height:100dvh; } }
@media (max-width:420px) { .task-ribbon { left:18%; right:18%; }.room-pill { width:50px; }.task-list { gap:7px; }.task-row { padding:8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.001ms !important; } }