:root {
    --app-font-family: "Noto Sans JP", "Noto Sans", sans-serif;
    --app-font-family-en: "Noto Sans", "Noto Sans JP", sans-serif;
    --guide-paper: #fafaf7;
    /* 操作UI、起動ダイアログ、撮影／御城印／解説UIを別レイヤーとして管理する。 */
    --z-user-interface: 30;
    --z-dialog: 40;
    --z-capture-countdown: 50;
    --z-photo-dialog: 60;
    --z-castle-stamp-dialog: 60;
    --z-guide-dialog: 70;
}

/*
 * 体験開始前は、権限・注意事項ダイアログの縦スクロールを維持しながら、
 * ブラウザ標準のピンチズームだけを抑止します。
 */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
    font-family: var(--app-font-family);
    -webkit-text-size-adjust: 100%;
    touch-action: pan-y;
}

:lang(en) {
    font-family: var(--app-font-family-en);
}

button,
input,
select,
textarea {
    font: inherit;
}

/*
 * 体験開始後は、親Document全体のブラウザ標準パン／ピンチズームを抑止します。
 * Touch Eventsは引き続き通知されるため、アプリ側のピンチズームは維持されます。
 * iframe内の解説Documentには継承されません。
 */
body.experience-active {
    touch-action: none;
}

/*
 * 360度表示や操作UIを長押しした時に、文字選択、画像メニュー、
 * ドラッグ操作が始まらないようにします。ここではtouch-actionを変更せず、
 * 体験開始後のブラウザ標準ジェスチャーは上の状態ルールで別に管理します。
 * 撮影結果と御城印の画像だけは、下部の各画像クラスで明示的に解除します。
 */
html,
body,
body * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* 共通の非表示ユーティリティ。 */
.d-none {
    display: none !important;
}

a-scene {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

/*
 * A-Frameと事前ロードは注意事項の背後で動かしますが、
 * 権限・リソース・初回カメラフレームが揃うまで利用者には表示しません。
 * 解説ボタンは後段の利用可否クラスがvisibilityを上書きするため、
 * 親レイヤーだけでなくボタン自身も明示的に非表示にします。
 */
body.experience-pending a-scene,
body.experience-pending .user-interface-layer,
body.experience-pending #guide-button {
    visibility: hidden;
    pointer-events: none;
}

/* videoはiOS Safariのフレーム停止を避けるため隠さず、描画結果だけを開始まで伏せます。 */
body.experience-pending #person-mask,
body.experience-pending #pose-overlay,
body.experience-pending #background-container {
    visibility: hidden;
}

.title-screen-class{
    position: fixed;
    /*width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;*/
    inset: 0;
    background-color:black;
}

.title-class{
    color:cornflowerblue;
    padding: 10px, 20px;
    font-size:32px;
    margin:4px;
}

.button-class{
    background-color: royalblue;
    color:white; /*白いテキスト*/
    padding: 10px, 20px;
    text-align: center;
    display:inline-block;
    font-size: 16px;
    margin: 4px;
    cursor: pointer;
    border-radius: 4px;
    border: none;
}

.webcam-layer{
    /*left: 0%;
    top: 0%;
    width:100%;
    height:100%;*/
    position: fixed;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
#webcam-vision{
    position: absolute;
    /*left: 0;
    top: 0;*/
    inset:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
    /*background-color: transparent;*/
    pointer-events: none;

      /*
        このvideoは画面表示用ではなく、BodyPixへ渡すカメラフレームの取得元です。

        iPad Safariでは、videoをdisplay:noneにしたり画面外へ移動したりすると、
        getUserMediaのストリームが有効でもCanvasへ渡すフレームが更新されない場合があります。
        そのため、videoは画面内に配置したまま透明にし、描画対象として維持します。

        opacityは映像データそのものには影響しないため、推論入力の解像度や内容は変わりません。
      */
      opacity: 0;
}

#photo-container {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  z-index: 2;
  /*top: 0;
  left: 0;*/
}

#background-container{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*display: none;*/
    inset: 0;
    z-index: 1;
}

