* { box-sizing: border-box; }
.CodeMirror.editor-panning, .CodeMirror.editor-panning * { cursor: grabbing !important; user-select: none; }
.match-player-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; vertical-align: middle; background: white; border: 2px solid white; border-radius: 4px; margin: 4px 6px 4px 2px; box-shadow: 0 0 0 1px rgb(55 180 225 / .75), 0 0 9px 3px rgb(55 180 225 / .6), 0 0 20px 5px rgb(110 210 245 / .3); }
#right-match-icon { box-shadow: 0 0 0 1px rgb(235 100 155 / .75), 0 0 9px 3px rgb(235 100 155 / .6), 0 0 20px 5px rgb(245 145 185 / .3); }
.match-player-icon img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#user-settings { position: fixed; margin: 0; width: calc(36em + 57.6px); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 10px 24px; font-size: 14px; background: rgb(255 255 255 / .95); color: #333; border-color: #aaa; box-shadow: 0 6px 24px rgb(0 0 0 / .35); }
#user-settings .hint-header strong { flex: 1; }
#user-settings .settings-close { display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #555; border: 0; border-radius: 0; width: 28px; height: 28px; min-height: 28px; padding: 0; flex-shrink: 0; }
#user-settings .settings-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
#user-settings form { display: flex; flex-direction: column; gap: 12px; }
#user-settings [hidden] { display: none; }
#user-settings .settings-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; cursor: ew-resize; touch-action: none; }
#user-settings .settings-resize::after { content: ''; position: absolute; right: 3px; top: calc(50% - 18px); height: 36px; border-right: 3px double #89958e; }
#user-settings .settings-resize:focus-visible { outline: 2px solid #359b7c; outline-offset: -2px; }
#user-icon-trigger, #opponent-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; vertical-align: middle; user-select: none; -webkit-user-select: none; }
#user-icon-trigger img, #opponent-icon img { width: auto; height: 100%; image-rendering: pixelated; pointer-events: none; }
#game-grid.custom-player0 .player0::after, #game-grid.custom-player1 .player1::after { content: ''; background-repeat: no-repeat; background-position: center; background-size: 100% 100%; image-rendering: pixelated; }
#game-grid.custom-player0 .player0::after { background-image: var(--player0-image); }
#game-grid.custom-player1 .player1::after { background-image: var(--player1-image); }
#game-grid .player0, #game-grid .player1 { z-index: 2; }
/* Outset shadows leave every icon pixel clear and glow across the grid lines. */
#game-grid .player0::after { box-shadow: 0 0 0 1px var(--player0-side, rgb(55 180 225 / .75)), 0 0 9px 3px var(--player0-glow, rgb(55 180 225 / .6)), 0 0 20px 5px var(--player0-aura, rgb(110 210 245 / .3)); }
#game-grid .player1::after { box-shadow: 0 0 0 1px var(--player1-side, rgb(235 100 155 / .75)), 0 0 9px 3px var(--player1-glow, rgb(235 100 155 / .6)), 0 0 20px 5px var(--player1-aura, rgb(245 145 185 / .3)); }
.icon-instructions { grid-area: 2 / 1 / 4 / 2; line-height: 1.7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.icon-help, .icon-palette-section { min-width: 0; }
.icon-help p { font-size: 13px; overflow-wrap: anywhere; }
.icon-help ul { padding-left: 1.5em; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.icon-help li { margin-bottom: 12px; }
.icon-instructions h2 { font-size: 20px; }
.icon-canvas-panel { grid-area: 2 / 2 / 4 / 3; display: flex; align-items: center; justify-content: center; min-width: 0; }
#icon-canvas { display: block; width: min(100%, 594px); height: auto; aspect-ratio: 594 / 664; flex-shrink: 0; touch-action: pinch-zoom; image-rendering: pixelated; }
#icon-canvas.icon-picking { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='white' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 7 8 8M20 10l4-4a3 3 0 0 1 4 4l-4 4M18 11 6 23l-2 5 5-2 12-12'/%3E%3C/g%3E%3Cg fill='none' stroke='%23222' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m17 7 8 8M20 10l4-4a3 3 0 0 1 4 4l-4 4M18 11 6 23l-2 5 5-2 12-12'/%3E%3C/g%3E%3C/svg%3E") 4 28, crosshair; }
#icon-eyedropper { display: inline-flex; align-items: center; justify-content: center; }
#icon-eyedropper[aria-pressed="true"] { outline: 2px solid #aee1cd; outline-offset: 2px; }
.icon-instructions h3 { margin: 16px 0 8px; font-size: 14px; }
#icon-palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 394px; margin-bottom: 12px; }
.icon-color-chip, #icon-swatch, #icon-eraser { background-image: linear-gradient(var(--chip-color, transparent), var(--chip-color, transparent)), repeating-conic-gradient(#ddd 0% 25%, #999 0% 50%); background-size: 100% 100%, 8px 8px; }
#icon-palette button, .icon-palette-tools button { min-width: 0; min-height: 0; width: 100%; aspect-ratio: 1; padding: 0; border: 1px solid #888; border-radius: 4px; }
#icon-eraser { color: #111; font-weight: 700; }
#icon-palette button[aria-pressed="true"], #icon-eraser[aria-pressed="true"] { outline: 2px solid #aee1cd; outline-offset: 2px; box-shadow: inset 0 0 0 2px #111, inset 0 0 0 4px #fff; }
.icon-color-chip:hover { filter: brightness(1.12); }
.icon-palette-tools { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; width: 100%; max-width: 394px; }
.icon-palette-tools > div { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.icon-palette-tools > div:nth-child(2) { grid-column: 3; }
.icon-palette-tools > div:nth-child(3) { grid-column: 5; }
.icon-palette-tools span { font-size: 12px; white-space: nowrap; }
.icon-palette-tools svg { width: 75%; height: 75%; }
#icon-swatch:disabled { opacity: 1; }
#icon-return { background: #367c67; border-color: #589b85; }
#icon-return:enabled:hover { background: #408671; }
#icon-save { background: #e88920; border-color: #f4a84b; color: #1e1e1e; }
#icon-save:enabled:hover { background: #f4a039; }
#icon-enabled { width: 210px; }
#icon-username { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 1000px) {
    #icon-workspace .left-selection { grid-area: 1 / 1; }
    #icon-workspace .icon-instructions { grid-area: 2 / 1; }
    #icon-workspace .map-settings { grid-area: 3 / 1; }
    #icon-workspace .icon-canvas-panel { grid-area: 4 / 1; }
}
body { margin: 0; background: #1e1e1e; color: #ddd; font-family: 'IBM Plex Sans JP', sans-serif; }
.header { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 8px 20px; background: #333; padding: 12px 20px; border-bottom: 1px solid #555; overflow-x: auto; }
.header > h1, .header > .credits { flex: 0 0 auto; white-space: nowrap; }
.credits { margin-left: auto; color: #bbb; font-size: 11px; line-height: 1.6; text-align: right; }
.credits a { color: inherit; text-decoration: none; }
.credits a:hover { text-decoration: underline; }
.credits a:focus-visible { outline: 2px solid #65c3aa; outline-offset: 2px; }
h1 { margin: 0; font-size: 24px; }
h1 span { font-size: 15px; font-weight: 400; color: #bbb; margin-left: 12px; }
.workspace { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto minmax(360px, 1fr) auto; min-height: calc(100vh - 62px); gap: 1px; background: #484848; }
.workspace.match-view .left-selection, .workspace.match-view .editor-panel, .workspace.match-view .save-panel { display: none; }
.workspace.match-view .trace-panel { display: flex; grid-area: 1 / 1 / 4 / 2; }
.panel { min-width: 0; background: #252526; padding: 14px; }
.left-selection { grid-area: 1 / 1; }
.map-settings { grid-area: 1 / 2; }
.map-settings #turn-number { font-size: 12px; }
.map-settings .mode-select { flex: 0 0 auto; }
.map-settings #user-order { width: 80px; }
.map-settings #step-mode { width: 140px; }
#step-button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
#step-button:enabled { background: #e88920; border-color: #f4a84b; color: #1e1e1e; }
#step-button:enabled:hover { background: #f4a039; }
.editor-panel { grid-area: 2 / 1; padding: 0; position: relative; min-height: 440px; }
.game-panel { grid-area: 2 / 2 / 4 / 3; display: flex; align-items: center; justify-content: center; overflow: auto; position: relative; }
#runtime-status { position: absolute; bottom: 8px; left: 8px; right: 8px; margin: 0; padding: 8px 12px; background: rgb(30 30 30 / .9); color: #fff; text-align: center; font-size: 13px; pointer-events: none; }
.match-summary { flex: 0 0 auto; padding: 24px 16px; text-align: center; background: #fff0dd; color: #303030; border-bottom: 1px solid #ddc5a6; }
.match-actions { margin-bottom: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 8px; }
#match-start-button, #step-button, #return-programming-button { width: 100%; min-width: 0; min-height: 44px; padding: 8px 6px; font-size: 16px; font-weight: 700; }
.match-actions button:disabled { background: #ccc; border-color: #aaa; color: #666; opacity: 1; }
.save-panel { grid-area: 3 / 1; overflow-x: auto; }
.save-panel .fields { flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; }
.save-panel button { min-height: 32px; padding: 5px 7px; font-size: 12px; white-space: nowrap; }
.opponent-controls { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; margin-left: 4px; }
.opponent-controls h2 { margin: 0; font-size: 14px; white-space: nowrap; }
.opponent-controls label { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
#save-program-form { display: flex; flex-direction: column; gap: 16px; }
#save-program-form label { flex: none; }
#save-overwrite { margin-bottom: 16px; }
#save-dialog { background: rgb(255 255 255 / .95); color: #333; border-color: #aaa; padding: 10px 24px; box-shadow: 0 6px 24px rgb(0 0 0 / .35); }
.save-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding-bottom: 4px; border-bottom: 1px solid #b5c4bc; }
#save-heading { margin: 0; font-size: 16px; color: #222; }
#save-dialog .save-named-section { display: flex; flex-direction: column; gap: 12px; padding: 14px; background: #edf1ef; border: 1px solid #9baaa2; border-radius: 8px; }
#save-dialog .save-name-row { display: flex; align-items: center; gap: 10px; }
#save-dialog .save-name-row label { flex: 0 0 auto; color: #222; white-space: nowrap; }
#save-name { flex: 1 1 auto; min-width: 0; width: 0; background: #fff; color: #222; border-color: #7b8781; }
#save-dialog #program-name-help { display: block; color: #414b45; }
.save-visibility-options { display: flex; align-items: center; gap: 20px; }
#save-visibility label { white-space: nowrap; }
#save-visibility { margin: 8px 0 0; padding: 10px 12px; border: 1px solid #aaa; }
#save-visibility label { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 8px 0; }
#save-visibility input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: #359b7c; }
.save-delete-actions { margin-top: 28px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
#save-dialog-status { font-size: 12px; }
.input-help { color: #ccc; font-size: 12px; line-height: 1.6; }
#hint-dialog { position: fixed; z-index: 20; margin: 0; width: calc(36em + 57.6px); max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 10px 24px; font-size: 14px; background: rgb(255 255 255 / .95); color: #333; border-color: #aaa; box-shadow: 0 6px 24px rgb(0 0 0 / .35); }
.hint-header { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #b5c4bc; cursor: grab; user-select: none; touch-action: none; }
.hint-header.dragging { cursor: grabbing; }
#hint-tabs { display: flex; flex: 1 1 auto; min-width: 0; gap: 6px; overflow-x: auto; touch-action: pan-x; }
#hint-tabs button { min-width: 38px; min-height: 32px; padding: 4px 8px; color: #444; background: #eee; border-color: #bbb; }
#hint-tabs button[aria-selected="true"] { background: #234c40; color: white; border-color: #234c40; }
#hint-resize, #hint-help-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 12px; cursor: ew-resize; touch-action: none; }
#hint-resize::after, #hint-help-resize::after { content: ''; position: absolute; right: 3px; top: calc(50% - 18px); height: 36px; border-right: 3px double #89958e; }
#hint-resize:focus-visible, #hint-help-resize:focus-visible { outline: 2px solid #359b7c; outline-offset: -2px; }
#hint-close, #hint-help-close, #save-cancel { background: transparent; color: #555; border: 0; border-radius: 0; width: 28px; height: 28px; min-height: 28px; padding: 0; font-size: 18px; line-height: 1; flex-shrink: 0; }
#hint-close:hover, #hint-help-close:hover, #save-cancel:hover { background: transparent; color: #111; }
#hint-close, #hint-help-close, #save-cancel { display: inline-flex; align-items: center; justify-content: center; }
#hint-content { margin: 0; height: 30lh; max-height: calc(100dvh - 100px); overflow: auto; overflow-wrap: anywhere; font: 14px/1.5 'IBM Plex Sans JP', sans-serif; }
#hint-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
#hint-dialog .hint-header { flex-shrink: 0; }
#hint-content { flex: 1 1 auto; min-height: 0; }
#hint-content { cursor: grab; }
#hint-content.hint-panning { cursor: grabbing; user-select: none; }
#hint-content textarea, #hint-content input { cursor: text; }
#hint-content a, #hint-content button { cursor: pointer; }
#hint-dialog.hint-height-set #hint-content { height: 0; max-height: none; }
#hint-content h1, #hint-content h2, #hint-content h3, #hint-content h4, #hint-content h5, #hint-content h6 { color: #234c40; margin: .65em 0 .3em; font-size: 1em; line-height: 1.35; }
#hint-content h1 { font-size: 1.15em; border-bottom: 1px solid #789e90; padding-bottom: .2em; }
#hint-content h2 { font-size: 1.05em; }
#hint-content > :first-child { margin-top: 0; }
#hint-content p { white-space: pre-wrap; margin: .4em 0; }
#hint-content ul, #hint-content ol { padding-left: 1.8em; margin: .4em 0; }
#hint-content li { margin: .15em 0; }
#hint-content code { font-family: 'IBM Plex Mono', monospace; background: rgb(35 76 64 / .1); border-radius: 3px; padding: .1em .3em; }
#hint-content pre { overflow-x: auto; margin: .4em 0; padding: 8px; background: rgb(35 76 64 / .1); border-radius: 5px; white-space: pre; }
#hint-content pre code { padding: 0; background: none; }
#hint-content hr { border: 0; border-top: 1px solid #9daea6; margin: .6em 0; }
#hint-content a { color: #176a9e; text-decoration: underline; }
#hint-content img { display: block; max-width: 100%; height: auto; margin: .5em 0; }
#hint-content blockquote { margin: .6em 0; padding: .2em .8em; border-left: 4px solid #789e90; background: #eef3f0; }
#hint-content .hint-table-scroll { overflow-x: auto; margin: .6em 0; }
#hint-content table { border-collapse: collapse; min-width: 100%; }
#hint-content th, #hint-content td { border: 1px solid #9daea6; padding: .35em .6em; }
#hint-content th { background: #eef3f0; }
.hint-source-editor { display: block; box-sizing: border-box; width: 100%; height: 100%; resize: none; padding: 8px; font: 14px/1.5 monospace; background: white; color: #222; }
#hint-save[hidden] { display: none; }
#hint-help-button[hidden] { display: none; }
#hint-help-button { white-space: nowrap; }
#hint-help-dialog { position: fixed; z-index: 21; margin: 0; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 10px 24px; font: 14px/1.5 'IBM Plex Sans JP', sans-serif; color: #333; background: rgb(255 255 255 / .95); border: 2px solid #aaa; box-shadow: 0 6px 24px rgb(0 0 0 / .35); overflow: hidden; }
#hint-help-dialog[open] { display: flex; flex-direction: column; }
.hint-help-header { flex-shrink: 0; min-height: 37px; }
#hint-help-title { flex: 1; min-width: 0; }
.hint-help-body { overflow: auto; min-height: 0; overflow-wrap: anywhere; }
.hint-help-body > section { border: 1px solid #c1cfc7; border-radius: 8px; padding: 12px; margin: 8px 0 16px; background: #fff; }
.hint-help-body > section > h3 { margin-top: 0; padding: 4px 8px; border-radius: 4px; background: #e5eee8; }
.hint-help-body .hint-help-label { font-size: 12px; font-weight: bold; color: #52665c; margin-top: 12px; }
.hint-help-preview .hint-table-scroll { overflow-x: auto; }
.hint-help-body h3 { margin: .8em 0 .3em; color: #234c40; font-size: 1em; }
.hint-help-body p { margin: .4em 0; }
.hint-help-body pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px; background: rgb(35 76 64 / .1); border-radius: 5px; font: 13px/1.5 monospace; }
.hint-help-preview { border-left: 3px solid #789e90; padding: 0 10px; margin: 8px 0 16px; }
.hint-help-preview p { white-space: pre-wrap; }
.hint-help-preview h1, .hint-help-preview h2, .hint-help-preview h3 { font-size: 1em; }
.hint-help-preview table { border-collapse: collapse; }
.hint-help-preview th, .hint-help-preview td { border: 1px solid #9daea6; padding: 3px 8px; }
.hint-help-preview a { color: #176a9e; }
.hint-help-preview blockquote { margin: 0; border-left: 3px solid #789e90; padding-left: 8px; }
#save-dialog-status:empty { display: none; }
.trace-panel { display: none; flex-direction: column; padding: 0; min-height: 0; max-height: calc(100vh - 62px); overflow: hidden; position: relative; }
.trace-panel h2 { flex: 0 0 auto; margin: 0; padding: 10px 12px; font-size: 14px; border-bottom: 1px solid #555; }
.trace-scroll { flex: 1 1 0; min-height: 0; overflow-x: hidden; overflow-y: auto; position: relative; }
#progress-table { border-collapse: separate; border-spacing: 0; table-layout: auto; width: 100%; font-size: 12px; }
#progress-table th, #progress-table td { height: 24px; padding: 2px 4px; font-weight: 400; border-right: 1px solid #555; border-bottom: 1px solid #555; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#progress-table th { position: sticky; top: 0; z-index: 1; background: #3c3c3c; color: #fff; }
/* 勝敗以外は内容に必要な幅に詰め、残りの幅を勝敗列に割り当てる。 */
#progress-table th:not(:last-child), #progress-table td:not(:last-child) { width: 1%; }
#progress-table th:last-child, #progress-table td:last-child { width: auto; text-align: left; }
#progress-table th:first-child, #progress-table td:first-child { position: sticky; left: 0; background: #303030; }
#progress-table th:first-child { z-index: 2; }
#progress-table tr.completed { background: #293b35; }
#progress-table tr.finished { background: #584023; }
#progress-table td:nth-child(2), #progress-table td:last-child { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
#remaining-turns { display: contents; font-size: 26px; font-weight: 700; }
#remaining-turn-label { grid-column: 1; margin-bottom: 8px; }
#remaining-turn-count { grid-column: 2; margin-bottom: 8px; text-align: center; font-variant-numeric: tabular-nums; }
h2 { margin: 0 0 10px; font-size: 17px; color: #fff; }
.fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; flex: 1 1 150px; min-width: 0; }
input, select, button { font: inherit; color: #fff; border: 1px solid #666; border-radius: 4px; background: #3c3c3c; min-height: 36px; padding: 7px 10px; max-width: 100%; }
input, select { width: 100%; }
input[readonly] { color: #aee1cd; }
dialog { width: min(420px, calc(100% - 32px)); padding: 24px; color: #ddd; background: #252526; border: 1px solid #666; border-radius: 8px; }
dialog::backdrop { background: rgb(0 0 0 / .7); }
.auth-tabs { display: flex; gap: 8px; margin: 16px 0; }
.auth-tabs [aria-pressed="true"] { border-color: #65c3aa; color: #aee1cd; }
#auth-form { display: flex; flex-direction: column; gap: 16px; }
#auth-form label { flex: none; }
#auth-status { font-size: 13px; line-height: 1.6; }
[hidden] { display: none !important; }
button { cursor: pointer; flex-shrink: 0; }
button:hover { background: #505050; }
button.primary { background: #176d55; border-color: #359b7c; }
#run-button:enabled, #match-start-button:enabled { background: #e88920; border-color: #f4a84b; color: #1e1e1e; }
#run-button:enabled:hover, #match-start-button:enabled:hover { background: #f4a039; }
#return-programming-button:enabled { background: #367c67; border-color: #589b85; }
#return-programming-button:enabled:hover { background: #408671; }
button:disabled, input:disabled { opacity: .45; cursor: default; }
input:focus, select:focus, button:focus-visible { outline: 2px solid #65c3aa; outline-offset: 2px; }
.panel > p { margin: 10px 0 0; font-size: 12px; color: #bdbdbd; overflow-wrap: anywhere; }
/* 選択エリアは見出し・ラベル・入力欄・読み込み状況を1行に配置。 */
.selection { display: flex; align-items: center; gap: 10px; padding: 10px 12px; overflow-x: auto; }
.selection h2 { margin: 0; font-size: 14px; flex: 0 0 auto; white-space: nowrap; }
.selection .fields { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; align-items: center; }
.selection label { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; }
.selection input { width: clamp(80px, 6vw, 120px); }
.selection select { width: 150px; }
.selection #left-program-toggle, .selection .dropdown-toggle, .opponent-controls .dropdown-toggle { position: relative; width: 150px; padding-right: 24px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selection #left-program-toggle, .selection #right-program-toggle { width: 120px; }
#left-program-menu, .selection-menu { position: fixed; inset: auto; margin: 0; width: max-content; min-width: 150px; max-width: calc(100vw - 16px); max-height: 50vh; padding: 4px; font-size: 12px; }
.selection-menu { overflow-y: auto; }
.selection-menu button { display: block; width: 100%; min-height: 36px; padding: 7px 10px; border: 0; text-align: left; white-space: nowrap; }
.selection-menu button[aria-selected="true"] { color: #aee1cd; background: #176d55; }
.selection-menu p { margin: 0; padding: 7px 10px; }
@media (pointer: coarse) { .selection-menu button { min-height: 44px; font-size: 16px; } }
.user-picker { display: flex; align-items: stretch; }
.selection .user-picker input { border-radius: 4px 0 0 4px; border-right: 0; }
.selection #user-menu-toggle { width: 25px; padding: 0; border-radius: 0 4px 4px 0; }
#user-menu { position: fixed; inset: auto; margin: 0; padding: 4px; color: #ddd; background: #3c3c3c; border: 1px solid #666; border-radius: 4px; }
#user-menu button { width: 100%; min-height: 32px; padding: 5px 10px; font-size: 12px; text-align: left; border: 0; }
.selection input, .selection select, .selection button { min-height: 32px; padding: 5px 7px; font-size: 12px; }
.selection select:not([size]):not([hidden]), .selection #left-program-toggle, .selection .dropdown-toggle, .selection #user-menu-toggle {
    appearance: none;
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.selection #user-menu-toggle { padding: 0; background-position: center; }
.selection > p { flex: 1 1 160px; min-width: 80px; margin: 0; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.CodeMirror { position: absolute; inset: 0; height: 100%; font: 15px/1.6 'IBM Plex Mono', monospace; background: #1e1e1e; }
.cm-full-width-space { background: #8d2727; }
.cm-program-fixed-line { background: #34383d; }
.CodeMirror .fixed-program-toggle { min-height: 0; height: 22px; padding: 0 8px; font: 12px/20px 'IBM Plex Sans JP', sans-serif; vertical-align: baseline; color: #fff; background: #46534e; border: 1px solid #78958a; }
.CodeMirror .cm-program-fixed-text { cursor: pointer; user-select: none; -webkit-user-select: none; }
#console-output { margin: 12px 0 0; height: 88px; padding: 10px; background: #1b1b1b; overflow: auto; font: 12px/1.5 monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
#turn-number { display: flex; flex-direction: row; align-items: center; flex: 0 0 auto; font-size: 14px; color: #fff; white-space: nowrap; }
#turn-limit { width: 70px; min-height: 32px; padding: 5px 7px; }
#player-scores { display: inline-grid; grid-template-columns: minmax(0, max-content) max-content 3.2em; align-items: center; gap: 8px 16px; max-width: 100%; font-size: 26px; font-weight: 700; color: inherit; overflow-wrap: anywhere; text-align: left; }
#left-score, #right-score { display: contents; }
#left-score-name, #right-score-name { grid-column: 1; }
#left-score-result, #right-score-result { white-space: nowrap; }
.first-player-name { color: #245b91; }
.second-player-name { color: #ac3545; }
.score-value { display: inline-block; min-width: 1.8em; padding: 0 6px; border-radius: 3px; color: #000; background: #fff; text-align: center; }
#game-grid { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 1px; width: min(100%, 594px); flex-shrink: 0; container-type: inline-size; }
.cell { position: relative; min-width: 0; min-height: 0; aspect-ratio: 1; background: #777; display: flex; justify-content: center; align-items: center; }
.cell.view-look, .cell.view-search { position: relative; }
.cell.view-look::after, .cell.view-search::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--view-range-fill); box-shadow: inset 0 0 0 2px var(--view-range-border);
    opacity: 0; animation: show-view-range 200ms step-end;
}
.cell.view-player0 { --view-range-fill: var(--player0-aura, rgb(110 210 245 / .3)); --view-range-border: var(--player0-side, rgb(55 180 225 / .75)); }
.cell.view-player1 { --view-range-fill: var(--player1-aura, rgb(245 145 185 / .3)); --view-range-border: var(--player1-side, rgb(235 100 155 / .75)); }
@keyframes show-view-range { from { opacity: 1; } to { opacity: 0; } }
.block { position: relative; background: repeating-linear-gradient(to bottom, #a0a3a5 0px, #909496 10px, #73787b 10px, #73787b 12px); box-shadow: inset 0 1px 0 #b7babc, inset 1px 0 0 #adb1b3; }
.block::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, #73787b 2px, #adb1b3 2px, #adb1b3 3px, transparent 3px), linear-gradient(to right, #73787b 2px, #adb1b3 2px, #adb1b3 3px, transparent 3px), linear-gradient(to right, #73787b 2px, #adb1b3 2px, #adb1b3 3px, transparent 3px); background-size: 14px 10px; background-position: 0 0, 7px 12px, 0 24px; background-repeat: repeat-x; }
.floor, .item, .player0:not(.block), .player1:not(.block) { background: #e6e7e8; }
.item::before { font-size: 24px; line-height: 1; }
.item-mushroom::before { content: '🍄'; }
.item-diamond::before { content: '💎'; }
.item-strawberry::before { content: '🍓'; }
.item-apple::before { content: '🍏'; }
.item-butterfly::before { content: '🦋'; }
.item-heart::before { content: '♥'; color: #e91e63; }
/* 絵文字のフォントメトリクスでグリッドの行高が広がらないようにする。 */
.player0::after, .player1::after, .item::before {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    line-height: 1; pointer-events: none;
}
.player0::after { content: '🙂'; z-index: 1; font-size: clamp(12px, 1.8vw, 22px); }
.player1::after { content: '🤖'; z-index: 1; font-size: clamp(12px, 1.8vw, 22px); }
/* 選択欄は画面幅によらず1行に並べ、各セクション内で横スクロールする。 */
.selection, .selection .fields, .opponent-controls { flex-wrap: nowrap; }
.selection .fields, .opponent-controls { flex: 0 0 auto; max-width: none; }
.selection .user-picker { flex: 0 0 auto; }
.save-panel .fields { flex-wrap: nowrap; justify-content: flex-start; }
.item::before { font-size: clamp(10px, 4cqw, 24px); }
.player0::after, .player1::after { font-size: clamp(10px, 4cqw, 22px); }
dialog { max-height: calc(100dvh - 24px); overflow-y: auto; overflow-wrap: anywhere; }
.dialog-actions, .auth-tabs { flex-wrap: wrap; }
@media (min-width: 1001px) {
    /* 盤面の大きさで親エリアが際限なく広がることを防ぐ。 */
    .game-panel, .icon-canvas-panel { contain: size; min-height: 0; }
    #game-grid .item::before, #game-grid .player0::after, #game-grid .player1::after { font-size: .7em; }
}
@media (max-width: 1000px) {
    .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: calc(100dvh - 62px); }
    .left-selection { grid-area: 1 / 1; }
    .editor-panel { grid-area: 2 / 1; min-height: clamp(340px, 55dvh, 600px); }
    .save-panel { grid-area: 3 / 1; }
    .map-settings { grid-area: 4 / 1; }
    .game-panel { grid-area: 5 / 1; padding: 16px; }
    #icon-workspace .icon-canvas-panel { padding: 16px; }
    .workspace.match-view .map-settings { grid-area: 1 / 1; }
    .workspace.match-view .trace-panel { display: contents; }
    .workspace.match-view .match-summary { grid-area: 3 / 1; }
    .workspace.match-view .game-panel { grid-area: 2 / 1; }
    .workspace.match-view .trace-panel > h2 { grid-area: 4 / 1; background: #252526; }
    .workspace.match-view .trace-scroll { grid-area: 5 / 1; height: 320px; overflow: auto; background: #252526; }
    .match-summary { padding: 10px 12px; }
    .match-actions { margin-bottom: 8px; }
}
@media (max-width: 600px) {
    #icon-workspace .icon-instructions { grid-template-columns: minmax(0, 1fr); }
    .workspace.match-view .map-settings { display: none; }
    .workspace.match-view .game-panel { grid-area: 1 / 1; }
    .workspace.match-view .match-summary { grid-area: 2 / 1; }
    .workspace.match-view .trace-panel > h2 { grid-area: 3 / 1; }
    .workspace.match-view .trace-scroll { grid-area: 4 / 1; }
    .header { padding: 10px 12px; }
    .credits { margin-left: 0; text-align: left; }
    .panel { padding: 10px; }
    /* 1行24px × 16行 + CodeMirrorの上下余白8px。 */
    .editor-panel { padding: 0; min-height: 392px; }
    h1 { font-size: 20px; }
    .fields { gap: 7px; }
    .opponent-controls { margin-left: 0; }
    .selection input, .selection select, .selection button,
    .save-panel button, input, select, button, #turn-limit { min-height: 44px; font-size: 16px; }
    .selection #user-menu-toggle { width: 44px; }
    .selection .user-picker input { width: 140px; }
    .map-settings { gap: 10px; }
    .map-settings #step-mode { width: 155px; }
    .map-settings #user-order { width: 85px; }
    .save-panel .fields { gap: 8px; }
    #match-start-button, #step-button, #return-programming-button { font-size: 14px; padding: 7px 4px; }
    #remaining-turns { font-size: 20px; }
    #player-scores { font-size: 18px; gap: 4px 12px; }
}

/* Blink only the defeated character; keep the wall visible underneath. */
#game-grid .wall-collision::after { animation: wall-collision-blink 1s steps(1, end) infinite; }
@keyframes wall-collision-blink {
    0%, 100% { opacity: 1; visibility: visible; }
    50% { opacity: 0; visibility: hidden; }
}

/* Highlight the next available match action with a gentle light pulse. */
.match-actions button.next-action-pulse:enabled { animation: next-action-pulse 1.8s ease-in-out infinite; }
@keyframes next-action-pulse {
    0%, 100% { filter: brightness(.9); box-shadow: 0 0 0 0 rgb(255 225 170 / 0); }
    50% { filter: brightness(1.35); box-shadow: 0 0 8px 2px rgb(255 225 170 / .3); }
}
@media (prefers-reduced-motion: reduce) {
    .match-actions button.next-action-pulse:enabled { animation: none; }
}

#save-program-button.unsaved-program:enabled { background: #e88920; border-color: #f4a84b; color: #1e1e1e; }
#save-program-button.unsaved-program:enabled:hover { background: #f4a039; }

#fixed-program-tooltip { position: fixed; z-index: 1000; width: max-content; white-space: nowrap; padding: 6px 9px; border: 1px solid #777; border-radius: 4px; background: #333; color: #ddd; font-size: 12px; line-height: 1.5; pointer-events: none; }
#fixed-program-tooltip[hidden] { display: none; }

/* ヒントのサイズ変更は右下角にまとめる。 */
#hint-resize { top: auto; bottom: 0; right: 0; width: 22px; height: 22px; cursor: nwse-resize; z-index: 2; }
#hint-resize::after { top: auto; right: 4px; bottom: 4px; width: 12px; height: 12px; border: 0; background: repeating-linear-gradient(135deg, transparent 0 3px, #89958e 3px 4px); clip-path: polygon(100% 0, 100% 100%, 0 100%); }

#hint-fullscreen { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; min-height: 28px; padding: 0; background: transparent; color: #555; border: 0; border-radius: 0; }
#hint-fullscreen:hover { color: #111; }
#hint-fullscreen[aria-pressed="true"] { background: #dce7e1; }
#hint-dialog.hint-fullscreen { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100dvh !important; max-width: none; max-height: none; border-radius: 0; }
#hint-dialog.hint-fullscreen #hint-content { height: 0; max-height: none; }
#hint-dialog.hint-fullscreen #hint-resize { display: none; }
#hint-dialog.hint-fullscreen .hint-header { cursor: default; }

#save-dialog #save-visibility { margin-bottom: 16px; }
#delete-program-button { background: #e5e5e5; color: #222; border-color: #bbb; }
#delete-program-button:enabled:hover { background: #d5d5d5; }

#user-settings [data-action="delete_user"] { background: #e5e5e5; color: #222; border-color: #bbb; }
#user-settings [data-action="delete_user"]:enabled:hover { background: #d5d5d5; }


#map-editor-workspace { grid-template-rows: auto minmax(440px, 1fr); }
#map-editor-workspace[hidden] { display: none; }
.map-editor-header { grid-area: 1 / 1 / 2 / 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.map-editor-header h2 { margin: 0; }
.map-editor-instructions { grid-area: 2 / 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; line-height: 1.7; }
.map-editor-help, .map-editor-tools { min-width: 0; }
.map-editor-help h2 { font-size: 20px; }
.map-editor-help ul { padding-left: 1.5em; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.map-editor-help li { margin-bottom: 12px; }
#map-palette { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; margin: 0; }
.map-editor-palette-section { padding: 12px; border: 1px solid #777; border-radius: 6px; margin-bottom: 20px; }
.map-editor-palette-section h3 { margin: 0 0 12px; }
#map-palette button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 56px; padding: 6px; border: 0; border-radius: 0; background: transparent; font-size: 19px; text-align: left; }
#map-palette .cell { width: 40px; height: 40px; flex-shrink: 0; }
#map-palette button[aria-pressed="true"] .cell { outline: 3px solid #aee1cd; outline-offset: 3px; }
#map-palette button:focus-visible { outline: none; }
#map-palette button:focus-visible .cell { outline: 3px solid #aee1cd; outline-offset: 3px; }
.map-editor-actions { display: flex; flex-direction: column; gap: 12px; }
.map-editor-actions button, #map-editor-name { width: 100%; min-width: 0; min-height: 44px; }
#map-editor-return { background: #359b7c; border-color: #65c3aa; color: #fff; }
#map-editor-overwrite, #map-editor-save-as { background: #ccc; border-color: #aaa; color: #444; }
#map-editor-overwrite[data-modified="true"], #map-editor-save-as[data-modified="true"] { background: #e88920; border-color: #f4a84b; color: #1e1e1e; }
.map-editor-save-section label { flex: 0 0 auto; white-space: nowrap; }
.map-editor-name-row { display: flex; align-items: center; gap: 10px; }
.map-editor-name-row #map-editor-name { flex: 1 1 auto; width: 0; min-width: 0; }
.map-editor-save-section { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid #777; border-radius: 6px; }
#map-editor-delete { margin-top: 12px; background: #e5e5e5; border-color: #bbb; color: #222; }
#map-editor-status { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.map-editor-board-panel { grid-area: 2 / 2; display: flex; justify-content: center; align-items: center; min-width: 0; }
#map-editor-grid { touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 1px; width: min(100%, 594px); flex-shrink: 0; container-type: inline-size; }
#map-editor-grid button.cell { border: 0; border-radius: 0; padding: 0; min-height: 0; min-width: 0; width: 100%; opacity: 1; }
#map-editor-grid .map-mirrored-cell { filter: brightness(.65); cursor: default; }
#map-editor-grid button.cell:enabled { cursor: crosshair; }
#map-editor-grid button.cell:enabled:hover, #map-editor-grid button.cell:focus-visible { outline: 2px solid #359b7c; outline-offset: -2px; z-index: 3; }
#map-editor-grid .map-character-unavailable { cursor: not-allowed !important; }
#map-editor-grid .item::before, #map-editor-grid .player0::after, #map-editor-grid .player1::after { font-size: clamp(8px, 4cqw, 24px); }
@media (min-width: 1001px) { .map-editor-board-panel { contain: size; min-height: 0; } }
@media (max-width: 1000px) {
    #map-editor-workspace { grid-template-rows: auto; }
    .map-editor-header { grid-area: 1 / 1; }
    .map-editor-instructions { grid-area: 2 / 1; }
    .map-editor-board-panel { grid-area: 3 / 1; }
}
@media (max-width: 600px) {
    .map-editor-instructions { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
    #map-palette button { font-size: 18px; gap: 6px; padding: 6px 0; }
    #map-palette .cell { width: 32px; height: 32px; }
}

#hint-save { background: #ccc; border-color: #aaa; color: #444; }
#hint-save[data-modified="true"] { background: #e88920; border-color: #f4a84b; color: #1e1e1e; }