.phone-panel { margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#101012; display:flex; align-items:center; justify-content:space-between; gap:14px; }
.phone-panel-copy { min-width:0; display:grid; gap:4px; }
.phone-panel-copy h2 { margin:0; font-size:.86rem; }
.phone-panel-copy span { color:var(--muted); font-size:.72rem; }
.phone-toggle { min-height:42px; padding:0 14px; border:1px solid var(--line-strong); border-radius:10px; background:#171719; color:var(--text); font:inherit; font-size:.78rem; font-weight:850; cursor:pointer; white-space:nowrap; }
.phone-toggle:hover { border-color:#5b5b64; background:#1d1d20; }
.phone-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.phone-modal[hidden] { display:none !important; }
.phone-modal { position:fixed; inset:0; z-index:1100; display:grid; place-items:center; padding:20px; }
.phone-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; background:rgba(0,0,0,.76); cursor:pointer; }
.phone-device { position:relative; z-index:1; width:390px; max-width:calc(100vw - 40px); padding:14px 12px 16px; border:1px solid #4a4a50; border-radius:34px; background:#08080a; box-shadow:0 28px 80px rgba(0,0,0,.55); overflow:hidden; }
.phone-device:focus { outline:none; }
.phone-speaker { width:76px; height:5px; margin:0 auto 10px; border-radius:999px; background:#303036; }
.phone-screen { position:relative; width:100%; height:min(690px,calc(86vh - 76px)); min-height:520px; overflow:hidden; overflow:clip; border:1px solid #242428; border-radius:22px; background:#111114; }
.phone-statusbar { position:relative; z-index:30; width:100%; min-height:38px; padding:0 14px; border-bottom:1px solid rgba(255,255,255,.06); background:#111114; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.phone-statusbar strong { font-size:.73rem; letter-spacing:.02em; }
.phone-statusbar span { color:var(--muted); font-size:.58rem; font-weight:850; letter-spacing:.08em; }
.phone-stage { position:relative; isolation:isolate; width:100%; height:calc(100% - 38px); overflow:hidden; overflow:clip; background:#111114; }
.phone-page { position:absolute !important; top:0; left:0; right:auto; bottom:auto; width:100% !important; min-width:100%; max-width:none !important; height:100%; margin:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; transform:translateX(100%); opacity:0; visibility:hidden; pointer-events:none; z-index:0; transition:transform .28s cubic-bezier(.22,.78,.24,1),opacity .2s ease; background:#111114; }
.phone-page.is-active { transform:translateX(0); opacity:1; visibility:visible; pointer-events:auto; z-index:10; }
.phone-page.is-left { transform:translateX(-100%); opacity:0; visibility:hidden; pointer-events:none; z-index:1; }
.phone-page[hidden] { display:none !important; }

.phone-home-view { background:radial-gradient(circle at 20% 10%,rgba(200,255,72,.13),transparent 34%),linear-gradient(160deg,#1a1d16 0,#111114 44%,#0e0e10 100%); }
.phone-home-wallpaper { width:100%; min-height:100%; padding:34px 20px 26px; display:flex; flex-direction:column; }
.phone-home-clock { padding:8px 4px 38px; }
.phone-home-clock small { color:#a2a797; font-size:.58rem; font-weight:900; letter-spacing:.16em; }
.phone-home-clock h2 { margin:5px 0 3px; font-size:2rem; letter-spacing:.02em; }
.phone-home-clock p { margin:0; color:#c6c8c1; font-size:.75rem; }
.phone-app-grid { width:100%; margin-top:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 18px; }
.phone-app-icon { min-width:0; padding:0; border:0; background:transparent; color:var(--text); font:inherit; cursor:pointer; display:grid; justify-items:center; gap:8px; }
.phone-app-symbol { width:68px; height:68px; border-radius:18px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.12); box-shadow:0 7px 22px rgba(0,0,0,.28); font-size:.72rem; font-weight:950; letter-spacing:.04em; }
.phone-app-symbol-map { background:linear-gradient(145deg,#29442e,#18271b); color:#c8ff48; }
.phone-app-symbol-health { background:linear-gradient(145deg,#7a2f35,#461b20); color:#fff; font-size:2rem; font-weight:500; }
.phone-app-symbol-roster { background:linear-gradient(145deg,#29445e,#17283a); color:#d7edff; }
.phone-app-symbol-message { background:linear-gradient(145deg,#48652a,#273817); color:#e9ffad; font-size:1.15rem; }
.phone-app-icon strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.74rem; font-weight:800; }
.phone-app-icon:hover .phone-app-symbol { transform:translateY(-2px); border-color:rgba(255,255,255,.28); }
.phone-app-icon:focus-visible { outline:2px solid var(--accent); outline-offset:5px; border-radius:18px; }

.phone-app-view { width:100% !important; background:#111114; }
.phone-app-nav { position:sticky; top:0; z-index:20; width:100%; min-height:52px; padding:0 10px; border-bottom:1px solid #29292e; background:rgba(17,17,20,.98); backdrop-filter:blur(8px); display:grid; grid-template-columns:58px minmax(0,1fr) 58px; align-items:center; gap:0; }
.phone-app-nav button { width:42px; height:42px; justify-self:start; border:0; background:transparent; color:var(--accent); font:inherit; font-size:2rem; line-height:1; cursor:pointer; }
.phone-app-nav h2 { min-width:0; margin:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.96rem; text-align:center; }
.phone-app-nav > span { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--muted); font-size:.58rem; text-align:right; white-space:nowrap; }
.phone-app-nav button:focus-visible,.phone-profile-back:focus-visible,.phone-home:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.phone-app-body { width:100%; min-height:calc(100% - 52px); padding:16px 14px 22px; }
.phone-app-caption { margin:0 0 10px; color:var(--muted); font-size:.66rem; font-weight:800; letter-spacing:.04em; }

.phone-map { position:relative; width:100%; aspect-ratio:1.18/1; min-height:290px; overflow:hidden; border:1px solid #2f2f35; border-radius:16px; background:radial-gradient(circle at 50% 50%,#1a1a1d 0 50%,#0d0d0f 77%); }
.phone-map-shape { position:absolute; inset:9% 9% 8%; border:1px solid #55555e; border-radius:47% 53% 43% 57% / 40% 39% 61% 60%; background:linear-gradient(145deg,#28282c,#19191c); transform:rotate(-3deg); }
.phone-map-shape::before { content:""; position:absolute; inset:12% 18%; border:1px dashed #404047; border-radius:50% 42% 55% 46%; opacity:.65; }
.phone-map-place { position:absolute; z-index:2; min-width:66px; padding:5px 7px; border:1px solid #393940; border-radius:8px; background:#121214; color:#a7a7ae; font-size:.61rem; font-weight:800; text-align:center; }
.phone-map-place.is-current { border-color:var(--accent); background:#202217; color:var(--accent); }
.phone-map-place.is-current::after { content:"現在地"; display:block; margin-top:2px; font-size:.5rem; font-weight:900; }
.phone-map-lighthouse { top:11%; right:7%; }
.phone-map-spring { top:21%; left:40%; }
.phone-map-forest { top:43%; left:5%; }
.phone-map-hut { top:49%; right:22%; }
.phone-map-pier { right:6%; bottom:12%; }
.phone-map-beach { left:10%; bottom:9%; }
.phone-current { margin:12px 2px 0; color:var(--muted); font-size:.72rem; text-align:right; }
.phone-current strong { color:var(--text); }

.phone-health-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
.phone-health-summary > div { padding:14px; border:1px solid #303036; border-radius:14px; background:#17171a; display:grid; gap:5px; }
.phone-health-summary span { color:var(--muted); font-size:.62rem; font-weight:900; }
.phone-health-summary strong { font-size:1.5rem; }
.phone-health-card { padding:15px; border:1px solid #34343a; border-radius:16px; background:#17171a; }
.phone-health-card > p { margin:0 0 3px; color:var(--accent); font-size:.56rem; font-weight:900; letter-spacing:.13em; }
.phone-health-card > h3 { margin:0 0 12px; font-size:.92rem; }
.phone-ability-list { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.phone-ability-list > div { min-height:62px; padding:10px; border:1px solid #333339; border-radius:11px; background:#111114; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; }
.phone-ability-list > div:last-child { grid-column:1/-1; }
.phone-ability-list dt { color:#a6a6ae; font-size:.67rem; font-weight:900; }
.phone-ability-list dd { margin:0; font-size:1rem; font-weight:950; }
.phone-health-note { margin:10px 2px 0; color:var(--muted); font-size:.65rem; line-height:1.6; }

.phone-alive-list { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.phone-alive-list li { margin:0; }
.phone-survivor-button { width:100%; min-height:58px; padding:0 12px; border:1px solid #303036; border-radius:12px; background:#17171a; color:var(--text); font:inherit; cursor:pointer; display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:10px; text-align:left; }
.phone-survivor-button::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--accent); }
.phone-survivor-button.is-eliminated::before { background:#55555d; }
.phone-survivor-button strong { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.82rem; font-weight:800; }
.phone-survivor-button span { color:var(--muted); font-size:.68rem; white-space:nowrap; }
.phone-survivor-button:hover { border-color:#55555e; background:#1b1b1f; }
.phone-survivor-button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.phone-profile-view { width:100%; padding:12px 14px 20px; }
.phone-profile-back { min-height:40px; margin:0 0 10px; padding:0; border:0; background:transparent; color:var(--accent); font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; }
.phone-profile-sheet { width:100%; overflow:hidden; border:1px solid #3b3b42; border-radius:12px; background:#f0efe9; color:#141414; }
.phone-profile-heading { min-height:132px; padding:15px; border-bottom:1px solid #aaa79e; display:grid; grid-template-columns:86px minmax(0,1fr); gap:14px; align-items:center; }
.phone-profile-photo { width:86px; height:106px; border:1px solid #9c998f; background:#d8d6ce; color:#555249; display:grid; place-items:center; font-size:1.1rem; font-weight:900; letter-spacing:.08em; text-align:center; white-space:pre-line; }
.phone-profile-heading p { margin:0 0 5px; color:#625f57; font-size:.55rem; font-weight:900; letter-spacing:.13em; }
.phone-profile-heading h2 { margin:0 0 4px; color:#111; font-size:1.25rem; line-height:1.25; }
.phone-profile-heading span { color:#5e5b54; font-size:.7rem; }
.phone-profile-fields { margin:0; }
.phone-profile-fields > div { min-height:48px; border-bottom:1px solid #aaa79e; display:grid; grid-template-columns:88px minmax(0,1fr); }
.phone-profile-fields > div:last-child { border-bottom:0; }
.phone-profile-fields dt { padding:11px 10px; border-right:1px solid #aaa79e; background:#dedcd4; color:#444139; font-size:.68rem; font-weight:900; }
.phone-profile-fields dd { margin:0; padding:11px 12px; color:#191919; font-size:.78rem; line-height:1.6; }
.phone-profile-fields .phone-profile-note { min-height:96px; }

.phone-message-body { width:100%; min-height:calc(100% - 52px); display:grid; place-items:center; text-align:center; }
.phone-message-empty { width:min(250px,100%); margin:0 auto; padding:30px 12px; text-align:center; }
.phone-message-empty-icon { width:68px; height:68px; margin:0 auto 16px; border:1px solid #3b4b2b; border-radius:20px; background:#202b16; color:var(--accent); display:grid; place-items:center; font-size:1.3rem; font-weight:900; }
.phone-message-empty h3 { margin:0 0 8px; font-size:.95rem; }
.phone-message-empty p { margin:0; color:var(--muted); font-size:.72rem; line-height:1.7; }

.phone-home { display:block; width:44px; height:5px; margin:12px auto 0; border:0; border-radius:999px; background:#414148; cursor:pointer; }
.phone-home:hover { background:#66666e; }
body.phone-modal-open { overflow:hidden; }

@media (max-width:640px) {
  .phone-panel { align-items:stretch; flex-direction:column; }
  .phone-toggle { width:100%; }
  .phone-modal { padding:10px; align-items:end; }
  .phone-device { width:100%; max-width:100%; border-radius:28px 28px 14px 14px; }
  .phone-screen { height:min(720px,calc(88vh - 76px)); min-height:500px; }
  .phone-map { min-height:300px; aspect-ratio:auto; }
}