#person-mask{
    position: absolute;
    /*left: 0;
    top: 0;*/
    inset:0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*display: block;
    background-color: transparent;*/
    z-index: 2;
    pointer-events: none;
}

#pose-overlay{
    position: absolute;
    /*left: 0;
    top: 0;*/
    inset:0;
    width: 100%;
    height: 100%;
    /*object-fit: cover;
    display: block;
    background-color: transparent;*/
    z-index: 3;
    pointer-events: none;
}

.debug-info-screen{
    position:absolute;
    background-color: transparent;
    top:0;
    z-index: 19;
    align-items: end;
    justify-content: end;
}

.debug-info-text{
    white-space: pre-line;
}

.webcam-loading-screen{
    position:fixed;
    inset: 0;
    z-index: 20;
    background-color: rgba(0, 0, 0, 0.5);
    /*left: 0%;
    top: 0%;
    width:100%;
    height:100%;*/
    color: white;
    display: flex;
    /*align-self: center;*/
    align-items: center;
    /*align-content: center;*/
    /*justify-self: center;*/
    justify-content: center;
    pointer-events: none;
}

/*
 * 起動時の6面キューブマップ読込だけを表示するロゴ、進捗バー、
 * 活動テキストです。
 * 通常z=20のwebcam-loading-screenを再利用し、起動待ち中も
 * 許諾・注意事項のダイアログ(z=40)より常に背後へ配置します。
 */
.cubemap-loading-progress {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    pointer-events: none;
}

.cubemap-loading-logo {
    display: block;
    flex: 0 1 auto;
    /* 579×818の参考スクリーンショットでは約200px（35vw）です。 */
    width: 200px;
    max-width: 35vw;
    max-height: 25vh;
    height: auto;
    object-fit: contain;
    pointer-events: none;
}

.cubemap-progressbar {
    --cubemap-progressbar-height: 4px;
    --cubemap-progressbar-cap-width: 2px;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    /* 添付画像と同じく、バー幅をロゴ幅の87.5%に揃えます。 */
    width: 175px;
    width: 30.625vw;
    max-width: 175px;
    height: var(--cubemap-progressbar-height);
    margin-top: 21px;
    overflow: hidden;
    pointer-events: none;
}

/* 縦の短い横画面でも、ロゴとバーの比率を崩さず画面内へ収めます。 */
@supports (width: min(200px, 35vw)) {
    .cubemap-loading-logo {
        width: min(200px, 35vw, 25vh);
        max-width: none;
        max-height: none;
    }

    .cubemap-progressbar {
        /* 参考画像の上下のぼかしを除き、明るい芯をロゴ幅の約2%に揃えます。 */
        --cubemap-progressbar-height: max(
            2px,
            min(4px, 0.7vw, 0.5vh)
        );
        --cubemap-progressbar-cap-width: max(
            1px,
            min(2px, 0.35vw, 0.25vh)
        );
        width: min(175px, 30.625vw, 21.875vh);
        max-width: none;
        height: var(--cubemap-progressbar-height);
        margin-top: min(21px, 3.675vw, 2.625vh);
    }
}

/*
 * 38×8px素材を左4px・中央30px・右4pxに分け、左右端はバーの
 * 高さに合わせて等方縮小し、中央部分だけを横へ伸ばします。
 */
.cubemap-progressbar::before,
.cubemap-progressbar-fill {
    box-sizing: border-box;
    border-style: solid;
    border-color: transparent;
    border-width: 0 var(--cubemap-progressbar-cap-width);
    border-image-slice: 0 4 fill;
    border-image-width: 0 1;
    border-image-repeat: stretch;
}

.cubemap-progressbar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #898989;
    border-radius: 999px;
    border-image-source: url("../assets/ui/progressbar_01.png");
    pointer-events: none;
}

.cubemap-progressbar-background,
.cubemap-progressbar-foreground {
    /* border-imageで3分割描画するため、横方向へ引き延ばすimgは隠します。 */
    display: none;
}

