/*
  SRC#Web の画面。往年の Windows のエクスプローラーを模す。
  テーマは html の data-theme で切り替える（95: Windows 95 のクラシック、xp: Windows XP の Luna）。
  色・枠は下の変数で決め、形が大きく違うところ（タイトルバー・作業ウィンドウ・ボタン）はテーマごとに書く。
*/

/* ── テーマ ── */

:root,
:root[data-theme="95"] {
    --desk: #008080;            /* デスクトップ */
    --face: #c0c0c0;            /* ウィンドウ・ボタンの面 */
    --face-hover: #c0c0c0;
    --hilight: #ffffff;         /* 立体の枠 */
    --light: #dfdfdf;
    --shadow: #808080;
    --dark: #000000;
    --well: #ffffff;            /* 一覧・入力欄 */
    --text: #000000;
    --text-dim: #404040;
    --link: #0000ff;
    --select: #000080;          /* 選択 */
    --select-text: #ffffff;
    --title-bg: linear-gradient(to right, #000080, #1084d0);
    --title-text: #ffffff;
    --tip: #ffffe1;             /* 状態の表示（ツールチップの色） */
    --tip-border: #000000;
    --group-text: #000000;
    --group-line: var(--shadow);
    --raised: inset -1px -1px var(--dark), inset 1px 1px var(--hilight), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
    --sunken: inset -1px -1px var(--hilight), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
    --ui-font: "MS UI Gothic", "MS PGothic", "Meiryo UI", "BIZ UDPGothic", Tahoma, sans-serif;
    --title-font: var(--ui-font);
}

:root[data-theme="xp"] {
    --desk: linear-gradient(#245edb, #3a81f3 55%, #5a9a3c 55%, #3f7f26);
    --face: #ece9d8;
    --face-hover: #f3f1e6;
    --hilight: #ffffff;
    --light: #f1efe2;
    --shadow: #aca899;
    --dark: #716f64;
    --well: #ffffff;
    --text: #000000;
    --text-dim: #555555;
    --link: #0047cc;
    --select: #316ac5;
    --select-text: #ffffff;
    --title-bg: linear-gradient(#0997ff, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7);
    --title-text: #ffffff;
    --frame: #0831d9;
    --tip: #ffffe1;
    --tip-border: #aca899;
    --group-text: #0f3a9e;
    --group-line: linear-gradient(to right, #3d6dcc, rgba(61, 109, 204, 0));
    --raised: inset 0 0 0 1px #003c74;
    --sunken: inset 0 0 0 1px #7f9db9;
    --ui-font: Tahoma, "MS UI Gothic", "Meiryo UI", "BIZ UDPGothic", sans-serif;
    --title-font: "Trebuchet MS", Tahoma, "MS UI Gothic", "Meiryo UI", sans-serif;
}

/* ── アイコン（16×16） ── */

.icon,
.title-icon {
    flex: none;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: no-repeat center;
}

.icon-folder {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 3.5h5l1 1h7v9h-13z' fill='%23f6d55c' stroke='%23866a1e'/%3E%3Cpath d='M2 5h12' stroke='%23fff6c4'/%3E%3C/svg%3E");
}

.icon-zip {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 3.5h5l1 1h7v9h-13z' fill='%23f6d55c' stroke='%23866a1e'/%3E%3Cpath d='M7 5h2v8H7z' fill='%23404040'/%3E%3Cpath d='M7 6h1M8 7h1M7 8h1M8 9h1M7 10h1M8 11h1' stroke='%23c0c0c0'/%3E%3C/svg%3E");
}

.icon-asset {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 5.5l3-3h10v8l-3 3h-10z' fill='%23c8964a' stroke='%23603c10'/%3E%3Cpath d='M1.5 5.5h10v8M11.5 5.5l3-3' fill='none' stroke='%23603c10'/%3E%3Cpath d='M5 8h3' stroke='%23fff'/%3E%3C/svg%3E");
}

.icon-save {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1.5 1.5h12l1 1v12h-13z' fill='%23203c8c' stroke='%23000'/%3E%3Cpath d='M4 2h8v5H4z' fill='%23fff'/%3E%3Cpath d='M4 10h8v4H4z' fill='%23c0c0c0'/%3E%3Cpath d='M9 11h2v2H9z' fill='%23203c8c'/%3E%3C/svg%3E");
}

.icon-file {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2.5 0.5h7l4 4v11h-11z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M9.5 0.5v4h4' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M4 7h7M4 9h7M4 11h7M4 13h5' stroke='%23000080'/%3E%3C/svg%3E");
}

/* メモ帳の文書（.txt） */
.icon-text {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2.5 1.5h11v14h-11z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M2 1h12v2H2z' fill='%2300a0c0'/%3E%3Cpath d='M4 5h8M4 7h8M4 9h8M4 11h8M4 13h6' stroke='%23808080'/%3E%3C/svg%3E");
}

/* 状態の表示の「見つかりません」など */
.icon-error {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.5' fill='%23e00000' stroke='%23800000'/%3E%3Cpath d='M5.5 5.5l5 5M10.5 5.5l-5 5' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* マイ コンピュータ（状態欄のゾーン） */
.icon-computer {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2.5 1.5h11v9h-11z' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M4 3h8v6H4z' fill='%23008080'/%3E%3Cpath d='M1.5 11.5h13v3h-13z' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M10 13h3' stroke='%23008000'/%3E%3C/svg%3E");
}

/* ブラウザで開く文書（.md・.htm・.html） */
.icon-page {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2.5 0.5h7l4 4v11h-11z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M9.5 0.5v4h4' fill='%23c0c0c0' stroke='%23000'/%3E%3Ccircle cx='8' cy='10' r='3.5' fill='%231e6fd9'/%3E%3Cpath d='M6 10h4M8 8.5c1 0 1.5.6 1.5 1.5' stroke='%23fff' fill='none'/%3E%3C/svg%3E");
}

.title-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M0.5 2.5h15v11h-15z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M1 3h14v2H1z' fill='%23000080'/%3E%3Cpath d='M3 7h3v3H3zM8 9h3v3H8z' fill='%23c00000'/%3E%3Cpath d='M6 7h2v2H6zM11 6h2v2h-2z' fill='%23008000'/%3E%3C/svg%3E");
}

/* ── 全体 ── */

html {
    min-height: 100%;
    background: var(--desk);
    background-attachment: fixed;
}

html, body {
    margin: 0;
    color: var(--text);
    font-family: var(--ui-font);
    font-size: 12px;
}

body {
    min-height: 100vh;
}

/* ── ウィンドウ（エクスプローラー） ── */

main {
    display: flex;
    flex-direction: column;
    max-width: 920px;
    margin: 16px auto;
    padding: 3px;
    background: var(--face);
    box-shadow: var(--raised);
}

.titlebar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 2px 3px;
    min-height: 18px;
    color: var(--title-text);
    background: var(--title-bg);
    font-family: var(--title-font);
    font-size: 12px;
    font-weight: bold;
    user-select: none;
}

.titlebar h1 {
    flex: 1;
    margin: 0;
    font: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.caption-buttons {
    display: flex;
    gap: 0;
}

.caption-buttons > span {
    position: relative;
    width: 16px;
    height: 14px;
    background: var(--face);
    box-shadow: var(--raised);
}

.caption-close {
    margin-left: 2px;
}

/* 最小化・最大化・閉じるの記号（飾り） */
.caption-min::after {
    content: "";
    position: absolute;
    left: 4px;
    bottom: 3px;
    width: 6px;
    height: 2px;
    background: #000;
}

.caption-max::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 2px;
    width: 7px;
    height: 6px;
    border: 1px solid #000;
    border-top-width: 2px;
}

.caption-close::before,
.caption-close::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 2px;
    height: 8px;
    background: #000;
    transform: rotate(45deg);
}

.caption-close::after {
    transform: rotate(-45deg);
}

/* アドレスバー */
.addressbar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
    padding: 3px 4px;
    border-top: 1px solid var(--shadow);
    border-bottom: 1px solid var(--hilight);
    box-shadow: 0 -1px 0 var(--hilight), 0 1px 0 var(--shadow);
}

.address-label {
    color: var(--text-dim);
}

.address {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 3px 4px;
    background: var(--well);
    box-shadow: var(--sunken);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 本体: 左に作業ウィンドウ、右に一覧 */
.explorer-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    grid-template-areas: "task list";
    min-height: 380px;
}

.listpane {
    grid-area: list;
    padding: 6px 10px 10px;
    background: var(--well);
    box-shadow: var(--sunken);
    overflow: auto;
}

/* 作業ウィンドウが無い（起動中・読み込み中）ときは一覧だけ */
.explorer-body:not(:has(.taskpane)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "list";
    min-height: 120px;
}

.taskpane {
    grid-area: task;
    padding: 0 6px 0 0;
}

/* 作業ウィンドウの項目（95 はグループボックス） */
.task {
    position: relative;
    margin: 10px 0 6px;
    padding: 10px 8px 6px;
    border: 1px solid var(--shadow);
    box-shadow: inset 1px 1px 0 var(--hilight), 1px 1px 0 var(--hilight);
}

.task:first-child {
    margin-top: 8px;
}

.task h2 {
    position: absolute;
    top: -0.7em;
    left: 6px;
    margin: 0;
    padding: 0 3px;
    font-size: 12px;
    font-weight: normal;
    background: var(--face);
}

.task-body > *:first-child {
    margin-top: 0;
}

.settings .task-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
    align-items: center;
}

