:root {
  color-scheme: light;
  --purple: #9a24ff;
  --purple-2: #c347ff;
  --green: #2fc845;
  --gold: #ffc928;
  --pink: #e32275;
  --ink: #171717;
  --glass: rgba(28, 28, 28, .76);
  --cream: rgba(255, 251, 242, .93);
  /* font-family: Inter, "SF Pro Display", "Arial Rounded MT Bold", "Trebuchet MS", Arial, sans-serif; */
  font-family: "Germania One", system-ui;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #171411; color: var(--ink); overflow: hidden; }
button { font: inherit; border: 0; cursor: pointer; touch-action: manipulation; transition: transform .14s ease, filter .14s ease, box-shadow .14s ease; }
button:active { transform: scale(.96); }
.app-shell { width: 100vw; height: 100vh; display: grid; place-items: center; }
.screen { display: none; position: relative; width: min(100vw, 430px); height: min(100vh, 932px); overflow: hidden; background: #ddd; box-shadow: 0 22px 70px rgba(0,0,0,.55); }
.screen.active { display: block; }
.stage { position: absolute; inset: 0; overflow: hidden; }
.home-screen:after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, rgba(255,255,255,.08), rgba(255,255,255,0) 28%), linear-gradient(180deg, rgba(0,0,0,0) 52%, rgba(0,0,0,.32)); pointer-events: none; }