.cubemap-progressbar-fill {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #e4e4e4;
    border-radius: 999px;
    border-image-source: url("../assets/ui/progressbar_02.png");
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    transition: -webkit-clip-path 160ms linear;
    transition: clip-path 160ms linear;
    transition: clip-path 160ms linear, -webkit-clip-path 160ms linear;
    pointer-events: none;
}

/*
 * 実進捗とは独立した活動表示です。ロゴと同じ横幅の領域をバー直下に置き、
 * ラベルと常に全角3文字幅を占有する中黒を分けます。中黒の透明度だけを
 * 変えるため「Loading」本体は移動しません。
 */
.cubemap-loading-activity {
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 200px;
    max-width: 35vw;
    /* バー下端からLoadingまで、Loadingの文字サイズと同じ空間を確保します。 */
    margin-top: 1em;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: center;
    color: #ffffff;
    font-family: var(--app-font-family-en);
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

@supports (width: min(200px, 35vw)) {
    .cubemap-loading-activity {
        /* ロゴと同じ領域で中央に置き、文字はロゴ幅の7.5%を上限にします。 */
        width: min(200px, 35vw, 25vh);
        max-width: none;
        font-size: max(10px, min(15px, 2.625vw, 1.875vh));
    }
}

.cubemap-loading-activity-label {
    flex: 0 0 auto;
}

.cubemap-loading-activity-dots {
    display: inline-flex;
    flex: 0 0 3em;
    width: 3em;
}

.cubemap-loading-activity-dot {
    display: block;
    flex: 0 0 1em;
    width: 1em;
    text-align: center;
    opacity: 1;
}

.cubemap-loading-activity-dot:nth-child(2) {
    animation: cubemap-loading-dot-two 1.2s steps(1, end) infinite;
}

.cubemap-loading-activity-dot:nth-child(3) {
    animation: cubemap-loading-dot-three 1.2s steps(1, end) infinite;
}

@keyframes cubemap-loading-dot-two {
    0% { opacity: 0; }
    33.333%, 100% { opacity: 1; }
}

@keyframes cubemap-loading-dot-three {
    0% { opacity: 0; }
    66.666%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cubemap-progressbar-fill {
        transition: none;
    }

    .cubemap-loading-activity-dot {
        animation: none;
        opacity: 1;
    }
}

.permission-dialog-layer,
.startup-dialog-layer {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    background: rgba(0, 0, 0, 0.52);
}

.permission-dialog-layer {
    background: #333333;
}

.permission-dialog-panel {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* 参考画像に合わせ、画面左右の余白を従来より少し広くします。 */
    width: 84%;
    max-width: 360px;
    max-height: calc(100vh - 24px);
    /* 添付画像の赤線位置に合わせ、左右余白を全ダイアログで16pxに統一します。 */
    padding: 28px 16px 22px;
    padding: clamp(24px, 6.5vw, 32px) 16px 22px;
    overflow: hidden;
    color: #1f1f1f;
    font-family: var(--app-font-family);
    background-color: #f7f7f4;
    background-image: url("../assets/ui/modal_bg_02.png");
    background-repeat: repeat;
    background-size: 196px 196px;
    border: 2px solid #397129;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    -webkit-overflow-scrolling: touch;
}

/*
 * 初回起動時は、GPS・キューブマップ・文言の全JSONが揃うまで
 * パネルだけを透明にします。親レイヤーの灰色背景は表示したままにし、
 * 読み込み前の空パネルを利用者へ見せません。
 * フェードは行わず、共通JSがクラスを外した時点で即時表示します。
 */
#permission-dialog.is-startup-data-pending > .permission-dialog-panel {
    opacity: 0;
}

.permission-dialog-message {
    min-height: 0;
    margin: 0;
    overflow-y: auto;
    font-size: 14px;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.55;
    -webkit-overflow-scrolling: touch;
}