/* 一覧のまとまり（XP の「グループで表示」） */
.group {
    margin: 4px 0 14px;
}

.group h2 {
    margin: 4px 0 4px;
    padding: 2px 0 3px;
    font-size: 12px;
    font-weight: bold;
    color: var(--group-text);
    border-bottom: 1px solid var(--shadow);
}

h3 {
    margin: 8px 0 2px;
    font-size: 12px;
    font-weight: normal;
    color: var(--text-dim);
}

.status {
    margin: 4px 0 8px;
    padding: 3px 6px;
    color: #000;
    background: var(--tip);
    border: 1px solid var(--tip-border);
}

.note {
    margin: 4px 0;
    color: var(--text-dim);
    font-size: 11px;
}

/* 一覧（エクスプローラーの詳細表示の行） */
.items {
    list-style: none;
    margin: 2px 0;
    padding: 0;
}

.items:empty {
    display: none;
}

.items li {
    display: flex;
    gap: 6px;
    align-items: center;
    min-height: 20px;
    padding: 1px 2px;
}

.items .name {
    padding: 1px 3px;
}

.items .size {
    margin-left: auto;
    color: var(--text-dim);
}

.items .link {
    margin-left: auto;
    color: var(--link);
}

.items .note {
    margin: 0;
}

.items .asset {
    padding: 0 5px;
    color: var(--text-dim);
    border: 1px solid var(--shadow);
    font-size: 11px;
}

/* 一覧の項目（アイコンの次のボタン）は、ファイル名の文字として見せる */
.items li > .icon + button {
    min-height: 0;
    padding: 1px 3px;
    text-align: left;
    color: var(--text);
    background: transparent;
    border: 1px dotted transparent;
    border-radius: 0;
    box-shadow: none;
}

.items li > .icon + button:hover,
.items li > .icon + button:focus-visible {
    color: var(--select-text);
    background: var(--select);
    outline: none;
}

.items li > .icon + button:focus-visible {
    border-color: #ffff80;
}

/* ステータスバー */
.statusbar {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    min-height: 20px;
}

.statusbar-cell {
    display: flex;
    align-items: center;
    padding: 0 4px;
    box-shadow: inset -1px -1px var(--hilight), inset 1px 1px var(--shadow);
}

.statusbar-cell:first-child {
    flex: 1;
}

.statusbar-grip {
    width: 14px;
    box-shadow: none;
    background:
        linear-gradient(135deg, transparent 0 55%, var(--shadow) 55% 62%, transparent 62% 70%, var(--shadow) 70% 77%, transparent 77% 85%, var(--shadow) 85% 92%, transparent 92%);
}

/* ── ボタン・入力欄 ── */

button,
label.button {
    display: inline-block;
    font: inherit;
    font-size: 12px;
    color: var(--text);
    background: var(--face);
    border: 0;
    box-shadow: var(--raised);
    padding: 3px 12px;
    min-height: 23px;
    cursor: pointer;
}

button:active,
label.button:active {
    box-shadow: inset -1px -1px var(--hilight), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
    padding: 4px 11px 2px 13px;
}

button:focus-visible {
    outline: 1px dotted #000;
    outline-offset: -4px;
}

button.delete,
button.export,
label.button.replace {
    min-height: 19px;
    padding: 1px 8px;
}

input[type=url],
input[type=text],
select {
    font: inherit;
    min-width: 0;
    color: var(--text);
    background: var(--well);
    border: 0;
    box-shadow: var(--sunken);
    padding: 3px 4px;
}

input[type=file] {
    max-width: 100%;
    font: inherit;
    font-size: 11px;
    color: var(--text-dim);
}

input[type=file]::file-selector-button {
    font: inherit;
    font-size: 12px;
    color: var(--text);
    background: var(--face);
    border: 0;
    box-shadow: var(--raised);
    padding: 3px 10px;
    margin-right: 6px;
    cursor: pointer;
}

.add-catalog {
    display: flex;
    gap: 6px;
}

.add-catalog input {
    flex: 1;
}

