/* 커밍 홈즈 · 내 원룸 (온유 2026-11-12). 2D, top-down pixel room drawn on a small canvas scaled up with hard pixels. */
#room { position: fixed; inset: 0; display: none; background: #1b1714; }
body.room #room { display: block; }
body.room #town, body.room #pickBar, body.room #say, body.room #start, body.room #char, body.room #mode { display: none; }
#rmCanvas { position: absolute; left: 50%; top: calc(44px + env(safe-area-inset-top)); transform: translateX(-50%); image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; }
#rmHud { position: absolute; left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top)) 10px 6px; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; color: #fff; font-size: 12px; }
#rmHud span { background: rgba(255, 255, 255, 0.12); border-radius: 99px; padding: 4px 9px; white-space: nowrap; }
#rmHud b { color: #ffb37a; }
#rmTalk { position: absolute; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); max-width: 560px; margin: 0 auto; background: #fff8ec; color: var(--ink); border: 3px solid #2b2420; border-radius: 14px; padding: 12px 16px 14px; box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35); cursor: pointer; z-index: 3; }
#rmTalk b { display: inline-block; background: var(--accent); color: #fff; font-size: 14px; padding: 3px 10px; border-radius: 99px; margin: -26px 0 6px; box-shadow: 0 3px 0 var(--accent-dk); }
#rmTalk p { margin: 0; font-size: 18px; line-height: 1.6; min-height: 58px; word-break: keep-all; }
#rmNext { position: absolute; right: 14px; bottom: 8px; font-style: normal; font-size: 13px; color: var(--accent); animation: rmBob .8s ease-in-out infinite; }
#rmNext.wait { visibility: hidden; }
@keyframes rmBob { 50% { transform: translateY(3px); } }
#rmPanel { position: absolute; left: 0; right: 0; bottom: 0; background: #fff8ec; border-radius: 18px 18px 0 0; padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.3); max-width: 640px; margin: 0 auto; }
#rmTabs { display: flex; gap: 6px; margin-bottom: 8px; }
#rmTabs button { flex: 1; font-size: 14px; padding: 7px 0; background: #f1e6d3; color: var(--ink); box-shadow: none; }
#rmTabs button[aria-pressed="true"] { background: var(--accent); color: #fff; }
#rmList { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.rmF, .rmS { flex: none; width: 74px; height: 84px; padding: 4px; background: #fff; border: 2px solid #e9dcc8; border-radius: 12px; box-shadow: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; overflow: hidden; }
.rmF img { width: auto; height: auto; max-width: 30px; max-height: 32px; image-rendering: pixelated; image-rendering: crisp-edges; transform: scale(1.7); transform-origin: center bottom; margin: auto 0 4px; }
.rmF span, .rmS span { font-size: 11px; color: #5c5048; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rmS i { width: 48px; height: 48px; border-radius: 8px; image-rendering: pixelated; image-rendering: crisp-edges; background-repeat: no-repeat; }
.rmS.on { border-color: var(--accent); background: #ffe9d6; }
#rmTools { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom)); display: flex; gap: 6px; align-items: center; background: rgba(43, 36, 32, 0.92); color: #fff; border-radius: 99px; padding: 6px 8px 6px 14px; white-space: nowrap; z-index: 2; }
#rmTools b { font-size: 13px; margin-right: 4px; }
#rmTools button { font-size: 13px; padding: 6px 12px; background: #fff; color: var(--ink); box-shadow: none; border-radius: 99px; }
#rmTools #rmOk { background: var(--accent); color: #fff; }
body.room #toast { bottom: calc(205px + env(safe-area-inset-bottom)); z-index: 4; } /* above the panel and the piece's buttons */
#rmCanvas { top: calc(44px + env(safe-area-inset-top) + max(0px, (100vh - 44px - 190px - var(--rmh, 0px)) / 2 - 20px)); }
#rmTools[hidden], #rmHud[hidden], #rmPanel[hidden], #rmTalk[hidden] { display: none; } /* (their own display rules would otherwise beat the hidden attribute) */
/* the guide at the bottom (사장님 11-12): a line above the panel, and a faint flash from the centre outwards on what to press */
#rmCoach { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom)); background: rgba(43, 36, 32, 0.92); color: #fff; font-size: 15px; padding: 9px 16px; border-radius: 99px; white-space: nowrap; z-index: 3; overflow: hidden; }
#rmCoach[hidden] { display: none; }
.shine { position: relative; overflow: hidden; }
.shine::after { content: ''; position: absolute; inset: -40%; pointer-events: none; background: radial-gradient(circle at center, rgba(255, 240, 200, 0.55) 0%, rgba(255, 240, 200, 0.18) 35%, rgba(255, 240, 200, 0) 60%); transform: scale(0.2); opacity: 0; animation: shine 1.6s ease-out infinite; }
@keyframes shine { 0% { transform: scale(0.2); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
#rmTabs button.shine, .rmF.shine { box-shadow: 0 0 0 2px rgba(255, 190, 120, 0.9); }
.rmF.on { border-color: var(--accent); background: #ffe9d6; }
/* 공간 수정 (top, right) and 확인 (top, left) — 사장님 11-12 first-day script */
#rmEdit, #rmConfirm { position: absolute; top: calc(40px + env(safe-area-inset-top)); z-index: 3; font-size: 13px; padding: 6px 12px; border-radius: 99px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.3); }
#rmEdit { right: 10px; background: #fff8ec; color: var(--ink); }
#rmEdit[aria-pressed="true"] { background: var(--accent); color: #fff; }
#rmConfirm { left: 10px; background: var(--accent); color: #fff; }
#rmEdit[hidden], #rmConfirm[hidden] { display: none; }
/* the screen going off like an old TV: a white flash folds to a line and goes out; then the day card */
#rmOff { position: fixed; inset: 0; z-index: 60; background: #000; display: flex; align-items: center; justify-content: center; }
#rmOff[hidden] { display: none; }
#rmOff i { width: 100%; height: 100%; background: #fff; }
#rmOff.on { animation: tvBlack .2s ease-out both; }
#rmOff.on i { animation: tvLine 1.1s ease-in both; }
#rmOff.fade { animation: tvFade .9s ease both; }
#rmOff.fade i { opacity: 0; }
@keyframes tvBlack { from { background: rgba(0, 0, 0, 0); } to { background: #000; } }
@keyframes tvLine { 0% { transform: scale(1, 1); opacity: .95; } 35% { transform: scale(1, .008); opacity: 1; } 75% { transform: scale(.02, .008); opacity: 1; } 100% { transform: scale(0, 0); opacity: 0; } }
@keyframes tvFade { from { opacity: 1; } to { opacity: 0; } }
#rmDay { position: fixed; left: 0; right: 0; top: 46%; text-align: center; color: #fff; font-size: 22px; z-index: 61; opacity: 0; pointer-events: none; transition: opacity .6s; }
#rmDay.on { opacity: 1; }
/* a style's colours slide up above the panel (사장님 11-12 "위로 색이 쭈악 올라오는 걸로") */
#rmPanel { overflow: visible; }
#rmColors { position: absolute; left: 10px; right: 10px; bottom: 100%; display: flex; gap: 8px; justify-content: center; padding: 8px; background: #fff8ec; border-radius: 16px 16px 0 0; box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.25); transform: translateY(110%); opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.2, 1.4, .4, 1), opacity .2s; z-index: -1; }
#rmColors.up { transform: translateY(0); opacity: 1; pointer-events: auto; }
.rmC { flex: none; width: 54px; height: 58px; padding: 4px; background: #fff; border: 2px solid #e9dcc8; border-radius: 12px; box-shadow: none; display: flex; align-items: flex-end; justify-content: center; }
.rmC img { max-width: 30px; max-height: 32px; image-rendering: pixelated; image-rendering: crisp-edges; transform: scale(1.4); transform-origin: center bottom; }
.rmF { position: relative; }
.rmF em { position: absolute; top: 3px; right: 4px; font-style: normal; font-size: 10px; color: #fff; background: var(--accent); border-radius: 99px; padding: 1px 5px; }
/* pieces that open on a later day (사장님 11-12): greyed, with the day */
.rmF.locked, .rmS.locked { opacity: .55; filter: grayscale(1); position: relative; }
.rmF.locked::after, .rmS.locked::after { content: '🔒 ' attr(data-day); position: absolute; left: 0; right: 0; top: 4px; font-size: 10px; color: #5c5048; text-align: center; filter: none; }
.rmC.locked { opacity: .5; filter: grayscale(1); position: relative; }
.rmC.locked::after { content: '🔒'; position: absolute; top: 2px; right: 3px; font-size: 10px; filter: none; }
/* moving house: pick what to take */
#rmMove { font: inherit; font-size: 12px; padding: 4px 10px; border-radius: 99px; background: var(--accent); color: #fff; box-shadow: 0 2px 0 var(--accent-dk); }
#rmMoveBox { position: fixed; inset: 0; z-index: 40; background: rgba(20, 17, 15, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
#rmMoveBox[hidden] { display: none; }
#rmMoveBox .mv { width: min(440px, 100%); background: #fff8ec; border-radius: 18px; padding: 16px; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3); }
#rmMoveBox h3 { margin: 0 0 4px; font-size: 18px; } #rmMoveBox p { margin: 0 0 10px; font-size: 14px; color: #5c5048; }
#rmMoveBox .mvList { display: flex; flex-wrap: wrap; gap: 8px; max-height: 46vh; overflow-y: auto; margin-bottom: 12px; }
#rmMoveBox .mvBtns { display: flex; gap: 8px; } #rmMoveBox .mvBtns button { flex: 1; font-size: 15px; padding: 10px; }
#mvNo { background: #f1e6d3; color: var(--ink); } #mvGo { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-dk); }
.rmF strong { position: absolute; top: 3px; left: 4px; font-size: 9px; color: #fff; background: #3a9a5b; border-radius: 99px; padding: 1px 5px; font-weight: 700; }
/* 아파트 zoom (사장님 11-12 "줌인 기능") */
#rmZoom { position: fixed; right: 12px; bottom: 214px; z-index: 6; display: flex; flex-direction: column; gap: 6px; }
#rmZoom[hidden] { display: none; }
#rmZoom button { width: 40px; height: 40px; border-radius: 12px; font: inherit; font-size: 22px; line-height: 1; background: #fff8ec; color: var(--ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.25); }
#rmZoom button:disabled { opacity: 0.4; }
/* 집 가치 (아파트부터) */
#rmValue { font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; }
#rmValue b { color: #ffd27a; } #rmValue i, .val i { font-style: normal; margin-left: 3px; } #rmValue i.up { color: #ff7a6a; } #rmValue i.down { color: #6ab4ff; }
#rmMoveBox .val .valBig { font-size: 24px; font-weight: 700; color: #3c2f27; margin: 2px 0 10px; }
#rmMoveBox .val .valRow { display: flex; align-items: baseline; gap: 8px; font-size: 14px; padding: 6px 0; border-top: 1px solid #ecdfca; }
#rmMoveBox .val .valRow span { width: 64px; color: #8a7a6c; } #rmMoveBox .val .valRow b { flex: 1; color: #3c2f27; } #rmMoveBox .val .valRow i { font-size: 12px; color: #8a7a6c; }
#rmMoveBox .val .valRow i.up { color: #e04a3a; } #rmMoveBox .val .valRow i.down { color: #2f7fd8; }
#rmMoveBox .val .valChart { width: 100%; height: 76px; background: #f6ecdc; border-radius: 10px; margin: 8px 0; }
#rmMoveBox .val .valNote { font-size: 12px; }
/* 광고 (11-13) */
#rmBoost { font: inherit; font-size: 12px; padding: 4px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: none; }
#rmBoost b { color: #ffb37a; } #rmBoost i { font-style: normal; font-size: 9px; margin-left: 4px; color: #ffd27a; }
#rmMoveBox .ad .adNote { font-size: 12px; color: #8a7a6c; } #rmMoveBox .ad #mvGo[disabled] { opacity: 0.45; box-shadow: none; }
#adFake { position: fixed; inset: 0; z-index: 90; background: rgba(10, 9, 14, 0.92); display: flex; align-items: center; justify-content: center; }
#adFake .adBox { width: min(320px, 90%); padding: 22px 18px; border-radius: 16px; background: #26222c; color: #fff; text-align: center; display: flex; flex-direction: column; gap: 10px; }
#adFake b { font-size: 13px; align-self: flex-start; background: #f2c14e; color: #26222c; padding: 2px 8px; border-radius: 6px; }
#adFake span { font-size: 13px; color: #c9c2d4; } #adFake em { font-style: normal; font-size: 28px; font-weight: 700; min-height: 34px; }
#adFake button { font: inherit; padding: 10px; border-radius: 10px; background: #444050; color: #fff; } #adFake button.ok { background: var(--accent, #ff8a3d); }
/* 내부 공사 (아파트부터, 11-13) */
#rmList .rmLbl { flex: none; align-self: center; writing-mode: vertical-rl; font-size: 12px; color: #8a7a6c; padding: 0 2px; }
#rmColors .rmR { flex: none; font-size: 13px; padding: 6px 12px; border-radius: 99px; background: #fff; color: var(--ink); border: 2px solid #e9dcc8; box-shadow: none; }
#rmColors .rmR.on { background: var(--accent); color: #fff; border-color: var(--accent); }
#rmColors:has(.rmR) { justify-content: flex-start; overflow-x: auto; }