.permission-dialog-text {
    margin: 0;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.permission-dialog-text-english {
    font-size: 0.94em;
}

.permission-dialog-divider {
    width: 100%;
    height: 2px;
    margin: 16px 0;
    margin: clamp(14px, 4vw, 20px) 0;
    background-color: #397129;
    background-image: url("../assets/ui/line_02.png");
    background-repeat: repeat-x;
    background-size: 12px 2px;
}

.permission-confirm-button {
    flex: 0 0 auto;
}

.startup-dialog-panel {
    box-sizing: border-box;
    width: 90%;
    max-width: 420px;
    max-height: calc(100vh - 24px);
    padding: 24px 16px 22px;
    padding: clamp(20px, 5.5vw, 28px) 16px 22px;
    overflow-y: auto;
    color: #1f1f1f;
    font-family: var(--app-font-family);
    background-color: #f7eded;
    background-image: url("../assets/ui/modal_bg_01.png");
    background-repeat: repeat;
    background-size: 196px 196px;
    border: 2px solid #a50d02;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    -webkit-overflow-scrolling: touch;
}

/* ノッチやホームインジケータを含む実際の上下余白内へ、パネル全体を収めます。 */
.permission-dialog-panel,
.startup-dialog-panel {
    max-height: calc(
        100vh
        - max(12px, env(safe-area-inset-top, 0px))
        - max(12px, env(safe-area-inset-bottom, 0px))
    );
}

/*
 * モーダル表示直後はパネルへフォーカスして支援技術の読み上げ位置を保ちます。
 * パネル自体は操作部品ではないため外枠を表示せず、Tabで移動したボタンには
 * 下段の:focus-visibleによるフォーカス表示を残します。
 */
.permission-dialog-panel:focus,
.startup-dialog-panel:focus,
.photo-result-dialog-panel:focus {
    outline: none;
}

.startup-dialog-warning {
    display: block;
    width: 56px;
    width: clamp(48px, 15vw, 64px);
    height: auto;
    margin: 0 auto 16px;
    margin: 0 auto clamp(14px, 4vw, 20px);
}

.startup-dialog-message {
    margin: 0;
    font-size: 14px;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.55;
}

.startup-dialog-text {
    margin: 0;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.startup-dialog-text-english {
    font-size: 0.94em;
}

.startup-dialog-divider {
    width: 100%;
    height: 2px;
    margin: 16px 0;
    margin: clamp(14px, 4vw, 20px) 0;
    background-color: #a50d02;
    background-image: url("../assets/ui/line_01.png");
    background-repeat: repeat-x;
    background-size: 12px 2px;
}

.startup-dialog-status {
    min-height: 1.5em;
    margin: 16px 0 0;
    margin: clamp(14px, 4vw, 18px) 0 0;
    color: #3f3f3f;
    font-size: 14px;
    font-size: clamp(12px, 3.4vw, 14px);
    line-height: 1.45;
    text-align: center;
}

.startup-dialog-status.is-error {
    color: #a12424;
    font-weight: 700;
}

.permission-confirm-button,
.startup-confirm-button {
    box-sizing: border-box;
    display: block;
    width: fit-content;
    min-width: 106px;
    max-width: 100%;
    min-height: 44px;
    margin: 14px auto 0;
    padding: 8px 24px;
    color: #fff;
    background-color: transparent;
    background-image: url("../assets/ui/button_bg_.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    border: 0;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.permission-confirm-button:disabled,
.startup-confirm-button:disabled {
    color: rgba(255, 255, 255, 0.9);
    filter: grayscale(1);
    opacity: 0.58;
}

.permission-confirm-button:not(:disabled):active,
.startup-confirm-button:not(:disabled):active {
    transform: translateY(1px);
}

.permission-confirm-button:focus-visible,
.startup-confirm-button:focus-visible {
    outline: 3px solid #111111;
    outline-offset: 3px;
}

@media (max-height: 620px) {
    .permission-dialog-panel,
    .startup-dialog-panel {
        display: flex;
        flex-direction: column;
        padding-top: 16px;
        padding-bottom: 16px;
        overflow: hidden;
    }

    .startup-dialog-warning {
        flex: 0 0 auto;
        width: 44px;
        margin-bottom: 12px;
    }

    .permission-dialog-message,
    .startup-dialog-message {
        min-height: 0;
        overflow-y: auto;
        font-size: 12px;
        line-height: 1.45;
        -webkit-overflow-scrolling: touch;
    }

    .permission-dialog-divider,
    .startup-dialog-divider {
        margin: 12px 0;
    }

    .startup-dialog-status {
        flex: 0 0 auto;
        margin-top: 12px;
    }

    .permission-confirm-button,
    .startup-confirm-button {
        flex: 0 0 auto;
    }
}

.user-interface-layer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-user-interface);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;

    /*
      添付デザインの比率を保ちつつ、主要操作は常に44px以上を確保する。
      端末名ではなく現在のviewportで決まるため、iPadのSplit Viewにも追従する。
    */
    /* clamp()非対応の初期Android 10ブラウザでも成立する基準値。 */
    --ui-action-size: 48px;
    --ui-action-icon-size: 26px;
    --ui-min-bottom-space: 24px;
    --ui-safe-bottom-extra: 8px;

    padding-right: 20px;
    padding-bottom: var(--ui-min-bottom-space);
    padding-left: 20px;

    /* iOSのノッチ、ホームインジケータ、横向き時の左右領域を避ける。 */
    padding-right: max(
        clamp(20px, 8vw, 32px),
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
    );
    padding-bottom: max(
        var(--ui-min-bottom-space),
        calc(env(safe-area-inset-bottom, 0px) + var(--ui-safe-bottom-extra))
    );
    padding-left: max(
        clamp(20px, 8vw, 32px),
        env(safe-area-inset-left, 0px),
        env(safe-area-inset-right, 0px)
    );
    pointer-events: none;
}

/*
 * 初回起動中は入力を遮断します。操作UI(z=30)より前、ダイアログ(z=40)
 * より後ろへ固定し、ダイアログ中はJS側でもdisplay:noneにします。
 */
.webcam-loading-screen.is-startup-loading {
    z-index: 39;
    z-index: calc(var(--z-dialog) - 1);
    pointer-events: auto;
}

@supports (width: clamp(48px, 13.7vw, 52px)) {
    .user-interface-layer {
        --ui-action-size: clamp(48px, 13.7vw, 52px);
        --ui-action-icon-size: clamp(26px, 7.4vw, 28px);
    }
}

.user-interface-toolbar {
    box-sizing: border-box;
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: repeat(5, var(--ui-action-size));
    grid-template-rows: var(--ui-action-size);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    pointer-events: auto;
}

.ui-action-button {
    position: relative;
    box-sizing: border-box;
    display: grid;
    width: var(--ui-action-size);
    min-width: var(--ui-action-size);
    height: var(--ui-action-size);
    min-height: var(--ui-action-size);
    justify-self: center;
    place-items: center;
    padding: 0;
    overflow: hidden;
    color: #397129;
    background: rgba(255, 255, 255, 0.96);
    border: 3px solid #397129;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    font: inherit;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: transform 100ms ease, box-shadow 100ms ease,
        color 100ms ease, background-color 100ms ease;
}

/*
 * 左端を空スロットとして5等間隔の基準を作ります。
 * 人物=(左端+中央)/2、解説=(中央+右端)/2となり、撮影は常に画面中央です。
 * ON/OFFボタンは同じセルに重ね、既存のd-none切替で片方だけを表示します。
 */
#webcam-start-button,
#webcam-stop-button {
    grid-row: 1;
    grid-column: 2;
}

#shutter-button {
    grid-row: 1;
    grid-column: 3;
}