/* ── Windows XP ── */

[data-theme="xp"] main {
    padding: 0;
    border: 3px solid var(--frame);
    border-top: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.35);
}

[data-theme="xp"] .titlebar {
    min-height: 28px;
    margin: 0 -3px;
    padding: 0 5px 0 7px;
    font-size: 13px;
    text-shadow: 1px 1px #0f1089;
    border-radius: 8px 8px 0 0;
}

[data-theme="xp"] .caption-buttons {
    gap: 2px;
}

[data-theme="xp"] .caption-buttons > span {
    width: 21px;
    height: 21px;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 3px;
    background: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 90%, #fff 100%);
    box-shadow: none;
}

[data-theme="xp"] .caption-buttons > .caption-close {
    margin-left: 0;
    background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 90%, #fff 100%);
}

[data-theme="xp"] .caption-min::after {
    left: 4px;
    bottom: 4px;
    width: 7px;
    height: 3px;
    background: #fff;
}

[data-theme="xp"] .caption-max::after {
    left: 3px;
    top: 3px;
    width: 11px;
    height: 9px;
    border-color: #fff;
    border-top-width: 3px;
}

[data-theme="xp"] .caption-close::before,
[data-theme="xp"] .caption-close::after {
    left: 8px;
    top: 3px;
    height: 13px;
    background: #fff;
}

[data-theme="xp"] .addressbar {
    margin: 0;
    padding: 4px 6px;
    border-top: 0;
    border-bottom: 1px solid var(--shadow);
    box-shadow: none;
}

[data-theme="xp"] .address {
    box-shadow: var(--sunken);
}

[data-theme="xp"] .explorer-body {
    grid-template-columns: 230px minmax(0, 1fr);
}

[data-theme="xp"] .explorer-body:not(:has(.taskpane)) {
    grid-template-columns: minmax(0, 1fr);
}

[data-theme="xp"] .listpane {
    box-shadow: none;
}

/* 作業ウィンドウ（青のグラデーションに角の丸い項目） */
[data-theme="xp"] .taskpane {
    padding: 12px;
    background: linear-gradient(#7ba2e7, #6375d6);
}

[data-theme="xp"] .task {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    box-shadow: none;
}

[data-theme="xp"] .task h2 {
    position: static;
    padding: 5px 10px;
    font-weight: bold;
    color: #215dc6;
    background: linear-gradient(to right, #fff, #c6d3f7);
    border-radius: 3px 3px 0 0;
}

[data-theme="xp"] .task-body {
    padding: 8px 10px;
    background: #d6dff7;
    border: 1px solid #fff;
    border-top: 0;
}

[data-theme="xp"] .group h2 {
    border-bottom: 0;
    background: var(--group-line) no-repeat left bottom / 100% 1px;
}

[data-theme="xp"] .statusbar {
    margin: 0;
    padding: 1px 2px;
    border-top: 1px solid var(--shadow);
    background: var(--face);
}

[data-theme="xp"] .statusbar-cell {
    box-shadow: none;
}

[data-theme="xp"] .statusbar-cell + .statusbar-cell {
    border-left: 1px solid var(--shadow);
}

[data-theme="xp"] button,
[data-theme="xp"] label.button,
[data-theme="xp"] input[type=file]::file-selector-button {
    border: 1px solid #003c74;
    border-radius: 3px;
    box-shadow: none;
    background: linear-gradient(#fff, #ecebe6 86%, #d6d0c5);
}

[data-theme="xp"] button:hover,
[data-theme="xp"] label.button:hover,
[data-theme="xp"] input[type=file]::file-selector-button:hover {
    box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
}

[data-theme="xp"] button:active,
[data-theme="xp"] label.button:active {
    padding: 3px 12px;
    background: linear-gradient(#cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1);
    box-shadow: none;
}

[data-theme="xp"] input[type=url],
[data-theme="xp"] input[type=text],
[data-theme="xp"] select {
    border: 1px solid #7f9db9;
    box-shadow: none;
    padding: 2px 4px;
}

[data-theme="xp"] .items li > .icon + button {
    border-radius: 0;
}

/* ── プレイ中 ── */

.play {
    width: 720px;
    max-width: 100%;
    margin: 0 auto;
}

.play:fullscreen {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #000;
}

.play:fullscreen .screen-wrap,
.play:fullscreen .screen-bar {
    width: min(100vw, calc((100vh - 28px) * 720 / 496));
}

/* 全画面で仮想パッドを出すときは、その分だけ画面を小さくする */
.play:fullscreen:has(.virtual-pad:not([hidden])) .screen-wrap,
.play:fullscreen:has(.virtual-pad:not([hidden])) .screen-bar {
    width: min(100vw, calc((100vh - 170px) * 720 / 496));
}

.screen-wrap {
    position: relative;
    width: 720px;
    max-width: 100%;
    margin: 0 auto;
}

#screen {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 496;
    outline: none;
    cursor: default;
    /* タッチでのスクロール・拡大・長押しのメニューを止め、タップ・長押しをゲームの操作にする（srcweb.js） */
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/*
  拡大して表示するときは補間せず、ドットのまま拡大する（srcweb.js の updateScaling。7474/SRC#1148）。
  縮小するときは補間する（補間しないと文字の線が抜ける）
  https://developer.mozilla.org/ja/docs/Web/CSS/image-rendering
*/
#screen.pixelated {
    image-rendering: pixelated;
}

/*
  タッチ向けの選択画面（srcweb.js の buildTouchUi）。ゲームのリスト・メニュー・ダイアログを、画面の下側に大きなボタンで出す。
  タッチ向けの画面（data-input="touch"）のときだけ出る。ゲームの画面の上側（マップ）は見えるようにし、画面の下に寄せる
*/
.touch-ui {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100%, 720px);
    z-index: 25;
    max-height: 60vh;
    max-height: 60dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3px;
    box-sizing: border-box;
    background: var(--face);
    box-shadow: var(--raised), 0 -2px 8px rgba(0, 0, 0, 0.35);
}

.touch-ui[hidden] {
    display: none;
}

[data-theme="xp"] .touch-ui {
    padding: 0 0 6px;
    border: 3px solid var(--frame);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
}

.touch-ui-title {
    position: sticky;
    top: 0;
    z-index: 1;
}

[data-theme="xp"] .touch-ui-title {
    min-height: 26px;
    padding: 0 8px;
    border-radius: 6px 6px 0 0;
}

.touch-ui-text {
    margin: 6px 8px;
    font-size: 15px;
    line-height: 1.5;
    white-space: pre-wrap;
}

.touch-ui-items {
    display: flex;
    flex-direction: column;
    margin: 4px;
    background: var(--well);
    box-shadow: var(--sunken);
}

.touch-ui-items .touch-ui-item {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 6px 12px;
    text-align: left;
    font-size: 16px;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--light);
    border-radius: 0;
    box-shadow: none;
}

.touch-ui-items .touch-ui-item:active {
    color: var(--select-text);
    background: var(--select);
    padding: 6px 12px;
    box-shadow: none;
}

/* 見出しの行があるリスト（武器の一覧など）: 桁をそろえ、横にスクロールする */
.touch-ui-items.columns {
    overflow-x: auto;
}

.touch-ui-items.columns .touch-ui-header,
.touch-ui-items.columns .touch-ui-item {
    width: max-content;
    min-width: 100%;
    box-sizing: border-box;
    font-family: "BIZ UDGothic", "MS Gothic", "Osaka-Mono", monospace;
    font-size: 14px;
    white-space: pre;
    overflow: visible;
}

.touch-ui-items.columns .touch-ui-header {
    position: sticky;
    top: 0;
    padding: 4px 12px;
    color: var(--text-dim);
    background: var(--face);
    border-bottom: 1px solid var(--shadow);
}

.touch-ui-items .touch-ui-item:disabled {
    color: var(--shadow);
}

.touch-ui-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin: 8px;
}

