/* =========================================================
   soraniar 統合画面 (explore.html) 専用
   MAP全画面 ＋ ボトムシート ＋ 撮影レイヤー ＋ ミニマップ(PiP)
   soraniar-ui.css のあとに読み込むこと

   ※ 旧 style.css は読み込まない。カメラまわりの見た目も
      このファイルで完結させている。
      ただし以下は「絶対に変えてはいけない」既存互換のための約束:
        - .camera-wrapper の container-type: inline-size
          （動的テキストが cqw 単位を使うため）
        - #cameraPreview / .overlay-image-container / .overlay-image の
          位置関係（撮影時の座標計算がこの関係に依存している）
   ========================================================= */

/*
   ボトムシートの実高さ。explore.js の syncSheetHeight() が
   documentElement に直接書き込んで上書きする（シートの開閉や
   中身の入れ替えで高さが変わるため、CSSでは決められない）。

   ここにあるのはJSが動く前の初期値。宣言を省いても
   var() の第2引数で動きはするが、変数がどこにも定義されていない状態になり、
   IDEの静的解析が「解決できないカスタムプロパティ」として拾ってしまう。
*/
:root {
    --sn-sheet-height: 96px;
}

body.sn-explore {
    background: #0d1b2a;
    overflow: hidden;
    overscroll-behavior: none;
    height: 100dvh;

    /* ミニマップ(PiP)の一辺。上部の帯の高さもこれを基準に決める */
    /* ミニマップ(PiP)の一辺。
       PiPは撮影範囲の右上に重ねる方針なので、上部に専用の帯は取らない。
       画像名バーの右パディングだけがこの値に連動する。 */
    --sn-pip-size: 84px;
}

/* ---------------------------------------------------------
   レイヤー構成（z-index の一覧）
     10  地図
     20  地図の上に浮かぶUI（ヘッダー・現在地ボタン）
     40  ボトムシート
     100 撮影レイヤー
     150 ミニマップ(PiP) ※ 撮影レイヤーより手前
     300 公開前のおしらせ
     1199/1200 ドロワー
     2000 トースト
   --------------------------------------------------------- */

/* ========== 公開前のおしらせ ==========
   まだ公開されていないスポットのQRを読んだときに全面で被せる。
   撮影レイヤー(100)とPiP(150)より手前。ドロワーとトーストは触らない。

   撮影レイヤーの暗い配色ではなく、トップや一覧ページと同じ
   「空色の背景＋白いカード」で組む。撮影の途中ではなく、
   soraniar のお知らせページとして見せたいため。 */
.sn-coming-soon {
    position: fixed;
    z-index: 300;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));
    /* 一覧ページ (body.sn-list) と同じ空の抜け方 */
    background:
            radial-gradient(circle at 50% -6%, rgba(104, 199, 244, .34), transparent 28rem),
            #eef8fd;
    /* 背後の地図は触らせない。押し間違いで撮影に入られると意味がなくなる */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sn-coming-soon[hidden] { display: none; }

.sn-coming-soon-inner {
    width: min(100%, 380px);
    display: grid;
    justify-items: center;
    gap: 18px;
}

/* ヘッダーと同じ大きさだと主役のカードより目立つので、少し小さくする */
.sn-coming-soon-brand { color: var(--sky-deep); }
.sn-coming-soon-brand .sn-brand-mark { width: 38px; height: 30px; }
.sn-coming-soon-brand .sn-brand-name { font-size: 1.8rem; }

.sn-coming-soon-card {
    width: 100%;
    padding: 30px 24px 26px;
    display: grid;
    justify-items: center;
    gap: 10px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    border-color: var(--line);
}

/* カメラアイコン。カードのサムネイル枠と同じ空色のまるで囲う */
.sn-coming-soon-icon {
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 2px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--sky-light), var(--sky));
    box-shadow: var(--shadow-sm);
}

.sn-coming-soon-eyebrow {
    margin: 0;
    padding: 3px 14px;
    border-radius: 999px;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: var(--sky-deep);
    font-size: .76rem;
    font-weight: 900;
    letter-spacing: .04em;
}

