.px-btn.hp-banner { display:flex; align-items:center; gap:10px; width:100%; text-align:left; border-color:var(--tile); }
.hp-banner img { width:23px; height:48px; image-rendering:pixelated; }
.hp-banner strong { display:block; font:1rem var(--display); }
.hp-banner small { display:block; color:var(--muted); font:.82rem var(--body); margin-top:4px; }
.hp-ready { border-color:var(--grass)!important; box-shadow:inset 4px 0 var(--grass); }
.hp-mobile { display:none; }
.hp-mobile-clock, .hp-surrender-mobile { display:none; }
.px-btn.hp-surrender { background:#b52835; border-color:#ed6270; color:#fff; font-weight:700; }
#hp-surrender { width:100%; }
.hp-surrender-mobile span { position:relative; width:24px; height:28px; }
.hp-surrender-mobile span::before, .hp-surrender-mobile span::after { content:''; position:absolute; top:12px; left:0; width:24px; height:4px; background:#fff; transform:rotate(48deg); }
.hp-surrender-mobile span::after { transform:rotate(-48deg); }
.hp-stage { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
.hp-character { position:absolute; padding:0; border:0; background:none; pointer-events:auto; cursor:pointer; transform:translate(-50%,-100%); touch-action:manipulation; }
.hp-character img { display:block; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.hp-party { position:absolute; inset:0; pointer-events:none; }
.hp-resident { position:absolute; transform:translate(-50%,-100%); image-rendering:pixelated; object-fit:contain; object-position:bottom; }
dialog.hp-dialog { box-sizing:border-box; width:min(540px,calc(100% - 24px)); }
.hp-hero { display:flex; align-items:center; gap:20px; margin:14px 0; }
.hp-hero img { width:40px; height:84px; image-rendering:pixelated; }
dialog.hp-dialog #hp-intro { line-height:1.6; }
dialog.hp-dialog .hp-hero { align-items:start; margin:18px 0; }
dialog.hp-dialog .hp-rules p { margin:0 0 14px; }
.hp-rule-note { color:var(--muted); font-size:.86rem; }
#hp-intro > .hp-actions { margin:14px 0 4px; }
.hp-rankings { margin-top:22px; padding-top:18px; border-top:2px solid var(--edge); }
dialog.help .hp-rankings h3 { font-family:var(--body); font-weight:700; font-size:1.1rem; line-height:1.4; letter-spacing:0; color:var(--grass); margin:0 0 8px; }
dialog.help .hp-rankings p { margin:6px 0; }
.hp-rank-month { color:var(--ink); font-weight:700; }
.hp-rank-note, .hp-rank-empty, .hp-gold-empty { color:var(--muted); font-size:.8rem; }
.hp-rank-scroll { max-height:220px; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; border:1px solid var(--edge); margin-top:12px; }
.hp-rank-scroll table { border-collapse:separate; border-spacing:0; table-layout:fixed; width:100%; font-size:.83rem; }
.hp-rank-scroll th { position:sticky; top:0; z-index:1; background:var(--panel-2); color:var(--muted); text-align:left; font-weight:400; }
.hp-rank-scroll th, .hp-rank-scroll td { padding:8px 7px; border-bottom:1px solid var(--edge); }
.hp-rank-scroll th:first-child { width:28px; }
.hp-rank-scroll th:last-child { width:82px; }
.hp-rank-scroll td:last-child { font-size:13px; white-space:nowrap; }
.hp-rank-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hp-rank-place { color:var(--muted); }
.hp-golden { margin-top:22px; }
.hp-golden ol { margin:0; padding:0; list-style:none; display:grid; gap:6px; }
.hp-golden li { display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:8px; align-items:center; background:var(--panel-2); border:1px solid var(--edge); border-left:3px solid var(--lamp); padding:9px 8px; font-size:.83rem; }
.hp-golden li > span:first-child { color:var(--lamp); }
.hp-golden li:nth-child(2) { border-left-color:var(--muted); }
.hp-golden li:nth-child(3) { border-left-color:var(--tile); }
.hp-golden strong { overflow:hidden; text-overflow:ellipsis; }
.hp-gold-date { display:inline-block; font: .75rem var(--body); color:var(--muted); white-space:nowrap; }
.hp-golden .hp-digits { font-size:13px; white-space:nowrap; }
@font-face { font-family:'Havlas Pixel Digits'; src:url('timer-pixel.da2c7d476cb9dc7c.ttf') format('truetype'); font-display:swap; unicode-range:U+002E,U+0030-003A; }
.hp-digits { font-family:'Havlas Pixel Digits',var(--display); font-weight:400; font-variant-numeric:tabular-nums; font-synthesis:none; }
.hp-time { font-size:28px; line-height:1.4; color:var(--lamp); }
.hp-banner .hp-digits, #hp-notice .hp-digits { font-size:14px; }
.hp-dialog input { box-sizing:border-box; width:100%; padding:10px; margin:8px 0; border:2px solid var(--edge); background:var(--panel-2); color:var(--ink); font:inherit; }
.hp-dialog .px-btn { min-height:44px; }
.hp-dialog .px-btn.hp-positive { background:var(--grass); border-color:#b0d48e; color:var(--night); }
.hp-dialog .px-btn.hp-upload { background:var(--tile); border-color:#e27a5c; color:var(--ink); }
.hp-night-notice { position:fixed; z-index:7; inset:50% auto auto 50%; margin:0; transform:translate(-50%,-50%); box-sizing:border-box; display:flex; gap:12px; align-items:center; width:max-content; max-width:calc(100% - 24px); background:var(--tile); color:#090909; border:2px solid #e27a5c; box-shadow:4px 4px 0 rgba(0,0,0,.35); padding:4px 4px 4px 14px; font:.95rem var(--body); }
.hp-night-notice button { flex:none; width:44px; height:44px; padding:0; }
.hp-zoom-notice { pointer-events:none; font-weight:700; line-height:1.45; }
.hp-zoom-notice button { pointer-events:auto; }
.hp-dialog [role=status] { color:var(--lamp); }
dialog.help.hp-result-dialog { position:fixed; inset:auto auto 76px var(--hp-result-center,50%); transform:translateX(-50%); margin:0; width:min(360px,calc(100% - 32px)); max-height:55dvh; font-size:.85rem; z-index:6; }
.hp-actions { display:flex; flex-wrap:wrap; gap:8px; }
dialog.hp-result-dialog h2 { font-size:1.1rem; }
dialog.hp-result-dialog .hp-time { margin:6px 0; }
@media(max-width:360px) { .panel .head h1 { font-size:1rem; } }
@media(max-width:640px) {
  #hp-surrender { display:none; }
  .px-btn.hp-surrender-mobile { display:inline-grid; place-items:center; width:30px; min-width:30px; height:44px; padding:0; }
  .hp-playing .head h1 { display:none; }
  .hp-playing .hp-mobile-clock { display:block; align-self:center; flex:1 1 0; min-width:0; white-space:nowrap; color:var(--lamp); font-size:clamp(13px,4.3vw,20px); line-height:1.5; }
  .hp-playing .panel .head { column-gap:4px; }
  .hp-playing .head-btns { flex:none; gap:3px; }
  .hp-playing .head-btns .menu-btn { min-width:44px; padding-inline:4px; }
  .hp-playing .head-btns .help-btn { width:30px; }
  dialog.help.hp-result-dialog { inset:auto 12px calc(78px + env(safe-area-inset-bottom,0px)) 12px; transform:none; width:auto; max-height:42dvh; padding:12px 14px; }
  .panel:has(.hp-mobile) { box-sizing:border-box; width:min(348px,calc(100vw - 32px)); }
  .panel .head h1 span { white-space:normal; }
  .px-btn.hp-mobile { display:inline-grid; place-items:center; width:34px; min-width:34px; height:44px; padding:2px; border-color:var(--tile); }
  .hp-mobile img { width:17px; height:36px; image-rendering:pixelated; }
  .hp-banner { display:none; }
  .hp-mobile.hp-winter { filter:grayscale(1); }
}