/*
 * EMG Viewer — リファレンスプレイヤーのデモページ。
 *
 * 色は EMG が持つ 2 つの座標系に割り当てている。
 *   琥珀 = アトラス座標（どこから取るか）
 *   青緑 = キャンバス座標（どこへ描くか）
 * この 2 つの取り違えが実装側で一番よく起きるので、画面上でも別の色にしている。
 *
 * 計器としての見え方に寄せた暗い一色構成。明暗の切り替えは持たないが、
 * 背景・文字色はすべて明示するので、埋め込み先の地色に影響されない。
 */

:root {
    --ink: #14161d;
    --panel: #1a1e27;
    --raised: #222836;
    --line: #2f3646;
    --line-soft: #262c39;
    --text: #dfe3ec;
    --muted: #8892a6;
    --atlas: #f2a83c;
    --canvas: #56c8dd;
    --danger: #e4726a;

    --sans: "IBM Plex Sans JP", system-ui, "Hiragino Sans", "Yu Gothic UI", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
    box-sizing: border-box;
}

/*
 * `hidden` を効かせる。UA スタイルの `[hidden] { display: none }` は作成者側の
 * どんな display 指定にも負けるので、`display: grid` を持つ要素に hidden を
 * 立てても消えない（ドロップ用の覆いが出たままになる）。
 */
[hidden] {
    display: none !important;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---- スクロールバー ------------------------------------------------------
 *
 * 既定のスクロールバーは明るく太く、暗い画面では白い帯として目立つ。
 * 横に流れる要素が縦に重なる場所があるので、細くして地の色に寄せる。
 */

* {
    scrollbar-width: thin;
    scrollbar-color: #394254 transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #394254;
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4d586e;
    background-clip: content-box;
}

/*
 * チップの帯は端でチップが切れているのが見えるので、バーが無くても
 * 続きがあることは分かる。3 本が縦に並ぶのを避けるため出さない。
 * （バーが無いぶん、ふつうのホイールでも横に動くようにしてある）
 */
.loaders,
.chips.parts,
.frame-strip {
    scrollbar-width: none;
}

.loaders::-webkit-scrollbar,
.chips.parts::-webkit-scrollbar,
.frame-strip::-webkit-scrollbar {
    height: 0;
}

/* ---- 上部バー ---------------------------------------------------------- */

.topbar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 20px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 10px;
    white-space: nowrap;
}

.brand-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.brand-note,
.drop-note {
    color: var(--muted);
    font-size: 11px;
}

.loaders {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
}

.label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.sep {
    width: 1px;
    height: 20px;
    background: var(--line);
}

/* ---- チップ・ボタン ---------------------------------------------------- */

.chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.chip,
.btn,
.zoom-item {
    font: inherit;
    color: var(--text);
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 4px 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

.chip:hover,
.btn:hover,
.zoom-item:hover {
    border-color: #435067;
}

.chip.active {
    border-color: var(--atlas);
    color: #ffd79a;
}

.btn {
    font-weight: 600;
}

.chip-count {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--muted);
}

.chip-type {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    background: #2c3547;
    color: var(--muted);
}

/* static と switch はレンダリングの分岐点なので、一覧でも見分けられるようにする。 */
.chip-type.static {
    background: rgba(86, 200, 221, 0.14);
    color: var(--canvas);
}

.chip-type.switch {
    background: rgba(242, 168, 60, 0.14);
    color: var(--atlas);
}

.zoom {
    display: flex;
    gap: 0;
}

.zoom-item {
    border-radius: 0;
    padding: 3px 9px;
    font-family: var(--mono);
    font-size: 11px;
}

.zoom-item:first-child {
    border-radius: 5px 0 0 5px;
}

.zoom-item:last-child {
    border-radius: 0 5px 5px 0;
}

.zoom-item+.zoom-item {
    border-left: none;
}

.zoom-item.active {
    background: #2e3849;
    color: #fff;
}

/* ---- 通知 -------------------------------------------------------------- */

.banner {
    flex: none;
    padding: 9px 20px;
    background: rgba(228, 114, 106, 0.12);
    border-bottom: 1px solid rgba(228, 114, 106, 0.35);
    color: #f2a49e;
    font-size: 12px;
}

/* ---- 作業領域 ---------------------------------------------------------- */

.workspace {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 1px;
    background: var(--line);
}

.panel {
    background: var(--panel);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.panel-head {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--line-soft);
}

.panel-head h2 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.panel-head h2,
.dims,
.src {
    white-space: nowrap;
}