/* スポット名。長い名前でも2行までにして、日付を画面外へ押し出さない */
.sn-coming-soon-name {
    margin: 2px 0 0;
    color: var(--muted);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sn-coming-soon-name:empty { display: none; }

/* 「〇月〇日を楽しみにしててね！」。この画面の主役なので大きく出す */
.sn-coming-soon-message {
    margin: 0 0 18px;
    color: var(--ink);
    font-size: clamp(1.2rem, 5.8vw, 1.55rem);
    font-weight: 900;
    line-height: 1.5;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.sn-coming-soon-message .sn-coming-soon-date {
    /* トップの見出し (.sn-hero h1 em) と同じ、強調はコーラル */
    color: var(--coral);
}

.sn-coming-soon .sn-button { width: 100%; }

/* ========== 地図レイヤー ========== */
/*
   全画面 ⇄ PiP の切り替えは、この要素のサイズと位置をCSSで変えるだけ。
   地図インスタンスは作り直さない（DOMの付け替えも起きない）。

   位置は inset ショートハンドではなく top/right/bottom/left の
   ロングハンドで書く。PiP側は bottom/left が auto になり、
   auto はアニメーションできないので、位置は遷移させずに切り替える。
   遷移させるのは角丸と影だけ（見た目がやわらぐ程度で十分）。
*/
.sn-map-layer {
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    transition: border-radius .28s ease, box-shadow .28s ease;
}

.sn-map-layer #map { width: 100%; height: 100%; }

/* 撮影中は右上のミニマップ(PiP)になる。
   高さは --sn-pip-size に揃えてあり、撮影レイヤー側で
   同じ変数を使って上部に「PiPが乗る帯」を確保している。
   （ここを変えるときは #description-wrapper の min-height も一緒に見ること） */
.sn-map-layer.is-pip {
    z-index: 150;
    top: calc(12px + var(--safe-top));
    right: 12px;
    bottom: auto;
    left: auto;
    width: var(--sn-pip-size);
    height: var(--sn-pip-size);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    border: 3px solid rgba(255, 255, 255, .92);
}

/* PiPをタップしたら地図へ戻れるようにする透明ボタン */
.sn-pip-hit {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 3;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.sn-map-layer.is-pip .sn-pip-hit { display: block; }

.sn-pip-label {
    display: none;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 6px 5px;
    background: linear-gradient(to top, rgba(6, 26, 46, .88), transparent);
    color: #fff;
    font-size: .64rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: .02em;
    pointer-events: none;
}

.sn-map-layer.is-pip .sn-pip-label { display: block; }

/* ========== ピンの吹き出し（撮影できる場所にいるときだけ出る） ==========
   中身は google.maps.InfoWindow の枠の中に入るので、
   角丸や影は Google 側が持っている。ここでは中身だけ整える。 */
.sn-map-bubble {
    display: grid;
    gap: 8px;
    justify-items: stretch;
    /* InfoWindow の既定の余白が狭いので、指で押せる幅を確保する */
    min-width: 148px;
    padding: 2px 2px 4px;
}

.sn-map-bubble-title {
    margin: 0;
    color: var(--ink);
    font-size: .88rem;
    font-weight: 800;
    line-height: 1.4;
    /* 長い名前で吹き出しが横に伸びきらないようにする */
    max-width: 200px;
}

.sn-map-bubble-btn {
    /* 詳細シートの「撮影する」と同じ配色にして、同じ動作だと分かるようにする */
    appearance: none;
    border: 0;
    border-radius: 999px;
    /* 指で押す前提の高さを確保する。9px 詰めだと33pxしかなく、押しづらい */
    min-height: 40px;
    padding: 10px 16px;
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: linear-gradient(135deg, var(--coral), var(--orange));
    box-shadow: 0 6px 14px rgba(255, 98, 104, .32);
}

.sn-map-bubble-btn:active { transform: scale(.98); }

/* ========== 地図の上のヘッダー ========== */
.sn-explore-header {
    position: fixed;
    z-index: 20;
    top: calc(10px + var(--safe-top));
    left: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.sn-explore-header > * { pointer-events: auto; }

.sn-explore-header .sn-brand {
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 6px 16px 6px 10px;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}

.sn-explore-header .sn-brand-mark { width: 30px; height: 24px; }
.sn-explore-header .sn-brand-name { font-size: 1.35rem; }

/* 撮影中はヘッダーを隠す（PiPと重なるため） */
body.is-capturing .sn-explore-header {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

/* ========== 現在地ボタン ========== */
.sn-locate-fab {
    position: fixed;
    z-index: 20;
    right: 14px;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--sky-deep);
    box-shadow: 0 8px 24px rgba(10, 45, 75, .28);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: bottom .32s cubic-bezier(.22, .8, .3, 1), opacity .2s ease;
    /* 位置はボトムシートの高さに追従する（explore.js が更新） */
    bottom: calc(var(--sn-sheet-height, 96px) + 16px + var(--safe-bottom));
}

.sn-locate-fab svg { width: 24px; height: 24px; }
.sn-locate-fab:active { transform: scale(.92); }
.sn-locate-fab.is-busy { opacity: .5; pointer-events: none; }

body.is-capturing .sn-locate-fab { opacity: 0; pointer-events: none; }

/* ========== ボトムシート ========== */
.sn-sheet {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -12px 40px rgba(8, 34, 58, .22);
    padding: 8px 18px calc(18px + var(--safe-bottom));
    transform: translateY(0);
    transition: transform .32s cubic-bezier(.22, .8, .3, 1);
    max-height: 72dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sn-sheet.is-hidden { transform: translateY(101%); }
body.is-capturing .sn-sheet { transform: translateY(101%); }

.sn-sheet-grabber {
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: #d6e2ec;
    margin: 4px auto 12px;
}

/*
   [hidden] は UAスタイルシートの `[hidden] { display: none }` で効くが、
   作者スタイルシートの display 指定のほうが常に強い。
   下で display:grid を指定しているので、明示的に打ち消しておかないと
   一覧と詳細が同時に表示され、「閉じる」を押しても何も起きないように見える。
*/
.sn-sheet-summary[hidden],
.sn-sheet-detail[hidden] { display: none; }

/* --- 一覧モード（スポット未選択） --- */
.sn-sheet-summary { display: grid; gap: 10px; }

.sn-sheet-summary h2 {
    margin: 0;
    font-size: 1.05rem;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sn-sheet-summary p {
    margin: 0;
    color: var(--muted);
    font-size: .87rem;
}

/* いまいる場所で撮影できる件数 */
.sn-shootable {
    margin: 0;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(37, 185, 178, .13);
    color: #14807b;
    font-size: .82rem;
    font-weight: 800;
}

.sn-shootable::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.sn-shootable.is-none { background: #eef4f9; color: var(--muted); }
.sn-shootable[hidden] { display: none; }

/* --- 詳細モード（スポット選択中） --- */
.sn-sheet-detail { display: grid; gap: 12px; }

.sn-sheet-title-row {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 12px;
    align-items: center;
}

.sn-sheet-avatar {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    overflow: hidden;
    background: linear-gradient(150deg, #b6ecff, #e9fbff 55%, #a8dcb4 55%);
}

.sn-sheet-avatar img { max-width: 78%; max-height: 84%; object-fit: contain; }

.sn-sheet-detail h2 {
    margin: 0 0 2px;
    font-size: 1.12rem;
    line-height: 1.35;
}

.sn-sheet-place {
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sn-sheet-place svg { width: 11px; height: 13px; color: var(--coral); flex-shrink: 0; }

/* 距離チップ（範囲内/範囲外/計測中で色が変わる） */
.sn-distance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: start;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 800;
    background: #eef4f9;
    color: var(--muted);
}

.sn-distance.is-inside { background: rgba(37, 185, 178, .14); color: #14807b; }
.sn-distance.is-outside { background: rgba(255, 152, 93, .16); color: #b3541c; }

.sn-distance::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.sn-sheet-note {
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--surface-soft);
    border: 1px solid var(--line);
    color: var(--ink);
    font-size: .87rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.sn-sheet-actions { display: grid; gap: 8px; }
.sn-sheet-actions .sn-button { width: 100%; }

/* ========== 撮影レイヤー ========== */
.sn-capture-layer {
    position: fixed;
    z-index: 100;
    inset: 0;
    background: #0b1622;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: sn-capture-in .28s ease;
}

.sn-capture-layer[hidden] { display: none; }

@keyframes sn-capture-in {
    from { opacity: 0; transform: scale(1.02); }
    to { opacity: 1; transform: scale(1); }
}

/*
   spot.js は .container に対して backgroundImage（フレーム画像）と
   display: flex / none（動画再生時）を直接書き込む。
   そのため .container 自体は display:flex を既定値にしておく。
*/
.sn-capture-layer .container {
    min-height: 100dvh;
    width: 100%;
    padding: calc(8px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    visibility: visible;
    opacity: 1;
    transition: opacity .4s ease;
}

.sn-capture-layer main {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

/* --- 上部バー（画像名） ---
   高さはバーの実寸だけ。ミニマップ(PiP)ぶんの帯は確保しない。
   PiPは撮影範囲の右上に重なるが、そのぶん撮影範囲を上まで使える
   （重なってよい、という判断）。

   右側だけは空けておく。ここを詰めると画像名がPiPの下に潜って読めなくなる。 */
#description-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-right: calc(var(--sn-pip-size) + 22px);
}

#description {
    flex: 1;
    min-width: 0;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink);
    font-size: .85rem;
    font-weight: 800;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#description:empty { display: none; }

/*
   MAPボタンは表示しない。撮影中は右上のミニマップをタップすれば地図へ戻れるため。
   ただしDOMからは消せない（spot.js が goToMapBtn を前提に
   .style.display や .addEventListener を呼ぶので、要素が無いと例外になる）。

   spot.js は style.display='block' をインラインで書き込むため、
   打ち消すには !important が必要。
*/
#goToMapBtn { display: none !important; }

/* --- メッセージパネル --- */
#message_above_buttons,
#message_below_buttons {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: pre-wrap;
}

#message_above_buttons:empty,
#message_below_buttons:empty { display: none; }

/* --- カメラ本体 ---
   ここの構造・位置関係は撮影時の座標計算が依存しているので変更禁止 */
/* 説明文パネルやツールバーと同じ幅にする（撮影エリアを最大限とるため）。
   画面に収まりきらないぶんはスクロールで見せる。 */
.camera-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    background-color: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    container-type: inline-size; /* 動的テキストの cqw 単位に必須。消さないこと */
}

#cameraPreview { display: block; width: 100%; height: auto; }

#camera-content-wrapper { position: relative; z-index: 1; }
#camera-content-wrapper.monochrome-active { filter: grayscale(100%); }

/* 撮影後に見せる静止画。
   スポット画像(z-index:2)と動的テキストの上に重ねて、映像ごと覆い隠す。
   video を display:none にしないのは、箱の大きさが0になって
   お絵かきCanvasのサイズ計算と保存時の座標計算が壊れるため。 */
#capturedPreview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 3;
}

/* 作者側で display を指定しているので、UA の [hidden] だけでは消えない */
#capturedPreview[hidden] { display: none; }

#drawingCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    cursor: crosshair;
    touch-action: none;
}

#filterOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.overlay-image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 2;
}

.overlay-image {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ---------------------------------------------------------
   撮影後の操作パネル（下から重なって出てくるシート）

   撮影レイヤー（z-index:100）より前に出す。
   道具を開くと画面下がこのシートで埋まるので、
   「撮り直す／保存する」もこの中に入れて必ず押せるようにしている。
   --------------------------------------------------------- */
.sn-edit-sheet {
    position: fixed;
    z-index: 110;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex; /* spot.js が display:none / flex を書き込む */
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 12px calc(10px + var(--safe-bottom));
    border-radius: 20px 20px 0 0;
    background: rgba(13, 27, 42, .9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .5);

    /* 道具が多くても画面を埋め尽くさないようにする */
    max-height: 76dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 折り畳みボタン。シートの一番上に固定して、畳んでいても必ず見えるようにする */
.sn-edit-sheet-toggle {
    position: sticky;
    top: 0;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 10px 0 8px;
    border: 0;
    background: rgba(13, 27, 42, .9);
    color: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .02em;
    cursor: pointer;
}

.sn-edit-sheet-caret {
    display: inline-block;
    font-size: .66rem;
    line-height: 1;
    transition: transform .18s ease;
}

/* 畳んでいるときは矢印を上向きにする（押せば出てくる、と分かるように） */
.sn-edit-sheet[data-tools="hidden"] .sn-edit-sheet-caret { transform: rotate(180deg); }

.sn-edit-sheet-tools {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* 作者側で display を指定しているので、UA の [hidden] だけでは消えない */
.sn-edit-sheet-tools[hidden] { display: none; }

/* --- ツールバー（フィルター / お絵かき） --- */
#filter-controls,
#drawing-controls {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 9px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink);
}

/*
   ツールバーはシャッターより下にあり縦の余裕があるので、
   折り返してでも全ボタンを見せる（横スクロールで隠さない）。
*/
#filter-controls > div {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 14px;
}

#drawing-controls { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* 道具の行を縦に積む */
#drawing-tools {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tool-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 700;
}

#drawing-controls img { height: 22px; }

/* --- 機能ボタンの配色は改修前（style.css）と同じにする ---
   薄い枠に埋もれないよう、はっきりした青とグレーを使う */
#clearDrawingBtn, #toggleDrawingBtn {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background-color: #247dfe;
    display: grid;
    place-items: center;
    padding: 11px;
    cursor: pointer;
    transition: background-color .2s ease, transform .16s ease;
}

#clearDrawingBtn.active-flash { background-color: #124a99; }

/* --- 道具の選択ボタン（ペン・キラキラ・にじ・スタンプ・消しゴム） ---
   選ばれているものだけ青くする。#eraserBtn もこの仲間なので、
   ID指定で色を固定しないこと（選択状態が出せなくなる）。 */
.sn-tool {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: 0;
    border-radius: 50%;
    background-color: #dbe6f0;
    color: var(--ink);
    display: grid;
    place-items: center;
    padding: 9px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .16s ease, transform .16s ease;
}

.sn-tool img { width: 100%; height: 100%; object-fit: contain; }

.sn-tool[aria-pressed="true"] {
    background-color: #247dfe;
    color: #fff;
}

/* 選択中のペン系アイコン（画像）を白く見せる */
.sn-tool[aria-pressed="true"] img { filter: brightness(0) invert(1); }

.sn-tool:active { transform: scale(.9); }

/* ツールバーは2行構成（1行目＝道具、2行目＝色と太さ） */
.sn-tool-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    width: 100%;
}

/* お絵かきOFFのときはグレー＋アイコン反転（改修前と同じ見た目） */
#toggleDrawingBtn.power-off {
    background-color: #888;
    filter: invert(1);
}

/* 画像移動ボタンはカメラ映像の上に出るので、黒半透明＋白枠で視認性を確保 */
#toggleMoveBtn {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(255, 255, 255, .9);
    display: grid;
    place-items: center;
    padding: 9px;
    cursor: pointer;
    transition: background-color .2s ease, transform .16s ease;
}

#toggleMoveBtn.active { background-color: #247dfe; }

#eraserBtn img, #clearDrawingBtn img, #toggleDrawingBtn img, #toggleMoveBtn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#eraserBtn:active, #clearDrawingBtn:active, #toggleDrawingBtn:active, #toggleMoveBtn:active {
    transform: scale(.9);
}

