/* 16 手の認識を調整：見本 16 の見た目（2026-09-28）。仕組みは元の調整ページのまま、見た目と位置だけ変える。
   2026-11-06：16:9 の枠（--u）に収めて真ん中に置く。前は vw だけで組んでいたので、ふつうのブラウザの窓（縦が短い）だと
   下の「戻る」「完了」が画面の外に出て押せなかった。右の欄も、中がスクロールにならない大きさにした（見た目・画像・色は同じ） */
:root{--u:min(1vw,1.7778vh);--ox:calc((100vw - 100*var(--u))/2);--oy:calc((100vh - 56.25*var(--u))/2)}
html,body{background:#05070b url('./assets/ui/rules/bg.webp?v=1') center/cover no-repeat!important}
body::before{content:'';position:fixed;left:calc(var(--ox) + 1.8*var(--u));top:calc(var(--oy) + .5*var(--u));width:calc(18*var(--u));height:calc(8.5*var(--u));background:url('./assets/ui/home/logo.webp?v=1') center/contain no-repeat;z-index:6}
body::after{content:'';position:fixed;left:calc(var(--ox) + 28.1*var(--u));top:calc(var(--oy) + 2.4*var(--u));width:calc(43.1*var(--u));height:calc(8.1*var(--u));background:url('./assets/ui/calib/title.webp?v=1') center/contain no-repeat;z-index:6}
#wrap{left:calc(var(--ox) + 2.8*var(--u))!important;top:calc(var(--oy) + 11.8*var(--u))!important;right:auto!important;bottom:auto!important;width:calc(62.4*var(--u))!important;height:calc(31.2*var(--u))!important;overflow:hidden;border-radius:calc(.6*var(--u))}
#wrap::after{content:'';position:absolute;inset:0;pointer-events:none}
#frame16{position:fixed;left:calc(var(--ox) + 1.8*var(--u));top:calc(var(--oy) + 10.8*var(--u));width:calc(65.5*var(--u));height:calc(33.8*var(--u));background:url('./assets/ui/calib/frame.webp?v=1') center/100% 100% no-repeat;z-index:4;pointer-events:none}
#big{left:calc(var(--ox) + 2.8*var(--u))!important;right:auto!important;width:calc(62.4*var(--u));top:calc(var(--oy) + 11.8*var(--u))!important;bottom:auto!important;height:calc(31.2*var(--u))}
#panel{left:calc(var(--ox) + 68.8*var(--u))!important;right:auto!important;top:calc(var(--oy) + 10.8*var(--u))!important;width:calc(29.3*var(--u))!important;height:calc(33.8*var(--u))!important;max-height:none!important;padding:calc(2.2*var(--u)) calc(2.2*var(--u))!important;background:url('./assets/ui/calib/side.webp?v=1') center/100% 100% no-repeat!important;border:0!important;backdrop-filter:none!important;font-size:max(12px,calc(.9*var(--u)))}
#panel h1{display:none}
#panel .verdict{font-size:max(14px,calc(1.2*var(--u)))!important;padding:calc(.45*var(--u))!important;margin:calc(.5*var(--u)) 0 calc(.4*var(--u))}
#panel:not(.more) #verdict small{display:none}
#panel .row{font-size:max(12px,calc(.85*var(--u)));margin:calc(.25*var(--u)) 0}
#panel .grp{font-size:max(12px,calc(.8*var(--u)));margin:calc(.5*var(--u)) 0 calc(.15*var(--u));padding-top:calc(.35*var(--u))}
#panel .note,#panel .diag{font-size:max(12px,calc(.8*var(--u)));line-height:1.45}
#panel button{font-size:max(13px,calc(.95*var(--u)));padding:calc(.55*var(--u)) calc(.8*var(--u));margin-top:calc(.4*var(--u));border-radius:calc(.6*var(--u))}
#panel a.back{position:fixed;left:calc(var(--ox) + 21.2*var(--u));top:calc(var(--oy) + 46.3*var(--u));width:calc(25.4*var(--u));height:calc(6.3*var(--u));margin:0;padding:0;border:0;font-size:0;background:url('./assets/ui/calib/back.webp?v=1') center/contain no-repeat}
#panel #b3{position:fixed;left:calc(var(--ox) + 52*var(--u));top:calc(var(--oy) + 46*var(--u));width:calc(26.3*var(--u));height:calc(6.9*var(--u));margin:0;padding:0;border:0!important;font-size:0;background:url('./assets/ui/calib/done.webp?v=1') center/contain no-repeat!important}
#panel #b3:disabled{filter:grayscale(1) brightness(.6);opacity:1}
/* 分かりやすい表示：大きなチェック3つと、いまやること。細かい数値は「くわしい数値を見る」で開く。
   2026-11-06：前は下の行の決まりが強すぎて、「くわしい数値を見る」を押しても数値が出なかった（:not が多いと強さが上がる）。.more でない時だけ隠す */
#panel:not(.more)>*:not(#easy16):not(#b1):not(#b3):not(#msg):not(a.back):not(#verdict){display:none}
#panel.more>*{display:block}#panel.more .row{display:flex}
#panel.more #e16list,#panel.more #e16step,#panel.more>p.note{display:none}
#panel #msg{font-size:max(13px,calc(.95*var(--u)));line-height:1.35;margin-top:calc(.4*var(--u))}
#panel #msg:empty{display:none}
#e16list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:calc(.5*var(--u))}
#e16list li{display:flex;align-items:center;gap:calc(.9*var(--u));padding:calc(.75*var(--u)) calc(1*var(--u));border-radius:calc(.5*var(--u));background:#0b0f15;box-shadow:inset 0 0 0 calc(.1*var(--u)) #3a434d;font-size:max(15px,calc(1.6*var(--u)));line-height:1.2;font-weight:900;color:#f5f3ea}
#e16list li i{width:calc(1.9*var(--u));height:calc(1.9*var(--u));flex:none;border-radius:50%;background:#555}
#e16list li.ok i{background:#2ecc55;box-shadow:0 0 calc(.8*var(--u)) #2ecc55}
#e16list li.warn i{background:#f5c24a}#e16list li.bad i{background:#ff5a4a}
#e16list li.wait{color:#aab5bf}
#e16step{margin:calc(.7*var(--u)) 0 calc(.35*var(--u));font-size:max(14px,calc(1.3*var(--u)));font-weight:900;color:#8fe6ff;line-height:1.35}
#e16more{font-size:max(12px,calc(.85*var(--u)))!important;padding:calc(.3*var(--u))!important;margin-top:0!important;background:none!important;border:0!important;color:#aab5bf!important;text-decoration:underline}
#panel #verdict{font-size:max(14px,calc(1.2*var(--u)))!important}
#panel #b1{font-size:max(14px,calc(1.3*var(--u)))!important;padding:calc(.65*var(--u))!important;border-color:#4fd0ff!important;background:#0f4a6e!important}
/* 2026-11-06：くわしい数値は、見出しと説明を隠して、判定・数値・ボタンだけを1画面に（「くわしい数値をとじる」で戻る） */
#panel.more>h1,#panel.more>.grp,#panel.more>div.note:not(#hands){display:none}
#panel.more #b2,#panel.more #b4{display:inline-block;width:calc(50% - 4px);vertical-align:top;font-size:max(12px,calc(.8*var(--u)));padding:calc(.45*var(--u)) calc(.4*var(--u))}
#panel.more #b4{margin-left:0}
#panel.more #verdict{padding:calc(.3*var(--u))!important;margin:calc(.3*var(--u)) 0!important}
#panel.more .diag,#panel.more #hands{line-height:1.3}
/* スマホの横向きなど、縦が短い時は字を少し詰める（判定は上のチェック3つで分かるので隠す） */
@media (max-height:480px){
  html[lang] #panel{padding:10px 12px!important}
  html[lang] #e16list{gap:3px!important}
  html[lang] #e16list li{font-size:13px!important;padding:3px 7px!important}
  html[lang] #e16step{font-size:13px!important;margin:4px 0 2px!important;line-height:1.3!important}
  html[lang] #panel:not(.more) #verdict{display:none!important}
  html[lang] #panel #b1{font-size:13px!important;padding:4px!important}
  html[lang] #panel #msg{font-size:12px!important;line-height:1.3!important}
  html[lang] #panel.more .row{font-size:11px!important;margin:1px 0!important;gap:4px!important}
  html[lang] #panel.more .row .nm{width:58px!important}
  html[lang] #panel.more .row .vl{width:38px!important}
  html[lang] #panel.more .diag{display:none!important}
}