/* 凪の島さんぽ — ゲーム固有のスタイル */
#game-root{--g3d-title:'Zen Maru Gothic','Zen Kaku Gothic New',sans-serif;--paper-a:#f7f0e0;--paper-b:#efe3c9;--ink-a:#2f261c;--ink-b:#6c5a44}

/* 時計 */
.is-clock{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border-radius:14px;background:rgba(10,13,18,.46);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.is-clock__ico{width:26px;height:26px;display:grid;place-items:center}
.is-clock__ico svg{width:24px;height:24px;fill:#ffd27a}
.is-clock__ico svg .s{fill:none;stroke:#ffd27a;stroke-width:1.8;stroke-linecap:round}
.is-clock[data-ico="moon"] svg{fill:#dfe6ff}
.is-clock[data-ico="rain"] svg{fill:#c9d4de}.is-clock[data-ico="rain"] svg .s{stroke:#9fc4e8}
.is-clock__txt{display:flex;flex-direction:column;line-height:1.2}
.is-clock__txt b{font-size:15px;font-weight:900;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.is-clock__txt small{font-size:11px;opacity:.75;font-weight:700;letter-spacing:.06em}
.is-keys{display:flex;gap:8px;font-size:11.5px;font-weight:700;opacity:.8}
.is-keys span{display:flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;border-radius:9px;background:rgba(10,13,18,.35)}
.is-keys kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:5px;background:#f4f1ea;color:#15181c;font:800 11px/1 var(--g3d-ui)}

/* 撮影の枠と向きの案内 */
.is-finder{position:absolute;left:50%;top:50%;width:min(62vw,560px);aspect-ratio:16/9;transform:translate(-50%,-50%);pointer-events:none;animation:is-finder .35s ease both}
.is-finder i{position:absolute;width:34px;height:34px;border:3px solid rgba(255,248,230,.9);filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.is-finder i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}.is-finder i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.is-finder i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}.is-finder i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.is-finder span{position:absolute;left:50%;top:-34px;transform:translateX(-50%);white-space:nowrap;font-weight:800;font-size:14px;letter-spacing:.12em;text-shadow:0 1px 4px rgba(0,0,0,.7)}
@keyframes is-finder{from{opacity:0;transform:translate(-50%,-50%) scale(1.06)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.is-aim{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.is-aim b{position:absolute;left:0;top:0;font-size:34px;color:#ffe2b0;text-shadow:0 2px 8px rgba(0,0,0,.6);transform:rotate(var(--a)) translate(min(24vw,190px)) translate(-50%,-50%);transform-origin:0 0;line-height:1}
.is-aim span{position:absolute;left:0;top:78px;transform:translateX(-50%);white-space:nowrap;padding:6px 14px;border-radius:99px;background:rgba(10,13,18,.55);font-size:13px;font-weight:700}

/* 重ねる画面 */
.is-layer{position:absolute;inset:0;z-index:26;display:none;place-items:center;overflow:auto;padding:calc(62px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));background:rgba(8,10,14,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.is-layer.is-on{display:grid}
.is-ov{width:100%;max-height:100%;display:flex;justify-content:center;animation:g3d-fade .25s ease both}

/* 地図 */
.is-map{gap:18px;align-items:center}
.is-map__frame{position:relative;width:min(80vh,72vw,760px);aspect-ratio:1;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px -10px rgba(0,0,0,.7),0 0 0 6px #d9c6a0,0 0 0 8px #6b5236;background:#d9e8e4}
.is-map__frame canvas{position:absolute;inset:0;width:100%;height:100%}
.is-map__side{width:220px;color:var(--paper-a);display:flex;flex-direction:column;gap:10px}
.is-map__side h2{margin:0;font-size:22px;letter-spacing:.14em}
.is-map__count{margin:0;font-weight:800;font-size:14px;line-height:1.7}
.is-map__legend{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px;font-weight:700}
.is-map__legend li{display:flex;align-items:center;gap:8px}
.is-map__legend i{width:18px;height:18px;border-radius:5px;display:inline-block;border:2px solid #3b2d20;background:#fff8e6}
.is-map__legend .k-q{border-radius:50%;background:rgba(255,248,230,.7)}
.is-map__legend .k-me{border:0;background:none;width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:18px solid #f4b877}
.is-map__note{margin:0;font-size:12.5px;opacity:.78;line-height:1.7}

/* 景色帳 */
.is-album__book{width:min(980px,100%);max-height:100%;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,var(--paper-a),var(--paper-b));color:var(--ink-a);box-shadow:0 30px 80px -20px rgba(0,0,0,.75),inset 0 0 0 1px rgba(90,70,40,.25)}
.is-album__head{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px dashed rgba(90,70,40,.35)}
.is-album__head h2{margin:0;font-size:22px;letter-spacing:.2em;flex:0 0 auto}
.is-album__head .g3d-btn{margin-left:auto;min-height:40px;background:#3b2d20;color:#f7f0e0;border:0}
.is-tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(90,70,40,.12)}
.is-tabs button{min-height:36px;padding:0 16px;border-radius:9px;border:0;background:transparent;color:var(--ink-a);font-weight:800;cursor:pointer}
.is-tabs button[aria-selected="true"]{background:#fffaf0;box-shadow:0 2px 6px rgba(60,40,20,.2)}
.is-album__body{overflow:auto;padding:14px 18px 22px;-webkit-overflow-scrolling:touch}
.is-album__lead{margin:0 0 12px;font-size:13.5px;font-weight:700;color:var(--ink-b)}
.is-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px 16px}
.is-photo{display:flex;flex-direction:column;gap:6px;padding:8px 8px 10px;background:#fffdf7;border:0;border-radius:4px;box-shadow:0 6px 16px -6px rgba(60,40,20,.45);transform:rotate(var(--r));cursor:pointer;text-align:left;font:inherit;color:inherit;transition:transform .2s}
.is-photo:hover{transform:rotate(0deg) scale(1.03)}
.is-photo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#ccc}
.is-photo__cap{font-weight:900;font-size:14px;line-height:1.35}
.is-photo__cap small{display:block;font-weight:700;font-size:11.5px;color:var(--ink-b);margin-top:2px}
.is-photo--empty{cursor:default;background:rgba(255,253,247,.55);box-shadow:none;outline:1.5px dashed rgba(90,70,40,.35)}
.is-photo--empty:hover{transform:rotate(var(--r))}
.is-photo__q{aspect-ratio:16/9;display:grid;place-items:center;font-size:34px;font-weight:900;color:rgba(90,70,40,.35);background:repeating-linear-gradient(45deg,rgba(90,70,40,.05) 0 10px,rgba(90,70,40,.09) 10px 20px)}
.is-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px}
.is-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:#fffdf7;box-shadow:0 3px 10px -5px rgba(60,40,20,.4)}
.is-item img,.is-item__q{width:64px;height:64px;flex:0 0 64px}
.is-item__q{display:grid;place-items:center;border-radius:50%;background:rgba(90,70,40,.08);font-weight:900;font-size:22px;color:rgba(90,70,40,.4)}
.is-item b{font-size:14.5px}
.is-item p{margin:2px 0 0;font-size:12.5px;line-height:1.6;color:var(--ink-b)}
.is-item--empty{background:rgba(255,253,247,.5);box-shadow:none}
.is-lightbox{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,10,14,.82);z-index:2;cursor:zoom-out;padding:20px}
.is-lightbox figure{margin:0;max-width:min(1100px,94vw)}
.is-lightbox img{display:block;width:100%;border:10px solid #fffdf7;border-bottom-width:14px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.is-lightbox figcaption{color:#f7f0e0;text-align:center;font-weight:800;margin-top:10px}

/* 写真が撮れたとき */
.is-shot{position:absolute;left:50%;top:46%;z-index:24;pointer-events:none;transform:translate(-50%,-50%)}
.is-shot figure{margin:0;width:min(46vw,420px);padding:10px 10px 12px;background:#fffdf7;border-radius:3px;box-shadow:0 20px 50px -10px rgba(0,0,0,.6);color:#2f261c;position:relative}
.is-shot img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.is-shot figcaption{font-weight:900;font-size:15px;margin-top:8px}
.is-shot figcaption small{display:block;font-weight:700;font-size:12px;color:#6c5a44}
.is-shot__new{position:absolute;right:-10px;top:-14px;padding:5px 12px;border-radius:99px;background:#c9452c;color:#fff;font-weight:900;font-size:12.5px;letter-spacing:.1em;transform:rotate(6deg);box-shadow:0 4px 10px rgba(0,0,0,.35)}
.is-shot.is-go{animation:is-shot 3.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes is-shot{0%{opacity:0;transform:translate(-50%,-44%) scale(.92) rotate(-2deg)}10%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1.5deg)}72%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-1.5deg)}100%{opacity:0;transform:translate(calc(-50% + min(34vw,420px)),calc(-50% - 30vh)) scale(.18) rotate(8deg)}}
.is-flash{position:absolute;inset:0;z-index:23;background:#fff;opacity:0;pointer-events:none}
.is-flash.is-on{animation:is-flash .55s ease-out both}
@keyframes is-flash{0%{opacity:.85}100%{opacity:0}}
.is-fade{position:absolute;inset:0;z-index:22;background:#0b0d12;opacity:0;pointer-events:none;transition:opacity .9s ease}

/* 望遠鏡 */
.is-scope{position:absolute;inset:0;z-index:21;pointer-events:none}
.is-scope__ring{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,0) 0,rgba(0,0,0,0) min(34vw,36vh),rgba(0,0,0,.95) calc(min(34vw,36vh) + 3px))}
.is-scope p{position:absolute;left:50%;bottom:calc(10% + env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;font-weight:700;font-size:13px;opacity:.8;white-space:nowrap}
.is-scope kbd{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:5px;background:#f4f1ea;color:#15181c;font:800 12px/1 var(--g3d-ui)}

/* ひと休み */
.is-rest .g3d-panel{max-width:400px}
.is-rest__lead{margin:4px 0 0;text-align:center;font-size:13.5px;opacity:.85}

/* タイトルの進み具合 */
.is-progress{display:flex;flex-direction:column;align-items:center;gap:8px}
.is-progress__line{margin:0;font-size:13.5px;font-weight:700;opacity:.92;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.is-progress__reset{background:none;border:0;color:rgba(255,255,255,.62);font:700 12px var(--g3d-ui);text-decoration:underline;cursor:pointer;padding:4px 8px}
.is-progress__reset[data-armed="1"]{color:#ffb4a0}

@media (max-width:760px){
  #game-root .g3d-toast{top:calc(178px + env(safe-area-inset-top));max-width:92vw;white-space:normal;text-align:center}
  #game-root.is-playing .g3d-subtitle{bottom:calc(31% + env(safe-area-inset-bottom));max-width:84vw;font-size:14px}
  .is-map{flex-direction:column;gap:10px}
  .is-map__frame{width:min(92vw,58vh)}
  .is-map__side{width:min(92vw,420px);gap:6px}
  .is-map__side h2{display:none}
  .is-map__legend{grid-template-columns:repeat(3,auto);font-size:11.5px}
  .is-map__note{display:none}
  .is-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .is-album__head{flex-wrap:wrap;gap:8px 12px;padding:10px 12px}
  .is-album__head h2{font-size:18px}
  .is-album__body{padding:10px 12px 18px}
  .is-keys{display:none}
  .is-finder{width:78vw}
}
@media (max-height:480px) and (orientation:landscape){
  #game-root .g3d-toast{top:calc(52px + env(safe-area-inset-top))}
  #game-root.is-playing .g3d-subtitle{bottom:calc(8% + env(safe-area-inset-bottom));max-width:52vw;font-size:13.5px}
  .is-map{flex-direction:row}
  .is-map__frame{width:min(78vh,60vw)}
  .is-map__side{width:200px}
  .is-map__note,.is-map__legend{display:none}
  .is-layer{padding-top:48px}
  .is-rest .g3d-panel{padding:14px 16px}
  .is-rest .g3d-actions--col{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
  .is-rest .g3d-btn{min-height:38px;font-size:13.5px;padding:6px 10px}
  .is-rest__lead{font-size:12.5px}
  .is-finder{width:min(50vw,420px)}
}

/* ---- 2026-10-06 チェックでの手直し ---- */
/* スマホ縦: 「景色を撮る（…）」などの案内が、下の字幕の枠の上端に重なっていた → 案内を少し上へ */
@media (max-width:760px){ #game-root.is-playing .g3d-prompt{top:calc(58% - 18px)} }