.tools-disabled { opacity: .4; pointer-events: none; transition: opacity .3s ease; }

/* フィルターの色（こちらは入力そのものを丸として見せる） */
#colorPicker {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

#colorPicker::-webkit-color-swatch-wrapper { padding: 0; }
#colorPicker::-webkit-color-swatch { border: 1px solid #b9cbd8; border-radius: 50%; }

#opacitySlider, #penSize { width: 96px; cursor: pointer; vertical-align: middle; }
#monoFilter { width: 18px; height: 18px; cursor: pointer; }

/* --- ペンの色と太さ（丸ひとつで両方を表す） ---
   spot.js の updatePenSizePreview() が #penSizePreview に
   backgroundColor（色）と width/height（太さ）を書き込むので、
   その丸だけを見せる。色入力は透明にして同じ位置へ重ね、
   丸をタップすると色ピッカーが開くようにする。 */
.sn-pen-swatch {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* 太さが細いときに、どこを押せばよいか分かるようにする受け皿 */
    background: rgba(18, 52, 97, .07);
}

#penSizePreview {
    border-radius: 50%;
    background-color: #000;
    flex-shrink: 0;
    /* 受け皿からはみ出さないよう上限を置く（spot.js は最大50pxまで書き込む） */
    max-width: 38px;
    max-height: 38px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .65);
    pointer-events: none;
}

