:root{
    --zoom: 1.0;
    --media-break: 900px;
    /*
    zoom 0.5
    34x44 tile-div goes to 17x40
    30x40 tile-img goes to 14x36
    zoom-tiles = 14/30 = 0.466 = ((34*0.5)-4)/(34-4)
    */
    --zoom-tiles: calc(((34 * var(--zoom)) - 4) / (34 - 4));
    --tile-img-width: calc(var(--zoom-tiles) * 30px);
    --tile-img-height: calc(var(--tile-img-width) * 4 / 3);
    --tile-width:calc(var(--tile-img-width) + 4px);
    --tile-height:calc(var(--tile-img-height) + 4px);

    /* ▼ カスタマイズ: シンプルな白黒基調（純粋なダークグレースケール） */
    --color-main:   hsl(0, 0%, 13%);    /* 全体背景: ダークグレー */
    --color-accent: hsl(0, 0%, 19%);    /* 表の背景 */
    --color-accent3: hsl(0, 0%, 22%);
    --color-accent2: hsl(0, 0%, 26%);
    --color-hover: rgba(255, 255, 255, 0.08);
    --color-text:   hsla(0, 0%, 95%, 0.90); /* ほぼ白 */
    /* ▲ */

    /* Analagous to main: -> green-yellow -> yellow */
    --color-bar-mortal: hsl(135, 62%, 50%); /* ← カスタマイズ: Mortal用 明るい緑バー */
    --color-bar-bc: hsl(197, 80%, 60%); /* ← カスタマイズ: BC用 明るい青バー */
    --color-bar-naga: hsl(280, 75%, 70%); /* ← カスタマイズ: NAGA用 明るい紫バー */
    --color-bar-hero: hsl(70, 60%, 48%);

    --color-shimo: hsl(0, 60%, 60%);
    --color-toimen: hsl(60, 60%, 60%);
    --color-kami: hsl(277, 70%, 60%);
    --color-shimo: hsl(0, 40%, 50%);
    --color-toimen: hsl(180, 40%, 50%);
    --color-kami: hsl(270, 40%, 50%);
    /* Discard tsumogiri background: Mix in some color and make less bright */
    /* The brightness affects both background and foreground, the color only affects the background */
    --color-tsumogiri: hsl(30, 100%, 92%);
    --brightness-tsumogiri: 75%;
    --color-tile-bg: hsl(0, 0%, 92%);
    --opacity-called: 0.25;
}
/* .big-win     { background: hsl(120, 60%, 24%); }
.medium-win  { background: hsl(120, 60%, 16%); } */
.medium-loss { background: hsl(60, 60%, 16%); }
.big-loss    { background: hsl(30, 60%, 16%); }
body, .modal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", sans-serif;
    max-width: 1100px;
    margin: auto;
    color: var(--color-text);
    line-height: 1.5;
    background: var(--color-main);
}
body {
    margin-top: 12px;
}
.options-div {
    display:grid;
    gap:10px;
}
.options-div > * {
    padding:10px;
}
.modal {
    position: relative;
    padding: 25px;
    max-height: 90%;
}
.close {
    position: absolute;
    right: 5px;
    top: 5px;
    background: var(--color-accent2);
}
#generic-modal .close {
    position: absolute;
    top: 10px;
    right: 10px;
}
a {
    color: var(--color-text);
}
.modal, button, select, option {
    background: var(--color-accent2);
    color: var(--color-text);
}
select, option {
    padding:5px;
    font-size: 15px;
}
h1{
    background: var(--color-accent);
    text-align: center;
}
.outer {
    margin-top:10px;
    display:flex;
    justify-content: space-around;
}
.grid-main{
    flex-shrink: 0;
    display: grid;
    width:calc(var(--zoom) * 655px);
    height:calc(var(--zoom) * 735px);
    grid-template-columns: calc(90/655*100%) calc(135/655*100%) calc(205/655*100%) calc(135/655*100%) calc(90/655*100%);
    grid-template-rows: calc(90/735*100%) calc(135/735*100%) calc(205/735*100%) calc(135/735*100%) calc((90 + 70)/735*100%);
    grid-template-areas: "ah-p2 ah-p2 ah-p2   ah-p2 ah-p1"
                         "ah-p3     . ad-p2   .     ah-p1"
                         "ah-p3 ad-p3 a-info  ad-p1 ah-p1"
                         "ah-p3 .     ad-p0   .     ah-p1"
                         "ah-p3 ah-p0 ah-p0   ah-p0 ah-p0";
}
.grid-hand {
    display: flex;
    flex-wrap: wrap;
    background: var(--color-accent);
    align-items: center;
    justify-content: space-between;
}
.grid-hand-p3 {
    grid-area: ah-p3;
    flex-direction: column;
}
.grid-hand-p2 {
    grid-area: ah-p2;
    flex-flow: row-reverse;
}
.grid-hand-p1 {
    grid-area: ah-p1;
    flex-direction: column-reverse;
}
.grid-hand-p0-container{
    grid-area: ah-p0;
    background: var(--color-accent);
    padding-top: calc(var(--zoom) * 10px);
}
.hand-closed-p3 {display: flex; flex-direction: column; }
.hand-closed-p2 {display: flex; flex-direction: row-reverse; }
.hand-closed-p1 {display: flex; flex-direction: column-reverse; }
.hand-closed-p0 {display: flex; flex-direction: row; }
.hand-calls-p3 {display: flex; flex-direction: column; }
.hand-calls-p2 {display: flex; flex-direction: row-reverse; }
.hand-calls-p1 {display: flex; flex-direction: column-reverse; }
.hand-calls-p0 {display: flex; flex-direction: row; }
.grid-hand-p0{
    padding-left: calc(var(--zoom) * 5px);
    padding-right: calc(var(--zoom) * 15px);
}
.grid-hand-p1{
    padding-top: calc(var(--zoom) * 15px);
    padding-bottom: calc(var(--zoom) * 5px);
    padding-left: calc(var(--zoom) * 20px);
}
.grid-hand-p2{
    padding-left: calc(var(--zoom) * 15px);
    padding-right: calc(var(--zoom) * 5px);
    padding-bottom: calc(var(--zoom) * 20px);
}
.grid-hand-p3{
    padding-bottom: calc(var(--zoom) * 15px);
    padding-top: calc(var(--zoom) * 5px);
    padding-right:calc(var(--zoom) * 20px);
}
.tileImg {
    width:calc(var(--tile-img-width));
    height:calc(var(--tile-img-height));
    background:white;
    filter:brightness(92%) saturate(80%);
    box-shadow: inset 0 0 calc(var(--zoom-tiles)*2px) black;
    padding: 2px; /* TODO: zoom this also, would simplify everything else! */
    border-radius: calc(var(--zoom-tiles)*4px);
}
.tileImgHighlight {
    box-shadow: inset 0 0 0 calc(var(--zoom-tiles)*3px) hsl(0, 70%, 50%);
}
.tsumogiri {
    background:var(--color-tsumogiri);
    filter:brightness(var(--brightness-tsumogiri)) saturate(80%);
}
.called {
    opacity:var(--opacity-called);
}
.tileDiv { width:var(--tile-width); height:var(--tile-height); }
.pov-p1 > div { width:var(--tile-height); height:var(--tile-width); }
.pov-p3 > div { width:var(--tile-height); height:var(--tile-width); }
.pov-p1 > div { width:var(--tile-height); height:var(--tile-width); }
.pov-p3 > div { width:var(--tile-height); height:var(--tile-width); }
.pov-p0 > div:has(.rotate) { width:var(--tile-height); height:var(--tile-height); }
.pov-p1 > div:has(.rotate) { width:var(--tile-height); height:var(--tile-height); }
.pov-p2 > div:has(.rotate) { width:var(--tile-height); height:var(--tile-height); }
.pov-p3 > div:has(.rotate) { width:var(--tile-height); height:var(--tile-height); }
.pov-p0 > .narrow { width:calc(0.5 * var(--tile-width)); }
.pov-p1 > .narrow { height:calc(0.5 * var(--tile-width)); }
.pov-p2 > .narrow { width:calc(0.5 * var(--tile-width)); }
.pov-p3 > .narrow { height:calc(0.5 * var(--tile-width)); }
/* .pov-p0 > div > img  no transform needed */
.pov-p0 > div > .rotate { transform-origin: bottom left; transform: rotate(90deg) translate(calc(-1 * var(--tile-width)), 0px); }
.pov-p0 > div > .float { transform-origin: bottom left; transform: rotate(90deg) translate(calc(-2 * var(--tile-width)), var(--tile-height)); }
.pov-p1 > div > img { transform-origin: top left; transform: rotate(-90deg) translate(calc(-1 * var(--tile-width)), 0px); }
.pov-p1 > div > .rotate { float: right; transform: translate(0px, 0px); }
.pov-p1 > div > .float { transform: translate(calc(-1 * var(--tile-width)), 0px);}
.pov-p2 > div > img { transform: rotate(180deg); }
.pov-p2 > div > .rotate { transform-origin: top left; transform: rotate(-90deg) translate(calc(-1 * var(--tile-width)), 0px); }
.pov-p2 > div > .float { transform-origin: top left; transform: rotate(-90deg) translate(calc(-2 * var(--tile-width)), 0px); }
.pov-p3 > div > img { float:right; transform-origin:top right; transform: rotate(90deg) translate(var(--tile-width), 0px); }
.pov-p3 > div > .rotate { float:left; transform: translate(0px, 0px); }
.pov-p3 > div > .float { transform: translate(var(--tile-width), calc(-1 * var(--tile-height))); }
.pov-p0 > div:has(.float) { width:0px; height: 0px;}
.pov-p1 > div:has(.float) { width:var(--tile-height); height: 0px;}
.pov-p2 > div:has(.float) { width:0px; height: 0px;}
.pov-p3 > div:has(.float) { width:0px; height: 0px;}
.pov-p0 > div:has(.last-discard) { transform: translate(6px, 6px); }
.pov-p1 > div:has(.last-discard) { transform: translate(6px, -6px); }
.pov-p2 > div:has(.last-discard) { transform: translate(-6px, -6px); }
.pov-p3 > div:has(.last-discard) { transform: translate(-6px, 6px); }

