@font-face{font-family:Oswald;src:url(../../r01/assets/Oswald-Medium.ttf);font-weight:500}
@font-face{font-family:Orbitron;src:url(../../r01/assets/Orbitron-Bold.ttf);font-weight:700}
@font-face{font-family:Zen;src:url(../../r01/assets/ZenKakuGothicNew-Regular.ttf);font-weight:400}
@font-face{font-family:Zen;src:url(../../r01/assets/ZenKakuGothicNew-Bold.ttf);font-weight:700}
:root{color-scheme:dark;--u:.75;--cut:6px;--line:#2e4a59;--ink:#e0ebf5;--surface:#091b2b;--gold:#e8c356;--cyan:#4fc2e0;--focus:#fff1ae;--muted:#8c9eab;--on:#5dd97a;--stroke:1.25px;--selected-stroke:2.5px;--control-height:max(44px,calc(var(--control-base,72px) * var(--u)));--pulse-time:3.6s;--pulse-min:.82;--poly:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut))}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#050e17;color:var(--ink);font:400 16px/1.5 Zen,sans-serif}button,input{font:inherit}button{cursor:pointer}button,input{-webkit-tap-highlight-color:transparent}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
/* 背景はUIの共通倍率の外側。ブラウザバーで可視高が変わっても可視領域全体を埋め、
   周囲に帯や欠けを作らない（トム 2026-09-18）。fixed + 100dvh で動的ビューポートに追従する。 */
.scene,.shade{position:fixed;inset:0;width:100vw;height:100dvh;min-height:100%;pointer-events:none}
.screen-frame{position:absolute;pointer-events:none}.scene{background:url(../../r01/assets/background-concept.png) center/cover;opacity:.8}.shade{inset:0;background:linear-gradient(180deg,#040f1bcc,transparent 42%,#040f1b44 65%,#040f1bdd),radial-gradient(ellipse at center,transparent,#040f1b66)}.screen-frame{inset:calc(12px * var(--u));border:1px solid #4fc2e021;clip-path:polygon(3% 0,97% 0,100% 6%,100% 94%,97% 100%,3% 100%,0 94%,0 6%)}
#screen{position:relative;height:100%;display:flex;flex-direction:column;min-height:0;padding:max(24px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left))}
.screen-heading{position:relative;padding-left:calc(34px * var(--u));flex-shrink:0}.screen-heading::before{content:"";position:absolute;inset:3px auto 0 0;width:2px;background:linear-gradient(var(--cyan),transparent)}.screen-heading h1{font:500 calc(var(--type-screen) * var(--u))/1.1 Oswald;letter-spacing:.025em;margin:0 0 calc(12px * var(--u))}.screen-heading p{font-size:max(14px,calc(24px * var(--u)));letter-spacing:.08em;color:var(--muted);margin:0}
.framed{--edge:var(--line);--frame-width:var(--stroke);position:relative;isolation:isolate;border:0;clip-path:var(--poly);background:#091b2beb;color:var(--ink)}
.frame-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}.frame-svg path{fill:none;stroke:var(--edge);stroke-width:var(--frame-width);stroke-linejoin:miter}
.ui-button,.ui-option{min-width:44px;min-height:44px;height:var(--control-height);font:500 max(20px,calc(var(--type-control) * var(--u)))/1.1 Oswald;letter-spacing:.02em;padding:8px max(14px,calc(24px * var(--u)));display:flex;align-items:center;justify-content:center;gap:16px}
.ui-button.primary,.ui-option[aria-pressed=true]{--edge:var(--gold);--frame-width:var(--selected-stroke);color:var(--gold);background:#152330}
:is(.ui-button,.ui-option):hover:not(:disabled),.ui-field:focus-within{--edge:var(--gold);--frame-width:var(--selected-stroke);background:#132a3a}
:is(.ui-button,.ui-option):focus-visible{--edge:var(--focus);--frame-width:var(--selected-stroke);outline:none}
:is(.ui-button,.ui-option):is(:hover,:focus-visible):not(:disabled)>.frame-svg path,.ui-field:focus-within>.frame-svg path{animation:border-breathe var(--pulse-time) ease-in-out infinite}
:is(.ui-button,.ui-option):active:not(:disabled){background:#24383f}.ui-button:disabled{--edge:#273c48;--frame-width:var(--stroke);background:#0b1b27;color:#667e8e}
.arrow-icon{width:12px;height:20px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.5}.ui-button .arrow-icon{margin-left:auto;color:var(--cyan)}.ui-button:is(.primary,:hover) .arrow-icon{color:var(--gold)}
.ui-field{padding:2px}.ui-field input{display:block;min-height:44px;height:var(--control-height);width:100%;background:none;border:0;outline:none;color:var(--ink);font:700 max(21px,calc(32px * var(--u)))/1.2 Orbitron,Zen,sans-serif;padding:8px 16px;text-align:center}
.ui-link{border:0;background:transparent;color:#9aacb9;min-height:44px;min-width:44px;padding:8px 12px;font:500 max(17px,calc(24px * var(--u)))/1.2 Oswald}.ui-link:hover,.ui-link:focus-visible{color:var(--gold)}
.ui-divider{position:relative;height:6px;flex-shrink:0;background:linear-gradient(#4fc2e099,#4fc2e099) left center/24px 2px no-repeat,repeating-linear-gradient(-50deg,transparent 0 3px,#82adbf80 3px 4px,transparent 4px 6px) 32px center/16px 5px no-repeat,linear-gradient(90deg,#4c788b99,#4c788b55) calc(100% - 6px) center/calc(100% - 64px) 1px no-repeat}
.ui-divider::after{content:"";position:absolute;right:1px;top:2px;width:6px;height:5px;border-top:1px solid #4c788b55;border-right:1px solid #4c788b55;transform:skewX(38deg)}
.segmented{display:flex;gap:8px;min-width:0;flex:1}.ui-option{flex:1;min-width:44px;font-size:max(18px,calc(28px * var(--u)));padding:6px 8px}
.range-wrap{min-height:44px;height:var(--control-height);display:flex;align-items:center;flex:1;min-width:0}.range-wrap input{width:100%;height:44px;margin:0;background:transparent;appearance:none;cursor:pointer}.range-wrap input::-webkit-slider-runnable-track{height:8px;background:linear-gradient(to right,var(--cyan) 0 var(--value),#233b4d var(--value) 100%)}.range-wrap input::-webkit-slider-thumb{appearance:none;width:18px;height:28px;margin-top:-10px;background:var(--ink);border:3px solid #0b1d2a;box-shadow:0 0 0 1px var(--cyan);clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}.range-wrap input:is(:hover,:focus-visible)::-webkit-slider-thumb{background:var(--gold)}
.brand-small{width:calc(245px * var(--u));max-height:calc(70px * var(--u));object-fit:contain}.screen-footer{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-shrink:0}.screen-footer>.ui-button{width:max(112px,calc(184px * var(--u)));font-size:max(19px,calc(27px * var(--u)))}
@keyframes border-breathe{0%,100%{opacity:var(--pulse-min)}50%{opacity:1}}
@media(max-width:500px){#screen{padding:16px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}.screen-heading{padding-left:16px}.screen-heading h1{font-size:44px;margin-bottom:6px}.screen-heading p{font-size:14px}.brand-small{width:139px;max-height:44px}}
@media(max-height:700px) and (orientation:portrait){#screen{padding-top:12px;padding-bottom:10px}.screen-heading h1{font-size:36px;margin-bottom:4px}}
@media(max-height:560px) and (orientation:landscape){#screen{padding:12px 22px}.screen-heading{padding-left:14px}.screen-heading h1{font-size:32px;margin-bottom:3px}.screen-heading p{font-size:13px}.brand-small{width:130px;max-height:38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.ui-panel-group{align-items:stretch}

/* 幅が 330px を下回るような狭い画面では、見出し（DIFFICULTY など長い1語）が
   右のモード表記に重なる（トム 2026-09-18 FB）。承認済みの 390px では 44px のまま、
   それより狭いときだけ幅に追従させる。折り返しではなく縮小で解決する。 */
@media(max-width:500px){.screen-heading h1{font-size:min(44px,11.3vw)}}

/* R04-06：新しい画面が「ぱっと出る」唐突さだけを和らげる短いフェード（トム案の範囲）。
   ・**空白そのものは先読み（screen.html の modulepreload / preload）で短くしてある。**
     これはその上の仕上げであって、これで不具合や読み込みを隠していない。
   ・待ち時間を足さない：`#screen` が中身を持った瞬間（`:not(:empty)` に切り替わる瞬間）に始まり、
     遅延は 0。JS も足していない。
   ・入力を塞がない：`pointer-events` は触らない。最初のフレームから押せる。
   ・`prefers-reduced-motion` では動かさない。
   ・大きな位置移動は足していない（不透明度だけ）。 */
@media (prefers-reduced-motion:no-preference){
 #screen:not(:empty){animation:sd-screen-in 140ms cubic-bezier(.2,.8,.2,1)}
}
@keyframes sd-screen-in{from{opacity:0}to{opacity:1}}

/* =====================================================================
   v1.6.1 SP縦 共通フッター（トム FB⑥ 2026-09-25）
   `.screen-footer` は r04（SETTING / RANKING / CONTROLLER）・r05（出撃フロー・
   RESULT）・r06（DUEL）が共有する実体で、MODE SELECT（r03 の `.footer`）と
   GALLERY（gallery.css）にも同じ契約を別ファイルへ置いてある。
   - SP縦だけロゴを出さず、フッターの背景を透過にする。
   - BACK / DUEL / 画面固有アクションは**固定のまま**、44px のヒット領域も維持。
   - 透明な帯が本文のタップを吸わないよう、フッター自身は当たり判定を持たない。
     中の操作要素（button / input / a / ロール付き要素）だけが受け取る。
   - FV（TOP）はフッターを持たないので対象外。明示的にも除外している。
   - PC / TB は対象外（幅500px以下の縦向きのみ）。
   ===================================================================== */
@media(max-width:500px) and (orientation:portrait){
 html:not([data-fv-surface=true]) .screen-footer{background:transparent;pointer-events:none;min-height:44px}
 html:not([data-fv-surface=true]) .screen-footer .brand-small{display:none}
 /* 当たり判定は**実際の操作要素だけ**。空のコンテナや状態表示は透明な壁にしない。 */
 html:not([data-fv-surface=true]) .screen-footer :is(button,input,a[href],[role=button]){pointer-events:auto}
}