/* 켜 놓기 페이지용: play.html 인라인 스타일에서 시작 화면 부분만 뺀 복사본(게임 단추·시계 모양) + 켜 놓기 화면 */
html, body { margin: 0; height: 100%; background: #24170e linear-gradient(#2e1e13, #1f140c); overflow: hidden; user-select: none; font-family: system-ui, sans-serif; }
canvas { display: block; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#clock { position: fixed; right: 16px; top: 10px; color: #f6e6c4; font: 700 18px/1 Gaegu, 'Nanum Pen Script', cursive; letter-spacing: 1px; text-shadow: 0 1px 3px rgba(0,0,0,.75); opacity: .92; z-index: 2; } /* 손글씨 시계 */
.icon { position: fixed; z-index: 2; width: 58px; height: 58px; border-radius: 50%; border: 2px solid #8a5a2e; background: rgba(243, 227, 196, .94); box-shadow: 0 2px 8px rgba(20, 10, 4, .35); font-size: 28px; cursor: pointer; padding: 0; }
.icon img, .icon svg { position: absolute; inset: 0; margin: auto; height: 64%; max-width: 70%; object-fit: contain; pointer-events: none; } /* 손그림 아이콘(assets/icons) */
#mail { left: 16px; top: 12px; }
#mail b { position: absolute; right: -4px; top: -4px; min-width: 14px; height: 14px; border-radius: 7px; background: #d6533f; display: none; }
#write { left: 50%; bottom: 20px; transform: translateX(-50%); display: none; }
/* 처음 몇 초: 버튼 숨김(main.js calmStart) → 하나씩 천천히 나타나며 은은히 두 번 빛남 */
body.calm #write, body.calm #gazeBtn, body.calm #dozeBtn, body.calm #mail, body.calm #stampbar, body.calm #coins { opacity: 0 !important; pointer-events: none; }
body.reveal .icon, body.reveal #stampbar, body.reveal #coins { transition: opacity 1.6s ease !important; }
body.reveal #gazeBtn { transition-delay: .6s !important; } body.reveal #dozeBtn { transition-delay: 1.2s !important; }
body.reveal #mail { transition-delay: 1.8s !important; } body.reveal #stampbar, body.reveal #coins { transition-delay: 2.4s !important; }
body.hint #write, body.hint #gazeBtn, body.hint #dozeBtn { animation: hint 2.2s ease-in-out 1.4s 2; }
/* 폰 가로(main.js fit 이 body.land): 버튼을 작게, 오른쪽 아래에 세로로 쌓아 가운데 캐릭터를 안 가림 */
body.land .icon { width: 50px !important; height: 50px !important; font-size: 24px !important; }
/* 노치·홈 바(safe-area)만큼 안쪽으로 */
body.land #write { left: auto; right: calc(14px + env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; }
body.land #gazeBtn { left: auto; right: calc(14px + env(safe-area-inset-right)); bottom: calc(70px + env(safe-area-inset-bottom)); }
body.land #dozeBtn { left: auto; right: calc(16px + env(safe-area-inset-right)); bottom: calc(128px + env(safe-area-inset-bottom)); width: 46px !important; height: 46px !important; }
body.land #mail { left: calc(12px + env(safe-area-inset-left)); top: 8px; }
#clock { right: calc(16px + env(safe-area-inset-right)); }
@media (pointer: coarse), (max-width: 520px) { #clock { font-size: 22px; color: #fff3d6; background: rgba(30,22,14,.55); padding: 3px 9px; border-radius: 10px; opacity: 1; } }
/* 서 있을 때: 편지·창 단추는 흐리게 남김(누르면 가까운 빈 자리로 걸어가 앉고 열림). 졸기 단추는 앉았을 때만(heal.js) */
body.stand #write, body.stand #gazeBtn { display: block !important; opacity: .5; }
body.stand #write:hover, body.stand #gazeBtn:hover { opacity: .9; }
body.stand.calm #write, body.stand.calm #gazeBtn { opacity: 0 !important; }
#write, #gazeBtn { transition: opacity .5s; }
@keyframes hint { 50% { box-shadow: 0 0 0 4px rgba(255, 214, 140, .3), 0 0 26px rgba(255, 214, 140, .85); } }

/* ---- 켜 놓기 ---- */
body { --a1: #2e1e13; --a2: #1f140c; }
body[data-mood=rain] { --a1: #34404c; --a2: #151b24; } body[data-mood=night] { --a1: #1c2448; --a2: #0a0d1f; } body[data-mood=window] { --a1: #7a5a3a; --a2: #2a1c10; }
#amb { position: fixed; inset: 0; z-index: 9; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 16px; text-align: center; color: #f1dcb4; background: radial-gradient(ellipse at 50% 38%, var(--a1), var(--a2) 75%); transition: opacity 1.6s ease; }
#amb.go { opacity: 0; pointer-events: none; }
#amb h1 { margin: 0; font: 400 58px/1.1 'Nanum Pen Script', Gaegu, cursive; letter-spacing: 4px; color: #f6e2b8; text-shadow: 0 2px 12px rgba(255, 200, 120, .25); }
#amb p { margin: 0; max-width: 24em; font: 400 21px/1.5 Gaegu, 'Nanum Pen Script', cursive; color: #e6cc9e; }
#ambGo { width: 132px; height: 132px; border-radius: 50%; border: 3px solid #e8c586; background: rgba(243, 227, 196, .92); color: #5a3018; font: 400 34px/1 'Nanum Pen Script', Gaegu, cursive; cursor: pointer; display: grid; place-items: center; gap: 0; padding: 0; box-shadow: 0 0 0 0 rgba(255, 210, 140, .5); animation: ambPulse 3.2s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
#ambGo svg { width: 40px; height: 40px; margin-top: 18px; } #ambGo span { margin-bottom: 20px; }
#ambGo:disabled { animation: none; opacity: .55; cursor: default; }
@keyframes ambPulse { 50% { box-shadow: 0 0 0 12px rgba(255, 210, 140, .18), 0 0 36px rgba(255, 210, 140, .6); } }
#ambNav { font: 400 16px/1 Gaegu, 'Nanum Pen Script', cursive; color: #c4aa7c; display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }
#ambNav a { color: #d2b886; padding: 10px 8px; text-decoration: none; } #ambNav a:hover { text-decoration: underline; }
#amb .dots { position: absolute; inset: 0; pointer-events: none; opacity: .0; }
body[data-mood=night] #amb .dots { opacity: 1; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff6d6, transparent), radial-gradient(1.5px 1.5px at 78% 12%, #fff6d6, transparent), radial-gradient(2px 2px at 64% 30%, #fff6d6, transparent), radial-gradient(1.5px 1.5px at 30% 8%, #fff6d6, transparent), radial-gradient(1.5px 1.5px at 90% 40%, #fff6d6, transparent), radial-gradient(1.5px 1.5px at 8% 46%, #fff6d6, transparent); }
@media (max-width: 420px) { #amb h1 { font-size: 48px; } #amb p { font-size: 19px; } }
@media (max-height: 460px) { #amb { gap: 8px; } #amb h1 { font-size: 38px; } #amb p { display: none; } #ambGo { width: 92px; height: 92px; font-size: 26px; } #ambGo svg { width: 28px; height: 28px; margin-top: 10px; } #ambGo span { margin-bottom: 10px; } }
/* 켜 놓는 동안: 캔버스 말고는 다 숨김, 도구줄만 잠깐 */
body.amb > *:not(canvas):not(#amb):not(#ambBar) { display: none !important; }
body.amb canvas { cursor: default; }
#ambBar { position: fixed; z-index: 10; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(8px); display: flex; gap: 12px; padding: 10px 14px; border-radius: 40px; background: rgba(30, 20, 12, .55); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity .5s, transform .5s; }
#ambBar.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; }
#ambBar button { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #c9a46a; background: rgba(243, 227, 196, .92); color: #5a3018; padding: 0; display: grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#ambBar button.on { background: #f8e2a4; box-shadow: 0 0 14px rgba(255, 210, 140, .7); }
#ambBar svg { width: 28px; height: 28px; }
@media (pointer: coarse) { #ambBar button { width: 56px; height: 56px; } }
@media (max-width: 360px) { #ambBar { gap: 8px; padding: 8px 10px; } #ambBar button { width: 50px; height: 50px; } }