.grid-discard{
    display:flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.grid-discard-p3 {
    grid-area: ad-p3;
    height:calc(var(--zoom) * 360px);
    flex-flow: column wrap-reverse;
}
.grid-discard-p2 {
    grid-area: ad-p2;
    width:calc(var(--zoom) * 360px);
    justify-self:end;
    flex-flow: row-reverse wrap-reverse;
}
.grid-discard-p1 {
    grid-area: ad-p1;
    height:calc(var(--zoom) * 360px);
    align-self: end;
    flex-flow: column-reverse wrap;
}
.grid-discard-p0 {
    grid-area: ad-p0;
    width:calc(var(--zoom) * 360px);
}
.grid-info {
    width: calc(var(--zoom) * 200px);
    height: calc(var(--zoom) * 200px);
    grid-area: a-info;
    display: grid;
    border: 1px solid black;
    margin: auto;
    grid-template-columns: 15% 3% 65% 2% 15%;
    grid-template-rows: repeat(5, 1fr);
    grid-template-areas:
      "ai-p3 ai-p2 ai-p2   ai-p2 ai-p2"
      "ai-p3 .    ai-round   .     ai-p1"
      "ai-p3 .    ai-tiles   .     ai-p1"
      "ai-p3 .    ai-doras   .     ai-p1"
      "ai-p0 ai-p0 ai-p0   ai-p0 ai-p1";
    background: var(--color-accent);
}
.info-round {
    grid-area: ai-round;
    font-size: 17px; /* ← カスタマイズ: 局名「東1局」のサイズ */
}
.info-tiles-left {
    grid-area: ai-tiles;
    margin:auto;
    text-align:center;
}
/* ▼ カスタマイズ: 中央の数値(点数/残り枚数/本場・供託の数)を固定幅フォントで読みやすく。
   漢字(東南西北/局)はCJKフォントにフォールバックするので数字だけ等幅になる */
.gi-p0, .gi-p1, .gi-p2, .gi-p3, .info-tiles-left, .info-round {
    font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-variant-numeric: tabular-nums;
}
/* ▲ */
/* ▼ カスタマイズ: 他家テンパイ確率の円グラフ(ドーナツ)。縦書き席でも円は正立させる */
.gi-pie {
    display: inline-block;
    vertical-align: middle;
    writing-mode: horizontal-tb;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    margin-left: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); /* 縁取りで円を見やすく */
}
/* ▼ カスタマイズ: ボタンのショートカットキー表記チップ */
.controls button .key-chip {
    display: inline-block;
    margin-left: 5px;
    padding: 0 4px;
    font-size: 0.72em;
    line-height: 1.5;
    opacity: 0.6;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    vertical-align: middle;
    white-space: nowrap;
}
/* 設定モーダル内のショートカットキー一覧 */
.kbd-help {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.kbd-help-title {
    font-size: 12px;
    font-weight: 700;
    color: #ddd;
    margin-bottom: 4px;
}
.kbd-help-table {
    font-size: 12px;
    color: #ccc;
    border-collapse: collapse;
}
.kbd-help-table td {
    padding: 2px 8px 2px 0;
    vertical-align: top;
    white-space: nowrap;
}
.kbd-help-table td:first-child {
    font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
    color: #fff;
}
/* ▲ */
/* ▲ */
.info-doras {
    grid-area: ai-doras;
    display:flex;
    margin:auto;
}
.gi-p0-outer, .gi-p1-outer, .gi-p2-outer, .gi-p3-outer {
    display: flex;
    justify-content: space-between;
}
.gi-p0-outer {
    grid-area: ai-p0;
    margin: auto calc(var(--zoom) * 10px);
}
.gi-p1-outer {
    grid-area: ai-p1;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    transform: rotate(180deg);
    margin: calc(var(--zoom) * 10px) auto;
}
.gi-p2-outer {
    grid-area: ai-p2;
    transform: rotate(180deg);
    margin: auto calc(var(--zoom) * 10px);
}
.gi-p3-outer {
    grid-area: ai-p3;
    writing-mode: vertical-rl;
    text-orientation: sideways;
    margin: calc(var(--zoom) * 10px) auto;
}
/* ▼ カスタマイズ: NAGAテンパイ%バッジ。絶対配置で点数レイアウトに影響させない＋席の回転を打ち消して正向き */
.gi-p0, .gi-p1, .gi-p2, .gi-p3 { position: relative; }
/*   右(p1)・上(p2)は親が rotate(180deg) なので180度戻す。各席で点数に被らない位置へ微調整（中央寄り） */
.gi-p1 .naga-tp-badge { transform: rotate(180deg) translateX(calc(var(--zoom) * -26px)); }
.gi-p2 .naga-tp-badge { transform: rotate(180deg) translateX(calc(var(--zoom) * -72px)); }
.gi-p3 .naga-tp-badge { transform: translateX(calc(var(--zoom) * 28px)); }
/* ▲ */
.info-doras > * > * {
    width:calc(var(--tile-img-width) * 0.58);
    height:calc(var(--tile-img-height) * 0.58);
}
.info-doras > * {
    width:calc(var(--tile-img-width) * 0.58 + 4px);
    height:calc(var(--tile-img-height) * 0.58 + 4px);
}
.discard-bars {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: calc(var(--zoom-tiles) * 50px) 0;
}
.sidebar {
    margin:10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 10px;
}
.opt-info table {
    width: 220px;
    margin:10px;
    background:var(--color-accent);
}
.opt-info table .tileImg {
    width:calc(var(--tile-img-width) * 0.50);
    height:calc(var(--tile-img-height) * 0.50);
    margin:0px;
}
.controls {
    display:grid;
    grid-template-columns: repeat(2, calc(var(--zoom)*120px));
    padding:10px;
    background:var(--color-accent);
}
.controls > * {
    margin:2px;
    padding:12px;
    background: var(--color-accent2);
    color:var(--color-text);
    border-color:black;
    border-width:2px;
}

.info-round {
    background: var(--color-accent2);
    color:var(--color-text);
    border-style:outset;
    border-color:black;
    border-width:2px;
}
.modal::backdrop {
    background: rgb(0 0 0 / .3);
}
/* ▼ カスタマイズ: カルーセルで ←→/スクロール で通過する2つのポップアップ
   （サマリー / 局結果ウインドウ）は、背景の暗転(backdrop)を無くす。
   通過のたびに背景が一瞬暗転する「パッと点滅」を防ぐため。これらのモーダルは
   自身が不透明背景(var(--color-accent)/accent2)なので、暗転は不要。 */
#summary-modal::backdrop,
.info-this-round-modal::backdrop {
    background: transparent;
}
/* ▲ */

/* ▼ カスタマイズ: 局結果モーダル内の「王牌イメージ」
   （上段=ドラ表示牌 / 下段=裏ドラ表示牌。盤面の王牌はモーダルの裏に隠れるため、ここに出す） */
.itr-wall {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 6px 0 2px;
}
/* ▼ カスタマイズ: 役表示とドラ(王牌)の間に少しスペース（> *(margin:2px)より特異度を上げる） */
.info-this-round-table > .itr-wall { margin-top: 12px; }
/* 役・点数の一覧: 2列グリッド(役名 / 飜数・点数)。役名が長くても数値が縦に揃う。 */
.itr-yaku-list {
    display: grid;
    grid-template-columns: auto auto; /* 1列目=役名(最長に合わせる) / 2列目=飜数・点数 */
    column-gap: 1.4em;
    row-gap: 1px;
    align-items: baseline;
    justify-content: start;
    width: fit-content;
}
.itr-yaku { display: contents; } /* 役名/数値の2spanを親グリッドのセルとして並べる */
.itr-yaku-nm {
    min-width: 4.7em; /* 役名が極端に短い時の最小幅 */
}
.itr-yaku > span:last-child { text-align: right; } /* 飜数・点数は右揃え(飜/点の右端を揃える) */
.itr-yaku-full { grid-column: 1 / -1; } /* 点数行(オール等)は全幅で表示 */
/* ▲ */
.itr-wall-row {
    display: flex;
    gap: 3px;
    justify-content: center;
}
.itr-wall-row .tileDiv {
    width: 28px;
    height: 38px;
}
.itr-wall-row .tileImg {
    width: 28px;
    height: 38px;
    padding: 1px;
    border-radius: 3px;
}
/* ▲ */

/* ▼ カスタマイズ: 解析画面(推奨度表)・局結果・サマリーの数値を等幅フォントに統一。
   等幅フォントは数字に効き、日本語はCJKフォントへフォールバックするので「数字だけ」揃う。 */
.opt-info table,
.info-this-round-table,
.summary-table {
    font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-variant-numeric: tabular-nums;
}
/* ▲ */

/* ▼ カスタマイズ: 局結果モーダル内の「本場・供託」表示 */
.itr-sticks {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    opacity: 0.9;
    margin: 5px 0 3px;
}
/* ▲ */
.info-this-round-modal {
    background: var(--color-accent);
    border-color: var(--color-accent2);
    border-width: 5px;
    border-style:outset;
}
table, th, td {
    white-space: nowrap;
    border-collapse: collapse;
}
#about-modal td {
    border: 1px solid var(--color-text);
    padding:0.4rem;
}
.info-round-table table,
.info-round-table th,
.info-round-table td {
    text-align: right;
    border: 1px solid var(--color-text);
    padding: 0.4rem;
    background: var(--color-accent);
}
.info-this-round-table table,
.info-this-round-table th,
.info-this-round-table td {
    text-align: right;
    border: 1px solid var(--color-text);
    padding: 0.4rem;
    background: var(--color-accent2);
}
.hover-rows tr:hover td,
.info-round-table tr:hover td {
    background:var(--color-hover);
}
/* ▼ カスタマイズ: 局終了ウインドウ 得点(持ち点)・収支のNAGA風表示 */
.info-this-round-table .tr-name { text-align: left; }
.info-this-round-table .tr-score,
.info-this-round-table .tr-delta {
    font-family: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-variant-numeric: tabular-nums;
}
.info-this-round-table .tr-delta.plus  { color: hsl(130, 60%, 55%); }
.info-this-round-table .tr-delta.minus { color: hsl(0, 75%, 64%); }
/* ▲ */
.info-this-round-table > * {
    margin: 2px;
    text-wrap: nowrap;
}
.generic-modal-body * {
    margin: 2px;
}
.generic-modal-body .tileImg {
    width:calc(var(--tile-img-width) * 0.50);
    height:calc(var(--tile-img-height) * 0.50);
    margin:0px;
}
.generic-modal-body .tileDiv {
    width:calc(var(--tile-img-width) * 0.50 + 2px);
    height:calc(var(--tile-img-height) * 0.50 + 2px);
    margin:0px;
}
.generic-modal-body table {
    background: var(--color-accent);
    padding:5px;
}
.generic-modal-body td {
    padding: 4px;
    text-align: right;
}
.wider-table td {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.controls > *:hover {
    background:var(--color-hover);
}
button:hover, select:hover {
    background:var(--color-hover);
}
.killer-call-div {
    display:grid;
}
.killer-call-bars {
    background: var(--color-accent3);
    padding: 10px;
    width: calc(var(--zoom)*260px);
    height: calc(var(--zoom)*110px);
    margin: auto;
}
.killer-call-img {
    margin: auto;
    width:calc(var(--zoom)*128px);
    margin-top: 20px;
}
.about-metadata table {
    margin:auto;
    margin-top:20px;
}
.about-metadata td:first-child {
    text-align: right;
}
.about-metadata td:nth-child(2) {
    text-align: left;
}
#about-body-1 td:first-child {
    text-align:right;
}
#about-body-1 td:nth-child(2) {
    text-align:left;
}
code {
    background-color: var(--color-accent);
    padding: 3px;
}
/* ▼ カスタマイズ: タッチ端末だけでなく「狭い画面」でも発動するように条件を拡張 */
@media (pointer:coarse), (max-width: 900px) {
    /* タップ送り中のダブルタップ拡大・タップハイライト・文字選択・長押しメニューを無効化
       （盤面を連打すると文字選択になってしまうストレスの対策。ビューアは選択する文字が無いので全体に適用） */
    body, body * {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }
    /* ▼ カスタマイズ: 中央情報(局名・点数・残り枚数)の文字を盤面ズームに追従させる。
       固定px(17px等)のままだと小ズーム時に箱からあふれて「東2局→東2/局」と折返し、盤面が崩れる。
       スマホ/狭幅でのみ適用（デスクトップ zoom=1 は従来どおり）。 */
    .grid-info { font-size: calc(var(--zoom) * 21px) !important; }
    .grid-info .info-round { font-size: calc(var(--zoom) * 27px) !important; }
    /* テンパイ率の円グラフも盤面ズームに追従＋少し小さめに（固定19pxだと小盤面で中央枠からあふれて崩れる） */
    .grid-info .gi-pie {
        width: calc(var(--zoom) * 16px) !important;
        height: calc(var(--zoom) * 16px) !important;
        margin-left: calc(var(--zoom) * 2px) !important;
    }
    :root{
        font-size:x-small;
    }
    .outer {
        margin-top:12px;
    }
    @media (orientation:portrait) {
        /* ページ全体のスクロールを封じる（中身はぴったり1画面に収める設計。
           万一あふれた場合に備えて body 側に逃がす） */
        html { height: 100%; overflow: hidden; }
        body { height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; }
        .outer {
            flex-direction: column;
            align-items: center;
            margin-top: 4px;
        }
        /* ▼ 1画面に収めるため、スマホでは出さないもの */
        .killer-call-div { display: none; }                       /* カニ画像・鳴きバー */
        .opt-info { display: none !important; }                   /* 推奨度の数値表は出さない（バーだけで見る） */
        #ply-dec, #ply-inc, #ply-dec2, #ply-inc2 { display: none !important; } /* 手送りはタップで代替 */
        /* ▼ 操作列: 2列×5行＝各行がペア（前局/次局・各AIエラー◀▶・設定/サマリー）。
           横幅いっぱい・大きめで押しやすく。
           （860行付近の `.controls{...!important}` に勝つため、詳細度を上げて上書き） */
        .sidebar { margin: 2px 0 0 !important; gap: 4px !important; }
        .sidebar .controls {
            display: grid !important;
            /* 列数は表示AI数に応じてJSが --ctrl-cols を設定（3AI=6列/2AI=4列/1AI=2列）。
               AIをOFFにしてエラーボタンが消えても崩れないようにするため。 */
            grid-template-columns: repeat(var(--ctrl-cols, 6), 1fr) !important;
            grid-auto-rows: 38px !important;
            gap: 4px !important;
            width: 97vw !important;
            padding: 3px !important;
            margin-bottom: 6px !important;
            background: transparent !important;  /* 黒帯をやめて盤面に馴染ませる */
        }
        /* 前局/次局・設定/サマリーは横「半分(=AI数)」ぶん（＝各段に2個ずつ並ぶ） */
        .sidebar .controls > #round-dec,
        .sidebar .controls > #round-inc,
        .sidebar .controls > #options,
        .sidebar .controls > #show-summary {
            grid-column: span var(--ctrl-half, 3) !important;
        }
        /* AIエラー(◀NAGA / NAGA▶ …計6個)は1段にまとめ、文字を省いてアイコン＋矢印だけに */
        .sidebar .controls .err-label { display: none !important; }
        .sidebar .controls > * {
            margin: 0 !important;
            height: 100% !important;             /* セル全体に広げる */
            padding: 1px 4px !important;
            font-size: 12px !important;
            border-radius: 7px !important;       /* 角丸で押しやすい見た目 */
            border-width: 1px !important;
            gap: 3px;                            /* アイコンと矢印の間隔 */
            white-space: nowrap;
        }
    }
    button {
        font-size:x-small;
    }
    /* ▼ カスタマイズ: スマホでも3AI比較を表示する（上流は非表示だった）。
       盤面の下に「あなた/各AIの行動」＋「推奨度表」を画面幅に合わせて出す */
    /* ▼ 後方の基本ルール .sidebar{width:340px; align-self:flex-start}(PC用) に勝つよう .outer を足して詳細度UP */
    .outer .sidebar {
        align-self: stretch !important;     /* PC用の flex-start を上書き＝横幅いっぱいに伸ばす */
        align-content: center !important;
        width: auto !important;             /* PC用の固定340pxを解除 */
        max-width: 100vw;
        justify-content: center !important; /* 伸ばした全幅の中でボタン群を中央寄せ（右の空白をなくす） */
    }
    .opt-info {
        display: block;
        /* デスクトップ用の固定幅(320px)＋高さ制限付き内部スクロールを解除して素直に流す */
        width: auto !important;
        max-width: 100vw;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
    }
    .opt-info table,
    .opt-info > table.actual-summary,
    .opt-info > table.detail-recommendations {
        width: min(430px, 94vw) !important; /* 後勝ちの固定幅(320px)に勝つ */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* タップしやすいボタンサイズ */
    .controls button {
        min-height: 40px;
        padding: 6px 4px;
    }
    /* キーボード前提のUIはスマホでは隠す（specificityを本体定義に合わせる） */
    .controls button .key-chip { display: none; }
    .kbd-help { display: none; }
    /* モーダルが画面からはみ出さないように */
    dialog.modal {
        max-width: 96vw;
        box-sizing: border-box;
        overflow-x: auto;
    }
}

