/* ---- Shared DUEL dialog styling.
   Single source: r06/screen.html and r03/screen.html both link this file.

   LAYOUT / GEOMETRY  : DUEL_MODAL_SOURCE_SPEC.md + DUEL_MODAL_REFERENCE_TOKENS.json
                        (sourceCommit c2768ae). Unity logical units (u) are mapped
                        through --dm-u; the quick-touch (compact) pass is authored
                        in CSS px exactly as the tokens file's `units` note states.
   CONTROL DETAIL     : the current UI system (r04/system/foundation.css) -
                        .ui-button / .ui-option / .ui-field / .framed, Oswald,
                        --line / --gold / --focus edges. Per Tom's 2026-09-17 FB
                        the modal keeps the source LAYOUT but wears the NEW UI's
                        button, field and frame detail - no bespoke button skin.

   Scope: every rule is under .duel-dialog / .duel-dialog-panel except the
   .duel-field block, which parent screens (r06 top / stepper) also use and is
   therefore left exactly as it was. No global token is redefined here. ---- */

/* ---- parent-screen field grid (unchanged, not modal styling) ---- */
.duel-field{display:grid;grid-template-columns:minmax(110px,.5fr) minmax(0,1fr);align-items:center;gap:16px;min-width:0}
.duel-field>label,.duel-field>.eyebrow{font:500 18px/1.35 Oswald;color:var(--muted);overflow-wrap:anywhere}
.duel-field input{width:100%;min-width:0;min-height:52px;background:#061526;border:1px solid var(--line);color:var(--ink);font:500 24px/1.3 Oswald;padding:8px 14px}
.duel-field .segmented{min-width:0}.duel-field .segmented button{min-width:52px;min-height:48px}

/* ================= DUEL modal ================= */
.duel-dialog{
 /* normal-landscape pass: 1u -> 1px * --dm-u */
 --dm-u:.75;
 --dm-panel-w:calc(920px * var(--dm-u));
 --dm-border:calc(2px * var(--dm-u));
 --dm-pad-top:calc(52px * var(--dm-u));
 --dm-pad-x:calc(48px * var(--dm-u));
 --dm-title:calc(54px * var(--dm-u));
 --dm-title-h:calc(68px * var(--dm-u));
 --dm-body:calc(22px * var(--dm-u));
 --dm-body-w:calc(760px * var(--dm-u));
 --dm-gap:calc(24px * var(--dm-u));
 --dm-action-gap:calc(32px * var(--dm-u));
 --dm-action-w:calc(440px * var(--dm-u));
 --dm-action-h:max(44px,calc(72px * var(--dm-u)));
 --dm-action-font:max(20px,calc(30px * var(--dm-u)));
 --dm-pair-w:calc(320px * var(--dm-u));
 --dm-pair-gap:calc(12px * var(--dm-u));
 --dm-toggle-w:calc(440px * var(--dm-u));
 --dm-toggle-h:max(44px,calc(56px * var(--dm-u)));
 --dm-toggle-gap:calc(10px * var(--dm-u));
 --dm-toggle-font:max(18px,calc(28px * var(--dm-u)));
 --dm-input-w:calc(436px * var(--dm-u));
 --dm-input-h:max(44px,calc(71px * var(--dm-u)));
 --dm-input-font:max(21px,calc(32px * var(--dm-u)));
 /* BACK keeps the source's bottom-left anchor, but wears the screen footer's
    own BACK button detail so it reads as the same control as every FIXed screen. */
 --dm-back-w:max(112px,calc(184px * var(--dm-u)));
 --dm-back-h:max(44px,calc(68px * var(--dm-u)));
 --dm-back-font:max(19px,calc(27px * var(--dm-u)));
 --dm-back-left:calc(24px * var(--dm-u));
 --dm-back-bottom:calc(30px * var(--dm-u));
 /* panel fill / edge: DUEL_MODAL_REFERENCE_TOKENS.panel, converted from 0-1 rgba */
 --dm-fill:rgba(5,13,27,.94);
 --dm-edge:rgba(111,196,239,.8);

 background:none;border:0;padding:0;margin:auto;color:var(--ink);
 width:fit-content;max-width:none;max-height:100dvh;overflow:auto;
 scrollbar-width:thin;scrollbar-color:#42788b transparent;
}
.duel-dialog::backdrop{background:#020810db}

/* single (one primary action) vs pair (two or more): source title/body steps */
.duel-dialog-panel[data-dm-size=pair]{--dm-title:calc(50px * var(--dm-u));--dm-body:calc(25px * var(--dm-u))}

/* ---- panel ---- */
.duel-dialog .duel-dialog-panel{
 position:relative;box-sizing:border-box;
 width:var(--dm-panel-w);max-width:calc(100vw - 24px);
 --edge:var(--dm-edge);--frame-width:var(--dm-border);
 background:var(--dm-fill);color:var(--ink);
 padding:var(--dm-pad-top) var(--dm-pad-x) calc(var(--dm-back-bottom) + var(--dm-back-h) + var(--dm-gap));
 display:flex;flex-direction:column;align-items:center;gap:var(--dm-gap);
 text-align:center;
}
/* no BACK in this modal -> no reserved strip under the action row */
.duel-dialog .duel-dialog-panel:not(:has(.dm-back)){padding-bottom:calc(62px * var(--dm-u))}

/* ---- title: Orbitron Bold, centred, NO rule underneath ---- */
.duel-dialog .dm-title{
 margin:0;display:flex;align-items:center;justify-content:center;
 min-height:var(--dm-title-h);
 font:700 var(--dm-title)/1.1 Orbitron,sans-serif;
 letter-spacing:.02em;text-indent:.02em;color:#a5d6fb;
 overflow-wrap:anywhere;
}
/* ---- description / rules / error: Zen Regular, centred ---- */
.duel-dialog .dm-body{margin:0;max-width:var(--dm-body-w);font:400 var(--dm-body)/1.6 Zen,sans-serif;color:var(--ink);overflow-wrap:anywhere}
.duel-dialog .dm-error{margin:0;max-width:var(--dm-body-w);color:var(--gold);font:400 calc(var(--dm-body) * .92)/1.5 Zen,sans-serif}
.duel-dialog .rules{display:block;margin:0;padding:0 0 0 1.2em;text-align:left;max-width:var(--dm-body-w);font:400 calc(var(--dm-body) * .92)/1.75 Zen,sans-serif}
.duel-consent-check{display:flex;align-items:center;justify-content:center;gap:14px;min-height:44px;font:400 calc(var(--dm-body) * .92)/1.5 Zen,sans-serif}
/* チェック自体は28pxだが、押せる範囲は囲っている label（min-height:44px・本文全体）。*/
.duel-consent-check input{width:28px;height:28px;flex:0 0 28px;accent-color:var(--gold);cursor:pointer}
.duel-consent-check{cursor:pointer;padding:0 8px}

/* ---- primary action slot: .ui-button .framed from the UI system,
        sized and placed to the source's slot geometry ---- */
.duel-dialog .dm-actions{
 display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;
 width:100%;gap:var(--dm-pair-gap);
 margin-top:calc(var(--dm-action-gap) - var(--dm-gap));
}
.duel-dialog .dm-action{
 width:var(--dm-pair-w);max-width:100%;
 height:var(--dm-action-h);min-height:44px;
 padding:8px calc(18px * var(--dm-u));
 font-size:calc(var(--dm-action-font) * var(--dm-fit,1));
 justify-content:center;text-align:center;gap:0;
}
.duel-dialog-panel[data-dm-size=single] .dm-action,
.duel-dialog .dm-inline>.dm-action{width:var(--dm-action-w)}
/* actionTrackingPerEm from the source; --dm-track is written per label in
   duel-dialog.js (0em for the source's useTracking:false labels). The matching
   margin-left cancels the trailing letter-space so the label stays centred. */
.duel-dialog .dm-action>span{flex:0 0 auto;letter-spacing:var(--dm-track,0em);margin-left:var(--dm-track,0em);white-space:nowrap}
.duel-dialog .dm-inline{display:flex;justify-content:center;width:100%}

/* ---- ON / OFF row: .ui-option .framed, sized to toggle.* ---- */
.duel-dialog .dm-toggle{display:flex;justify-content:center;width:100%}
.duel-dialog .dm-toggle .segmented{flex:0 1 var(--dm-toggle-w);max-width:100%;min-width:0;gap:var(--dm-toggle-gap)}
.duel-dialog .dm-toggle .ui-option{height:var(--dm-toggle-h);min-height:44px;font-size:var(--dm-toggle-font)}

/* ---- input: .ui-field .framed, sized to input.* (no placeholder in source) ---- */
.duel-dialog .dm-input{width:var(--dm-input-w);max-width:100%;display:block}
.duel-dialog .dm-input input{height:var(--dm-input-h);min-height:44px;font-size:var(--dm-input-font)}

/* ---- BACK: independent, panel bottom-left ---- */
.duel-dialog .dm-back{
 position:absolute;left:var(--dm-back-left);bottom:var(--dm-back-bottom);
 width:var(--dm-back-w);height:var(--dm-back-h);min-height:44px;
 font-size:var(--dm-back-font);justify-content:center;gap:0;
}

/* C-3（訂正版 / Sol レビュー 2026-09-18）:
   foundation.css の .ui-button/.ui-option は
     font:500 max(20px,calc(var(--type-control) * var(--u)))/1.1 Oswald
   を宣言する。--type-control は CSS には無いが **JS が実行時に定義している**:
   r06/app.js（tokens.typography.control=36 → --type-control:36px）、r05/app.js、
   r04/system/catalogue.js。つまり「全画面で未定義」という以前の記載は誤りだった。
   不足するのは R03 入口だけで、r03/mode.js は r01 tokens.semantic
   （cyan/pink/gold/ink/muted/line/fill）しか設定せず --type-control を入れない。
   その入口では font ショートハンド全体が無効になり、モーダルのボタンが Oswald を
   受け取らない（R03で実際に再現）。
   ここでは共通トークンを変更せず、モーダル内だけ family/weight を明示して補完する。
   入口ごとの依存初期化の是正は Codex 判断。 */
.duel-dialog :is(.dm-action,.dm-back,.dm-toggle .ui-option){font-family:Oswald,sans-serif;font-weight:500;letter-spacing:.02em}
.duel-dialog .dm-input input{font-family:Orbitron,Zen,sans-serif;font-weight:700}

/* ================= compact / quick-touch pass (CSS px, per tokens file) ===== */
@media (max-width:700px),(max-height:560px){
 .duel-dialog{
  --dm-u:1;
  --dm-panel-w:min(calc(100vw - 24px),560px);
  --dm-border:1.8px;
  --dm-pad-top:20px;--dm-pad-x:16px;
  --dm-title:32px;--dm-title-h:44px;
  --dm-body:15px;--dm-body-w:100%;
  --dm-gap:12px;--dm-action-gap:12px;
  --dm-action-w:100%;--dm-action-h:50px;--dm-action-font:18px;
  --dm-pair-w:100%;--dm-pair-gap:12px;
  --dm-toggle-w:100%;--dm-toggle-h:44px;--dm-toggle-gap:10px;--dm-toggle-font:18px;
  --dm-input-w:100%;--dm-input-h:44px;--dm-input-font:22px;
  --dm-back-w:112px;--dm-back-h:44px;--dm-back-font:19px;--dm-back-left:18px;--dm-back-bottom:16px;
 }
 .duel-dialog-panel[data-dm-size=pair]{--dm-title:32px;--dm-body:15px}
 .duel-dialog .duel-dialog-panel:not(:has(.dm-back)){padding-bottom:24px}
 .duel-dialog .dm-actions{flex-direction:column;flex-wrap:nowrap}
 .duel-dialog .dm-action,.duel-dialog .dm-inline>.dm-action{width:100%}
}
/* short landscape (SP 844x390): height is the scarce axis, keep the pair on one row */
@media (max-height:560px) and (orientation:landscape){
 .duel-dialog{--dm-panel-w:min(calc(100vw - 24px),640px);--dm-pad-top:14px;--dm-gap:10px}
 .duel-dialog .dm-actions{flex-direction:row;flex-wrap:wrap}
 .duel-dialog .dm-action{width:calc(50% - 6px)}
 .duel-dialog-panel[data-dm-size=single] .dm-action,.duel-dialog .dm-inline>.dm-action{width:100%}
}