#guide-button {
    grid-row: 1;
    grid-column: 4;
}

#web-button {
    grid-row: 1;
    grid-column: 5;
    place-items: end;
    overflow: visible;
    box-shadow: none;
}

/*
 * 5列目の操作領域は維持し、i画像だけを約2/3へ縮小して右下へ揃えます。
 * タップ領域を縮めないため、狭い画面でも他の主要ボタンと同じ操作性を保ちます。
 */
#web-button .ui-action-button-image {
    width: 66.6667%;
    height: 66.6667%;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    transition: box-shadow 100ms ease;
}

/* 外部サイト用の画像リンクでは、リンク固有の下線だけを抑止します。 */
.ui-action-button.ui-action-image-link {
    text-decoration: none;
}

.ui-action-button-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/*
 * 設定の読み込みが終わるまでは、ボタンを削除せず表示だけを抑止します。
 * visibilityはgrid上の占有領域を維持するため、撮影ボタンの位置は変わりません。
 */
#guide-button {
    visibility: hidden;
    pointer-events: none;
}

/* GEO／spotの対象ページでは、設定読込完了後に解説用スロットを表示します。 */
#guide-button.is-guide-available {
    visibility: visible;
    pointer-events: auto;
}

/*
 * TEST ONLY: 解説機能と4列目の占有領域を残したまま、ボタン表示と操作だけを止めます。
 * テスト終了後はこの規則を削除すると、直前の通常表示規則へ戻ります。
 */