/* ▼▼ カスタマイズ: 上下2つの表の幅を揃える ▼▼ */
.opt-info > table.actual-summary,
.opt-info > table.detail-recommendations {
    width: 320px;
    table-layout: fixed;
    box-sizing: border-box;
    margin: 0 0 10px 0 !important; /* 左右マージンを0にして controls と左右位置を揃える */
    border-collapse: separate; /* 赤枠の角丸を効かせるため(collapseだとセルのborder-radiusが無効) */
    border-spacing: 0;
}
/* セル内の麻雀牌と文字を縦中央に揃える（微調整で少し上に）+ 行間を詰める */
.opt-info > table.actual-summary td,
.opt-info > table.detail-recommendations td {
    vertical-align: middle;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}
.opt-info > table.actual-summary td .tileImg,
.opt-info > table.detail-recommendations td .tileImg {
    vertical-align: middle;
    transform: translateY(-2px);
}
/* ▼ カスタマイズ: 操作ラベル(打/リーチ等)。幅は各表の最長ラベルに合わせてJSで設定。
   全部「打」なら詰まり、リーチ混在のときだけ牌を縦に揃える */
.opt-info .act-label {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px; /* ラベルと牌の最小間隔 */
}
/* ▲ */
/* 上の表（actual-summary）の列幅：ラベル / 行動。1列目はやや右に寄せる（左の無駄は出しすぎない） */
.opt-info > table.actual-summary td:nth-child(1) { width: 28%; text-align: center; } /* あなた/各AIアイコンを少し右へ */
.opt-info > table.actual-summary td:nth-child(2) { width: 72%; }
/* 各AIの打牌行: 麻雀牌が出る時/出ない時（スルー等）で行の高さが変わらないよう固定。
   アイコン+下バーの縦チップ(約30px)に合わせて全行を揃える。td は content-box なので
   height + 上下padding(3+3) が行の高さ。中身は vertical-align:middle で中央寄せ。 */
