@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500&family=Noto+Serif+JP:wght@400;500&display=swap');
:root{color-scheme:dark;font-family:'Noto Sans JP',sans-serif;color:#f2f2df;background:#06152b}*{box-sizing:border-box}body{margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #cad8e52b;background:#07192c88;backdrop-filter:blur(14px);border-radius:5px;transition:background .25s,border-color .25s}button:hover{background:#31557399;border-color:#cfddcf88}button:focus-visible{outline:2px solid #f8d798;outline-offset:4px}button:disabled{opacity:.65;cursor:wait}#world,canvas,.vignette{position:fixed;inset:0;width:100%;height:100%}canvas{display:block;touch-action:none}.vignette{pointer-events:none;background:linear-gradient(#020c1c65,transparent 26%,transparent 64%,#020c1ccc)}header{position:fixed;top:34px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;z-index:3}.brand{display:flex;align-items:center;gap:15px;font-family:'Noto Serif JP',serif;font-size:23px;letter-spacing:.22em;text-shadow:0 2px 15px #000}.brand small{display:block;font:10px 'Noto Sans JP',sans-serif;letter-spacing:.29em;margin-top:6px;color:#b9cadd}.emblem{font-size:45px;font-weight:400;color:#e9d5a6}img.emblem{display:block;flex:none;width:1em;height:1em}.tools{display:flex;gap:9px}.tools button{padding:10px 15px;font-size:13px}.compass{position:fixed;top:40px;left:50%;transform:translateX(-50%);color:#c0d4e6;text-align:center;font-size:12px;letter-spacing:.15em;pointer-events:none}.compass div{opacity:.55;font-size:13px;margin-top:7px}#intro{position:fixed;left:8%;top:29%;text-shadow:0 2px 20px #00101c;transition:opacity .8s,transform .8s}#intro.dismissed{opacity:0;transform:translateY(15px);pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.22em;color:#bbc9d5}h1{font-family:'Noto Serif JP',serif;font-weight:400;font-size:clamp(38px,4.4vw,70px);letter-spacing:.14em;margin:22px 0}#intro p:not(.eyebrow){font-size:15px;line-height:2.2;letter-spacing:.13em;color:#d3dce1}#intro .primary{display:block;margin:29px 0 14px;background:#f3e6c9;color:#162737;border:0;padding:16px 28px;letter-spacing:.1em;font-size:14px;min-width:200px}#intro .primary:hover{background:#fff4dd}#intro small{font-size:11px;color:#9cabbc;letter-spacing:.08em}footer{position:fixed;bottom:34px;left:42px;right:42px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;pointer-events:none}footer>*{pointer-events:auto}.location{display:flex;flex-direction:column;gap:9px;min-width:200px}.location strong{font:22px 'Noto Serif JP',serif;letter-spacing:.12em}.location #status{font-size:12px;color:#a9bccb}nav{display:flex;background:#07162796;border:1px solid #d0deeb28;padding:5px;border-radius:6px;backdrop-filter:blur(14px)}nav button{background:transparent;backdrop-filter:none;border-color:transparent;padding:13px 18px;font-size:13px}nav button span{font-size:10px;opacity:.5;margin-right:10px}nav button.selected{background:#cad8e51a;border-color:#d0deeb25;color:#ffe8b8}.hint{font-size:10px;line-height:2;letter-spacing:.15em;color:#9aafbf;text-align:right}.hint span{font-size:11px}#guide{position:fixed;z-index:8;top:95px;right:42px;width:min(370px,calc(100% - 32px));background:#071627ed;padding:25px;border:1px solid #d0deeb44;border-radius:8px;box-shadow:0 20px 100px #0006}#guide h2{font-family:'Noto Serif JP';font-size:20px;font-weight:400}#guide p{font-size:14px;line-height:2;color:#c3d0da}#guide button{padding:9px 18px}kbd{border:1px solid #ffffff40;padding:2px 6px;border-radius:3px;margin-right:4px;font:12px monospace}#toast{position:fixed;top:110px;left:50%;transform:translateX(-50%);font-size:13px;background:#071627b0;padding:11px 22px;border-radius:5px;opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}#toast.show{opacity:1}#reticle{position:fixed;top:50%;left:50%;color:#e6f5ff66;pointer-events:none}/* 十字ボタンは画面から降りて、指にはジョイスティック（touch-controls.css）を渡した。支援技術のためのボタンだけはここに残し、読み上げからは今までどおり歩ける。 */#pad{display:none;position:fixed;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}body.playing #pad{display:block}#touchStick{--stick-bottom:120px}@media(max-width:900px){header{top:20px;left:22px;right:22px}.brand{font-size:19px}.compass{top:100px}footer{bottom:22px;left:22px;right:22px;flex-wrap:wrap;gap:20px}.hint{display:none}nav{margin-left:auto}nav button{padding:12px}.location{min-width:150px}.location strong{font-size:19px}#intro{left:8%;top:27%}}@media(max-width:600px){.brand{font-size:17px;gap:8px}.emblem{font-size:33px}.tools button{padding:9px 11px}#full{display:none}.tools{gap:5px}.brand small{font-size:9px}#intro{top:25%;left:28px}#intro .eyebrow{font-size:9px}h1{font-size:40px}#intro p:not(.eyebrow){font-size:14px}footer{gap:17px;bottom:18px}.location{width:100%}.location .eyebrow{display:none}.location #status{display:none}nav{width:100%;justify-content:space-between}nav button{padding:11px 9px;font-size:12px}nav button span{margin-right:6px}#guide{right:16px}body.playing .location{margin-left:0}#toast{top:135px;max-width:95%;font-size:12px}}
[hidden]{display:none!important}body[data-mode]:not([data-mode=walk]) #pad,body[data-mode]:not([data-mode=walk]) #touchStick,body[data-mode]:not([data-mode=walk]) .hint{display:none!important}button,input,textarea{font-size:14px}input,textarea{color:#eef1e5;background:#061525b8;border:1px solid #71859a70;border-radius:5px;padding:12px;font:inherit;width:100%;outline-offset:3px}textarea{resize:vertical;min-height:120px}label{display:block;font-size:14px;margin:14px 0 8px}#interact{position:fixed;left:50%;transform:translateX(-50%);bottom:142px;z-index:4;background:#efe2c2;color:#193042;padding:15px 25px;border:1px solid #ffefd4;box-shadow:0 3px 25px #010a1e55;font-size:15px}#leaveExperience{position:fixed;left:50%;transform:translateX(-50%);bottom:140px;z-index:10;padding:12px 20px;background:#071627df}.experience-panel{position:fixed;z-index:8;top:110px;right:32px;width:min(380px,calc(100% - 32px));max-height:calc(100dvh - 250px);overflow:auto;padding:26px;background:#071627ee;border:1px solid #7e99ad55;border-radius:9px;box-shadow:0 12px 70px #02081677;backdrop-filter:blur(20px)}.experience-panel h2,#restPanel h2{font-family:'Noto Serif JP',serif;font-weight:400;font-size:25px;letter-spacing:.07em;margin:12px 0 20px}.experience-panel p{font-size:14px;color:#c1d0d8;line-height:1.9}.experience-panel button{padding:11px 15px}.experience-panel .close{position:absolute;right:13px;top:13px;padding:3px 11px;background:transparent;border:0;font-size:25px}.experience-panel h3{font-size:14px;font-weight:400;margin-top:25px}.experience-panel .subtle{font-size:12px;line-height:1.8;color:#91a8bc}.target-buttons,.travel-buttons{display:flex;gap:7px;flex-wrap:wrap}.target-buttons .selected{background:#c2d3e633;border-color:#b6cce1}.lodge-actions{display:grid;gap:10px}.lodge-actions button{text-align:left;padding:17px}.lodge-actions span{display:block;color:#b5c6d0;font-size:12px;margin-top:6px}#restPanel{position:fixed;left:50%;transform:translateX(-50%);bottom:195px;text-align:center;pointer-events:none;z-index:4;width:min(90%,500px);text-shadow:0 2px 16px #000}#restPanel p{font-size:14px;color:#c5d3e0}#restPanel button{pointer-events:auto;padding:9px 16px;font-size:13px}#scopeMask{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 0 27vh,#030609 28vh);opacity:.96;z-index:2}body[data-mode=telescope] footer,body[data-mode=telescope] .compass{opacity:0;pointer-events:none}body[data-mode=telescope] footer *{pointer-events:none}#scopePanel{z-index:5}#scopePanel input{padding:0;accent-color:#e6cea3}#scopePanel .eyebrow{font-size:11px}#notePanel{z-index:11}#noteState,#chatState{font-size:12px;min-height:22px;overflow-wrap:anywhere}.input-row{display:flex;gap:7px}.input-row input{min-width:0}.input-row button{flex-shrink:0;padding:10px 13px}#occupants{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}#occupants span{background:#536c7940;border-radius:12px;padding:4px 9px;font-size:12px;color:#d0d9db}
/* A guest's name is their own say-so, so it is shown as one — quietly, beside the name. */
.guest-mark{font-size:10px;letter-spacing:.08em;color:#9fb3c4;border:1px solid #9fb3c455;border-radius:9px;padding:0 5px;vertical-align:1px}#messages .chat-remove{display:inline-block;min-height:0;min-width:0;width:auto;margin:0 0 0 2px;padding:3px 9px;border:1px solid #ffffff33;border-radius:9px;background:transparent;box-shadow:none;color:inherit;font-size:11px;line-height:1.4;cursor:pointer}#messages .chat-remove:hover{background:#ffffff14}#people{font-size:13px;color:#d4c397}#messages{height:clamp(110px,22vh,250px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}#messages article{border-left:2px solid #466379;padding:5px 10px;margin:10px 0}#messages article.own{border-color:#d5b576}#messages small{font-size:11px;color:#a4b3c4}#messages p{margin:5px 0;font-size:14px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap}#messages .empty{color:#9aaec0;font-size:13px}#chatPanel h2{margin-bottom:12px}#chatPanel label{margin-top:8px}#chatPanel{max-height:calc(100dvh - 190px)}#interactionPanel{display:none}
@media(max-width:900px){.experience-panel{right:20px;top:100px;max-height:calc(100dvh - 220px)}#restPanel{bottom:190px}#interact,#leaveExperience{bottom:140px}}@media(max-width:600px){.experience-panel{top:85px;right:16px;padding:20px;max-height:calc(100dvh - 230px)}#interact,#leaveExperience{bottom:135px;padding:13px 18px;font-size:14px;white-space:nowrap}#scopePanel{top:auto;bottom:190px;max-height:35vh;background:#071627b3}#scopeMask{background:radial-gradient(circle at 50% 29%,transparent 0 21vh,#030609 22vh)}#restPanel{bottom:210px}#restPanel h2{font-size:21px}#chatPanel{max-height:calc(100dvh - 220px)}#messages{height:15vh;min-height:90px}#chatPanel .subtle{margin-bottom:0}#notePanel{max-height:calc(100dvh - 180px)}body[data-mode=telescope] #leaveExperience{bottom:135px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* A quiet, fixed-field eyepiece; no display or time controls. */
#scopePanel{width:300px}#scopePanel h2{font-size:22px}#scopeMask{background:radial-gradient(circle at 50% 45%,transparent 0 27vh,#030609 28vh)}@media(max-width:600px){#scopePanel{top:auto;bottom:195px;max-height:25vh;width:calc(100% - 32px)}#scopeMask{background:radial-gradient(circle at 50% 27%,transparent 0 20vh,#030609 21vh)}}

#constellations[aria-pressed="true"]{background:rgba(130,189,222,.24);border-color:#aacfe7;color:#e5f5ff}
@media(max-width:600px){header{gap:8px}}

/* An all-sky finder chart and target list beside the eyepiece. */
#scopePanel{width:min(340px,calc(100% - 32px));max-height:calc(100dvh - 210px)}
#finderBox{margin:18px 0 4px}
#finder{display:block;margin:0 auto;width:100%;max-width:240px;border-radius:50%;background:#06121f}
#finderCaption{margin:9px 0 0;text-align:center}
#scopeReadout{display:flex;gap:8px;margin:14px 0 2px;padding:0}
#scopeReadout div{flex:1;min-width:0;background:#0d203466;border:1px solid #cad8e522;border-radius:5px;padding:8px 10px}
#scopeReadout dt{font-size:10px;letter-spacing:.18em;color:#a3b8c9}
#scopeReadout dd{margin:6px 0 0;font-size:14px;color:#f0e6cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#scopeTargets{width:100%;font:inherit;font-size:14px;color:#eef1e5;background:#061525;border:1px solid #71859a70;border-radius:5px;padding:10px;outline-offset:3px}
#scopeTargetState{min-height:20px;margin:9px 0 0}
.scope-actions{display:flex;gap:7px;margin:11px 0 18px}
.scope-actions button{flex:1;padding:9px 6px;font-size:13px}
#trackToggle[aria-pressed=true]{background:#c9a86038;border-color:#e6cea3;color:#ffeccb}
@media(max-width:600px){#scopePanel{max-height:48vh;bottom:178px}#finder{max-width:148px}#finderCaption{display:none}}

/* Magnification control at the eyepiece. */
.scope-zoom{display:flex;align-items:center;gap:8px;margin:8px 0 2px}
.scope-zoom button{flex:0 0 38px;padding:7px 0;font-size:16px;line-height:1}
.scope-zoom input[type=range]{flex:1;min-width:0;height:22px}
#scopePower{margin:9px 0 0}
#scopePower strong{color:#f3e3bf;font-weight:500;font-size:14px}

/* Choosing a telescope on the observatory roof. */
#roofPanel{z-index:9;width:min(400px,calc(100% - 32px))}
#roofPanel #observerName{margin-bottom:6px}
#roofList{display:grid;gap:7px;margin:12px 0 4px}
.roof-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;
padding:10px 12px;background:#0d203455;border:1px solid #cad8e522;border-radius:6px}
.roof-row.mine{border-color:#e6cea3aa;background:#c9a86026}
.roof-row strong{font-family:'Noto Serif JP',serif;font-weight:400;font-size:17px;color:#f0e6cf}
.roof-row span{font-size:12px;line-height:1.6;color:#b7c8d6;overflow-wrap:anywhere}
.roof-row button{padding:8px 12px;font-size:12px;white-space:nowrap}
#roofState:empty{min-height:0;margin:0}
#scopeShare{margin:2px 0 0;color:#d9c79c}
#scopeShare:empty{display:none}
@media(max-width:600px){.roof-row{grid-template-columns:auto 1fr;row-gap:6px}.roof-row button{grid-column:2;justify-self:start}}


#starMapPanel{position:fixed;inset:0;z-index:12;background:#06152b}
#starMapFrame{width:100%;height:100%;border:0;display:block;background:#06152b}
.starmap-bar{position:absolute;top:0;left:0;z-index:2;display:flex;align-items:center;gap:14px;padding:18px 22px;pointer-events:none}
.starmap-bar>*{pointer-events:auto}
.starmap-bar .emblem{font-size:28px;color:#e9d5a6}
.starmap-bar strong{display:block;font:19px 'Noto Serif JP',serif;letter-spacing:.2em}
.starmap-bar small{display:block;font-size:9px;letter-spacing:.29em;margin-top:4px;color:#b9cadd}
.starmap-bar button{padding:10px 16px;font-size:12px;letter-spacing:.1em;margin-left:8px}
@media(max-width:600px){#starmap .wide{display:none}.starmap-bar{padding:12px 14px;gap:9px}.starmap-bar .emblem{font-size:22px}.starmap-bar strong{font-size:16px}.starmap-bar small{display:none}.starmap-bar button{padding:9px 12px;font-size:11px}}

/* 持ち手を選ぶ一行。押した側がそのままスティックの居場所になる。 */
.hand-pick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13px;color:#c3d0da}
.hand-pick button{padding:10px 15px;font-size:13px;min-height:44px}
.hand-pick button[aria-pressed=true]{background:#cad8e51f;border-color:#e9d5a67d;color:#ffe8b8}

/* ── 電話のための、最後の一枚 ──
   親指は画面の下すみにある。左下はスティックのために空け、場所の名前と行き先は右へ寄せて
   畳む。上下の余白は切り欠きとホームバーのぶんだけ env() で広げ、指で押すものはどれも
   44px を下回らないようにした。 */
@media(max-width:900px){header{top:calc(18px + env(safe-area-inset-top));left:calc(20px + env(safe-area-inset-left));right:calc(20px + env(safe-area-inset-right))}footer{bottom:calc(18px + env(safe-area-inset-bottom));left:calc(20px + env(safe-area-inset-left));right:calc(20px + env(safe-area-inset-right))}#guide{top:calc(88px + env(safe-area-inset-top));max-height:calc(100dvh - 130px - env(safe-area-inset-top));overflow:auto}}
@media(max-width:600px){.location strong{font-size:17px}#touchStick{--stick-bottom:calc(16px + env(safe-area-inset-bottom));--stick-side:12px}.brand small{display:none}.brand{font-size:16px;gap:7px}.emblem{font-size:28px}#interact{bottom:calc(206px + env(safe-area-inset-bottom))}#leaveExperience{bottom:calc(132px + env(safe-area-inset-bottom))}#intro{right:28px}#toast{top:calc(148px + env(safe-area-inset-top))}#guide{top:auto;bottom:calc(16px + env(safe-area-inset-bottom));right:calc(16px + env(safe-area-inset-right));max-height:calc(100dvh - 150px)}}
@media(max-width:380px){nav button{padding:12px 8px;font-size:12px}}
@media(max-height:520px) and (orientation:landscape){.location{display:none}.compass{top:calc(24px + env(safe-area-inset-top))}#toast{top:calc(74px + env(safe-area-inset-top))}#touchStick{--stick-bottom:calc(12px + env(safe-area-inset-bottom))}#interact{bottom:calc(178px + env(safe-area-inset-bottom))}#guide{max-height:calc(100dvh - 104px);top:calc(74px + env(safe-area-inset-top))}.experience-panel{top:calc(72px + env(safe-area-inset-top));max-height:calc(100dvh - 150px)}}

/* ── 畳んでおく ──
   親指のためにスティックが片隅を占めるので、小さな画面では道具も行き先もボタンひとつに畳み、
   押したときだけ開く。足もとに残るのは、いまいる場所の名前と「行き先」の一枚だけ。開く面は
   スティックと反対の側から出る。畳んだなかでは字を省かない――狭いのは画面で、言葉ではない。 */
#places{display:none}#placeList{display:flex}.folded{display:none}
@media(max-width:600px),(max-height:560px) and (pointer:coarse){
  /* 足もとは一列に畳んで、スティックの隅ぶんだけ余白を空ける。並びを align だけに頼ると、
     古い margin:auto が勝って隅へ貼りついてしまうので、margin もここで言い切る。 */
  footer{flex-direction:column;gap:9px;align-items:flex-start;padding-left:0;padding-right:var(--stick-room)}
  .location,nav{width:auto;min-width:0;max-width:100%;margin:0 auto 0 0}
  .location{text-align:left}
  body[data-stick=left] footer{align-items:flex-end;padding-left:var(--stick-room);padding-right:0}
  body[data-stick=left] .location,body[data-stick=left] nav{margin:0 0 0 auto}
  body[data-stick=left] .location{text-align:right}
  nav{position:relative;width:auto;max-width:none;padding:0;background:transparent;border:0;backdrop-filter:none}
  #places{display:block;min-height:48px;padding:13px 18px;font-size:13px;letter-spacing:.06em;background:#07162796;border:1px solid #d0deeb28;backdrop-filter:blur(14px)}
  nav.open #places{background:#31557399;border-color:#cfddcf88}
  #placeList{display:none;position:absolute;bottom:calc(100% + 10px);left:0;flex-direction:column;gap:4px;padding:7px;min-width:188px;background:#071627f2;border:1px solid #d0deeb44;border-radius:9px;box-shadow:0 18px 60px #0008;backdrop-filter:blur(16px)}
  body[data-stick=left] #placeList{left:auto;right:0}
  nav.open #placeList{display:flex}
  #placeList button{width:100%;min-height:48px;padding:12px 14px;font-size:13px;text-align:left}
  #placeList button span{display:inline;margin-right:11px;opacity:.5}
  .hint{display:none}
}

/* ── 天文台を、小さな画面へ ──
   屋上では押すものがふたつ出る（「のぞく」と「降りる」）。同じ高さに置けばかさなるのが道理
   なので、縦に積んでスティックの上へ逃がす。望遠鏡をえらぶ面は一枚の紙として開き、接眼の面
   は畳めるようにして、上半分は夜のために空けておく。 */
.fold{margin:14px 0 0;border-top:1px solid #cad8e524;padding-top:2px}
.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;min-height:44px;font-size:13px;color:#bccbd8}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:'＋';font-size:12px;color:#e9d5a6}
.fold[open]>summary::before{content:'−'}
.fold>summary:hover{color:#ffe8b8}
@media(max-width:600px),(max-height:560px) and (pointer:coarse){
  #interact{bottom:calc(206px + env(safe-area-inset-bottom));max-width:calc(100% - 26px);white-space:normal;text-align:center;line-height:1.55}
  #roofPanel{top:calc(80px + env(safe-area-inset-top));bottom:calc(16px + env(safe-area-inset-bottom));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));width:auto;max-height:none}
  #scopePanel .fold{margin-top:11px}
  #restPanel{bottom:calc(214px + env(safe-area-inset-bottom))}
}
@media(max-height:520px) and (orientation:landscape){
  #interact{bottom:calc(120px + env(safe-area-inset-bottom))}
  #roofPanel{top:calc(56px + env(safe-area-inset-top));bottom:calc(14px + env(safe-area-inset-bottom));left:auto;right:calc(12px + env(safe-area-inset-right));width:min(420px,52%);max-height:none}
}

/* ── のぞき穴を、面でふさがない ──
   望遠鏡は画面の中心を向いている。だから明るい丸も画面の中心に据え、半径は「操作の面までの
   距離」から取る。面のほうは一本の帯に畳めるようにした（experiences.js の scopeBar）。畳め
   ば丸はいっぱいに開き、ひらいているあいだだけ夜に重なる。どの画面でも丸が消えないよう、
   半径には下限を置いた。 */
#scopeFold{position:absolute;right:14px;top:12px;z-index:1;padding:9px 13px;font-size:12px;min-height:40px}
#scopePanel h2{max-width:calc(100% - 104px)}
/* 帯の姿：方位と高度、倍率、そして「操作」だけ。どの画面でも同じ姿で、置き場所だけが変わる。 */
#scopePanel{transition:background .3s ease,padding .3s ease}
#scopePanel.bar{display:flex;align-items:center;gap:9px;padding:9px 92px 9px 11px;max-height:none;overflow:visible;background:#071627e0}
#scopePanel.bar>*{display:none}
#scopePanel.bar>#scopeReadout{display:flex;flex:1;margin:0}
#scopePanel.bar>#scopePower{display:block;flex:0 0 auto;margin:0;font-size:12px;white-space:nowrap}
#scopePanel.bar>#scopeFold{display:block;top:50%;transform:translateY(-50%)}
#scopePanel.bar #scopeReadout div{padding:6px 9px}
#scopePanel.bar .wide{display:none}
#scopeMask{background:radial-gradient(circle at var(--eye-x,50%) var(--eye-y,45%),transparent 0 var(--eye-r,26vh),#030609 calc(var(--eye-r,26vh) + 1px))}
/* 狭い画面・低い画面では、面を下に敷く。たためば方位・高度・倍率だけの一本の帯。 */
@media(max-width:900px),(max-height:620px){
  #scopePanel{top:auto;bottom:calc(74px + env(safe-area-inset-bottom));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));width:auto;max-height:min(34vh,270px);padding:16px 18px}
  #scopePanel h2{font-size:19px;margin:8px 0 12px}
  body[data-mode=telescope] #leaveExperience{bottom:calc(14px + env(safe-area-inset-bottom))}
  #scopePower .wide{display:none}
}
/* 横に寝かせた画面では、面は右の柱、帯は下の右寄り、「戻る」は左の隅。 */
@media(max-height:520px) and (orientation:landscape){
  #scopePanel{top:calc(56px + env(safe-area-inset-top));bottom:calc(14px + env(safe-area-inset-bottom));left:auto;right:calc(12px + env(safe-area-inset-right));width:min(340px,46%);max-height:none}
  #scopePanel.bar{top:auto;bottom:calc(10px + env(safe-area-inset-bottom));left:calc(196px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));width:auto}
  body[data-mode=telescope] #leaveExperience{left:calc(16px + env(safe-area-inset-left));transform:none;bottom:calc(14px + env(safe-area-inset-bottom))}
}

/* ── 何もしないための場所 ──
   ハンモックと焚き火と窓辺は、座るためではなく、何もしないためにある。小さな画面では名札も
   行き先も道具も外し、残った一枚（居場所の名と「戻る」）も数秒で静かに消える。画面のどこか
   に触れれば、また出てくる（experiences.js の hush と stir）。 */
@media(max-width:600px),(max-height:560px) and (pointer:coarse){
  body.resting[data-mode=window] header,body.resting .compass,body.resting footer,body.resting #reticle{display:none}
  body.resting #restPanel,body.resting #leaveExperience{transition:opacity .28s ease}
  body.resting.hushed #restPanel,body.resting.hushed #leaveExperience{opacity:0;pointer-events:none;transition:opacity 1.2s ease}
  body.resting #restPanel{bottom:calc(150px + env(safe-area-inset-bottom))}
  body.resting #leaveExperience{bottom:calc(24px + env(safe-area-inset-bottom));padding:12px 22px;font-size:13px;background:#07162799}
  #leaveExperience .wide{display:none}
}
@media(prefers-reduced-motion:reduce){body.resting #restPanel,body.resting #leaveExperience{transition:none}}

/* ── 湖畔の会話を、小さな画面で ──
   焚き火のそばで交わす二言三言が主で、履歴は読みたいときに読むもの。だから席から見えている
   のは最新のふたつだけにして、面は画面のいちばん下に低く。それ以前の会話は「会話履歴」から
   夜の上へ全画面に開き、地は半透明の黒――星の上でも字が読めるように。 */
#chatLog,#leaveSeat,#chatFold,.chat-bar{display:none}
/* 自分の席は金で示す。名前のうしろに「（あなた）」と書き足す必要はない。 */
#occupants span.self{background:#c9a86040;border:1px solid #e2c17f7a;color:#ffe8b8}
/* 一言は120字まで。残りが少なくなったときだけ、字数がそっと出る。 */
.chat-foot{position:relative}
#chatCount{position:absolute;right:0;top:0;font-size:11px;letter-spacing:.05em;color:#d7c49a}
@media(max-width:600px),(max-height:560px) and (pointer:coarse){
  /* 座っているあいだは、方位も行き先も要らない。下は入力のために空ける。 */
  body[data-mode=chat] .compass,body[data-mode=chat] footer,body[data-mode=chat] #reticle{display:none}
  /* 面は三つに分ける：履歴と離席のひと並びが上に、入力と送信が下に留まり、動くのはあいだだけ。
     地は下ほど濃く、上は焚き火が透けるように薄い。ぼかしは置かない――ぼかしを持つ親は position:fixed の基準になってしまい、この中から
     画面の上へ出す名札も、全画面の会話も、面の中に閉じ込められてしまうから。 */
  #chatPanel{top:auto;bottom:calc(14px + env(safe-area-inset-bottom));left:calc(12px + env(safe-area-inset-left));right:calc(12px + env(safe-area-inset-right));width:auto;
    max-height:min(50dvh,calc(100dvh - 170px));padding:12px 14px 13px;display:flex;flex-direction:column;overflow:hidden;
    background:linear-gradient(180deg,#071627bd,#071627f0);backdrop-filter:none}
  /* 場所の名と、いま何人いるか。面のものではなく夜のものなので、画面の上に置いて字だけ出す。 */
  .chat-head{position:fixed;top:calc(78px + env(safe-area-inset-top));left:calc(18px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right));
    display:block;text-align:center;pointer-events:none;text-shadow:0 2px 14px #000,0 1px 26px #000a}
  .chat-head .eyebrow{font-size:9px;color:#c6d5e2}
  .chat-head h2{margin:5px 0 0;font-size:21px}
  .chat-head #people{margin-top:6px;color:#e6d4a6}
  /* 履歴をひらくのも、席を立つのも、この面の中で。上にひと並び置いて、動かさない。 */
  .chat-bar{display:flex;flex:0 0 auto;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
  #chatFold,#chatLog{display:block;width:auto;margin:0;padding:9px 15px;min-height:40px;font-size:12px;letter-spacing:.06em;color:#c3d3e0;background:#0d1c2c8a;border:1px solid #cad8e544}
  #chatFold{position:relative}
  /* 畳んでいるあいだに届いた一言は、金の点で知らせる。 */
  #chatFold.new::after{content:'';position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:#f0cf92;box-shadow:0 0 0 3px #f0cf9226}
  /* 畳めば、細い一本だけが夜の下に残る。 */
  #chatPanel.folded{padding:9px 12px;background:#071627cc;max-height:none}
  #chatPanel.folded .chat-scroll,#chatPanel.folded .chat-foot,#chatPanel.folded #chatLog{display:none}
  #chatPanel.folded .chat-bar{margin-bottom:0}
  #leaveSeat{display:block;margin-left:auto;padding:9px 17px;min-height:40px;font-size:12px;letter-spacing:.08em;background:#0d1c2c9e;border-color:#cad8e547}
  body[data-mode=chat] #leaveExperience{display:none}
  .chat-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .chat-foot{flex:0 0 auto;margin-top:8px;padding-top:9px;border-top:1px solid #cad8e52e}
  .chat-foot form{margin:0}
  #chatState{margin:0 0 7px;min-height:0;font-size:12px}
  #chatState:empty{display:none}
  #chatPanel p{font-size:13px}
  #people{font-size:12px;white-space:nowrap}
  #occupants{margin:0 0 2px;gap:5px}
  #occupants span{font-size:11px;padding:3px 8px}
  #chatPanel label{margin:8px 0 6px;font-size:13px}
  #chatForm label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .input-row{gap:8px}
  .input-row input{padding:11px 12px}
  .input-row button{min-height:44px;white-space:nowrap;padding:11px 15px}
  /* 席から見えるのは、最新の五つ。それ以前は「会話履歴」のほうに。 */
  #messages{height:auto;max-height:none;overflow:visible;margin:2px 0 0}
  #messages>*{display:none}
  #messages>*:nth-last-child(-n+5){display:block}
  #messages article{max-width:92%;margin:8px 0;padding:2px 0 2px 10px}
  #messages p{font-size:14px;line-height:1.75;margin:3px 0 0}
  #messages small{font-size:11px;color:#a9bccb}
  /* 自分の一言は右へ寄せ、金の縁と淡い暖色を敷く。誰のものかは、読む前に分かる。 */
  #messages article.own{margin-left:auto;padding:2px 10px 2px 0;text-align:right;
    border-left:0;border-right:2px solid #e2c17f;background:linear-gradient(90deg,#e2c17f00,#e2c17f14);border-radius:3px}
  #messages article.own small{color:#d9c49b}
  #messages .empty{font-size:13px;line-height:1.8}
  /* 名前を決めるあいだは、会話を見せない――決めるべきことは、ひとつだけ。
     ただし席を立つ道だけは残す（小さな画面では、ここが唯一の出口）。 */
  #chatPanel.waiting .chat-scroll,#chatPanel.waiting #chatLog{display:none}
  #chatPanel.waiting .chat-foot{margin-top:0;padding-top:0;border-top:0}
  #chatPanel.waiting #chatState{color:#d7c49a}
  #chatLog:hover{background:#cad8e514;color:#ffe8b8}
  /* ひらけば、夜の上に全画面。 */
  body.chat-log #messages{position:fixed;inset:0;z-index:13;margin:0;max-height:none;display:flex;flex-direction:column;
    padding:calc(78px + env(safe-area-inset-top)) 18px calc(26px + env(safe-area-inset-bottom));
    background:#00000094;backdrop-filter:blur(7px);overflow-y:auto;overscroll-behavior:contain}
  body.chat-log #messages>*{display:block}
  body.chat-log #messages>*:first-child{margin-top:auto}
  body.chat-log #messages article{max-width:88%;margin:14px 0;padding:6px 12px;border-left-color:#7d98ad}
  body.chat-log #messages article.own{margin-left:auto;padding:6px 12px 6px 0;text-align:right;border-left:0;border-right:2px solid #e2c17f}
  body.chat-log #messages p{font-size:15px;line-height:1.85}
  body.chat-log #messages small{font-size:12px;color:#b9cadd}
  body.chat-log #chatLog{position:fixed;z-index:14;top:calc(18px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right));
    width:auto;margin:0;padding:11px 20px;min-height:44px;font-size:13px;color:#f2f2df;background:#0d1c2cf2;border:1px solid #cad8e566;border-radius:5px}
  body.chat-log #chatPanel{backdrop-filter:none}
  body.chat-log #leaveExperience{display:none}
}
/* ── 道具（音楽・星座・星図・操作ガイド・全画面） ──
   広い画面では、アイコンと言葉を一列に並べる。 */
.tools{display:flex;align-items:flex-start;gap:8px}
#toolbox{display:flex;align-items:center;gap:8px}
.tool{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;font-size:13px}
.tool-icon{display:inline-grid;place-items:center;width:20px;height:20px;line-height:1;font-size:15px;flex:none}
.tool-icon svg{display:block;width:18px;height:18px}
/* 星座のアイコンは、線を隠しているあいだだけ斜線を引く。 */
.tool-slash{display:none}
#constellations[aria-pressed=false] .tool-slash{display:inline}
#constellations[aria-pressed=false] .tool-icon{opacity:.75}
/* 星図のアイコンは画像の形だけを借りて、色は字と同じにする。 */
.icon-starmap{display:block;width:21px;height:21px;background:currentColor;-webkit-mask:url(icons/star-map.png) center/contain no-repeat;mask:url(icons/star-map.png) center/contain no-repeat}
:is(.tool-music,.tool-pace){display:inline-flex;align-items:center;gap:4px;padding:2px;border:1px solid #cad8e52b;border-radius:6px;background:#07192c88;backdrop-filter:blur(14px)}
:is(.tool-music,.tool-pace) .tool-label{display:none}
:is(#musicToggle,#paceToggle){display:inline-grid;place-items:center;width:34px;height:34px;padding:0;border-color:transparent;background:transparent;backdrop-filter:none}
.tools-more{display:none}
/* 音符。音量は右下の小さな数字、ミュートは斜線。 */
.bgm-note{position:relative;display:inline-block;width:20px;height:20px;line-height:0}
.bgm-note svg{display:block;width:20px;height:20px}
.bgm-slash{display:none}
.bgm-note[data-level=mute] .bgm-slash{display:inline}
.bgm-note[data-level=mute]{opacity:.75}.pace-walker{position:relative;display:inline-block;width:20px;height:20px;line-height:0}.pace-walker i{display:block;width:100%;height:100%;background:currentColor;-webkit-mask:url(icons/walk.png) center/contain no-repeat;mask:url(icons/walk.png) center/contain no-repeat}.pace-walker b{position:absolute;right:-5px;bottom:-4px;font:600 10px/1 'Noto Sans JP',sans-serif;color:#ffe3a8;text-shadow:0 0 3px #000,0 0 2px #000}
.bgm-note b{position:absolute;right:-5px;bottom:-4px;font:600 10px/1 'Noto Sans JP',sans-serif;color:#ffe3a8;text-shadow:0 0 3px #000,0 0 2px #000}
.bgm-levels{display:flex;align-items:center;gap:2px}
.bgm-levels .bgm-level{min-height:0;padding:6px 9px;font-size:12px;border-color:transparent;background:transparent;backdrop-filter:none}
.bgm-levels .bgm-level[aria-pressed=true]{background:#c9a86038;border-color:#e6cea3;color:#ffeccb}
/* 小さな画面では、音楽・星座・星図のアイコンだけを右上に縦に並べる。ほとんど透かした丸にして、
   空の上に浮かぶ印くらいの重さにとどめ、印そのものは丸いっぱいに大きく描く。
   いちばん上の「≪」で広げると、面が右からせり出して、アイコンの左に言葉と音量の選択が、下に操作ガイドが出る。
   アイコンの丸は広げても動かない。「≪」はくるりと裏返って「≫」になり、閉じるボタンになる。
   全画面は小さな画面では使わないので出さない。 */
@media(max-width:600px),(max-height:560px) and (pointer:coarse){
  header{align-items:flex-start}
  .tools{position:absolute;top:-8px;right:-8px;z-index:2;flex-direction:column;align-items:flex-end;gap:8px;padding:8px;border-radius:14px}
  #toolbox{display:contents}
  /* 広げる・たたむボタンがいちばん上。その下に音楽・星座・星図、広げたときだけ操作ガイド。 */
  .tools-more{order:0}:is(.tool-music,.tool-pace){order:1}#constellations{order:2}#starmap{order:3}#help{order:4}#full{order:5}
  /* 丸はボタンではなくアイコンの側に持たせる。ボタンは、広げたときに言葉ごと押せる帯になる。 */
  /* 畳んでいるあいだは、どの帯も丸ひとつぶんの幅に揃えて、丸の中心を一本の縦の線に乗せる。 */
  .tools .tool,.tools :is(.tool-music,.tool-pace){flex-direction:row-reverse;justify-content:flex-start;gap:10px;width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:22px;background:transparent;backdrop-filter:none}
  .tool .tool-icon,#musicToggle,#paceToggle{width:44px;height:44px;flex:none;border-radius:999px;background:#07192c59;border:1px solid #cad8e51f;backdrop-filter:blur(8px);opacity:.9}
  .tool-icon svg{width:30px;height:30px}
  .icon-starmap{width:36px;height:36px}
  #help .tool-icon{font-size:22px}
  #musicToggle .bgm-note,#musicToggle .bgm-note svg{width:30px;height:30px}#paceToggle .pace-walker{width:30px;height:30px}#paceToggle .pace-walker b{right:-6px;bottom:-5px;font-size:12px}
  #musicToggle .bgm-note b{right:-6px;bottom:-5px;font-size:12px}
  #constellations[aria-pressed="true"]{background:transparent;border:0}
  #constellations[aria-pressed="true"] .tool-icon{background:#82bdde3d;border-color:#aacfe7}
  .tool-label,.tool-more,.tool-desk{display:none}
  /* 広げる・たたむボタン。丸の列の頭に置く細い札で、縁と山形だけを淡い金にして「ここから開く」を示す。
     山形は線で描き、開くときは裏返って向きを変える。 */
  .tools .tools-more{display:grid;place-items:center;width:44px;height:26px;padding:0;border-radius:999px;color:#e6cea3;background:linear-gradient(180deg,#12263bb3,#07192c73);border:1px solid #e6cea340;box-shadow:inset 0 1px 0 #ffffff14,0 2px 10px #0006;backdrop-filter:blur(8px);opacity:.9;transition:background .25s,border-color .25s,box-shadow .25s,transform .15s}
  .tools .tools-more svg{width:18px;height:18px;transition:transform .4s cubic-bezier(.4,1.4,.5,1)}
  .tools .tools-more:hover{border-color:#e6cea380;background:linear-gradient(180deg,#1b3350cc,#0a1f3599)}
  .tools .tools-more:active{transform:scale(.93)}
  /* 広げた面。右端の丸の列はそのままに、左へ伸びる帯として言葉と選択を見せる。 */
  /* 広げた面は枠で囲まない。列ごとに、半透明のすりガラスの帯を敷き、その帯は丸の側では濃く、外（左）
     と上下の縁に向かってぼかしごと消えていく。夜空との境目を線で引かずに済ませる。 */
  .tools.open{width:min(270px,calc(100vw - 24px));align-items:stretch;animation:toolsOut .32s cubic-bezier(.2,.8,.2,1)}
  .tools.open .tool,.tools.open :is(.tool-music,.tool-pace){position:relative;isolation:isolate}
  .tools.open .tool::before,.tools.open :is(.tool-music,.tool-pace)::before{content:'';position:absolute;inset:-4px -24px -4px 0;z-index:-1;pointer-events:none;
    background:linear-gradient(to left,#0a1c30d9,#07162799 60%,#07162700);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    -webkit-mask-image:linear-gradient(to left,#000 40%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(to left,#000 40%,transparent),linear-gradient(to bottom,transparent,#000 22%,#000 78%,transparent);mask-composite:intersect;transition:opacity .2s}
  .tools.open .tool:hover::before{background:linear-gradient(to left,#16304ce6,#0c2139a6 60%,#0c213900)}
  .tools.closing{animation:toolsIn .26s ease-in forwards}
  .tools.open .tool,.tools.open :is(.tool-music,.tool-pace){width:100%}
  .tools.open .tool-label{display:inline;font-size:14px;white-space:nowrap;text-shadow:0 1px 8px #000c}
  .tools.open :is(.tool-music,.tool-pace) .tool-label{display:none}
  .tools.open .tool-more{display:flex}
  .tools.open .tool-desk{display:none}
  .tools.open :is(#musicLevels,#paceLevels){flex:1;min-width:0}
  /* 歩く速さの 1・2・3 は、音楽の 1・2・3 と同じ列に揃える。音楽の「ミュート」がある場所には名前を置く。 */
  .tools.open .pace-levels::before{content:"歩く速さ";flex:2.2;font-size:13px;text-align:center;white-space:nowrap;text-shadow:0 1px 8px #000c}
  .tools.open .bgm-levels{width:100%;gap:4px}
  .tools.open .bgm-levels .bgm-level{flex:1;min-height:36px;padding:6px 0;font-size:13px;white-space:nowrap;border:1px solid #cad8e52b;background:#07192c8c}
  .tools.open .bgm-levels:not(.pace-levels) .bgm-level:first-of-type{flex:2.2}
  .tools.open .bgm-levels .bgm-level[aria-pressed=true]{background:#c9a86038;border-color:#e6cea3;color:#ffeccb}
  .tools.open .tools-more{align-self:flex-end;opacity:1;border-color:#e6cea366;box-shadow:inset 0 1px 0 #ffffff14,0 0 12px #e6cea31f}
  .tools.open:not(.closing) .tools-more svg{transform:rotateY(180deg)}
  /* 帯は画面の右端まで届くので、せり出す動きの切り抜きも右と上下に余白をとる。 */
  @keyframes toolsOut{from{clip-path:inset(-12px -24px -12px calc(100% - 60px))}to{clip-path:inset(-12px -24px -12px 0)}}
  @keyframes toolsIn{from{clip-path:inset(-12px -24px -12px 0)}to{clip-path:inset(-12px -24px -12px calc(100% - 60px))}}
}
@media(prefers-reduced-motion:reduce){.tools.open,.tools.closing{animation:none}.tools .tools-more svg{transition:none}}
/* 道具の字と記号は細い線で。太い字は夜空の上で重く見える。 */
.tool-label,.bgm-levels .bgm-level,.tool-icon{font-weight:300}
.bgm-note b{font-weight:400}