.sn-pen-swatch #penColor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}

/* --- シャッター行 --- */
.button-group {
    width: 100%;
    max-width: 500px;
    margin: 2px auto 0;
    display: flex;
    justify-content: center;
}

.controls-row-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 18px;
}

#captureBtn {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
    border: 5px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
    cursor: pointer;
    transition: transform .12s ease;
}

#captureBtn:active { transform: scale(.9); }

/* カメラ反転ボタン。
   位置調整ボタンと同じく、明るい背景にも暗い背景にも埋もれないよう
   グレー（黒半透明）＋白枠＋光彩にする（改修前の style.css と同じ扱い）。 */
#switchCameraBtn {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .7);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 10px rgba(255, 255, 255, .9);
    display: grid;
    place-items: center;
    padding: 10px;
    cursor: pointer;
    transition: background-color .2s ease, transform .16s ease;
}

#switchCameraBtn img { width: 100%; height: 100%; object-fit: contain; }
#switchCameraBtn:active { transform: scale(.9); }

/* --- 撮影後の操作（撮り直す / 保存する） ---
   シャッター行と同じ場所に、入れ替わりで表示される */
.controls-row-review {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 18px;
}

#retakeBtn,
#saveBtn {
    flex: 1 1 0;
    max-width: 200px;
    min-height: 52px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform .12s ease, background-color .2s ease;
}