.opt-info > table.actual-summary td { height: 30px; }
/* 下の表（detail-recommendations）の列幅：1列目(操作)だけ固定し、
   AI列(NAGA/Mortal/Bigcoach)は本数に応じて残り幅を自動で均等配分する。
   ※ 固定幅を3列ぶん指定すると、NAGAを足して4列になったとき
     table-layout:fixed では最後の列(Bigcoach)が0幅で消えてしまうため。 */
.opt-info > table.detail-recommendations td:nth-child(1) { width: 22%; }
/* ▲▲ */

/* ▼▼ カスタマイズ: 推奨度表の数値列を右寄せ＆小数点位置を揃える ▼▼ */
table.detail-recommendations td:nth-child(n+2) {
    text-align: right;
    font-variant-numeric: tabular-nums; /* 数字を等幅にして小数点を揃える */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* 推奨度の数値は固定幅フォント */
    padding-right: 6px;
    padding-left: 0;
}
table.detail-recommendations th:nth-child(n+2),
table.detail-recommendations tr:first-child td:nth-child(n+2) {
    text-align: right; /* 見出しのAIアイコンを数値（右寄せ）に合わせて右へ */
    padding-right: 12px;
}
/* プレイヤーが実際に選んだ行を赤枠で囲む */
table.detail-recommendations tr.player-choice-row td {
    box-shadow: inset 0 1px 0 0 #ef4444, inset 0 -1px 0 0 #ef4444;
}
table.detail-recommendations tr.player-choice-row td:first-child {
    box-shadow: inset 1px 1px 0 0 #ef4444, inset 0 -1px 0 0 #ef4444;
    border-radius: 5px 0 0 5px; /* 赤枠の左側を少し角丸に */
}
table.detail-recommendations tr.player-choice-row td:last-child {
    box-shadow: inset -1px 1px 0 0 #ef4444, inset 0 -1px 0 0 #ef4444;
    border-radius: 0 5px 5px 0; /* 赤枠の右側を少し角丸に */
}

