/* Existing stat chips become touch and keyboard controls without changing HUD flow. */
#hud [data-hud-stat] { border:0; font-family:var(--font); color:inherit; cursor:pointer; min-height:44px; touch-action:manipulation; }
#hud [data-hud-stat]:hover { box-shadow:inset 0 0 0 2px #fff4df66; }
#hud [data-hud-stat][aria-expanded="true"] { box-shadow:inset 0 0 0 2px var(--yellow); }
#hud [data-hud-stat]:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }
body.portrait { --top-h:calc(140px + env(safe-area-inset-top)); }
body.portrait #hud { grid-template-rows:42px 44px 22px; }
.hud-help { position:fixed; z-index:41; overflow:auto; overscroll-behavior:contain; border:2px solid var(--ink); border-radius:15px; background:var(--paper); color:var(--ink); box-shadow:0 5px 0 #2a1c1c55,0 12px 28px #17121f55; font:500 13px/1.55 var(--font); }
.hud-help header { display:flex; justify-content:space-between; align-items:center; gap:12px; position:sticky; top:0; z-index:1; padding:10px 12px; border-bottom:2px solid var(--ink); background:linear-gradient(#ffe674,#ffcb35); }
.hud-help h2 { margin:0; font-size:14px; line-height:1.4; }
.hud-help header strong { font-size:22px; font-weight:800; line-height:1.25; }
.hud-help-close { flex:0 0 44px; width:44px; height:44px; border:2px solid var(--ink); border-radius:10px; background:#fff8e7; color:var(--ink); font:500 27px/1 var(--font); }
.hud-help-content { padding:12px; }
.hud-help p { margin:10px 0; }
.hud-help-detail { padding:8px 10px; border-radius:9px; background:#eadfc8; font-weight:600; }
.hud-help-state { display:inline-block; padding:3px 8px; border-radius:6px; font-weight:800; font-size:12px; background:#d9edca; color:#28523b; }
.hud-help-state.warn { background:#ffe7a1; color:#704612; }
.hud-help-state.bad { background:#f9ccca; color:#8b2d2d; }
.hud-help h3 { margin:14px 0 6px; font-size:13px; }
.hud-help ul { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.hud-help li { border-top:1px dashed #c7b593; padding-top:8px; }
.hud-help-action { display:block; width:100%; min-height:44px; margin-top:7px; padding:8px 10px; border:1px solid #a18756; border-radius:8px; background:#fff0b6; color:var(--ink); text-align:left; font:800 12px var(--font); }
.hud-help-action span { float:right; font-size:18px; }
.hud-help button:focus-visible { outline:3px solid #3c827c; outline-offset:2px; }
body.portrait .hud-help { font-size:13px; }