/* ── 道具と操作ガイド ──
   屋外（index.html）とプラネタリウム（planetarium.html）の右上に、同じ一式を同じ形で置く。
   ページごとのボタンの素地に引きずられないよう、道具のボタンの素地はここで決める（:where で弱く、
   ほかの道具の規則はそれより強く効く）。 */
:where(.tools){line-height:normal;letter-spacing:normal}
:where(.tools) button{font:inherit;color:inherit;cursor:pointer;min-height:auto;border:1px solid #cad8e52b;background:#07192c88;backdrop-filter:blur(14px);border-radius:5px;box-shadow:none;transition:background .25s,border-color .25s}
:where(.tools) button:hover{background:#31557399;border-color:#cfddcf88}
:where(.tools) button:focus-visible{outline:2px solid #f8d798;outline-offset:4px}
.tools button{padding:10px 15px;font-size:13px}
@media(max-width:600px){.tools button{padding:9px 11px}}
/* ── 道具（音楽・星座・星図・操作ガイド・全画面） ──
   広い画面では、アイコンと言葉を一列に並べる。 */
.tools{display:flex;align-items:flex-start;gap:8px}
#toolbox{display:flex;align-items:center;gap:8px}
/* 屋外の操作ガイドは列のいちばん後ろ。広い画面では「?」だけにして幅を詰める（名前は title と読み上げに残る）。
   小さな画面では「≪」で広げたときだけ、名前つきで出る。 */
.tools:not(.open) #help .tool-label{display:none}
.tools:not(.open) #help{padding:8px 12px}
/* 道具が一列に収まらない幅（1400px 以下の広い画面）では、ほかの道具も名前を隠してアイコンだけにする。名前は title と
   読み上げに残る。音楽と歩く速さは段階の並びがあるので、そのまま。小さな画面（アイコンの列）はこの下で別に決める。 */
@media (min-width:601px) and (max-width:1400px) and (min-height:561px),(min-width:601px) and (max-width:1400px) and (pointer:fine){
  .tools:not(.open) .tool:not(.tool-music,.tool-pace) .tool-label{display:none}
  .tools:not(.open) .tool:not(.tool-music,.tool-pace){padding:8px 12px}
}
.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}
  /* 広げる・たたむボタンがいちばん上。その下に音楽・星座・星図・あいさつ・マイページ。屋外の操作ガイドは広げた
     ときだけ、いちばん下に出る（index.html の #help は tool-more）。 */
  .tools-more{order:0}:is(.tool-music,.tool-pace){order:1}#constellations{order:2}#starmap{order:3}:is(#census,#guideButton){order:4}#greetToggle{order:5}#full{order:6}#myPage{order:7}#help{order:9}
  /* 丸はボタンではなくアイコンの側に持たせる。ボタンは、広げたときに言葉ごと押せる帯になる。 */
  /* 畳んでいるあいだは、どの帯も丸ひとつぶんの幅に揃えて、丸の中心を一本の縦の線に乗せる。 */
  .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}
  :is(#help,#guideButton) .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}
/* 横に持ったスマートフォンでは、縦の列だと下の端が歩くスティックにかかる。畳んでいるあいだは
   右上の縁に沿って横一列に並べ、「≪」で広げたときは縦の面（上）に戻す。 */
@media(max-height:560px) and (pointer:coarse) and (min-width:601px){
  .tools:not(.open){flex-direction:row-reverse;align-items:center}
}
/* マイページのアイコン。ログインしているあいだは、肩口に小さな金の点を灯す。 */
.tool-mypage .tool-icon{position:relative}
.tool-mypage[data-who=member] .tool-icon::after{content:'';position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:#e6cea3;box-shadow:0 0 6px #e6cea399}
@media(max-width:600px),(max-height:560px) and (pointer:coarse){.tool-mypage[data-who=member] .tool-icon::after{right:5px;top:5px;width:7px;height:7px}}
/* 操作ガイドの面。 */
#guide{position:fixed;z-index:13;top:95px;right:42px;width:min(370px,calc(100% - 32px));max-height:calc(100dvh - 120px);overflow-y:auto;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}
#guide kbd{border:1px solid #ffffff40;padding:2px 6px;border-radius:3px;margin-right:4px;font:12px monospace}
@media(max-width:600px){#guide{right:16px}}
@media(max-width:900px){#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){#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-height:520px) and (orientation:landscape){#guide{max-height:calc(100dvh - 104px);top:calc(74px + env(safe-area-inset-top))}}
/* ── 操作ガイド ──
   いまいる場所の説明を、何をするか（左）と、どうするか（右）の二列で。キーの話は指で扱わない
   画面に、指の話は指で扱う画面にだけ出す。どちらの画面でも、同じ一枚が同じ順に並ぶ。 */
#guide{overscroll-behavior:contain}
.guide-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 16px}
.guide-head h2{margin:0}
#guide .guide-close{flex:none;width:36px;height:36px;padding:0;margin:-6px -8px 0 0;border-color:transparent;background:transparent;font-size:20px;line-height:1;color:#b9cadd}
.guide-list{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;margin:0 0 18px;font-size:13.5px;line-height:1.8}
.guide-list dt{grid-column:1;color:#e9d5a6;font-size:12px;letter-spacing:.06em;line-height:2.05;white-space:nowrap}
.guide-list dd{grid-column:2;margin:0;color:#c3d0da;overflow-wrap:anywhere}
#guide .guide-list kbd{font-size:11px}
@media not (pointer:coarse){#guide .for-touch{display:none}}
@media(pointer:coarse){#guide .for-desk{display:none}}
/* 画面の上まで届く面——屋外の「望遠鏡を選ぶ」、湖畔のアカウント、マイページ、道ばたのポストと掲示板、客席の番組、机の紙、コンソールの手動操作——が
   開いているあいだも、道具（とりわけ操作ガイド）は隠さない。ヘッダーを面より手前に出し、小さな画面では
   道具を右上の縁に沿って横一列に並べて（面はその下から始まる）、名札は引っ込める（マイページまで並ぶと、
   一列が左の端のマークまで届く）。 */
:is(body:has(#roofPanel:not([hidden])),body:has(#lodgePanel:not([hidden])),body:has(#notePanel:not([hidden])),body:has(#accountPanel:not([hidden])),body:has(#myPagePanel:not([hidden])),body:has(#letterPanel:not([hidden])),body:has(#boardPanel:not([hidden])),body:has(#summitPanel:not([hidden])),body:has(#fishingSignPanel:not([hidden])),
  body[data-program-panel=true],body[data-console-panel=true],body[data-lobby-view=notebook][data-notebook-page=open]) header{z-index:12}
@media(max-width:600px),(max-height:560px) and (pointer:coarse){
  :is(body:has(#roofPanel:not([hidden])),body:has(#lodgePanel:not([hidden])),body:has(#notePanel:not([hidden])),body:has(#accountPanel:not([hidden])),body:has(#myPagePanel:not([hidden])),body:has(#letterPanel:not([hidden])),body:has(#boardPanel:not([hidden])),body:has(#summitPanel:not([hidden])),body:has(#fishingSignPanel:not([hidden])),
    body[data-program-panel=true],body[data-console-panel=true],body[data-lobby-view=notebook][data-notebook-page=open]) .tools:not(.open){flex-direction:row-reverse;align-items:center;gap:4px}
  :is(body:has(#roofPanel:not([hidden])),body:has(#lodgePanel:not([hidden])),body:has(#notePanel:not([hidden])),body:has(#accountPanel:not([hidden])),body:has(#myPagePanel:not([hidden])),body:has(#letterPanel:not([hidden])),body:has(#boardPanel:not([hidden])),body:has(#summitPanel:not([hidden])),body:has(#fishingSignPanel:not([hidden])),
    body[data-program-panel=true],body[data-console-panel=true],body[data-lobby-view=notebook][data-notebook-page=open]) .brand{visibility:hidden}
}
/* ── 管理人の札 ──
   管理人の名前の前に置く、金色に塗りつぶした札（admin-badge.js）。紺の星と「管理人」の字を、光る金の地に
   のせる。名前に打てるのは字と記号だけで、塗った地も縁の光も作れないので、まねようがない（星や絵文字の
   名前はサーバが断る）。谷の名札（map-pin.js）も同じ札を描く。 */
.admin-badge{display:inline-flex;align-items:center;gap:.28em;margin:0 .45em 0 0;padding:.1em .62em .1em .42em;border-radius:999px;
  background:linear-gradient(135deg,#fff3c8,#f4c95f 52%,#d99a2b);color:#17202e;font-size:.8em;font-weight:700;letter-spacing:.08em;line-height:1.45;
  white-space:nowrap;vertical-align:.08em;box-shadow:0 0 0 1px #fff0b8,0 0 12px #f5c45a8c;text-shadow:none}
.admin-badge::before{content:'';flex:none;width:1.05em;height:1.05em;background:#17202e;
  clip-path:polygon(50% 0,61.2% 34.5%,97.6% 34.5%,68.2% 55.9%,79.4% 90.5%,50% 69.1%,20.6% 90.5%,31.8% 55.9%,2.4% 34.5%,38.8% 34.5%)}
/* ── 居場所（管理人だけ） ──
   道具の列の人のアイコンに、いまの人数を小さく添える。押すと、どこに何人いるかの面が左上に開く。 */
.census-icon{position:relative}
.census-total{position:absolute;right:-6px;bottom:-5px;font:400 10px/1 'Noto Sans JP',sans-serif;color:#ffe3a8;text-shadow:0 0 3px #000,0 0 2px #000}
.census-total:empty{display:none}
@media(max-width:600px),(max-height:560px) and (pointer:coarse){.census-total{right:2px;bottom:2px;font-size:12px}}
.census-panel{position:fixed;z-index:13;top:95px;left:42px;width:min(320px,calc(100% - 32px));max-height:calc(100dvh - 130px);overflow-y:auto;overscroll-behavior:contain;
  padding:20px 22px;background:#071627ed;border:1px solid #d0deeb44;border-radius:8px;box-shadow:0 20px 100px #0006;color:#f2f2df;font-size:13px;line-height:1.7;backdrop-filter:blur(16px)}
.census-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 6px}
.census-head h2{margin:0;font-family:'Noto Serif JP',serif;font-size:18px;font-weight:400;letter-spacing:.06em}
.census-panel .census-close{flex:none;width:34px;height:34px;padding:0;margin:-6px -8px 0 0;border:0;background:transparent;backdrop-filter:none;font-size:20px;line-height:1;color:#b9cadd;cursor:pointer}
.census-summary{margin:0 0 12px;color:#e6d4a6}
.census-group{display:flex;justify-content:space-between;margin:12px 0 4px;padding-bottom:4px;border-bottom:1px solid #cad8e52e;color:#e9d5a6;font-size:12px;letter-spacing:.06em}
.census-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0 3px 10px;color:#c3d0da}
.census-count{white-space:nowrap;color:#f2f2df;font-variant-numeric:tabular-nums}
.census-empty{margin:4px 0 0 10px;color:#91a8bc;font-size:12px}
.census-foot{margin:14px 0 0;color:#8a9fb2;font-size:11px;line-height:1.6}
/* 小さな画面では、右の道具の丸の列を避けて、その左に開く（道具を押せば、また閉じられる）。 */
@media(max-width:600px){.census-panel{top:calc(78px + env(safe-area-inset-top));left:calc(12px + env(safe-area-inset-left));right:calc(70px + env(safe-area-inset-right));width:auto;max-height:calc(100dvh - 120px);padding:16px 16px}}