/* 悪手判定（推奨度 < 5%）— 該当AIの数値セルにマーク */
table.detail-recommendations .bad-move-cell {
    display: inline-block;
    color: #ef4444;
    font-weight: 700;
}

/* 各AIの最有力候補をハイライト */
table.detail-recommendations .top-pick {
    font-weight: 700;
    border-radius: 3px;
    /* 右に少しだけハイライト枠を広げつつ、テキストの右端位置は変えない
       （margin-right の負値で span 位置を右にずらし、padding-right で内側に余白を作る） */
    padding: 1px 4px 1px 8px;
    margin-right: -4px;
}
table.detail-recommendations .top-pick-mortal {
    color: #15803d;
    background: #d1fae5;
}
table.detail-recommendations .top-pick-bc {
    color: #0369a1;
    background: #e0f2fe;
}
table.detail-recommendations .top-pick-naga {
    color: #7e22ce;
    background: #f3e8ff;
}
/* ヘッダー行(AI名+▼)は折り返さず、4列でも収まるよう少し小さめに */
table.detail-recommendations tr:first-child td,
table.detail-recommendations th {
    white-space: nowrap;
    font-size: 12px;
}
/* ソート可能なヘッダー */
table.detail-recommendations .sort-header {
    cursor: pointer;
    user-select: none;
    display: inline-block;
    padding: 2px 0;
    margin-right: 0; /* ▼ がセル外にはみ出て切れないよう負マージンを廃止 */
}
/* 並び替え中の▼は、アイコンの右端位置が▼有無でズレないよう幅を相殺して配置 */
table.detail-recommendations .sort-header .sort-arrow {
    font-size: 9px;
    margin-left: 1px;
    margin-right: -9px;
    vertical-align: middle;
}
table.detail-recommendations .sort-header:hover {
    text-decoration: underline;
}
table.detail-recommendations .sort-header.sort-active {
    font-weight: 600;
}
/* ソート列のテキスト色を各AIのテーマカラーに合わせる（ボタンと同じ明るい色） */
table.detail-recommendations .sort-header.sort-active.sort-key-mortal {
    color: hsl(140, 70%, 62%); /* Mortal: 明るい緑（ボタンと同じ） */
}
table.detail-recommendations .sort-header.sort-active.sort-key-bigcoach {
    color: hsl(195, 88%, 70%); /* Bigcoach: 明るい水色（ボタンと同じ） */
}
table.detail-recommendations .sort-header.sort-active.sort-key-naga {
    color: hsl(280, 85%, 80%); /* NAGA: 明るい紫 */
}