.touch-ui-buttons .touch-ui-item,
.touch-ui-cancel {
    min-width: 96px;
    min-height: 44px;
    font-size: 16px;
}

.touch-ui-cancel {
    display: block;
    margin: 6px 4px 4px auto;
}

/* 長押しで右クリックになるまでの輪 */
.touch-ring {
    position: fixed;
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.7);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.4);
    z-index: 40;
}

.touch-ring.active {
    opacity: 1;
    transform: scale(1);
    transition: transform var(--hold, 500ms) linear, opacity 120ms;
}

/* 画面の下のバー（タスクバー風）。右端にシステムメニュー */
.screen-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    width: 720px;
    max-width: 100%;
    min-height: 28px;
    margin: 0 auto;
    background: var(--face);
    box-shadow: inset 0 1px var(--light), inset 0 2px var(--hilight);
}

[data-theme="xp"] .screen-bar {
    background: linear-gradient(#3168d5, #4993e6 4%, #2157d7 8%, #2663e0 92%, #1941a5);
    box-shadow: none;
}

/* 仮想パッド（タッチの端末向け）。システムメニューの下の行に、左に十字キー、右に A・B、中央にシナリオ向けのキーを並べる */
.virtual-pad {
    --k: min(46px, 10vw);
    order: 2;
    flex-basis: 100%;
    display: grid;
    grid-template-columns: repeat(3, var(--k)) 1fr repeat(3, calc(var(--k) * 0.9)) 1fr repeat(2, calc(var(--k) * 1.4));
    grid-template-rows: repeat(3, var(--k));
    grid-template-areas:
        ".    up   .     . .    .     .     . .  a"
        "left .    right . z    x     space . b  a"
        ".    down .     . ctrl shift .     . b  .";
    gap: 4px;
    padding: 4px 4px 8px;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.virtual-pad[hidden] {
    display: none;
}

.vkey {
    min-height: 0;
    padding: 0;
    font-size: 13px;
    -webkit-touch-callout: none;
}

.vkey.down {
    box-shadow: inset -1px -1px var(--hilight), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
}

[data-theme="xp"] .vkey.down {
    background: linear-gradient(#cdcac3, #e3e3db 8%, #e5e5de 94%, #f2f2f1);
    box-shadow: none;
}

.vkey-up { grid-area: up; }
.vkey-left { grid-area: left; }
.vkey-down { grid-area: down; }
.vkey-right { grid-area: right; }

/* A・B は丸いボタンにして、ゲームパッドと同じく右上に A、左下に B を置く */
.vkey-a,
.vkey-b {
    width: calc(var(--k) * 1.4);
    height: calc(var(--k) * 1.4);
    place-self: center;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
}

/* XP のボタンの角丸より優先する */
[data-theme="xp"] .vkey-a,
[data-theme="xp"] .vkey-b {
    border-radius: 50%;
}

[data-theme="xp"] .vkey-z,
[data-theme="xp"] .vkey-x,
[data-theme="xp"] .vkey-space,
[data-theme="xp"] .vkey-ctrl,
[data-theme="xp"] .vkey-shift {
    border-radius: 999px;
}

.vkey-a { grid-area: a; }
.vkey-b { grid-area: b; }

/* シナリオ向けのキーは小さく、中央の下にまとめる */
.vkey-z,
.vkey-x,
.vkey-space,
.vkey-ctrl,
.vkey-shift {
    height: calc(var(--k) * 0.7);
    align-self: center;
    border-radius: 999px;
    font-size: 11px;
}

[data-theme="95"] .vkey-z,
[data-theme="95"] .vkey-x,
[data-theme="95"] .vkey-space,
[data-theme="95"] .vkey-ctrl,
[data-theme="95"] .vkey-shift {
    border-radius: 0;
}

.vkey-z { grid-area: z; }
.vkey-x { grid-area: x; }
.vkey-space { grid-area: space; }
.vkey-ctrl { grid-area: ctrl; }
.vkey-shift { grid-area: shift; }

.system-menu {
    position: relative;
    /* タッチ向けの選択画面（.touch-ui）が重なっても、システムメニューを押せるようにする */
    z-index: 26;
}

.system-button {
    width: 30px;
    height: 22px;
    min-height: 0;
    margin: 3px 3px;
    padding: 0;
    font-size: 14px;
    line-height: 1;
}

[data-theme="xp"] .system-button {
    color: #fff;
    background: linear-gradient(#1c9ef3, #128ee4 50%, #0b7bd7);
    border-color: #0c3ea8;
}

.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 19;
}

/* ポップアップメニュー */
.popup-menu {
    position: absolute;
    right: 2px;
    bottom: 26px;
    z-index: 20;
    min-width: 200px;
    padding: 3px;
    background: var(--face);
    box-shadow: var(--raised);
}

[data-theme="xp"] .popup-menu {
    background: #fff;
    border: 1px solid var(--shadow);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.35);
}

.popup-menu button {
    display: block;
    width: 100%;
    min-height: 0;
    padding: 3px 20px;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.popup-menu button:hover,
.popup-menu button:focus-visible {
    color: var(--select-text);
    background: var(--select);
    box-shadow: none;
    outline: none;
}

.popup-menu hr {
    margin: 3px 2px;
    border: 0;
    border-top: 1px solid var(--shadow);
    border-bottom: 1px solid var(--hilight);
}

/* ── ダイアログ（終了・確認・文字入力・ファイル選択） ── */

.ended,
.modal {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.ended {
    position: absolute;
    inset: 0;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 30;
}

.dialog,
.modal-box {
    min-width: 300px;
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    overflow: auto;
    padding: 3px;
    background: var(--face);
    box-shadow: var(--raised);
}

[data-theme="xp"] .dialog,
[data-theme="xp"] .modal-box {
    padding: 0;
    border: 3px solid var(--frame);
    border-top: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
}

[data-theme="xp"] .dialog .titlebar,
[data-theme="xp"] .modal-title {
    min-height: 26px;
    margin: 0 -3px;
    padding: 0 8px;
    font-size: 13px;
    text-shadow: 1px 1px #0f1089;
    border-radius: 8px 8px 0 0;
}

.dialog-body {
    padding: 12px 16px;
}

.dialog-body p {
    margin: 4px 0 8px;
    line-height: 1.6;
}

.modal-box {
    padding: 3px 12px 12px;
}

[data-theme="xp"] .modal-box {
    padding: 0 12px 12px;
}

.modal-title {
    display: flex;
    align-items: center;
    margin: 0 -9px 10px;
    padding: 2px 4px;
    min-height: 18px;
    font-family: var(--title-font);
    font-weight: bold;
    color: var(--title-text);
    background: var(--title-bg);
}

[data-theme="xp"] .modal-title {
    margin: 0 -15px 10px;
}

.modal-box input[type=text] {
    width: 100%;
    box-sizing: border-box;
}

.dialog-buttons,
.modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

.dialog-buttons button,
.modal-buttons button {
    min-width: 75px;
}

.modal-list {
    list-style: none;
    margin: 0;
    padding: 2px;
    background: var(--well);
    box-shadow: var(--sunken);
}

[data-theme="xp"] .modal-list {
    border: 1px solid #7f9db9;
    box-shadow: none;
}

.modal-list li {
    margin: 0;
}

.modal-list li button {
    width: 100%;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.modal-list li button:hover {
    color: var(--select-text);
    background: var(--select);
    box-shadow: none;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 16px;
    color: #000;
    background: var(--tip);
    border-top: 1px solid var(--tip-border);
}

/*
  タッチ向けの画面（html の data-input="touch"）。index.html が主なポインタで決め、利用者が「設定」の「操作」で切り替えられる。
  指で押しやすいよう、押せるものは高さ 44px 前後にし、文字を大きくする。入力欄の文字は 16px にする（iOS が入力時に拡大しないように）。
*/
[data-input="touch"] body {
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

[data-input="touch"] button,
[data-input="touch"] select,
[data-input="touch"] input,
[data-input="touch"] a {
    touch-action: manipulation;
}

[data-input="touch"] button {
    min-height: 40px;
    padding: 6px 16px;
    font-size: 15px;
}

[data-input="touch"] button:active {
    padding: 7px 15px 5px 17px;
}

[data-input="touch"][data-theme="xp"] button:active {
    padding: 6px 16px;
}

[data-input="touch"] input[type=url],
[data-input="touch"] input[type=text],
[data-input="touch"] select {
    min-height: 40px;
    box-sizing: border-box;
    font-size: 16px;
}

[data-input="touch"] input[type=file] {
    font-size: 13px;
}

[data-input="touch"] input[type=file]::file-selector-button {
    min-height: 40px;
    padding: 6px 14px;
    font-size: 15px;
}

/* 飾りのボタン・アドレスバーは省き、画面を一覧に使う */
[data-input="touch"] .caption-buttons,
[data-input="touch"] .addressbar {
    display: none;
}

[data-input="touch"] .titlebar {
    min-height: 32px;
    font-size: 15px;
}

/* 一覧の行は、行全体を押せる大きさにする */
[data-input="touch"] .items li {
    flex-wrap: wrap;
    min-height: 48px;
    padding: 2px 0;
    border-bottom: 1px solid var(--light);
}

[data-input="touch"] .items li > .icon + button {
    flex: 1;
    min-height: 44px;
    padding: 4px 6px;
    font-size: 16px;
}

[data-input="touch"] .items .link {
    padding: 10px 6px;
}

[data-input="touch"] .items .note {
    display: none;
}

[data-input="touch"] button.delete,
[data-input="touch"] button.export {
    min-height: 36px;
    padding: 4px 12px;
}

[data-input="touch"] .group h2,
[data-input="touch"] .task h2 {
    font-size: 14px;
}

[data-input="touch"] .note {
    font-size: 13px;
}

[data-input="touch"] .settings .task-body {
    gap: 8px 10px;
}

[data-input="touch"] .statusbar {
    min-height: 26px;
}

/* プレイ中の下のバー・システムメニュー */
[data-input="touch"] .screen-bar {
    min-height: 48px;
}

[data-input="touch"] .system-button {
    width: 52px;
    height: 40px;
    margin: 4px;
    padding: 0;
    font-size: 20px;
}

[data-input="touch"] .popup-menu {
    bottom: 48px;
    min-width: 240px;
}

[data-input="touch"] .popup-menu button {
    min-height: 48px;
    padding: 10px 20px;
    font-size: 16px;
}

[data-input="touch"] .vkey {
    min-height: 0;
    padding: 0;
    font-size: 15px;
}

[data-input="touch"] .vkey-space,
[data-input="touch"] .vkey-ctrl,
[data-input="touch"] .vkey-shift {
    font-size: 12px;
}

/* ダイアログ（終了・確認・文字入力・ファイル選択） */
[data-input="touch"] .dialog-body p {
    font-size: 15px;
}

[data-input="touch"] .dialog-buttons button,
[data-input="touch"] .modal-buttons button {
    min-width: 96px;
    min-height: 44px;
}

[data-input="touch"] .modal-list li button {
    min-height: 44px;
    font-size: 16px;
}

/* 狭い画面では、作業ウィンドウを一覧の下に置く */
@media (max-width: 760px) {
    main {
        margin: 0;
        min-height: 100vh;
        box-sizing: border-box;
    }

    [data-theme="xp"] main {
        border-radius: 0;
    }

    [data-theme="xp"] .titlebar {
        border-radius: 0;
    }

    .explorer-body,
    [data-theme="xp"] .explorer-body {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "list" "task";
        flex: 1;
    }

    .listpane {
        min-height: 200px;
    }

    .taskpane {
        padding: 0;
    }

    .items .note {
        display: none;
    }
}

/* ── 読み込み中 ── */

/* 読み込みの間は一覧を薄くし、読み込み中のダイアログを重ねて、操作できないことを示す */
.explorer-body[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

.modal.loading {
    cursor: progress;
}

.modal.loading .dialog {
    cursor: default;
    min-width: 320px;
}

/* 終わりの分からない進み具合（往年のファイルのコピーのように左から右へ流れる） */
.progress {
    position: relative;
    height: 16px;
    margin: 8px 0 12px;
    overflow: hidden;
    background: var(--well);
    box-shadow: var(--sunken);
}

.progress span {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: 30%;
    background: repeating-linear-gradient(to right, var(--select) 0 8px, transparent 8px 10px);
    animation: progress-slide 1.6s linear infinite;
}

[data-theme="xp"] .progress {
    border: 1px solid #686868;
    border-radius: 3px;
    box-shadow: none;
}

[data-theme="xp"] .progress span {
    background: repeating-linear-gradient(to right, #2fd22c 0 8px, transparent 8px 10px);
}

@keyframes progress-slide {
    from { left: -30%; }
    to { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .progress span {
        animation: none;
        left: 0;
        width: 100%;
        opacity: 0.5;
    }
}

/* 追加したアーカイブの「置き換え」。ファイルの選択欄は隠し、ボタン（label）で開く */
label.button input.hidden-file {
    display: none;
}

/* ── 同梱の文書 ── */

/* 一覧の README を目立たせる */
.items li.readme > .icon + button {
    font-weight: bold;
}

.items li .badge {
    flex: none;
    padding: 0 4px;
    color: var(--text);
    background: var(--tip);
    border: 1px solid var(--tip-border);
    font-size: 11px;
}

/* 年齢の区分（R15・R18）。どちらのテーマでも目立つ色にする */
.items li .badge.rating {
    color: #ffffff;
    background: #c00000;
    border-color: #800000;
    font-weight: bold;
}

.modal .dialog #documents {
    margin: 0 0 8px;
    max-height: 50vh;
    overflow: auto;
    background: var(--well);
    box-shadow: var(--sunken);
}

.doc-modal {
    z-index: 40;
}

.doc-window {
    display: flex;
    flex-direction: column;
    width: min(760px, calc(100% - 16px));
    height: min(640px, calc(100% - 16px));
    padding: 3px;
    background: var(--face);
    box-shadow: var(--raised);
}

[data-theme="xp"] .doc-window {
    padding: 0 3px 3px;
    border-radius: 8px 8px 0 0;
    background: #0831d9;
}

.doc-window .titlebar {
    flex: none;
}

.doc-title {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.doc-close {
    flex: none;
    min-height: 0;
    width: 16px;
    height: 14px;
    padding: 0;
    font-size: 12px;
    font-weight: bold;
    line-height: 12px;
}

[data-theme="xp"] .doc-close {
    width: 21px;
    height: 21px;
    color: #fff;
    border: 1px solid #fff;
    background: linear-gradient(#e08a6a, #c8452c);
}

.doc-view {
    flex: 1;
    min-height: 0;
    margin: 0;
    overflow: auto;
    color: #000;
    background: #fff;
    box-shadow: var(--sunken);
}

/* メモ帳: 等幅のゴシック。既定では右端で折り返す */
.doc-text {
    padding: 2px 4px;
    font-family: "MS Gothic", "ＭＳ ゴシック", "Osaka-Mono", "Noto Sans Mono CJK JP", monospace;
    font-size: 13px;
    line-height: 1.3;
    white-space: pre;
    tab-size: 8;
}

.doc-text.wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/*
  Markdown: 日本語の Internet Explorer 4 の既定の表示を模す（ScenarioDocuments.PageStyle と同じ）。
  Web ページのフォントは ＭＳ Ｐゴシック、文字のサイズは「中」（12pt = 16px）、余白は上下 15px・左右 10px、リンクは #0000ff・訪問済みは #800080。
  見出しは既定の大きさ（h1 が 2em）だと大き過ぎるため、本文から少しずつ大きくする程度にとどめる。
*/
.doc-page {
    padding: 15px 10px;
    font-family: "MS PGothic", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", sans-serif;
    font-size: 16px;
    line-height: 1.2;
}

.doc-page h1,
.doc-page h2,
.doc-page h3,
.doc-page h4,
.doc-page h5,
.doc-page h6 {
    margin: 0.8em 0 0.5em;
    font-weight: bold;
    line-height: 1.2;
}

.doc-page h1 { font-size: 1.4em; }
.doc-page h2 { font-size: 1.25em; }
.doc-page h3 { font-size: 1.12em; }
.doc-page h4,
.doc-page h5,
.doc-page h6 { font-size: 1em; }

.doc-page > :first-child {
    margin-top: 0;
}

.doc-page p,
.doc-page ul,
.doc-page ol,
.doc-page pre,
.doc-page table,
.doc-page blockquote {
    margin: 1em 0;
}

.doc-page ul,
.doc-page ol {
    padding-left: 40px;
}

.doc-page blockquote {
    margin-left: 40px;
    margin-right: 40px;
}

.doc-page a {
    color: #0000ff;
    text-decoration: underline;
}

.doc-page a:visited {
    color: #800080;
}

.doc-page code,
.doc-page pre {
    font-family: "MS Gothic", "ＭＳ ゴシック", "Osaka-Mono", "Noto Sans Mono CJK JP", monospace;
    font-size: 13px;
}

.doc-page pre {
    white-space: pre-wrap;
}

.doc-page hr {
    border: 0;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

/* 表は境界線の付いた素朴なもの（border="1"） */
.doc-page table {
    border-collapse: separate;
    border-spacing: 2px;
    border: 1px solid #808080;
}

.doc-page th,
.doc-page td {
    padding: 1px 4px;
    border: 1px solid #c0c0c0;
}

.doc-page img {
    max-width: 100%;
}

/* .htm・.html は iframe に入れる（既定のスタイルは ScenarioDocuments.PageStyle） */
.doc-frame {
    display: block;
    width: 100%;
    border: 0;
    padding: 2px;
    box-sizing: border-box;
}

/* ── 文書のウィンドウ: メニューバー（メモ帳・Internet Explorer 4） ── */

.doc-menubar {
    position: relative;
    z-index: 2;
    flex: none;
    display: flex;
    padding: 1px 0;
    background: var(--face);
}

.doc-menu {
    position: relative;
}

.doc-menubar .doc-menu > button {
    min-height: 0;
    padding: 2px 7px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
    color: var(--text);
    font-size: 12px;
}

.doc-menubar .doc-menu > button:hover,
.doc-menubar .doc-menu > button.open {
    box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hilight);
}

[data-theme="xp"] .doc-menubar .doc-menu > button:hover,
[data-theme="xp"] .doc-menubar .doc-menu > button.open {
    color: var(--select-text);
    background: var(--select);
    box-shadow: none;
}

.doc-menu-popup {
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    bottom: auto;
    min-width: 160px;
    max-height: 60vh;
    overflow: auto;
}

.doc-menu-popup button {
    position: relative;
    white-space: nowrap;
}

.doc-menu-popup button:disabled {
    color: var(--shadow);
    text-shadow: 1px 1px var(--hilight);
    background: transparent;
    cursor: default;
}

.doc-menu-popup button.checked::before {
    content: "✓";
    position: absolute;
    margin-left: -14px;
}

.doc-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
}

/* ── Internet Explorer 4: ツールバー（Coolbar）・アドレスバー・スロバー・状態欄 ── */

.ie-rebar {
    flex: none;
    display: flex;
    border-top: 1px solid var(--shadow);
    box-shadow: inset 0 1px var(--hilight);
    background: var(--face);
}

.ie-bands {
    flex: 1;
    min-width: 0;
}

/* バンド: 左端につまみ（2 本の縦線）を付け、上下に溝を入れる */
.ie-band {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 2px 4px 2px 12px;
    border-bottom: 1px solid var(--shadow);
    box-shadow: 0 1px var(--hilight);
}

.ie-band::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    bottom: 3px;
    width: 3px;
    border-left: 1px solid var(--hilight);
    border-right: 1px solid var(--shadow);
}

/* 標準のボタン: 平らで、指したときだけ浮き上がる。絵は灰色で、指したときに色が付く */
.ie-button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 50px;
    min-height: 0;
    padding: 3px 4px 2px;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    background: none;
    color: var(--text);
    font-size: 12px;
}

.ie-button:hover:not(:disabled) {
    border-color: var(--hilight) var(--shadow) var(--shadow) var(--hilight);
    background: none;
    box-shadow: none;
}

.ie-button:active:not(:disabled) {
    border-color: var(--shadow) var(--hilight) var(--hilight) var(--shadow);
    padding: 4px 3px 1px 5px;
    box-shadow: none;
}

.ie-button:disabled {
    color: var(--shadow);
    text-shadow: 1px 1px var(--hilight);
    cursor: default;
}

[data-theme="xp"] .ie-button,
[data-theme="xp"] .ie-button:hover:not(:disabled),
[data-theme="xp"] .ie-button:active:not(:disabled) {
    background: none;
}

[data-theme="xp"] .ie-button:hover:not(:disabled) {
    border-radius: 3px;
    border-color: #ceceC3;
    background: linear-gradient(#fff, #e9e8e2);
}

.ie-icon {
    width: 20px;
    height: 20px;
    background: no-repeat center / 20px 20px;
    filter: grayscale(1) contrast(0.9);
}

.ie-button:hover:not(:disabled) .ie-icon {
    filter: none;
}

.ie-button:disabled .ie-icon {
    filter: grayscale(1) opacity(0.4);
}

.ie-separator {
    align-self: stretch;
    width: 0;
    margin: 2px 3px;
    border-left: 1px solid var(--shadow);
    border-right: 1px solid var(--hilight);
}

.ie-back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 10l8-7v4h8v6h-8v4z' fill='%2300a000' stroke='%23005000'/%3E%3C/svg%3E");
}

.ie-forward {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18 10l-8-7v4H2v6h8v4z' fill='%2300a000' stroke='%23005000'/%3E%3C/svg%3E");
}

.ie-stop {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3.5h12l2 2v11H5l-2-2z' fill='%23fff' stroke='%23000'/%3E%3Ccircle cx='10' cy='10' r='5' fill='%23e00000' stroke='%23800000'/%3E%3Cpath d='M7.5 7.5l5 5M12.5 7.5l-5 5' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E");
}

.ie-refresh {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 2.5h11l3 3v12H3z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M6.5 10a3.5 3.5 0 0 1 6-2.5' fill='none' stroke='%2300a000' stroke-width='2'/%3E%3Cpath d='M13.5 5v4h-4z' fill='%2300a000'/%3E%3Cpath d='M13.5 11a3.5 3.5 0 0 1-6 2.5' fill='none' stroke='%2300a000' stroke-width='2'/%3E%3Cpath d='M6.5 16v-4h4z' fill='%2300a000'/%3E%3C/svg%3E");
}

.ie-home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 10l8-7 8 7' fill='%23c03020' stroke='%23601000' stroke-width='1.5'/%3E%3Cpath d='M4.5 9.5h11v8h-11z' fill='%23f0d890' stroke='%23604010'/%3E%3Cpath d='M8.5 12.5h3v5h-3z' fill='%23804010'/%3E%3C/svg%3E");
}

.ie-favorites {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M1.5 5.5h6l1.5 1.5h9.5v10h-17z' fill='%23f6d55c' stroke='%23866a1e'/%3E%3Cpath d='M12 8.5l1.2 2.6 2.8.3-2.1 1.9.6 2.8-2.5-1.4-2.5 1.4.6-2.8-2.1-1.9 2.8-.3z' fill='%23ffe000' stroke='%23a07000'/%3E%3C/svg%3E");
}

/* アドレスバー: 「アドレス(D)」と、ページの絵を付けたコンボボックス */
.ie-address {
    gap: 4px;
}

.ie-address label {
    flex: none;
    color: var(--text);
    font-size: 12px;
}

.ie-combo {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 3px;
    background: var(--well);
    box-shadow: var(--sunken);
}

.ie-combo::after {
    content: "▼";
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--text);
    background: var(--face);
    box-shadow: var(--raised);
    font-size: 8px;
    line-height: 16px;
    text-align: center;
}

.ie-combo input {
    flex: 1;
    min-width: 0;
    padding: 1px 2px;
    border: 0;
    box-shadow: none;
    background: none;
    font-size: 12px;
}

[data-theme="xp"] .ie-combo {
    border: 1px solid #7f9db9;
    box-shadow: none;
}

[data-theme="xp"] .ie-combo input {
    border: 0;
}

/* スロバー: 右上の黒い枠の中の地球（読み込み中に回る。文書はすぐ出るので止まっている） */
.ie-throbber {
    flex: none;
    width: 38px;
    margin: 2px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='%231e6fd9' stroke='%23a0c8ff'/%3E%3Cpath d='M5 9c3-2 4 1 7 0s3-3 5-2M4.5 14c3 1 5-1 7 1s4 1 7-1' fill='none' stroke='%2350c040' stroke-width='2'/%3E%3Cpath d='M3 12h18M12 3c-4 4-4 14 0 18M12 3c4 4 4 14 0 18' fill='none' stroke='%23a0c8ff' stroke-width='.6'/%3E%3C/svg%3E") no-repeat center / 26px 26px,
        #000;
    box-shadow: var(--sunken);
}

/* 状態欄: 左に状態の文字、中に進み具合、右にゾーン（マイ コンピュータ） */
.ie-statusbar {
    flex: none;
    display: flex;
    gap: 2px;
    padding: 2px 0 0;
    background: var(--face);
    font-size: 12px;
}

.ie-statusbar > span {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding: 1px 4px;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--hilight);
}

.ie-status-main {
    flex: 1;
    color: var(--text);
}

.ie-status-pane {
    flex: none;
    width: 90px;
}

.ie-status-zone {
    flex: none;
    width: 130px;
}

@media (max-width: 560px) {
    .ie-button {
        min-width: 40px;
    }

    .ie-status-pane {
        display: none;
    }
}

/* ブラウザで辿った .txt（往年のブラウザはテキストをそのまま等幅で出す） */
.doc-browser .doc-text {
    padding: 15px 10px;
}

/* ── XP のテーマ: Internet Explorer 6（Windows XP） ── */

/* 「移動」ボタンは IE6 から。95 のテーマ（IE4）では出さない */
.ie-go {
    display: none;
}

[data-theme="xp"] .ie-rebar {
    border-top: 0;
    box-shadow: none;
    background: var(--face);
}

[data-theme="xp"] .ie-band {
    border-bottom: 1px solid #d8d2bd;
    box-shadow: 0 1px #fff;
}

/* つまみは点の縦の列 */
[data-theme="xp"] .ie-band::before {
    left: 4px;
    width: 2px;
    border: 0;
    background: radial-gradient(circle at 1px 1px, #a8a593 0.9px, transparent 1px) 0 0 / 2px 4px repeat-y;
}

/* ボタンは絵の右に文字（「選択したテキストを表示」）。文字を出すのは戻る・お気に入りだけ */
[data-theme="xp"] .ie-button {
    flex-direction: row;
    gap: 4px;
    min-width: 0;
    padding: 2px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
}

[data-theme="xp"] .ie-button:not(.ie-labeled) .ie-label {
    display: none;
}

[data-theme="xp"] .ie-button:active:not(:disabled) {
    padding: 3px 4px 1px 6px;
    border-color: #9d9d92;
    background: linear-gradient(#e5e4dc, #f2f1ea);
}

[data-theme="xp"] .ie-button:disabled {
    color: #aca899;
    text-shadow: none;
}

[data-theme="xp"] .ie-icon {
    width: 24px;
    height: 24px;
    background-size: 24px 24px;
    filter: none;
}

[data-theme="xp"] .ie-button:disabled .ie-icon {
    filter: grayscale(1) opacity(0.45);
}

[data-theme="xp"] .ie-separator {
    margin: 3px 2px;
    border-left: 1px solid #c5c2b2;
    border-right: 1px solid #fff;
}

/* IE6 の絵: 緑の丸い矢印・赤い中止・緑の更新・家・星・緑の「移動」 */
[data-theme="xp"] .ie-back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23b8f08a'/%3E%3Cstop offset='.6' stop-color='%2338a820'/%3E%3Cstop offset='1' stop-color='%23157010'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10.5' fill='url(%23g)' stroke='%23105a10'/%3E%3Cpath d='M5.5 12l6-5.5v3.5h6.5v4h-6.5v3.5z' fill='%23fff' stroke='%23206020' stroke-width='.6'/%3E%3C/svg%3E");
}

[data-theme="xp"] .ie-forward {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.35' cy='.3' r='.8'%3E%3Cstop offset='0' stop-color='%23b8f08a'/%3E%3Cstop offset='.6' stop-color='%2338a820'/%3E%3Cstop offset='1' stop-color='%23157010'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10.5' fill='url(%23g)' stroke='%23105a10'/%3E%3Cpath d='M18.5 12l-6-5.5v3.5H6v4h6.5v3.5z' fill='%23fff' stroke='%23206020' stroke-width='.6'/%3E%3C/svg%3E");
}

[data-theme="xp"] .ie-stop {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 2.5h11l4 4v15h-15z' fill='%23fff' stroke='%23707070'/%3E%3Crect x='7' y='8' width='11' height='11' rx='2.5' fill='%23e03a1e' stroke='%23901808'/%3E%3Cpath d='M9.8 10.8l5.4 5.4M15.2 10.8l-5.4 5.4' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");
}

[data-theme="xp"] .ie-refresh {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 2.5h11l4 4v15h-15z' fill='%23fff' stroke='%23707070'/%3E%3Cpath d='M8 13.5a4.5 4.5 0 0 1 7.8-3' fill='none' stroke='%2330a020' stroke-width='2.4'/%3E%3Cpath d='M17.5 7.5v5h-5z' fill='%2330a020'/%3E%3Cpath d='M16.5 14.5a4.5 4.5 0 0 1-7.8 3' fill='none' stroke='%2330a020' stroke-width='2.4'/%3E%3Cpath d='M7 20.5v-5h5z' fill='%2330a020'/%3E%3C/svg%3E");
}

[data-theme="xp"] .ie-home {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 11.5h13v10h-13z' fill='%23f6e8c0' stroke='%23806030'/%3E%3Cpath d='M2 12.5l10-9 10 9' fill='%23e05030' stroke='%23802010' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 15h4v6.5h-4z' fill='%233070c0' stroke='%23204080'/%3E%3C/svg%3E");
}

[data-theme="xp"] .ie-favorites {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6a0'/%3E%3Cstop offset='1' stop-color='%23f0b000'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2l3 6.3 6.8.8-5 4.7 1.3 6.8L12 17.3l-6.1 3.3 1.3-6.8-5-4.7 6.8-.8z' fill='url(%23g)' stroke='%23b07800' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-theme="xp"] .ie-go {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-height: 0;
    padding: 1px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: none;
    box-shadow: none;
}

[data-theme="xp"] .ie-go:hover {
    border-color: #cecec3;
    background: linear-gradient(#fff, #e9e8e2);
    box-shadow: none;
}

[data-theme="xp"] .ie-go .ie-icon {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
}

.ie-go-arrow {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='.5' y='.5' width='17' height='17' rx='3' fill='%2338a820' stroke='%23157010'/%3E%3Cpath d='M4 7.5h5v-3l5 4.5-5 4.5v-3H4z' fill='%23fff'/%3E%3C/svg%3E");
}

/* スロバー: 白地に地球。メニューバーとツールバーの右に置く */
[data-theme="xp"] .ie-throbber {
    width: 40px;
    margin: 0;
    background-color: #fff;
    border-left: 1px solid #d8d2bd;
    box-shadow: none;
}

/* 状態欄: 欄の間を細い線で区切る */
[data-theme="xp"] .ie-statusbar {
    gap: 0;
    padding: 2px 2px 1px;
    border-top: 1px solid #d8d2bd;
}

[data-theme="xp"] .ie-statusbar > span {
    box-shadow: none;
    border-left: 1px solid #d8d2bd;
}

[data-theme="xp"] .ie-statusbar > span:first-child {
    border-left: 0;
}

[data-theme="xp"] .ie-combo::after {
    color: #4d6185;
    background: linear-gradient(#c3d3fd, #b1c8fb 50%, #9fb7ee);
    border: 1px solid #b6c9f7;
    border-radius: 2px;
    box-shadow: none;
}