/* Phone scenes (user 2026-11-07): approved phone UI pilot (kit.css + chat.css, MAHO-PHONE-UI-PILOT-APPROVED-20261104-V1) in the game frame. */
.phone-stage{--ink:#2b2228;--paper:#fffdfa;--selected:#fde8ef;--accent:#ff6f9f;--line:#f1dbe3;--muted:#8a7a82;
 display:grid;grid-template-columns:minmax(300px,1fr) minmax(260px,.9fr);gap:28px;align-items:center;max-width:960px;margin:12px auto 0;padding:18px 24px;border-radius:28px;
 background:radial-gradient(120% 90% at 20% 10%,#fff3f8 0,#f6eefb 55%,#eef3fb 100%);box-shadow:0 10px 30px rgba(150,80,110,.12)}
.phone-holder{display:flex;justify-content:center}
.phone-device{width:300px;max-width:100%;margin:6px auto;padding:12px;border-radius:40px;background:var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.phone-screen{position:relative;display:flex;flex-direction:column;height:560px;border-radius:30px;overflow:hidden;background:var(--paper);color:var(--ink);font-family:'Malgun Gothic',sans-serif}
.phone-statusbar{display:flex;justify-content:space-between;padding:10px 22px 4px;font-size:12px;font-weight:700}
.phone-device[data-mode=call] .phone-screen{align-items:center;text-align:center;background:linear-gradient(180deg,var(--selected),var(--paper))}
.phone-call-name{margin:28px 0 2px;font-size:24px;font-weight:700}
.phone-call-timer{margin:0 0 22px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.phone-call-ring{position:relative;width:180px;height:180px;border-radius:50%;overflow:hidden;border:3px solid var(--accent);background:var(--selected);transition:box-shadow .3s}
.phone-call-ring.speaking{animation:phone-speak 1s ease-in-out infinite}
@keyframes phone-speak{0%,100%{box-shadow:0 0 0 0 rgba(255,111,159,0)}50%{box-shadow:0 0 0 10px rgba(255,111,159,.18)}}
.phone-face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.35);transform-origin:52% 42%}
.phone-caption{flex:1;width:calc(100% - 36px);margin:18px 18px 0;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px solid var(--line);font-size:15px;line-height:1.7;text-align:left;cursor:pointer;overflow:auto;box-sizing:border-box}
.phone-caption.is-player{color:var(--muted);font-style:italic}
.phone-call-buttons{display:flex;justify-content:space-around;width:100%;padding:16px 10px 20px;font-size:12px;color:var(--muted)}
.phone-call-buttons .end{color:#fff;background:#d9534f;border-radius:20px;padding:4px 14px}
.phone-chat-header{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line)}
.phone-chat-header p{margin:0;font-weight:700}
.phone-chat-icon,.phone-msg-icon{position:relative;flex:none;border-radius:50%;overflow:hidden;background:var(--selected)}
.phone-chat-icon{width:48px;height:48px;border:2px solid var(--accent)}
.phone-msg-icon{width:64px;height:64px;border:2px solid var(--accent)}
.phone-chat-icon .phone-face,.phone-msg-icon .phone-face{transform:scale(1.7);transform-origin:52% 40%}
.phone-chat-log{flex:1;overflow:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.phone-msg{display:flex;align-items:flex-start;gap:10px}.phone-msg.player{justify-content:flex-end}
.phone-bubble{margin:0;max-width:172px;padding:9px 12px;border-radius:16px;font-size:14px;line-height:1.6;background:var(--selected);border:1px solid var(--line);cursor:pointer;text-align:left}
.phone-msg.player .phone-bubble{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.phone-bubble.typing{color:var(--muted);font-size:13px}
.phone-chat-input{margin:8px 12px 14px;padding:9px 14px;border-radius:18px;border:1px solid var(--line);font-size:13px;color:var(--muted)}
.phone-silhouette{display:flex;align-items:flex-end;justify-content:center;background:var(--selected)}.phone-silhouette svg{width:100%;height:100%;fill:#1d1d1f}
/* right side: choices / next */
.phone-side{display:flex;flex-direction:column;gap:12px;align-items:stretch;font-family:'Malgun Gothic',sans-serif;color:var(--ink)}
.phone-side-title{margin:0;font-weight:800;color:#c2457a}
.phone-choices{display:flex;flex-direction:column;gap:10px}
.phone-choice{padding:12px 16px;border:0;border-radius:16px;background:#fff;box-shadow:0 3px 0 #f1cfdc,0 6px 16px rgba(150,80,110,.1);color:var(--ink);font:700 14px/1.5 'Malgun Gothic',sans-serif;text-align:left;cursor:pointer;transition:transform .12s}
.phone-choice:hover{transform:translateY(-1px)}
.phone-next{align-self:flex-end;padding:10px 22px;border:0;border-radius:16px;background:linear-gradient(180deg,#ff8db3,#ff6f9f);color:#fff;font:800 14px 'Malgun Gothic',sans-serif;cursor:pointer;box-shadow:0 3px 0 #e45a8a}
.phone-narr{margin:0;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.7);font-style:italic;color:#5b4a52;line-height:1.6}
.phone-side-tools{display:flex;gap:8px;justify-content:flex-end}.phone-tool{padding:6px 12px;border:0;border-radius:12px;background:#fff;color:#8a7a82;font:600 12px 'Malgun Gothic',sans-serif;cursor:pointer}
@media (max-width:760px){.phone-stage{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.phone-call-ring.speaking{animation:none}}

/* fit the phone inside the game frame (frame ≈ 16:9, sizes follow the frame width) */
.phone-stage{margin:.6cqw auto 0;padding:1cqw 2cqw;gap:2.4cqw;max-height:44cqw;box-sizing:border-box}
.phone-device{width:min(300px,21cqw);padding:.9cqw;border-radius:3cqw;margin:0 auto}
.phone-screen{height:min(560px,38cqw);border-radius:2.2cqw}
.phone-call-name{margin:1.6cqw 0 .2cqw;font-size:max(15px,1.7cqw)}.phone-call-timer{margin:0 0 1.2cqw}
.phone-call-ring{width:min(180px,12.5cqw);height:min(180px,12.5cqw)}
.phone-caption{margin:1.2cqw 1.2cqw 0;width:calc(100% - 2.4cqw);font-size:max(13px,1.05cqw)}
.phone-call-buttons{padding:1cqw .6cqw 1.2cqw}
.phone-stage{margin-top:7.4cqw}/* clear the absolutely placed top bar */

/* Game-frame layout (user 2026-11-07 "통화하면 화면이 확 좁아짐 — 원래 게임 크기에서 보여 주고 UI 재배치"):
   the phone scene fills the 16:9 frame like the contacts screen — left card holds the phone, right card the talk side. */
.game-screen[data-screen=phone]{background:radial-gradient(110% 90% at 28% 30%,#fff3f7 0%,#ffe9f0 38%,#e6f1ff 100%)}
.phone-stage{position:absolute;inset:11% 3% 4% 3%;max-width:none;max-height:none;margin:0!important;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw;align-items:stretch;background:none;box-shadow:none;border-radius:0}
.phone-holder,.phone-side{border-radius:2cqw;background:rgba(255,254,250,.94);box-shadow:0 .5cqw 1.6cqw rgba(160,90,120,.14),inset 0 0 0 .15cqw #f6dfe7;min-height:0}
.phone-holder{display:flex;align-items:center;justify-content:center;padding:1.4cqw;background:radial-gradient(90% 80% at 50% 40%,#fff 0,#fff3f7 60%,#fde8ef 100%)}
.phone-device{height:100%;width:auto;aspect-ratio:300/600;max-width:100%;padding:.8cqw;border-radius:3.2cqw;margin:0;box-sizing:border-box;box-shadow:0 1cqw 2.4cqw rgba(60,20,40,.28)}
.phone-screen{height:100%;border-radius:2.5cqw}
.phone-statusbar{padding:.8cqw 1.8cqw .3cqw;font-size:.95cqw}
.phone-call-name{margin:1.4cqw 0 .1cqw;font-size:2cqw}
.phone-call-timer{margin:0 0 1cqw;font-size:1cqw}
.phone-call-ring{width:13cqw;height:13cqw;border-width:.25cqw}
.phone-caption{margin:1.2cqw 1.2cqw 0;width:calc(100% - 2.4cqw);padding:1cqw 1.1cqw;border-radius:1.2cqw;font-size:1.25cqw}
.phone-call-buttons{padding:1cqw .8cqw 1.3cqw;font-size:1cqw}.phone-call-buttons .end{padding:.3cqw 1.2cqw;border-radius:2cqw}
.phone-chat-header{gap:.8cqw;padding:.8cqw 1.2cqw}.phone-chat-header p{font-size:1.3cqw}
.phone-chat-icon{width:3.6cqw;height:3.6cqw}.phone-msg-icon{width:4.2cqw;height:4.2cqw}
.phone-chat-log{padding:1cqw;gap:.8cqw}.phone-msg{gap:.7cqw}
.phone-bubble{max-width:15cqw;padding:.7cqw 1cqw;border-radius:1.2cqw;font-size:1.15cqw}.phone-bubble.typing{font-size:1cqw}
.phone-chat-input{margin:.6cqw 1cqw 1.1cqw;padding:.7cqw 1.1cqw;border-radius:1.5cqw;font-size:1cqw}
.phone-side{display:flex;flex-direction:column;gap:1.2cqw;padding:2cqw 2.2cqw}
.phone-side-head{display:flex;align-items:center;gap:1cqw;padding-bottom:1.2cqw;border-bottom:.12cqw solid #f6dfe7}
.phone-side-badge{padding:.25cqw .9cqw;border-radius:2cqw;background:#fff1f5;color:#e4467d;font-weight:800;font-size:1cqw;white-space:nowrap}
.phone-side-badge.live::before{content:'';display:inline-block;width:.6cqw;height:.6cqw;margin-right:.45cqw;border-radius:50%;background:#ff6f9f;vertical-align:.1cqw;animation:phone-live 1.4s ease-in-out infinite}
@keyframes phone-live{50%{opacity:.25}}
.phone-side-head h2{font-size:2.2cqw!important;margin:0;color:#3f3338}
.phone-side-body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:1.2cqw;overflow:auto}
.phone-side-title{font-size:1.4cqw}
.phone-choices{gap:.8cqw}
.phone-choice{padding:1cqw 1.4cqw;border-radius:1.4cqw;font-size:1.3cqw;box-shadow:0 .25cqw 0 #f1cfdc,0 .5cqw 1.2cqw rgba(150,80,110,.1)}
.phone-narr{padding:1cqw 1.2cqw;border-radius:1.2cqw;font-size:1.25cqw}
.phone-side-hint{margin:0;color:#8a7a82;font-size:1.15cqw;line-height:1.7}
.phone-side-foot{display:flex;align-items:center;justify-content:space-between;gap:1cqw}
.phone-next{padding:.8cqw 2.2cqw;border-radius:1.4cqw;font-size:1.3cqw;box-shadow:0 .25cqw 0 #e45a8a}
.phone-tool{padding:.5cqw 1.1cqw;border-radius:1cqw;font-size:1cqw;box-shadow:inset 0 0 0 .12cqw #f1e6ea}
@media(prefers-reduced-motion:reduce){.phone-side-badge.live::before{animation:none}}
.phone-statusbar{align-self:stretch}/* keep clock and signal apart in call mode */

/* outgoing call ringing (user 2026-11-07) */
.phone-call-ring.ringing{animation:phone-ringing 1s ease-in-out infinite}
@keyframes phone-ringing{0%,100%{box-shadow:0 0 0 0 rgba(255,111,159,.35)}60%{box-shadow:0 0 0 1.4cqw rgba(255,111,159,0)}}
.phone-caption.is-dialing{color:#8a7a82;text-align:center;display:flex;align-items:center;justify-content:center}
.phone-device[data-state=dialing] .phone-face{filter:saturate(.75) brightness(.95)}
@media(prefers-reduced-motion:reduce){.phone-call-ring.ringing{animation:none}}
.phone-bubble.has-photo{padding:5px 5px 8px;display:flex;flex-direction:column;gap:6px}.phone-photo{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--line)}.phone-photo-text{padding:0 6px}/* photo message (user 2026-11-09) */

/* photo / selfie she sent: tap to see it large (user 2026-11-12) */
.phone-photo{cursor:zoom-in}
.phone-photo-zoom{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;background:rgba(20,12,18,.88);cursor:zoom-out;animation:phone-zoom-in .18s ease-out}
.phone-photo-zoom img{max-width:94vw;max-height:92vh;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.45);object-fit:contain}
.phone-photo-zoom-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#3f3238;font-size:18px;cursor:pointer}
@keyframes phone-zoom-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.phone-photo-zoom{animation:none}}

/* her album (user 2026-11-12 "갤러리"): a grid of every photo and selfie she sent */
.phone-album{position:fixed;inset:0;z-index:2147482000;display:flex;align-items:center;justify-content:center;background:rgba(40,22,34,.55);animation:phone-zoom-in .18s ease-out}
.phone-album-panel{width:min(920px,92vw);max-height:86vh;display:flex;flex-direction:column;border-radius:20px;background:#fffdf9;box-shadow:0 18px 50px rgba(90,40,70,.3);overflow:hidden}
.phone-album-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid #f3dde6}
.phone-album-head h3{margin:0;font-size:20px;color:#4a3640}.phone-album-count{color:#b07a92;font-size:14px;font-weight:700;margin-right:auto}
.phone-album-close{width:36px;height:36px;border-radius:50%;border:0;background:#fbe8ef;color:#7a4a60;font-size:16px;cursor:pointer}
.phone-album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:16px 20px 20px;overflow-y:auto}
.phone-album-item{display:flex;flex-direction:column;gap:6px;padding:0;border:0;border-radius:14px;background:#fff;box-shadow:0 2px 10px rgba(160,90,120,.12),inset 0 0 0 1px #f3dde6;cursor:zoom-in;text-align:left;font:inherit;overflow:hidden}
.phone-album-item img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.phone-album-cap{display:flex;flex-direction:column;gap:2px;padding:0 10px 10px;font-size:12px;color:#6b5560;line-height:1.4}.phone-album-cap b{color:#c0567f;font-size:12px}
.phone-album-item:hover,.phone-album-item:focus-visible{outline:none;box-shadow:0 4px 14px rgba(160,90,120,.22),inset 0 0 0 2px #f39ab9}
@media (prefers-reduced-motion:reduce){.phone-album{animation:none}}