/* カニの画像 + その上のコールアドバイス表示エリアを丸ごと非表示 */
.killer-call-div {
    display: none !important;
}

/* sidebar が麻雀盤の高さに引き伸ばされるのを止める + 横幅も固定して中身に依存しない */
.sidebar {
    align-self: flex-start !important;
    align-content: flex-start !important;
    width: 340px !important;          /* 320px(コントロール/表) + 余白 */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;             /* 上部マージンを削って手牌の高さに合わせる */
}

/* 麻雀盤(.outer) と sidebar の隙間を小さく + 全体を中央寄せ */
.outer {
    justify-content: center !important;
    gap: 16px !important;
}

/* opt-info: 画面の高さに収まる高さにする（ページ全体がスクロールしないように）。
   中身(推奨度表)が多い場合はこの枠内だけスクロールする。 */
.opt-info {
    width: 320px;
    height: calc(100vh - 360px); /* 上のコントロール等の分を引いてビューア内に収める */
    max-height: 620px;           /* 大画面でも広がりすぎないよう上限 */
    min-height: 240px;           /* 低い画面でも最低限の表示領域は確保 */
    overflow-y: auto;            /* 中身が多い場合のみスクロール */
    box-sizing: border-box;
}

/* コントロール（ボタン群）の幅を推奨度表(320px)と揃え、ズームに依存せず固定 */
.controls {
    width: 320px !important;
    box-sizing: border-box;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: 44px !important; /* 各ボタン行の高さを完全固定 */
    padding: 6px !important;          /* 余白を最小に */
    gap: 0 !important;
    align-content: start !important;  /* 下の余白を作らない */
}
.controls > * {
    font-size: 13px !important;
    padding: 0 !important;
    margin: 2px !important;
    height: 40px !important;
    line-height: 1 !important;
    white-space: nowrap;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
/* ヘルプボタンを確実に非表示（.controls > * の display:flex !important を上書き） */
.controls > #about {
    display: none !important;
}
/* AI別のエラーボタンに色を付ける */
.controls > .ai-mortal-btn {
    color: hsl(140, 70%, 62%) !important; /* 黄色背景に映える明るめの緑 */
}
.controls > .ai-bc-btn {
    color: hsl(195, 88%, 70%) !important; /* 水色 */
}
.controls > .ai-naga-btn {
    color: hsl(280, 85%, 80%) !important; /* 紫 */
}
/* 該当AIのデータが無い場合、エラーボタンを非活性化 */
.controls > .ai-mortal-btn:disabled,
.controls > .ai-bc-btn:disabled,
.controls > .ai-naga-btn:disabled {
    color: #6b7280 !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* 全モーダルの右上「×」閉じるボタンを非表示（クリック or キー入力で閉じれる） */
dialog .close {
    display: none !important;
}

/* 全 dialog の枠を細枠に統一（太い outset / デフォルトの太枠を上書き） */
dialog.modal {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--color-accent2) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ▼ カスタマイズ: 凡例は廃止。代わりに各AIの打牌欄(推奨度表のヘッダー/サマリー行)で
   「アイコンの下にバー色の小さな帯」を縦並びで表示し、凡例の役割を兼ねる */
.ai-icon-bar {
    display: inline-flex;
    flex-direction: row;       /* サマリー: チップ(アイコン+下バー) + 名前 を横並び */
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}
.ai-icon-bar-chip {
    display: inline-flex;
    flex-direction: column;    /* アイコン(上) + バー色(下) を縦に並べる */
    align-items: center;
    gap: 2px;
    vertical-align: middle;
}
.ai-icon-bar-chip .ai-icon-inline {
    margin-right: 0;           /* 縦並びなので右マージン不要 */
}
.ai-icon-bar-swatch {
    display: block;
    width: 20px;               /* アイコンの下の横バー（牌の下に出る推奨度バーと同じ色）*/
    height: 4px;
    border-radius: 2px;
}
.ai-icon-bar-name {
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;       /* チップの右に出すAI名（NAGA / Mortal / Bigcoach）*/
}
/* ▲ */
/* ボタン・表など小さい場所用のインラインAIアイコン */
.ai-icon-inline {
    width: 16px;
    height: 16px;
    object-fit: contain;
    background: #fff;
    border: 1.5px solid #ccc;  /* 枠色は各AIのバー色を inline で指定 */
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
    box-sizing: border-box;
}
/* ▲ */

/* 局終了モーダル — 位置指定は JS が行うので、ここでは見た目のみ */
dialog.info-this-round-modal[open] {
    width: fit-content !important;
    height: fit-content !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    /* position / inset / margin / transform はあえて指定せず、JSで設定する */
}
/* 元の太い outset 枠を細枠に上書き（個別プロパティで確実に） */
dialog.modal.info-this-round-modal {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--color-accent2) !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 12px !important; /* 元 25px のパディングも縮小 */
}