#guide-button.is-guide-available {
    visibility: hidden;
    pointer-events: none;
}

/*
 * JSONで人物オクルージョン非対応となる地点では、ON/OFFボタンを不可視にします。
 * display:noneにはせず2列目の領域を残すことで、撮影ボタンの中央位置と
 * 5スロット全体の間隔を対応地点と同じまま維持します。
 */
#webcam-start-button.is-occlusion-unavailable,
#webcam-stop-button.is-occlusion-unavailable {
    visibility: hidden;
    pointer-events: none;
}

.ui-action-button svg {
    display: block;
    width: var(--ui-action-icon-size);
    height: var(--ui-action-icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.ui-action-button.is-active {
    color: white;
    background: #397129;
}

.ui-action-button:focus {
    outline: 3px solid rgba(255, 255, 255, 0.96);
    outline-offset: 3px;
}

#web-button:focus {
    outline: none;
}

#web-button:focus .ui-action-button-image {
    outline: 3px solid rgba(255, 255, 255, 0.96);
    outline-offset: 3px;
}

.ui-action-button:not(:disabled):active {
    transform: scale(0.94);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.ui-action-button:disabled {
    color: #71816d;
    background: rgba(245, 247, 244, 0.9);
    border-color: #71816d;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    cursor: not-allowed;
    opacity: 0.72;
}

/*
 * UI用PNG自体に円形の背景と枠が含まれるため、CSSの背景と枠は重ねません。
 * disabled／is-activeの状態でも画像本来の見た目を維持します。
 */
.ui-action-button.ui-action-image-link,
.ui-action-button.ui-action-image-button {
    background: transparent;
    border: 0;
}

@media (hover: hover) and (pointer: fine) {
    .ui-action-button:not(:disabled):hover {
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.34);
        transform: translateY(-1px);
    }

    #web-button:not(:disabled):hover .ui-action-button-image {
        box-shadow: 0 3px 9px rgba(0, 0, 0, 0.34);
    }
}

/* 十分な表示領域がある場合だけ拡大し、狭いiPad Split Viewではスマホ寸法に戻す。 */
@media (min-width: 700px) and (min-height: 600px) {
    .user-interface-layer {
        --ui-action-size: 56px;
        --ui-action-icon-size: 30px;
        --ui-min-bottom-space: 32px;
        --ui-safe-bottom-extra: 12px;
    }
}

/* スマートフォン横向きでは縦方向の占有を抑えつつ、44px以上を維持する。 */
@media (orientation: landscape) and (max-height: 500px) {
    .user-interface-layer {
        --ui-action-size: 48px;
        --ui-action-icon-size: 26px;
        --ui-min-bottom-space: 12px;
        --ui-safe-bottom-extra: 6px;
    }
}

/* 280px級の狭い表示領域でも、5スロットを収めつつ44pxの操作領域を保つ。 */
@media (max-width: 300px) {
    .user-interface-layer {
        --ui-action-size: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-action-button {
        transition: none;
    }
}

.camera-timer-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: var(--z-capture-countdown);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: auto;
}

.camera-timer-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-timer-image {
    display: block;
    width: 48vw;
    height: auto;
    max-width: 220px;
    max-height: 25vh;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
}

.camera-timer-image-fade-in {
    animation: camera-countdown-fade-in
        var(--camera-countdown-fade-duration, 900ms) linear both;
}