.home-bg, .room-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-bg { background: linear-gradient(180deg, rgba(12,10,8,.36), rgba(255,255,255,.04) 28%, rgba(10,8,6,.16) 55%, rgba(14,10,8,.58)), url("assets/room/living-room.webp") center/cover; filter: saturate(1.07) contrast(1.02); }
.room-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.16), rgba(255,255,255,0) 18%, rgba(0,0,0,.08) 100%); pointer-events: none; }
.scan-overlay { position: absolute; inset: 0; z-index: 70; display: grid; place-items: center; align-content: center; gap: 12px; color: #fff; background: radial-gradient(circle at center, rgba(99,255,143,.12), rgba(0,0,0,.62)); text-align: center; transition: opacity .35s, visibility .35s; }
.scan-overlay.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.scan-frame { width: 68%; aspect-ratio: 1; border: 2px solid rgba(121,255,151,.9); border-radius: 24px; box-shadow: 0 0 28px rgba(73,255,117,.45), inset 0 0 26px rgba(73,255,117,.2); position: relative; overflow: hidden; }
.scan-frame:after { content: ""; position: absolute; left: 0; right: 0; height: 3px; top: 15%; background: #7cff91; box-shadow: 0 0 14px #7cff91; animation: scanLine 1.8s ease-in-out infinite; }
.scan-overlay strong { font-size: 24px; text-shadow: 0 3px 7px rgba(0,0,0,.5); }
.scan-overlay span { width: 260px; font-family: Arial, sans-serif; font-weight: 800; line-height: 1.25; }
@keyframes scanLine { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(190px); } }

.home-top, .game-top { position: absolute; left: 10px; right: 10px; top: max(8px, env(safe-area-inset-top)); z-index: 30; display: flex; align-items: center; gap: 8px; }
.avatar-wrap { position: relative; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #8a20ff, #e26cff); padding: 5px; box-shadow: 0 3px 10px rgba(0,0,0,.35); flex: 0 0 auto; }
.avatar { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: url("assets/ui/designer-avatar.png") center/cover; color: transparent; font-size: 0; text-shadow: none; }
.level-badge { position: absolute; left: 0; bottom: 0; background: var(--gold); border-radius: 13px; padding: 2px 7px; font-weight: 900; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.resource-pill, .score-chip, .level-chip { min-height: 38px; display: flex; align-items: center; gap: 7px; padding: 5px 8px; color: #fff; background: linear-gradient(180deg, rgba(44,43,40,.86), rgba(21,20,19,.78)); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; box-shadow: inset 0 1px rgba(255,255,255,.18), 0 6px 16px rgba(0,0,0,.34); text-shadow: 0 2px 2px rgba(0,0,0,.3); }
.resource-pill { flex: 1 1 0; justify-content: center; font-size: 15px; }
.resource-pill span, .score-chip:first-of-type { font-size: 25px; }
.resource-pill button, .score-chip button { width: 30px; height: 30px; border-radius: 50%; color: #fff; background: linear-gradient(#42e85f, #1aae33); font-size: 22px; line-height: 1; box-shadow: 0 2px 4px rgba(0,0,0,.3); }
.gear, .round-btn { width: 45px; height: 45px; border-radius: 50%; color: #fff; background: linear-gradient(180deg, rgba(54,53,50,.86), rgba(22,21,20,.82)); border: 1px solid rgba(255,255,255,.16); font-size: 27px; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 8px 18px rgba(0,0,0,.34); flex: 0 0 auto; }
.round-btn { font-size: 35px; line-height: 36px; padding-bottom: 7px; }
.home-top { gap: 6px; }
.home-top .avatar-wrap { width: 66px; height: 66px; }
.home-top .avatar { font-size: 20px; }
.home-top .resource-pill { min-height: 36px; padding: 4px 6px; gap: 5px; font-size: 13px; }
.home-top .resource-pill span { font-size: 21px; }
.home-top .resource-pill button { width: 28px; height: 28px; font-size: 20px; }
.home-top .gear { width: 40px; height: 40px; font-size: 24px; }

.home-title { position: absolute; top: 93px; left: 22px; right: 22px; z-index: 16; text-align: center; color: #fff; text-transform: uppercase; text-shadow: 0 4px 9px rgba(0,0,0,.62); }
.home-title p { margin: 0; font-size: 30px; font-weight: 900; letter-spacing: 0; }
.home-title h1 { display: inline-block; margin: 7px 0 0; padding: 10px 18px; border-radius: 16px; background: rgba(24,23,22,.8); border: 1px solid rgba(255,255,255,.22); font-size: 14px; line-height: 1.08; box-shadow: inset 0 1px rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.28); }
.client-card, .home-stats { position: absolute; z-index: 12; }
.client-card { left: 18px; right: 18px; bottom: 178px; padding: 16px 16px 15px; background: linear-gradient(180deg, rgba(255,252,246,.98), rgba(239,231,218,.95)); border: 1px solid rgba(255,255,255,.78); border-radius: 20px; box-shadow: 0 18px 42px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.7); }
.client-card h2 { display: inline-block; margin: 0 0 12px; padding: 5px 10px; color: #fff; background: linear-gradient(135deg, #282622, #4c4840); border-radius: 999px; font-size: 11px; text-transform: uppercase; text-align: left; letter-spacing: 0; box-shadow: inset 0 1px rgba(255,255,255,.12); }
.client-card ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; font-size: 12px; line-height: 1.15; }
.client-card li { min-height: 28px; display: flex; align-items: center; gap: 8px; color: #1c1a17; font-family: Arial, sans-serif; font-weight: 800; }
.client-card span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, #efe8ff, #ffdff0); color: #7924e9; font-size: 0; flex: 0 0 auto; box-shadow: inset 0 1px rgba(255,255,255,.8), 0 3px 8px rgba(120,54,180,.14); }
.client-card li:nth-child(1) span { background: #fff url("assets/furniture/sofa-beige.webp") center/94% auto no-repeat; }
.client-card li:nth-child(1) span:before { content: ""; }
.client-card li:nth-child(2) span:before { content: "♥"; }
.client-card li:nth-child(3) span:before { content: "$"; }
.client-card li:nth-child(4) span { background: #fff url("assets/furniture/plant.webp") center/88% auto no-repeat; }
.client-card li:nth-child(4) span:before { content: ""; }
.client-card span:before { font-size: 14px; font-weight: 900; }
.home-stats { top: 181px; left: 22px; right: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.home-stats div { min-height: 58px; padding: 10px 8px; text-align: center; background: linear-gradient(180deg, rgba(255,252,246,.97), rgba(245,239,229,.94)); border: 1px solid rgba(255,255,255,.68); border-radius: 15px; box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.home-stats b { display: block; text-transform: uppercase; font-size: 11px; margin-bottom: 6px; }
.home-stats strong { font-size: 16px; }
.green { color: var(--green); }
.pink { color: var(--pink); }

.speech, .howto, .tip-bar, .mission-card { position: absolute; z-index: 15; left: 50%; transform: translateX(-50%); }
.speech { display: none; top: 257px; width: 272px; padding: 12px 14px; border-radius: 16px; text-align: center; background: rgba(255,251,242,.96); border: 1px solid rgba(255,255,255,.7); font-size: 15px; font-weight: 900; box-shadow: 0 12px 28px rgba(0,0,0,.24); }
.speech:after { content: ""; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); border: 14px solid transparent; border-top-color: var(--cream); border-bottom: 0; }
.speech { color: #6b17e9; }
.speech span { color: #050505; }
.howto { bottom: 96px; width: 300px; padding: 10px 14px; border-radius: 16px; color: #fff; background: rgba(24,23,22,.78); border: 1px solid rgba(255,255,255,.16); text-align: center; font-size: 11px; box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.howto span { font-size: 27px; vertical-align: middle; margin-right: 9px; }
.howto b { color: var(--gold); margin-left: 5px; }
.primary-play { position: absolute; z-index: 45; left: 50%; bottom: 23px; transform: translateX(-50%); width: 52%; height: 62px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #7c19ff 0%, #b62fff 58%, #e650ff 100%); border: 1px solid rgba(255,255,255,.3); font-size: 26px; font-weight: 900; text-transform: uppercase; box-shadow: 0 15px 32px rgba(122,21,255,.48), 0 0 28px rgba(192,54,255,.28), inset 0 1px rgba(255,255,255,.32); }

.ghost-layout { position: absolute; left: 12%; right: 12%; top: 39%; height: 23%; border: 2px dashed rgba(255,255,255,.68); z-index: 2; transform: perspective(260px) rotateX(45deg); transform-origin: bottom; opacity: .76; filter: drop-shadow(0 2px 4px rgba(0,0,0,.22)); }
.ghost-layout:after { content: ""; position: absolute; left: 18%; right: 18%; top: 42%; border-top: 2px dashed #fff; }
.ghost-sofa, .ghost-table, .ghost-rug { position: absolute; border: 2px dashed #fff; border-radius: 12px; }
.ghost-sofa { left: 18%; right: 18%; top: -35%; height: 38%; }
.ghost-table { left: 31%; right: 31%; top: 43%; height: 24%; }
.ghost-rug { left: 19%; right: 19%; top: 28%; height: 50%; }

.game-top { justify-content: space-between; }
.level-chip { width: 118px; display: grid; gap: 2px; line-height: 1.05; font-size: 14px; }
.level-chip b { display: block; white-space: nowrap; }
.level-chip > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-family: Arial, sans-serif; font-weight: 600; }
.level-chip b span { display: inline; font-size: inherit; font-family: inherit; font-weight: inherit; }
.score-chip { min-width: 78px; justify-content: center; font-size: 18px; }
.score-chip button { width: 28px; height: 28px; margin-right: -4px; }

.objectives { position: absolute; z-index: 18; left: 8px; top: 172px; width: 125px; padding: 12px 10px; color: #fff; background: rgba(34,31,28,.74); border-radius: 12px; box-shadow: 0 3px 12px rgba(0,0,0,.32); }
.objectives h2 { margin: 0 0 10px; color: var(--gold); text-transform: uppercase; font-size: 14px; }
.objectives ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.objectives li { display: flex; align-items: center; gap: 8px; font-size: 13px; text-shadow: 0 1px 2px #000; }
.check { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); color: transparent; flex: 0 0 auto; }
.done .check { background: var(--green); color: #fff; border-color: var(--green); }

.score-panels { position: absolute; z-index: 18; top: 172px; right: 7px; width: 113px; display: grid; gap: 8px; }
.score-card { padding: 8px 8px; text-align: center; background: var(--cream); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.28); }
.score-card b { display: block; text-transform: uppercase; font-size: 12px; margin-bottom: 4px; }
.score-card strong { display: block; font-size: 16px; }
.score-card small { font-family: Arial, sans-serif; font-weight: 800; font-size: 10px; }
.purple { color: var(--purple); }
.meter { display: block; height: 8px; margin-top: 6px; border-radius: 999px; background: #bab7b0; box-shadow: inset 0 1px 2px rgba(0,0,0,.35); overflow: hidden; }
.meter i { display: block; width: 0%; height: 100%; background: linear-gradient(90deg, #20b83e, #6fd65b); border-radius: inherit; }

.mission-card { top: 75px; width: 200px; padding: 9px 12px 8px; color: #fff; background: var(--glass); border-radius: 14px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.mission-card h1 { margin: 0; font-size: 19px; }
.mission-card p { margin: 6px 0 0; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.18); font-family: Arial, sans-serif; font-weight: 700; font-size: 12px; line-height: 1.15; }
.mission-card span { color: var(--purple-2); }

.play-area { position: absolute; z-index: 8; left: 9%; right: 9%; top: 30%; height: 37%; pointer-events: none; }
#furnitureLayer { position: absolute; inset: 0; pointer-events: auto; }
.floor-zone, .placement-grid { position: absolute; left: 3%; right: 3%; bottom: 3%; height: 46%; border: 2px dashed rgba(255,255,255,.92); transform: perspective(280px) rotateX(49deg); transform-origin: bottom; border-radius: 8px; }
.floor-zone { background: rgba(105, 255, 105, .09); }
.role-zone { position: absolute; display: none; border: 2px solid rgba(101,255,117,.95); border-radius: 11px; background: rgba(73,255,95,.13); box-shadow: 0 0 18px rgba(73,255,95,.36); transform: translate(-50%, -100%); text-align: center; color: #fff; font-size: 10px; font-weight: 900; text-transform: uppercase; padding-top: 4px; pointer-events: none; }
.role-zone.active { display: block; }
.role-zone.acceptable { border-color: #ffd13b; background: rgba(255,209,59,.16); box-shadow: 0 0 18px rgba(255,209,59,.36); }
.role-zone.blocked { border-color: #ff426c; background: rgba(255,66,108,.16); box-shadow: 0 0 18px rgba(255,66,108,.36); }
.placement-grid { display: none; background: rgba(73, 226, 74, .16); box-shadow: 0 0 22px rgba(70,255,90,.34); color: #78ff7c; font-size: 25px; font-weight: 900; }
.placement-grid.active { display: block; }
.arrow, .rotate-mark { position: absolute; text-shadow: 0 0 7px rgba(0,255,70,.8); }
.up { left: 50%; top: 14%; transform: translateX(-50%); }
.down { left: 50%; bottom: 10%; transform: translateX(-50%); }
.left { left: 24%; top: 48%; }
.right { right: 24%; top: 48%; }
.rotate-mark { left: 50%; top: 46%; transform: translate(-50%, -50%); font-size: 42px; }
.walkway-zone { position: absolute; left: 8%; right: 8%; bottom: 4%; height: 20%; border: 2px dashed rgba(255,255,255,.85); border-radius: 8px; color: rgba(255,255,255,.62); text-transform: uppercase; text-align: center; font-size: 10px; padding-top: 4px; transform: perspective(280px) rotateX(52deg); transform-origin: bottom; pointer-events: none; }

.furniture { position: absolute; transform-origin: 50% 85%; filter: drop-shadow(0 10px 7px rgba(0,0,0,.32)); touch-action: none; cursor: grab; user-select: none; }
.furniture:after { content: ""; }
.furniture.selected { filter: drop-shadow(0 0 6px #a9ffad) drop-shadow(0 12px 8px rgba(0,0,0,.35)); outline: 2px solid rgba(169,255,173,.85); border-radius: 8px; }
.furniture.invalid { filter: drop-shadow(0 0 8px #ff3f68) drop-shadow(0 10px 7px rgba(0,0,0,.35)); outline-color: #ff3f68; }
.furniture.locked { cursor: default; filter: drop-shadow(0 14px 11px rgba(0,0,0,.38)) saturate(1.03); }
.furniture-shadow { position: absolute; transform: translate(-50%, -50%) perspective(180px) rotateX(58deg); transform-origin: center; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0,0,0,.36), rgba(0,0,0,.16) 48%, rgba(0,0,0,0) 72%); filter: blur(1px); pointer-events: none; opacity: .72; }
.furniture-shadow.locked { opacity: .82; }

.side-tools { position: absolute; z-index: 22; display: grid; gap: 4px; }
.side-left { left: 7px; top: 45%; }
.side-right { right: 7px; top: 44%; }
.side-tools button, .zoom-tool { width: 48px; min-height: 38px; border-radius: 14px; color: #fff; background: linear-gradient(180deg, rgba(43,42,39,.86), rgba(20,19,18,.8)); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.34); display: grid; place-items: center; font-size: 20px; font-weight: 900; }
.side-right button { height: 38px; min-height: 0; align-content: center; }
.side-tools span { display: block; font-size: 9px; text-transform: uppercase; }
.side-tools em { color: #54ff65; font-style: normal; }
.place-btn { background: linear-gradient(180deg, #52ee55, #18b732) !important; border-radius: 20px !important; min-height: 48px !important; font-size: 29px !important; box-shadow: 0 10px 24px rgba(24,183,50,.42), inset 0 1px rgba(255,255,255,.32) !important; }
.side-right .place-btn { height: 44px; }
.zoom-tool { height: 138px; padding: 5px 0; }
.zoom-tool button { width: 100%; min-height: 27px; background: transparent; box-shadow: none; border-radius: 0; }
.zoom-tool input { writing-mode: vertical-lr; direction: rtl; width: 32px; height: 72px; accent-color: #fff; }

.tip-bar { bottom: 246px; width: 290px; padding: 10px 14px; border-radius: 14px; color: #fff; background: var(--glass); font-family: Arial, sans-serif; font-size: 12px; box-shadow: 0 4px 10px rgba(0,0,0,.35); }
.tip-bar b { color: var(--gold); margin-right: 7px; }

.catalog { position: absolute; z-index: 25; left: 11px; right: 11px; bottom: 64px; height: 172px; padding: 9px 8px; background: linear-gradient(180deg, rgba(255,253,248,.97), rgba(241,235,225,.95)); border: 1px solid rgba(255,255,255,.72); border-radius: 18px; box-shadow: 0 -10px 30px rgba(0,0,0,.22); }
.tabs { display: flex; gap: 5px; height: 24px; align-items: center; overflow: hidden; }
.tab { min-width: 54px; padding: 5px 8px; border-radius: 13px; background: transparent; color: #555; font-size: 10px; text-transform: uppercase; font-weight: 900; }
.tab.active { background: linear-gradient(135deg, #6d1cff, #c02aff); color: #fff; }
.cards { height: 130px; display: flex; gap: 8px; overflow-x: auto; padding: 7px 2px 2px; scrollbar-width: none; }
.cards::-webkit-scrollbar { display: none; }
.item-card { flex: 0 0 82px; height: 118px; border-radius: 10px; background: linear-gradient(180deg, #fff, #f6f2ec); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 5px 12px rgba(0,0,0,.14); display: grid; grid-template-rows: 21px 1fr 24px; align-items: center; text-align: center; padding: 4px; position: relative; }
.item-card.active { border: 2px solid var(--purple); box-shadow: 0 0 0 2px rgba(154,36,255,.2), 0 8px 18px rgba(80,0,130,.22); transform: translateY(-2px); }
.item-card b { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item-card img { max-width: 100%; max-height: 61px; justify-self: center; object-fit: contain; }
.item-card strong { color: #2f7b1f; font-size: 13px; }

.bottom-status { position: absolute; z-index: 28; left: 10px; right: 10px; bottom: 8px; height: 52px; display: grid; grid-template-columns: 1fr 1fr 1fr 100px; gap: 7px; align-items: stretch; }
.bottom-status div, .bottom-status button { border-radius: 14px; color: #fff; background: linear-gradient(180deg, rgba(43,42,39,.86), rgba(20,19,18,.8)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 8px 18px rgba(0,0,0,.32); }
.bottom-status div { display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 18px 22px 5px; column-gap: 4px; padding: 6px 7px; }
.bottom-status span { grid-row: 1 / span 2; font-size: 26px; color: var(--purple-2); align-self: center; }
.bottom-status b { text-transform: uppercase; font-size: 9px; align-self: end; }
.bottom-status strong { font-size: 13px; }
.bottom-status i { grid-column: 2; height: 5px; border-radius: 999px; background: #606060; overflow: hidden; }
.bottom-status em { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #8b19ff, #d446ff); }
.bottom-status button { font-size: 18px; text-transform: uppercase; font-weight: 900; background: linear-gradient(135deg, #8e24ff, #c145ff); position: relative; }
.bottom-status sup { position: absolute; right: -5px; top: -8px; min-width: 23px; height: 23px; border-radius: 50%; background: #ffbb20; color: #fff; display: grid; place-items: center; font-size: 13px; box-shadow: 0 2px 5px rgba(0,0,0,.35); }

.toast { position: absolute; z-index: 80; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.95); max-width: 280px; padding: 14px 18px; border-radius: 16px; background: rgba(20,20,20,.88); color: #fff; text-align: center; font-size: 16px; font-weight: 900; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.stage.placing .toast { top: auto; bottom: 168px; transform: translateX(-50%) scale(.95); max-width: 240px; font-size: 14px; }
.stage.placing .toast.show { transform: translateX(-50%) scale(1); }
.stage.placing .game-top { opacity: .42; transition: opacity .18s; }
.stage.placing .objectives, .stage.placing .score-panels, .stage.placing .bottom-status, .stage.placing .catalog { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); transition: opacity .18s, visibility .18s, transform .18s; }
.stage.placing .play-area { top: 25%; height: 48%; }
.stage.placing .tip-bar { bottom: 118px; }
.stage.placing .side-left { top: 48%; }
.stage.placing .side-right { top: 42%; }
.stage.placing .mission-card, .stage.placing .side-left, .stage.placing .side-right, .stage.placing .tip-bar { opacity: 1; filter: none; pointer-events: auto; }
.reveal-overlay { position: absolute; inset: 0; z-index: 90; display: none; place-items: center; background: radial-gradient(circle at center, rgba(255,255,255,.2), rgba(0,0,0,.66)); color: #fff; text-align: center; }
.reveal-overlay.show { display: grid; }
.reveal-overlay div { width: 80%; padding: 24px 18px; border-radius: 24px; background: rgba(25,25,25,.82); box-shadow: 0 18px 45px rgba(0,0,0,.42); }
.reveal-overlay b { display: block; font-size: 28px; margin-bottom: 8px; }
.reveal-overlay strong { display: grid; gap: 8px; color: #ffd76a; font-family: Arial, sans-serif; margin-bottom: 18px; }
.reveal-overlay em { color: #fff; font-style: normal; font-size: 20px; }
.reveal-overlay small { color: rgba(255,255,255,.86); font-size: 12px; line-height: 1.35; }
.reveal-overlay button { width: 72%; height: 52px; margin-top: 8px; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #7e20ff, #cc44ff); font-size: 20px; font-weight: 900; }

@media (min-width: 390px) {
  .catalog { height: 186px; bottom: 70px; }
  .item-card { flex-basis: 88px; height: 129px; }
  .item-card img { max-height: 70px; }
  .bottom-status { height: 58px; grid-template-columns: 1fr 1fr 1fr 112px; }
  .tip-bar { bottom: 264px; }
  .howto { bottom: 105px; }
  .primary-play { height: 66px; }
  .client-card { bottom: 187px; padding: 14px 16px; }
  .client-card ul { font-size: 13px; }
}

@media (min-width: 420px) {
  .home-top, .game-top { left: 12px; right: 12px; }
  .avatar-wrap { width: 82px; height: 82px; }
  .home-title { top: 112px; }
  .client-card { bottom: 196px; padding: 16px 18px; }
  .client-card h2 { font-size: 14px; }
  .client-card ul { font-size: 14px; gap: 12px; }
  .home-stats { top: 202px; gap: 12px; }
  .speech { top: 287px; width: 292px; font-size: 17px; }
  .catalog { left: 14px; right: 14px; bottom: 76px; height: 196px; }
  .item-card { flex-basis: 94px; height: 136px; }
  .item-card img { max-height: 76px; }
  .bottom-status { bottom: 11px; height: 62px; grid-template-columns: 1fr 1fr 1fr 120px; }
  .tip-bar { bottom: 286px; width: 306px; }
  .stage.placing .tip-bar { bottom: 126px; }
  .score-panels { width: 128px; right: 10px; }
  .objectives { width: 142px; left: 10px; }
  .mission-card { width: 230px; }
}

@media (max-height: 860px) {
  .home-top { top: 10px; }
  .home-title { top: 118px; }
  .home-title p { font-size: 27px; }
  .home-title h1 { padding: 9px 16px; font-size: 13px; }
  .home-stats { top: 218px; }
  .home-stats div { min-height: 52px; padding: 8px 8px; }
  .speech { display: none; }
  .client-card { bottom: 192px; padding: 13px 16px; }
  .client-card h2 { margin-bottom: 10px; opacity: .72; }
  .client-card ul { gap: 8px 12px; font-size: 13px; }
  .howto { bottom: 104px; }
  .primary-play { bottom: 24px; height: 64px; }
  .ghost-layout { top: 42%; height: 21%; opacity: .72; }
  .mission-card { top: 67px; }
  .objectives { top: 150px; }
  .score-panels { top: 150px; }
  .play-area { top: 28%; height: 36%; }
  .catalog { height: 156px; bottom: 62px; }
  .cards { height: 110px; }
  .item-card { flex-basis: 78px; height: 102px; grid-template-rows: 19px 1fr 22px; }
  .item-card img { max-height: 52px; }
  .tip-bar { bottom: 224px; }
  .bottom-status { height: 50px; }
  .stage.placing .play-area { top: 22%; height: 52%; }
  .stage.placing .tip-bar { bottom: 104px; }
  .stage.placing .toast { bottom: 154px; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .screen { width: min(100vw, calc(100vh * 9 / 16), 430px); height: min(100vh, 932px); }
  .home-top, .game-top { top: 8px; left: 8px; right: 8px; gap: 5px; }
  .home-top .avatar-wrap { width: 52px; height: 52px; padding: 4px; }
  .home-top .resource-pill { min-height: 30px; font-size: 11px; } .home-top .resource-pill span { font-size: 17px; } .home-top .resource-pill button { width: 24px; height: 24px; font-size: 17px; }
  .home-top .gear, .game-top .round-btn { width: 30px; height: 30px; font-size: 20px; }
  .game-top .round-btn { font-size: 20px; line-height: 25px; padding-bottom: 5px; }
  .level-badge { padding: 1px 6px; font-size: 13px; }
  .home-title { top: 76px; left: 14px; right: 14px; } .home-title p { font-size: 24px; } .home-title h1 { margin-top: 5px; padding: 8px 13px; font-size: 11px; border-radius: 13px; }
  .home-stats { top: 145px; left: 14px; right: 14px; gap: 8px; }
  .home-stats div { min-height: 45px; padding: 7px 6px; border-radius: 13px; } .home-stats b { font-size: 9px; margin-bottom: 4px; } .home-stats strong { font-size: 13px; }
  .ghost-layout { top: 39%; height: 20%; left: 9%; right: 9%; }
  .client-card { left: 12px; right: 12px; bottom: 126px; padding: 11px 12px; border-radius: 16px; }
  .client-card h2 { margin-bottom: 8px; padding: 4px 9px; font-size: 10px; } .client-card ul { gap: 7px 8px; font-size: 11px; } .client-card li { min-height: 23px; gap: 6px; } .client-card span { width: 22px; height: 22px; border-radius: 8px; } .client-card span:before { font-size: 12px; }
  .howto { bottom: 62px; width: 252px; padding: 7px 10px; border-radius: 14px; font-size: 9px; } .howto span { font-size: 23px; margin-right: 6px; }
  .primary-play { bottom: 10px; width: 66%; height: 48px; border-radius: 18px; font-size: 22px; }
  .game-top .level-chip { width: 92px; min-height: 38px; padding: 4px 7px; font-size: 11px; } .game-top .level-chip > span { font-size: 10px; }
  .game-top .score-chip { min-width: 62px; min-height: 34px; padding: 4px 6px; font-size: 14px; }
  .game-top .score-chip:last-of-type, .objectives, .score-panels { display: none; }
  .mission-card { top: 58px; width: 210px; padding: 8px 10px; border-radius: 13px; } .mission-card h1 { font-size: 17px; } .mission-card p { font-size: 11px; }
  .play-area { top: 23%; height: 38%; left: 10%; right: 10%; }
  .side-left { left: 5px; top: 43%; } .side-right { right: 5px; top: 36%; } .side-tools button, .zoom-tool { width: 38px; border-radius: 12px; } .side-tools span { font-size: 8px; } .zoom-tool { height: 112px; } .zoom-tool input { height: 54px; }
  .tip-bar { bottom: 192px; width: 245px; padding: 8px 10px; font-size: 10px; }
  .catalog { left: 12px; right: 12px; bottom: 54px; height: 130px; padding: 7px; border-radius: 15px; }
  .tabs { height: 22px; gap: 4px; } .tab { min-width: 43px; padding: 5px 6px; font-size: 8px; } .cards { height: 94px; gap: 6px; padding-top: 5px; }
  .item-card { flex-basis: 66px; height: 86px; grid-template-rows: 17px 1fr 19px; }
  .item-card b { font-size: 8px; } .item-card img { max-height: 42px; } .item-card strong { font-size: 11px; }
  .bottom-status { left: 10px; right: 10px; bottom: 6px; height: 42px; grid-template-columns: 1fr 1fr 1fr 72px; gap: 5px; }
  .bottom-status div { grid-template-columns: 18px 1fr; grid-template-rows: 14px 17px 4px; padding: 5px; }
  .bottom-status span { font-size: 20px; } .bottom-status b { font-size: 7px; } .bottom-status strong { font-size: 10px; } .bottom-status button { font-size: 13px; }
  .stage.placing .play-area { top: 20%; height: 54%; } .stage.placing .tip-bar { bottom: 88px; } .stage.placing .toast { bottom: 132px; max-width: 210px; }
}