.dims,
.src {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.src {
    color: var(--text);
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flex {
    flex: 1;
}

.viewport {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: auto;
    display: grid;
    place-items: center;
    padding: 12px;
}

/* キャンバスの地。市松にしておくと、透明の抜けと白い塗りを取り違えない。 */
.checker {
    background-color: #0f1116;
    background-image:
        linear-gradient(45deg, #191d25 25%, transparent 25%),
        linear-gradient(-45deg, #191d25 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #191d25 75%),
        linear-gradient(-45deg, transparent 75%, #191d25 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

.atlas-viewport {
    background: #0f1116;
    place-items: start;
}

.sheet {
    position: relative;
    flex: none;
}

#stageScale {
    position: absolute;
    inset: 0;
    transform-origin: top left;
}

/*
 * レイヤーの合成モード（v0.4.0 §5）を、絵の中だけで閉じる。
 *
 * `mix-blend-mode` は既定でページの背景まで巻き込むので、これが無いと
 * スクリーンや加算のレイヤーが台紙やチェック柄と混ざる。合成の相手を
 * 「同じ絵のレイヤーどうし」に限るために、ここで独立した重ね合わせの文脈を作る。
 */
#layerContainer {
    isolation: isolate;
}

/*
 * src が入るまでは壊れた画像アイコンが出るので隠しておく。
 * 読み込み中（.sizing）も同じく場所を取らせない。display: none でも
 * 画像の読み込みと naturalWidth の取得はできる。
 */
#atlasImage:not([src]),
#atlasImage.sizing {
    display: none;
}

#atlasImage {
    display: block;
    /* アトラスは等倍以上に拡大して中身を確かめることがあるので、補間しない。 */
    image-rendering: pixelated;
}

.empty {
    position: absolute;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    text-align: center;
    pointer-events: none;
}

.panel-foot {
    flex: none;
    padding: 8px 14px;
    border-top: 1px solid var(--line-soft);
    display: grid;
    gap: 8px;
}

/* パーツ一覧は 1 行に収め、多いときは横に流す。折り返すと下の絵が縮む。 */
.chips.parts {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
}

/* 消しているパーツ / 止めているパーツ。一覧を見ただけで分かるようにする。 */
.part-chip.off {
    opacity: 0.45;
}

.part-chip.held .chip-type {
    box-shadow: inset 0 0 0 1px currentColor;
}

/*
 * 選んだパーツの操作。パーツごとにボタンを並べず、選んだ 1 つぶんだけを
 * ここに出す。
 */
.part-control {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    border-top: 1px solid var(--line-soft);
    padding-top: 8px;
}

.ctl-name {
    /* コマの帯に押し潰されて 1 文字まで縮むので、縮ませない。 */
    flex: none;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ctl {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 28px;
    padding: 0;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 5px;
    color: var(--text);
    cursor: pointer;
}

.ctl:hover {
    border-color: #435067;
}

.ctl.off {
    color: var(--muted);
    background: transparent;
}

.ctl svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* コマの帯。232 コマのファイルがあるので必ず横に流す。 */
.frame-strip {
    display: flex;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
}

.frame-chip {
    flex: none;
    font-family: var(--mono);
    font-size: 11px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}

.frame-chip:hover {
    border-color: #435067;
    color: var(--text);
}

/* いま出ているコマ / レイヤー。 */
.frame-chip.previewing {
    border-color: var(--atlas);
    background: rgba(242, 168, 60, 0.12);
    color: #ffd79a;
}

.hint {
    margin: 0;
    color: var(--muted);
    font-size: 11.5px;
}

/* ---- レイヤーの矩形 ---------------------------------------------------- */

/*
 * キャンバスの外へ出るレイヤーがある（basePosition + 幅 が baseCanvas を
 * 超えるファイルは普通にある）。絵そのものは #layerContainer が切っているが、
 * 矩形は絶対配置なので、切らないとスクロールできる範囲を広げてしまい、
 * パーツを選んだ瞬間にスクロールバーが生える。
 */
.overlay {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.rect {
    position: absolute;
    border: 1px solid rgba(136, 146, 166, 0.28);
}

#atlasOverlay .rect {
    pointer-events: auto;
}

/* いま画面に出ていないレイヤー（switch の非選択フレーム）。 */
.rect.dim {
    border-color: rgba(136, 146, 166, 0.12);
}

/* 同じパーツの仲間。 */
.rect.kin {
    border-color: rgba(242, 168, 60, 0.55);
    background: rgba(242, 168, 60, 0.07);
}

#stageOverlay .rect.kin {
    border-color: rgba(86, 200, 221, 0.45);
    background: rgba(86, 200, 221, 0.05);
}

/* 指しているレイヤー本体。アトラス側は琥珀、キャンバス側は青緑。 */
#atlasOverlay .rect.hot {
    border: 1.5px solid var(--atlas);
    background: rgba(242, 168, 60, 0.18);
    box-shadow: 0 0 0 1px rgba(20, 22, 29, 0.9), 0 0 14px rgba(242, 168, 60, 0.35);
}

#stageOverlay .rect.hot {
    border: 1.5px solid var(--canvas);
    background: rgba(86, 200, 221, 0.12);
    box-shadow: 0 0 0 1px rgba(20, 22, 29, 0.9), 0 0 14px rgba(86, 200, 221, 0.3);
}