@keyframes camera-countdown-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .camera-timer-image-fade-in {
        animation: none;
        opacity: 1;
    }
}

.photo-result-dialog-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: var(--z-photo-dialog);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    background: rgba(0, 0, 0, 0.76);
    pointer-events: auto;
}

.photo-result-dialog-panel {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 82%;
    max-width: 420px;
    max-height: calc(100vh - 24px);
    max-height: calc(100vh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)));
    /* 見える18pxの×画像を基準に、上側と写真側の空白を各15pxに揃えます。 */
    padding: 48px 16px 22px;
    overflow: hidden;
    color: #1f1f1f;
    font-family: var(--app-font-family);
    background-color: #f5f3f2;
    background-image: url("../assets/ui/modal_bg_02.png");
    background-repeat: repeat;
    background-size: 196px 196px;
    border: 2px solid #3b7120;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.48);
}

.photo-result-image-stage {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    max-height: calc(100vh - 152px);
    overflow: hidden;
}

.photo-result-dialog-layer .photo-result-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 152px);
    object-fit: contain;

    /* iOS Safariの画像長押しメニューを阻害しない。 */
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto;
    -webkit-user-drag: auto;
    touch-action: auto;
}

.photo-result-help {
    flex: 0 0 auto;
    margin: 14px 0 0;
    color: #1f1f1f;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.photo-result-help-text {
    margin: 0;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.photo-result-help-text-english {
    margin-top: 4px;
    font-size: 0.94em;
}

.photo-result-close-button {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    box-sizing: border-box;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    background: transparent;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.photo-result-close-button img {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.photo-result-close-button:focus {
    outline: 3px solid #3b7120;
    outline-offset: -4px;
}

/* 対応ブラウザではタッチ操作時の枠を消し、キーボード操作時だけ表示する。 */
@supports selector(:focus-visible) {
    .photo-result-close-button:focus {
        outline: none;
    }

    .photo-result-close-button:focus-visible {
        outline: 3px solid #3b7120;
        outline-offset: -4px;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .photo-result-dialog-layer {
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }

    .photo-result-dialog-panel {
        width: 82%;
        max-width: 640px;
        max-height: calc(100vh - 16px);
        max-height: calc(100vh - max(8px, env(safe-area-inset-top, 0px)) - max(8px, env(safe-area-inset-bottom, 0px)));
        padding: 48px 16px 12px;
    }

    .photo-result-image-stage,
    .photo-result-dialog-layer .photo-result-image {
        max-height: calc(100vh - 120px);
    }

    .photo-result-help {
        margin-top: 8px;
        font-size: 12px;
    }

}

/*
 * GEO ONLY: 御城印は写真保存UIとは別のDOM・クラス・状態で管理します。
 * 外観が同じ部分も意図的に専用定義とし、写真UIの変更を波及させません。
 */
.castle-stamp-dialog-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: var(--z-castle-stamp-dialog);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-right: max(12px, env(safe-area-inset-right, 0px));
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding-left: max(12px, env(safe-area-inset-left, 0px));
    background: rgba(0, 0, 0, 0.76);
    pointer-events: auto;
}

.castle-stamp-dialog-panel {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 82%;
    max-width: 420px;
    height: min(760px, calc(100vh - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100vh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)));
    /* 狭い縦画面でも上部タイトルを44pxの×タップ領域と重ねません。 */
    padding: 48px 16px 18px;
    overflow: hidden;
    color: #1f1f1f;
    font-family: var(--app-font-family);
    background-color: #f5f3f2;
    background-image: url("../assets/ui/modal_bg_02.png");
    background-repeat: repeat;
    background-size: 196px 196px;
    border: 2px solid #3b7120;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.48);
}

.castle-stamp-dialog-panel:focus {
    outline: none;
}

.castle-stamp-title-image {
    display: block;
    flex: 0 1 auto;
    width: 72%;
    height: auto;
    max-width: 222px;
    max-height: 112px;
    margin: 0 auto -10px;
    object-fit: contain;
    pointer-events: none;
}

.castle-stamp-image-stage {
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.castle-stamp-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;

    /* 中央の御城印だけは、端末の長押し保存を許可します。 */
    -webkit-touch-callout: default;
    -webkit-user-select: auto;
    -moz-user-select: auto;
    user-select: auto;
    -webkit-user-drag: auto;
    touch-action: auto;
}

.castle-stamp-help {
    flex: 0 0 auto;
    margin: 14px 0 0;
    color: #1f1f1f;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
}

.castle-stamp-help-text {
    margin: 0;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.castle-stamp-help-text-english {
    margin-top: 4px;
    font-size: 0.94em;
}

.castle-stamp-close-button {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    box-sizing: border-box;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    background: transparent;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.castle-stamp-close-button img {
    display: block;
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.castle-stamp-close-button:focus {
    outline: 3px solid #3b7120;
    outline-offset: -4px;
}

@supports selector(:focus-visible) {
    .castle-stamp-close-button:focus {
        outline: none;
    }

    .castle-stamp-close-button:focus-visible {
        outline: 3px solid #3b7120;
        outline-offset: -4px;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .castle-stamp-dialog-layer {
        padding-top: max(8px, env(safe-area-inset-top, 0px));
        padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
    }

    .castle-stamp-dialog-panel {
        width: 82%;
        max-width: 640px;
        height: calc(100vh - 16px);
        max-height: calc(100vh - 16px);
        max-height: calc(100vh - max(8px, env(safe-area-inset-top, 0px)) - max(8px, env(safe-area-inset-bottom, 0px)));
        padding: 34px 12px 8px;
    }

    .castle-stamp-title-image {
        width: 44%;
        max-width: 170px;
        max-height: 48px;
        margin-bottom: -5px;
    }

    .castle-stamp-help {
        margin-top: 5px;
        font-size: 11px;
        line-height: 1.3;
    }
}

/*
 * GEO／spot共通: 解説は専用HTMLを同一ページ上のiframeへ表示します。
 * 写真・御城印とはDOM、CSS、状態を共有せず、背後の360度描画だけを維持します。
 */
.guide-dialog-layer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: var(--z-guide-dialog);
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    padding-top: env(safe-area-inset-top, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--guide-paper);
    pointer-events: auto;
    isolation: isolate;
}

.guide-dialog-frame {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--guide-paper);
    border: 0;
}

.guide-dialog-frame:focus {
    outline: none;
}

.guide-dialog-frame.is-guide-fallback-active {
    visibility: hidden;
    pointer-events: none;
}

/*
 * 解説ボタンが有効になる時点で親画面は文言JSONを取得済みです。
 * iframeのJSON・画像が揃うまでは、直書きではなく親が保持するloading文言を表示します。
 */
.guide-dialog-loading-layer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    inset: 0;
    z-index: 1;
    box-sizing: border-box;
    display: grid;
    width: 100%;
    height: 100%;
    padding: 24px;
    place-items: center;
    background: transparent;
    pointer-events: none;
}

.guide-dialog-loading-status {
    margin: 0;
    padding: 10px 16px;
    color: #28551d;
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    background: rgba(250, 250, 247, 0.96);
    border: 2px solid #397129;
    border-radius: 10px;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

/* 解説HTML／JSが読めない時だけ表示する、親画面所有の非常用戻るボタン。 */
.guide-dialog-fallback-close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    left: calc(env(safe-area-inset-left, 0px) + 8px);
    z-index: 2;
    box-sizing: border-box;
    display: grid;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    place-items: center;
    background: #fafaf7;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.guide-dialog-fallback-close img {
    display: block;
    width: clamp(76px, 24vw, 96px);
    height: auto;
    pointer-events: none;
}

.guide-dialog-fallback-close:focus {
    outline: 3px solid #397129;
    outline-offset: 1px;
}

.guide-dialog-fallback-status {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    box-sizing: border-box;
    width: min(80%, 420px);
    margin: 0;
    padding: 14px 16px;
    color: #8a1f1f;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    background: #fafaf7;
    border: 2px solid #397129;
    border-radius: 10px;
    transform: translate(-50%, -50%);
}