/* 対局サマリーモーダルを画面中央に固定 */
dialog#summary-modal[open] {
    position: fixed !important;
    inset: 0 !important;
    margin: auto !important;
    width: fit-content !important;
    height: fit-content !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 18px 20px 16px !important; /* 余白を詰めてテーブルに寄せる（基準25px→18px） */
}
/* 他のモーダルとフォントを揃える（dialog.modal の inherit に任せる） */
#summary-modal h2 {
    margin: 0 0 8px;
    text-align: center;
    /* font-size はモーダル他のh2 と同等のサイズ */
}
#summary-modal .summary-table {
    margin: 6px auto 4px;
    border-collapse: collapse;
    width: 100%; /* モーダル幅いっぱい＝2つの表の左右端を揃える（fit-contentの最大幅に追従） */
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.22);
}
#summary-modal .summary-table th,
#summary-modal .summary-table td {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    white-space: nowrap;
}
#summary-modal .summary-table thead th {
    background: rgba(255, 255, 255, 0.10);
    font-weight: 700;
    text-align: center;
}
#summary-modal .summary-table tbody tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.045);
}
#summary-modal .summary-table .col-mortal { color: hsl(140, 70%, 62%); }
#summary-modal .summary-table .col-bc { color: hsl(195, 88%, 70%); }
#summary-modal .summary-table .col-naga { color: hsl(280, 85%, 80%); }
#summary-modal .summary-table td.label { color: #cfcfcf; text-align: left; }
#summary-modal .summary-table td.val {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* 数値は固定幅 */
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
/* あなたの行（最終結果）を強調（ゼブラより後に置いて上書き）*/
#summary-modal .summary-table tbody tr.hero-row td {
    background: rgba(96, 165, 250, 0.16);
    font-weight: 700;
}
/* セクション見出し（最終結果 / AI評価） */
#summary-modal .summary-section {
    margin: 14px 0 3px;
    font-size: 13px;
    font-weight: 700;
    color: #e5e5e5;
    text-align: center;
    letter-spacing: 0.04em;
}
#summary-modal .summary-section:first-of-type { margin-top: 2px; }
#summary-modal .summary-note {
    color: #aaa;
    text-align: center;
    margin: 8px 0 0;
    font-size: 12px;
}
/* ▲▲ カスタマイズ ここまで ▲▲ */