#retakeBtn {
    border: 2px solid rgba(255, 255, 255, .7);
    background-color: rgba(0, 0, 0, .5);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, .55);
}

#saveBtn {
    border: 0;
    background: var(--coral);
    color: #fff;
    box-shadow: 0 8px 26px rgba(0, 0, 0, .4);
}

#retakeBtn:active,
#saveBtn:active { transform: scale(.96); }

/* --- 導入動画 --- */
#movieContainer {
    position: fixed;
    z-index: 300;
    inset: 0;
    background: #000;
}

#movieContainer video { width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------
   読み込み中オーバーレイ
   --------------------------------------------------------- */
.sn-loading {
    position: fixed;
    z-index: 500;
    inset: 0;
    display: grid;
    place-items: center;
    gap: 14px;
    background: rgba(13, 27, 42, .72);
    color: #fff;
    font-weight: 800;
    backdrop-filter: blur(4px);
}

.sn-loading[hidden] { display: none; }

.sn-loading-inner { display: grid; justify-items: center; gap: 14px; }

.sn-spinner {
    width: 38px;
    height: 38px;
    border: 4px solid rgba(255, 255, 255, .28);
    border-top-color: #fff;
    border-radius: 50%;
    animation: sn-spin .8s linear infinite;
}

@keyframes sn-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------
   小さい画面の調整
   --------------------------------------------------------- */
@media (max-width: 400px) {
    /* 狭い画面ほど帯を削ってカメラに高さを回す */
    body.sn-explore { --sn-pip-size: 76px; }
    #captureBtn { width: 66px; height: 66px; }
    #opacitySlider, #penSize { width: 74px; }
}

/* 横向き（ランドスケープ）では PiP を左下に逃がす。
   上部に帯を取る必要がなくなるので min-height / padding も戻す */
@media (orientation: landscape) and (max-height: 520px) {
    body.sn-explore { --sn-pip-size: 96px; }

    .sn-map-layer.is-pip {
        top: auto;
        right: auto;
        bottom: calc(12px + var(--safe-bottom));
        left: 12px;
    }

    /* PiPが左下に移るので、画像名バーの右を空ける必要がなくなる */
    #description-wrapper { padding-right: 0; }
}