.rect-label.inside {
    transform: none;
    margin-top: 0;
}

.rect-label {
    position: absolute;
    transform: translateY(-100%);
    margin-top: -3px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--canvas);
    color: #06222a;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
}

/* ---- 読み取り ---------------------------------------------------------- */

.readout {
    flex: none;
    border-top: 1px solid var(--line);
    background: var(--panel);
    padding: 10px 20px;
    /*
     * 高さを固定する。中身が入ったときに伸びると上のパネルが縮み、
     * すでに算出した表示倍率と食い違ってキャンバスが少しはみ出す。
     */
    height: 76px;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
}

.readout-idle {
    color: var(--muted);
    font-size: 12px;
}

.readout-body {
    display: flex;
    align-items: center;
    gap: 28px;
    white-space: nowrap;
}

.ident {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.ident .part {
    font-weight: 600;
    font-size: 14px;
}

.ident .frame {
    font-family: var(--mono);
    color: var(--atlas);
}

.tag {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
    background: #2c3547;
    color: var(--muted);
}

.tag.static {
    background: rgba(86, 200, 221, 0.14);
    color: var(--canvas);
}

.tag.switch {
    background: rgba(242, 168, 60, 0.14);
    color: var(--atlas);
}

.coord {
    display: grid;
    gap: 1px;
    padding-left: 11px;
    border-left: 2px solid var(--line);
}

.coord-atlas {
    border-left-color: var(--atlas);
}

.coord-canvas {
    border-left-color: var(--canvas);
}

.coord-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--muted);
}

.coord-val {
    font-family: var(--mono);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.coord-sub {
    font-size: 10.5px;
    color: var(--muted);
}

/* ---- ドロップ ---------------------------------------------------------- */

.dropveil {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(20, 22, 29, 0.86);
    border: 2px dashed var(--atlas);
    color: var(--atlas);
    font-size: 18px;
    font-weight: 600;
    pointer-events: none;
}

/* ---- プレイヤーが作るレイヤー ------------------------------------------ */

.layer {
    position: absolute;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ---- 狭い画面 ---------------------------------------------------------- */

/*
 * 横に 2 枚並べられなくなったら縦に積む。ページ全体は縦スクロールさせ、
 * 各パネルには画面の高さに対する取り分を決める（成り行きにすると、
 * レイヤーの多いファイルでキャンバスが数十 px まで潰れる）。
 */
@media (max-width: 900px) {
    body {
        overflow: auto;
        height: auto;
        min-height: 100%;
    }

    .workspace {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel {
        min-height: 0;
    }

    /*
     * flex: 1 のままだと flex-basis: 0 が効いて height が無視され、パネルの
     * 取り合いで絵の欄が数十 px まで潰れる。縦積みでは高さを自分で決める。
     */
    .viewport {
        flex: none;
        height: 46vh;
        padding: 8px;
    }

    .readout {
        height: auto;
        min-height: 60px;
        padding: 9px 14px;
    }

    /* 下部の読み取りは画面下に貼り付けておく。指で触れた結果がすぐ見える。 */
    .readout {
        position: sticky;
        bottom: 0;
        z-index: 5;
    }
}

@media (max-width: 620px) {
    .topbar {
        gap: 10px;
        padding: 10px 12px;
        flex-wrap: wrap;
    }

    /* 説明の添え書きは、狭い画面では場所のほうが惜しい。 */
    .brand-note,
    .drop-note,
    .sep {
        display: none;
    }

    /* 見出しの下に 1 行、横に流す。折り返すと 3 行になって絵の場所を食う。 */
    .loaders,
    .loaders .chips {
        flex-wrap: nowrap;
    }

    .loaders {
        overflow-x: auto;
        width: 100%;
        padding-bottom: 2px;
    }

    .btn,
    .label {
        flex: none;
        white-space: nowrap;
    }

    .panel-head,
    .panel-foot {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* 収まらないときは項目ごと折り返す（語の途中で折られると読めない）。 */
    .panel-head {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .viewport {
        height: 40vh;
    }

    /* 指で押せる大きさにする。 */
    .chip,
    .btn,
    .frame-chip {
        min-height: 32px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .ctl {
        width: 34px;
        height: 32px;
    }

    .ctl-name {
        max-width: 8ch;
    }

    .readout-body {
        gap: 16px;
    }

    .coord-sub {
        display: none;
    }
}

/* マウスを持たない端末では、乗せたときの見た目を出さない（触ると貼り付く）。 */
@media (hover: none) {

    .chip:hover,
    .btn:hover,
    .zoom-item:hover,
    .ctl:hover,
    .frame-chip:hover {
        border-color: var(--line);
    }
}