/* =============================================================================
 *  engine.css  ―  ガワ（OS/ウィンドウ/通知）の共通スタイル
 *  物語ごとに変える必要はない。配色を変えたい時はここだけ触る。
 * ========================================================================== */

:root {
    --accent: #2da44e;
    --os-chrome: #edf2ee;
    --os-chrome-strong: #e2e9e4;
    --os-chrome-border: #cbd7d0;
    --os-chrome-text: #35423d;
    --os-chrome-muted: #62716a;
    --os-hover: rgba(43, 92, 80, 0.12);
    --os-active: #25756b;
    --os-active-bg: rgba(37, 117, 107, 0.16);
    --win-bg: #ffffff;
    --win-head: var(--os-chrome);
    --text: #222;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    color: var(--text);
    user-select: none;
}

/* ── デスクトップ ───────────────────────────────── */
#desktop {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* 既定の壁紙（暖色寄りの無彩色＝eidoLieの冷たい青灰から差別化・パターン1。本番は meta.wallpaper 推奨） */
    background-color: #b3aa9c;
    background-image: linear-gradient(160deg, #e6e0d6 0%, #cbc4b7 55%, #b1a899 100%);
    position: relative;
    overflow: hidden;
}

#desktop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

/* ── デスクトップアイコン ───────────────────────── */
#icon-area {
    position: absolute;
    top: 22px;
    left: 18px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.desk-icon {
    width: 100px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
    position: relative;
    /* スマホ: タップ時に四角いハイライト（選択されたような矩形）を出さない。
       タップでアプリが開く動作は不変（視覚反応だけを消す）。 */
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

/* ── 起動演出「画面が組み上がる」──────────────────────────────
   engine.js が startBootFade で body.boot-build を付与すると、デスクトップ
   アイコンが点→実体へ順に出現し、タスクバーが下からせり上がる。そのまま本物の
   デスクトップへ連続する（別レイヤーのローダーで“待たせる”型とは違う見せ方）。 */
@keyframes boot-pop {
    from { opacity: 0; transform: scale(.35); }
    55%  { opacity: 1; }
    to   { opacity: 1; transform: scale(1); }
}
body.boot-build .desk-icon { animation: boot-pop .46s cubic-bezier(.2, .85, .3, 1.3) backwards; }
body.boot-build .desk-icon:nth-child(1) { animation-delay: .05s; }
body.boot-build .desk-icon:nth-child(2) { animation-delay: .12s; }
body.boot-build .desk-icon:nth-child(3) { animation-delay: .19s; }
body.boot-build .desk-icon:nth-child(4) { animation-delay: .26s; }
body.boot-build .desk-icon:nth-child(5) { animation-delay: .33s; }
body.boot-build .desk-icon:nth-child(6) { animation-delay: .40s; }
body.boot-build .desk-icon:nth-child(7) { animation-delay: .47s; }
body.boot-build .desk-icon:nth-child(8) { animation-delay: .54s; }
body.boot-build .desk-icon:nth-child(n+9) { animation-delay: .60s; }

@keyframes boot-bar-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
body.boot-build #taskbar { animation: boot-bar-up .5s cubic-bezier(.2, .8, .3, 1) .28s backwards; }
body.boot-build .taskbtn { animation: boot-pop .4s ease backwards; }
body.boot-build #taskbar-apps .taskbtn:nth-child(1) { animation-delay: .42s; }
body.boot-build #taskbar-apps .taskbtn:nth-child(2) { animation-delay: .49s; }
body.boot-build #taskbar-apps .taskbtn:nth-child(3) { animation-delay: .56s; }
body.boot-build #taskbar-apps .taskbtn:nth-child(4) { animation-delay: .63s; }
body.boot-build #taskbar-apps .taskbtn:nth-child(n+5) { animation-delay: .70s; }

/* アニメ無効化を尊重 */
@media (prefers-reduced-motion: reduce) {
    body.boot-build .desk-icon,
    body.boot-build #taskbar,
    body.boot-build .taskbtn { animation: none; }
}

/* アイコンタイル：上品な(彩度控えめ)グラデ色の角丸タイルに、白の線アイコンを乗せて
   コントラストを出す。色はアプリごとに下の nth-child で巡回して出し分ける。 */
.desk-icon .ico {
    width: 66px;
    height: 66px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 19px;
    color: #fff;                 /* SVGアイコン(currentColor)は白 */
    background: linear-gradient(150deg, #6c8ab0, #45608a);   /* 既定（nth-childで上書き） */
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
/* アプリ別グラデ（彩度控えめ・白アイコンが映える濃さ）。アイコンの並び順で巡回。 */
.desk-icon:nth-child(8n+1) .ico { background: linear-gradient(150deg, #6c8ab0, #45608a); } /* dusty blue */
.desk-icon:nth-child(8n+2) .ico { background: linear-gradient(150deg, #5fa39a, #3b7a72); } /* muted teal */
.desk-icon:nth-child(8n+3) .ico { background: linear-gradient(150deg, #b0876a, #8a6147); } /* caramel */
.desk-icon:nth-child(8n+4) .ico { background: linear-gradient(150deg, #8a7bae, #645289); } /* dusty lavender */
.desk-icon:nth-child(8n+5) .ico { background: linear-gradient(150deg, #b0808f, #885968); } /* dusty rose */
.desk-icon:nth-child(8n+6) .ico { background: linear-gradient(150deg, #7d9a6b, #577a4a); } /* sage */
.desk-icon:nth-child(8n+7) .ico { background: linear-gradient(150deg, #b0a06a, #897a45); } /* muted gold */
.desk-icon:nth-child(8n)   .ico { background: linear-gradient(150deg, #6f7d8c, #4a5663); } /* slate */
/* アプリ別の明示指定（nth-childより後＝優先）。LIMEとブラウザの色を入れ替え（ユーザー要望）。 */
.desk-icon[data-app-id="line"]    .ico { background: linear-gradient(150deg, #5fa39a, #3b7a72); } /* LIME=teal */
.desk-icon[data-app-id="browser"] .ico { background: linear-gradient(150deg, #6c8ab0, #45608a); } /* browser=blue */

/* デスクトップアイコン下の文字は非表示（ユーザー要望）。タイルのSVGだけ見せる。 */
.desk-icon .lbl {
    display: none;
}

.desk-icon:hover .ico {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.desk-icon:active .ico { transform: translateY(-1px) scale(0.97); }

/* 段階解禁（F）：アイコン出現アニメ。scale＋glow でふわっと現れる */
@keyframes deskReveal { from { opacity: 0; transform: translateY(8px) scale(0.6); } to { opacity: 1; transform: translateY(0) scale(1); } }
.desk-icon--reveal { animation: deskReveal 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
.desk-icon--reveal .ico { box-shadow: 0 0 0 2px rgba(120, 180, 255, 0.7), 0 8px 22px rgba(0, 0, 0, 0.32); }

.badge {
    /* display:none/flex は JS が切り替える。表示時は flex で中身(! や数字)を中央寄せ */
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -6px;
    right: 8px;
    background: #e53935;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    min-width: 24px;
    height: 24px;
    line-height: 1;
    border-radius: 12px;
    padding: 0 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    text-shadow: none;
}

/* ── ウィンドウ ─────────────────────────────────── */
.window {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 960px;
    height: 680px;
    max-width: 94vw;
    max-height: 90vh;
    background: var(--win-bg);
    border-radius: 10px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
    opacity: 1;
}

/* ── ウィンドウ開閉アニメ（モード切替：body.wa-fade / wa-slide / wa-none）── */
@keyframes winFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes winFadeOut { from { opacity: 1; } to { opacity: 0; } }
/* PC（中央寄せ transform を保ったままスライド） */
@keyframes winSlideInC  { from { opacity: 0; transform: translate(-50%, calc(-50% + 26px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes winSlideOutC { from { opacity: 1; transform: translate(-50%, -50%); } to { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); } }
/* モバイル（全画面・transform:none）用の上下スライド */
@keyframes winSlideUp   { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(0); } }
@keyframes winSlideDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(42px); } }

body.wa-fade  .window.aniIn  { animation: winFadeIn 0.2s ease; }
body.wa-fade  .window.aniOut { animation: winFadeOut 0.18s ease forwards; }
body.wa-slide .window.aniIn  { animation: winSlideInC 0.24s ease-out; }
body.wa-slide .window.aniOut { animation: winSlideOutC 0.2s ease-in forwards; }

/* アプリ別ウィンドウサイズ（PC）。表示領域は広めに取る */
@media (min-width: 769px) {
    #win-browser { width: 92%;   max-width: 1400px; height: 88%; }
    #win-mail    { width: 1040px; height: 680px; }
    #win-records { width: 640px;  height: 820px; max-height: 90vh; }
    #win-deduction { width: 980px; height: 720px; max-height: 90vh; }
    #win-folder  { width: 1000px; height: 680px; }
    #win-memo    { width: 720px;  height: 600px; }
    #win-line    { width: 460px;  height: 820px; max-height: 90vh; }
    #win-message { width: 420px;  height: 820px; max-height: 90vh; }
    #win-phone   { width: 424px;  height: 864px; max-height: 94vh; background: transparent; box-shadow: none; }
}

.window-head {
    height: 36px;
    background: linear-gradient(180deg, #f5f8f5 0%, var(--win-head) 100%);
    border-bottom: 1px solid var(--os-chrome-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    display: flex;
    align-items: center;
    padding: 0 8px 0 12px;
    flex: 0 0 auto;
    cursor: grab;
}

.window-head:active {
    cursor: grabbing;
}

.window-title {
    font-size: 13px;
    color: var(--os-chrome-text);
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.win-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 7px;
    background: #c9d5ce;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.win-close {
    position: relative;
    width: 28px;
    height: 28px;
    border: 0;
    background: rgba(61, 78, 70, 0.06);
    cursor: pointer;
    font-size: 0;
    color: #66756e;
    border-radius: 50%;
    transition: background 0.14s ease, color 0.14s ease, transform 0.08s ease, box-shadow 0.14s ease;
}

.win-close::before,
.win-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.win-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.win-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

.win-close:hover {
    background: #c94a44;
    color: #fff;
    box-shadow: 0 3px 8px rgba(130, 34, 29, 0.22);
}

.win-close:active { transform: scale(0.92); }

.window-body {
    flex: 1 1 auto;
    overflow: hidden;
    background: #fff;
}

.window-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    /* 注: will-change:transform は付けない。iframe(動画)をレイヤー昇格させると
       ブラウザのハードウェア動画オーバーレイ経路を外れ、かえって動画がカクつく原因になる。 */
}

/* ── タスクバー（下部）──────────────────────────── */
#taskbar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 56px;
    /* backdrop-filter のぼかしは、背後で動画が再生されると毎フレーム再計算されて重い
       （OS内でだけカクつく主因）。半透明の単色背景に置き換えてぼかしを廃止。 */
    background: linear-gradient(180deg, #f7faf7 0%, var(--os-chrome-strong) 100%);   /* 不透明（半透明だと下の窓が透ける） */
    border-top: 1px solid rgba(82, 105, 95, 0.22);
    box-shadow: 0 -8px 24px rgba(38, 50, 45, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    display: flex;
    align-items: center;
    padding: 0 10px;
    z-index: 9000;
    font-size: 13px;
    color: var(--os-chrome-text);
    /* スマホのダブルタップズーム防止（タスクバー要素のみ）。
       touch-action:manipulation はダブルタップ拡大ジェスチャを無効化しつつ
       通常タップ・横スクロール（#taskbar-apps）はそのまま通す。 */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* モバイルでソフトキーボード表示中はタスクバーを隠す（入力中にせり上がってくるのを防ぐ）。
   engine.js が VisualViewport の高さ縮小を検知して body.kb-open を付け外しする。 */
body.kb-open #taskbar { display: none; }

#taskbar .power {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 24px;
    color: var(--os-chrome-muted);
}

#taskbar .power:hover { color: var(--os-chrome-text); }

/* タスクバー: 開いているアプリのボタン列（中央揃え） */
#taskbar-apps {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 150px;          /* 左右のpower/trayと重ならない余白 */
    overflow-x: auto;
    height: 100%;
    scrollbar-width: none;
}
#taskbar-apps::-webkit-scrollbar { display: none; }

/* Windows風：アイコンのみの正方ボタン。3状態を色＋下線インジケータで明確に区別 */
.taskbtn {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    color: var(--os-chrome-muted);
    cursor: pointer;
    transition: background 0.15s ease, transform 0.08s ease;
}
.taskbtn .ti { font-size: 25px; line-height: 1; transition: opacity 0.15s ease; }
.taskbadge {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 3px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e53935;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0,0,0,.28);
    text-shadow: none;
}
.taskbtn::after {                       /* 実行中インジケータ（下線バー）*/
    content: "";
    position: absolute;
    bottom: 4px; left: 50%;
    width: 0; height: 3px; border-radius: 3px;
    background: currentColor;
    transform: translateX(-50%);
    opacity: 0;
    transition: width 0.18s ease, opacity 0.18s ease;
}
.taskbtn:hover { background: var(--os-hover); }
.taskbtn:active { transform: scale(0.92); }

/* 開いている（背面・非アクティブ）：通常色アイコン＋短い下線 */
.taskbtn.open { color: #53645d; }
.taskbtn.open::after { width: 16px; opacity: 0.5; }

/* アクティブ（前面）：淡い緑背景＋長い下線＋濃色アイコン */
.taskbtn.active { background: var(--os-active-bg); color: var(--os-active); }
.taskbtn.active::after { width: 26px; opacity: 1; }

/* 最小化（隠れている）：アイコンをはっきり淡く＋下線なし＝開とは別物に見える */
.taskbtn.min { color: #aab1bd; }
.taskbtn.min .ti { opacity: 0.42; }
.taskbtn.min::after { opacity: 0; width: 0; }

/* idle（未起動のピン留め）：薄め表示・下線なし。クリックで起動する。
   open/active/min と見分けがつくよう、min よりさらに控えめにする。 */
.taskbtn.idle { color: #aeb6c2; }
.taskbtn.idle .ti { opacity: 0.55; }
.taskbtn.idle::after { opacity: 0; width: 0; }
.taskbtn.idle:hover .ti { opacity: 0.9; }

/* インラインSVGアイコンのサイズ・配置（絵文字フォントサイズに対応させる）。
   各 SVG は width/height=1em なので親 font-size に追従するが、念のため明示する。
   vertical-align で行内のベースライン隙間を消し、潰れ・ズレを防ぐ。 */
.desk-icon .ico svg { width: 34px; height: 34px; display: block; }
.taskbtn .ti svg    { width: 25px; height: 25px; display: block; }
.t-icon svg         { width: 24px; height: 24px; display: block; }
.os-row .ic svg     { width: 18px; height: 18px; display: block; }
.hint-btn svg, .gear-btn svg { width: 20px; height: 20px; display: block; }
.os-svg-icon { vertical-align: middle; }

.tray {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 16px;
}

/* スマホ窓のドラッグ用グリップ（ヘッダーが無いため） */
.win-grip {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 16px;
    border-radius: 10px;
    background: rgba(71, 95, 86, 0.68);
    cursor: move;
    z-index: 5;
}
.win-grip::after {
    content: "";
    position: absolute;
    top: 6px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 3px;
    background: rgba(237, 245, 240, 0.9);
}

.hint-btn, .gear-btn {
    cursor: pointer;
    font-size: 20px;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 9px;
    transition: background 0.15s ease, transform 0.3s ease;
}
/* ホバーで動く：歯車は回転、電球は点灯（少し傾けて光る）。どちらも「反応する」感を出す */
.hint-btn:hover { background: var(--os-hover); transform: scale(1.12) rotate(-10deg); filter: drop-shadow(0 0 6px rgba(255, 205, 70, 0.85)); }
.gear-btn:hover { background: var(--os-hover); transform: rotate(40deg); }

/* デスクトップ表示（全ウィンドウ最小化）: Windows風の右端の細い縦バー */
.showdesk {
    width: 7px;
    height: 100%;
    margin-left: 6px;
    border-left: 1px solid rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition: background 0.15s ease;
}
.showdesk:hover { background: rgba(43, 92, 80, 0.16); }

/* ── 背景アニメ（うにょうにょ流れる線・控えめ）────────── */
#bg-anim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.5;
}
#bg-anim svg { width: 100%; height: 100%; display: block; }
#bg-anim .wave {
    fill: none;
    /* drop-shadow 除去: filter付き要素の毎フレームtransformは合成・再描画が非常に重く
       動画デコードと競合してカクつく原因になるため削除。
       stroke の不透明度を少し上げて視認性を補う。 */
    /* 背景線は色数を増やさない＝背景と同系統(暖色寄りの淡色)1色で、濃淡だけ変える。 */
    stroke: rgba(248, 244, 236, 0.55);
    stroke-width: 1.5;
    /* transform 専用の合成レイヤーに昇格させ、動画・他要素との描画干渉を減らす */
    will-change: transform;
    /* scale を各線の中心基準にして、形の伸縮を加えても位置が飛ばないようにする */
    transform-box: fill-box;
    transform-origin: center;
}
/* 5本それぞれ：濃淡・速度・開始位相(負のdelay)・動きのパターンを全部バラバラにする。 */
#bg-anim .w1 { animation: bgWave1 19s ease-in-out      infinite; stroke: rgba(248, 244, 236, 0.55); }
#bg-anim .w2 { animation: bgWave2 27s ease-in-out -4s  infinite; stroke: rgba(248, 244, 236, 0.34); }
#bg-anim .w3 { animation: bgWave3 23s ease-in-out -9s  infinite; stroke: rgba(248, 244, 236, 0.46); }
#bg-anim .w4 { animation: bgWave4 33s ease-in-out -3s  infinite; stroke: rgba(248, 244, 236, 0.24); }
#bg-anim .w5 { animation: bgWave5 16s ease-in-out -7s  infinite; stroke: rgba(248, 244, 236, 0.38); }
@keyframes bgWave1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-46px, 12px) scaleX(1.03); } }
@keyframes bgWave2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(38px, -18px); } }
@keyframes bgWave3 { 0%,100% { transform: translate(0,0); } 33% { transform: translate(-18px,-10px); } 66% { transform: translate(26px, 8px) scaleX(0.98); } }
@keyframes bgWave4 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-30px, -6px) scaleX(1.04); } }
@keyframes bgWave5 { 0%,100% { transform: translate(0,0); } 40% { transform: translate(22px, 10px); } 70% { transform: translate(-14px, 16px); } }
@media (prefers-reduced-motion: reduce) { #bg-anim .wave { animation: none; } }

/* ── OS内モーダル（設定/リセット）──────────────────── */
.os-modal {
    /* display は常に flex のまま、opacity/visibility でじわっと開閉する */
    display: flex;
    position: absolute;
    inset: 0;
    z-index: 2147483000;
    background: rgba(10, 14, 22, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;                 /* 非表示時はクリックも透過させない */
    transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}
.os-modal.show {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.24s ease;     /* 開く時は遅延なしでフェードイン */
}
.os-modal .os-modal-box {               /* 箱も少し拡大しながら出入り */
    transform: scale(0.96);
    transition: transform 0.24s ease;
}
.os-modal.show .os-modal-box { transform: scale(1); }
.os-modal-box {
    position: relative;
    width: min(360px, 86vw);
    background: #fff;
    border-radius: 14px;
    padding: 20px 22px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
    text-align: left;
}
.os-modal-x {
    position: absolute;
    top: 10px; right: 12px;
    width: 28px; height: 28px;
    border: 0; border-radius: 8px;
    background: transparent; color: #9aa3b0;
    font-size: 20px; line-height: 1; cursor: pointer;
}
.os-modal-x:hover { background: #f0f2f6; color: #555; }
.os-modal-title { font-size: 13px; letter-spacing: 0.08em; color: #8a93a2; font-weight: 700; margin-bottom: 14px; }
.os-modal-msg { font-size: 15.5px; color: #1f2937; line-height: 1.6; margin-bottom: 18px; }
.os-modal-sub { font-size: 12px; color: #8a93a2; }
.os-modal-btns { display: flex; gap: 10px; }
.os-btn { flex: 1; padding: 11px 0; border: 0; border-radius: 9px; font-size: 14px; font-weight: 600; cursor: pointer; }
.os-btn-ghost { background: #eef0f4; color: #444; }
.os-btn-ghost:hover { background: #e3e6ec; }
.os-btn-danger { background: #e5534b; color: #fff; }
.os-btn-danger:hover { background: #d23b33; }

/* 設定パネルの行リスト（保存/読込/リセット）*/
.os-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.os-row {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    justify-items: center;
    column-gap: 0;
    width: 100%; text-align: center;
    padding: 13px 14px;
    border: 1px solid #e6e9ef; border-radius: 10px;
    background: #f7f8fb; color: #232831;
    font-size: 14px; font-weight: 600; font-family: inherit;
    cursor: pointer;
    transition: background 0.14s ease, border-color 0.14s ease;
}
.os-row:hover { background: #eef1f6; border-color: #d7dce4; }
.os-row .ic {
    grid-column: 1;
    justify-self: center;
    width: 20px;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.os-row > span:last-child {
    grid-column: 2;
    justify-self: center;
    text-align: center;
}
.os-row.danger { color: #c5372f; border-color: #f1d6d3; background: #fdf6f5; }
.os-row.danger:hover { background: #fbe9e7; border-color: #e9c0bb; }
.os-modal-note { font-size: 11.5px; color: #9aa3b0; line-height: 1.65; }

/* ── OS共通スクロールバー（デスクトップ chrome 用・控えめでモダン）────── */
#desktop ::-webkit-scrollbar { width: 11px; height: 11px; }
#desktop ::-webkit-scrollbar-track { background: transparent; }
#desktop ::-webkit-scrollbar-thumb {
    background: rgba(120, 130, 150, 0.42);
    border-radius: 7px;
    border: 3px solid transparent;
    background-clip: padding-box;
}
#desktop ::-webkit-scrollbar-thumb:hover { background: rgba(100, 110, 130, 0.6); background-clip: padding-box; }

/* ── クリア後の全画面エピローグ（meta.epilogue）── */
#os-epilogue {
    position: absolute;
    inset: 0;
    z-index: 99990;                 /* 窓・タスクバーより上。設定モーダル(99998)より下 */
    background: #000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease, visibility 0s linear 1.5s;
}
#os-epilogue.show { opacity: 1; visibility: visible; transition: opacity 1.5s ease; }
#os-epilogue iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
#os-epilogue-close {
    position: absolute;
    top: 14px; right: 16px;
    z-index: 2;
    width: 36px; height: 36px;
    border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
    color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
#os-epilogue-close:hover { background: rgba(0, 0, 0, 0.72); }

.clock-area { text-align: right; line-height: 1.15; cursor: default; font-size: 14px; }
.clock-area .date { font-size: 11px; opacity: 0.8; }

/* ── 通知トースト ───────────────────────────────── */
#notification-toast {
    position: absolute;
    right: 16px;
    bottom: 64px;
    width: 400px;
    max-width: 86vw;
    /* 通知は明るい/嬉しい色（ブランドのポジティブ緑）。暗いグレーから変更。 */
    background: var(--accent);
    color: #fff;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: flex;
    gap: 16px;
    align-items: center;
    transform: translateX(460px);
    opacity: 0;
    transition: transform 0.45s ease, opacity 0.45s ease;
    z-index: 10000;
    cursor: pointer;
    /* 非表示時は絶対にタップを奪わない。モバイルは hidden 状態が translateY で
       タスクバー上に重なるため、pointer-events を切らないと全タップが通知onclick
       (=直前アプリ=LINEを開く)に吸われ、歯車等が押せなくなる。表示中のみ auto。 */
    pointer-events: none;
}

#notification-toast.show { transform: translateX(0); opacity: 1; pointer-events: auto; }
#notification-toast .t-icon { font-size: 34px; flex: 0 0 auto; }
#notification-toast .t-title { font-weight: bold; font-size: 17px; }
#notification-toast .t-msg { font-size: 15px; opacity: 0.85; margin-top: 4px; line-height: 1.45; }

/* ── シャットダウン/暗転オーバーレイ ───────────────── */
#shutdown-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease-in;
    z-index: 99999;
}

#shutdown-overlay.is-active { opacity: 1; pointer-events: all; }

/* =============================================================================
 *  アプリ内部の共通スタイル（mail / memo / records が iframe 内で読む）
 * ========================================================================== */
.app-root {
    height: 100%;
    overflow: auto;
    /* 端までスクロールしてもOS外殻へ連鎖させない（共通仕様: 外殻不動） */
    overscroll-behavior: contain;
    background: #fafafa;
    color: #222;
    font-size: 14px;
}

.app-pad { padding: 18px 22px; }

/* メール */
.mail-list { border-bottom: 1px solid #e5e5e5; }
.mail-item { padding: 12px 18px; border-bottom: 1px solid #eee; cursor: pointer; }
.mail-item:hover { background: #f0f6ff; }
.mail-item.unread { font-weight: bold; background: #fffaf0; }
.mail-item .m-sub { font-size: 14px; }
.mail-item .m-meta { font-size: 11px; color: #888; margin-top: 3px; }
.mail-view { padding: 18px 22px; line-height: 1.8; }
.mail-view .m-head { border-bottom: 1px solid #ddd; padding-bottom: 10px; margin-bottom: 16px; }
.mail-view .m-head .s { font-size: 16px; font-weight: bold; }
.mail-view .m-head .e { font-size: 12px; color: #888; }
.embedded-image { max-width: 100%; border: 1px solid #ddd; border-radius: 4px; margin: 8px 0; }
.back-link { color: var(--accent); cursor: pointer; font-size: 13px; display: inline-block; margin-bottom: 12px; }

.interaction-box { margin: 22px 0; padding: 16px; background: #eef5ff; border: 1px solid #cfe0ff; border-radius: 6px; }
.interaction-msg { margin: 0 0 10px; font-weight: bold; }
.choice-btn { padding: 8px 18px; border: 0; border-radius: 5px; background: var(--accent); color: #fff; cursor: pointer; font-size: 14px; }
.choice-btn:hover { filter: brightness(1.1); }
.input-answer { padding: 8px 10px; border: 1px solid #bbb; border-radius: 5px; font-size: 14px; }

/* メモ帳（本文スクロールは生かしつつ、端まで行ってもOS外殻へ連鎖させない） */
.memo-area { width: 100%; height: 100%; border: 0; resize: none; padding: 16px 18px; font-size: 14px; line-height: 1.7; font-family: inherit; outline: none; overscroll-behavior: contain; }

/* 調査記録 */
.rec-head { padding: 14px 20px; border-bottom: 1px solid #e5e5e5; font-size: 13px; color: #555; }
.rec-prog { font-weight: bold; color: var(--accent); }
.rec-table { width: 100%; border-collapse: collapse; }
.rec-table td { padding: 10px 18px; border-bottom: 1px solid #eee; font-size: 13px; }
.rec-table td.num { width: 48px; color: #999; text-align: center; }
.rec-table tr.found td.title { color: #1a73e8; cursor: pointer; }
.rec-table tr.unfound td { color: #ccc; }

/* ── OS全画面画像ビューア（修正B: LIMEの画像タップで osImageView を受信して表示）── */
#os-image-viewer {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.85);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#os-image-viewer img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.7);
    cursor: default;
}

#os-image-viewer-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

#os-image-viewer-close:hover {
    background: rgba(255, 255, 255, 0.30);
}

/* ── レスポンシブ ──────────────────────────────── */
@media (max-width: 768px) {
    /* ── OS外殻の完全固定（共通仕様 2026-06-12）─────────────────────
       実機スマホで「タブ列/タスクバー/メモ帳/LIME/設定を触るとUI全体が動く」対策。
       トップdocumentはスクロール余地ゼロ（scrollHeight==clientHeight をエミュレーション
       計測で確認済み）なので、動く実体は通常のdocumentスクロールではなく、
       iOS系ルートスクローラーのラバーバンドと内側スクロール終端からの連鎖。
       これらは overflow:hidden では防げないため、body を position:fixed で文書フローごと
       ビューポートに固定し、overscroll-behavior:none で連鎖・バウンス自体を遮断する。
       このCSSはアプリiframe（mail/memo/records等）も読むため、iframe内documentにも
       同じ固定が効く。中身のスクロール（ブラウザのページ/LIME/textarea/一覧）は
       各スクロールコンテナ側で従来どおり生きる。PC幅（>768px）は挙動不変。 */
    html {
        overflow: hidden;
        overscroll-behavior: none;
    }
    body {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        overscroll-behavior: none;
    }
    /* ── ソフトキーボード追従（共通仕様）──────────────────────────
       body が position:fixed のため、キーボード表示時のブラウザ標準
       「フォーカス位置へ自動パン/リサイズ」が効かず、入力欄が隠れる作品があった。
       Android Chrome系は viewport meta（interactive-widget=resizes-content、top.html）で
       レイアウト自体が縮むが、iOS Safari 等はレイアウトが縮まず visualViewport だけ縮む。
       engine.js が visualViewport を監視し、キーボード表示中（body.kb-open）に
       --vvh（実際に見えている高さ）と --vv-top（ブラウザが勝手にパンした縦量）を
       documentElement に設定するので、OS外殻ごと見えている領域に合わせる。
       kb-open は engine.js がトップdocumentのbodyにしか付けないため、
       このCSSを読むアプリiframe内のbodyには影響しない。PC幅（>768px）も不変。 */
    body.kb-open {
        height: var(--vvh, 100%);
        transform: translateY(var(--vv-top, 0px));
    }
    /* キーボード表示中はタスクバーが消える（body.kb-open #taskbar 参照）ので、
       窓は縮んだ外殻いっぱいまで広げる＝LIME等の下端ピン留め入力欄がキーボード直上に来る。 */
    body.kb-open .window,
    body.kb-open #win-phone { height: 100%; }

    /* OSクローム（タスクバー/窓ヘッダー/アイコン領域/設定モーダル）からは
       パンジェスチャ自体を発生させない。タップは touch-action:none でも従来どおり効く。 */
    #taskbar,
    .window-head,
    #icon-area,
    .os-modal { touch-action: none; }
    /* タスクバーのアプリ列だけは横スクロール（pan-x）を残す。縦パンは不可・端の連鎖も遮断。 */
    #taskbar-apps { touch-action: pan-x; overscroll-behavior: contain; }

    /* デスクトップの「窓」をやめ、アプリは縁なし全画面で開く（開閉はopacityフェード=JS制御） */
    .window {
        top: 0; left: 0; transform: none;
        /* 高さはタスクバー(56px)とぴったり合わせる。48pxだと窓が8px下に潜り、半透明タスクバーの
           上端数pxに白い窓が透けて「色が薄い帯」に見える不具合になる。 */
        width: 100%; height: calc(100% - 56px);
        max-width: none; max-height: none;   /* ← これが無いと94vw/90vhで窓っぽく余白が出る */
        border-radius: 0;
        box-shadow: none;
    }
    /* モバイルのスライドは上下方向（中央寄せでないため） */
    body.wa-slide .window.aniIn  { animation: winSlideUp 0.26s ease-out; }
    body.wa-slide .window.aniOut { animation: winSlideDown 0.2s ease-in forwards; }

    /* モバイルでは起動時の「ぴょこぴょこ」（アイコン/タスクバーが順に出てくる演出）を出さない。 */
    body.boot-build .desk-icon,
    body.boot-build #taskbar,
    body.boot-build .taskbtn { animation: none; }

    /* 起動演出の間はデスクトップアイコンを出さない。モバイルは起動アプリが全画面で開くので、
       起動中にアイコンが窓ヘッダ（上帯）にはみ出して見えるのを構造的に防ぐ。
       演出が終われば（engine.js が body.booting を外す）通常表示に戻る。PCは対象外。 */
    body.booting #icon-area { visibility: hidden; }

    /* スマホ窓は枠ごと全画面 */
    #win-phone { width: 100%; height: calc(100% - 56px); background: #000; }
    /* タスクバーのアプリは横スクロール（中央の余白は詰める） */
    #taskbar-apps { padding: 0 88px; justify-content: flex-start; }

    /* スマホではウィンドウヘッダー（PCで掴んでドラッグする上帯）を出さない＝全作品共通のデフォルト。
       ブラウザのタブ列やアプリ自身のヘッダーが画面最上段に来る。
       閉じる(×)ボタンはヘッダーごと消えるが、ウィンドウの切替・復帰・デスクトップ表示は
       タスクバーのアプリボタン／showdesk が担う（モバイルはドラッグ自体無効なので機能損失なし）。 */
    .window-head { display: none; }
    /* 例外: メモ帳だけはスマホでもヘッダー（タイトル帯）を表示する＝全作品共通のデフォルト。
       メモ帳はブラウザのタブ列のような自前ヘッダーを持たず、帯が無いと何のアプリか分からないため。
       ただし右上の×（閉じる）は他アプリ同様に出さない＝閉じる・切替はタスクバー／showdesk が担う。
       ウィンドウドラッグは makeDraggable（engine.js）が幅768px以下で無効のため、帯が出ても窓は動かない。 */
    #win-memo .window-head { display: flex; }
    #win-memo .win-close { display: none; }

    /* デスクトップアイコンも大きめ・折返さない */
    .desk-icon { width: 84px; }
    .desk-icon .ico { font-size: 40px; }
    .desk-icon .lbl { font-size: 11px; white-space: nowrap; }
    #icon-area { gap: 22px; }
    #footer-msg { display: none; }
    .win-grip { display: none; }

    /* 通知トースト: スマホでは横幅いっぱい近くに広げ、フォントも読めるサイズに */
    #notification-toast {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        bottom: 64px;
        padding: 18px 20px;
        gap: 16px;
        transform: translateY(120px);   /* 画面下から出す（左右いっぱいのため横スライドは不可） */
    }
    #notification-toast.show { transform: translateY(0); }
    #notification-toast .t-icon  { font-size: 36px; }
    #notification-toast .t-title { font-size: 18px; }
    #notification-toast .t-msg   { font-size: 16px; }

    /* デスクトップアイコンのバッジもタッチ環境で視認しやすく */
    .badge {
        font-size: 16px;
        min-width: 26px;
        height: 26px;
        border-radius: 13px;
    }
}