/* 午前二時の高速道路 — ゲーム固有のスタイル */
.g3d-title__name small{letter-spacing:.34em}

/* 車外視点の計器 */
.hw-dash{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:18px;padding:8px 18px;border-radius:14px;background:linear-gradient(180deg,rgba(6,9,12,.55),rgba(6,9,12,.35));border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-variant-numeric:tabular-nums}
.hw-dash__speed b{font-size:28px;font-weight:900;color:#ffe2bd;letter-spacing:.02em}
.hw-dash__speed span{margin-left:4px;font-size:11px;font-weight:700;opacity:.7}
.hw-dash__clock{font:700 22px/1 ui-monospace,'Consolas',monospace;color:#5dffc0;text-shadow:0 0 10px rgba(93,255,192,.6);letter-spacing:.06em}
.hw-dash__fuel{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;opacity:.85}
.hw-dash__fuel i{display:block;width:70px;height:7px;border-radius:9px;background:rgba(255,255,255,.14);overflow:hidden}
.hw-dash__fuel em{display:block;height:100%;background:#ffdcb2;border-radius:9px}
.hw-dash.is-low .hw-dash__fuel em{background:#ffae1a;animation:g3d-blink .8s steps(2) infinite}

/* 曲名・手がかりの数 */
.hw-now{position:absolute;right:calc(16px + env(safe-area-inset-right));top:calc(116px + env(safe-area-inset-top));padding:6px 12px;border-radius:999px;background:rgba(4,20,14,.6);color:#8dffd0;font-size:12.5px;font-weight:700;border:1px solid rgba(93,255,192,.25);animation:g3d-toast .3s ease both}
.hw-chip{position:absolute;right:calc(16px + env(safe-area-inset-right));top:calc(66px + env(safe-area-inset-top));pointer-events:auto;display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;border:1px solid rgba(242,179,90,.45);background:rgba(20,14,6,.6);color:#f7d9a8;font:800 13px/1 var(--g3d-ui);cursor:pointer}

/* 書類（メモ・手帳・路線図・電話）*/
.hw-doc{position:absolute;inset:0;z-index:35;display:grid;place-items:center;padding:calc(64px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));background:rgba(3,4,6,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:auto;animation:g3d-fade .3s ease both}
.hw-doc__paper{position:relative;width:min(560px,100%);padding:26px 28px 22px;border-radius:6px;color:#2a241c;background:#f3eee2;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),inset 0 0 60px rgba(120,90,40,.18);transform:rotate(-.6deg)}
.hw-doc[data-kind="notebook"] .hw-doc__paper{background:repeating-linear-gradient(180deg,#f1ecdd 0 33px,#c9d6e3 33px 34px);background-color:#f1ecdd;border-left:10px solid #6b2b24}
.hw-doc[data-kind="memo"] .hw-doc__paper{width:min(420px,100%);background:#fbfaf6;transform:rotate(1.2deg)}
.hw-doc[data-kind="phone"] .hw-doc__paper,.hw-doc[data-kind="info"] .hw-doc__paper{background:#161b1f;color:#e6f2ec;border:1px solid rgba(93,255,192,.25);transform:none}
.hw-doc__kicker{margin:0;font-size:12px;letter-spacing:.24em;font-weight:800;opacity:.6}
.hw-doc__title{margin:4px 0 14px;font-size:20px;font-weight:900;letter-spacing:.06em}
.hw-doc__body p{margin:0 0 .9em;font-size:17px;line-height:2}
.hw-doc[data-kind="notebook"] .hw-doc__body p,.hw-doc[data-kind="memo"] .hw-doc__body p{font-family:'Zen Kurenaido',var(--g3d-ui);font-size:18px;line-height:1.7;margin-bottom:.7em}
@media (max-height:760px){.hw-doc__paper{padding:18px 22px 16px}.hw-doc__title{margin-bottom:8px;font-size:18px}.hw-doc__body p{font-size:15.5px;line-height:1.8}.hw-doc[data-kind="notebook"] .hw-doc__body p,.hw-doc[data-kind="memo"] .hw-doc__body p{font-size:16.5px;line-height:1.62}}
.hw-doc__close{display:flex;margin:16px auto 0}
.hw-doc__hint{margin:8px 0 0;text-align:center;font-size:11.5px;opacity:.55}
.hw-doc__img:not(:empty){margin:0 0 14px}
.hw-doc__img img{display:block;width:100%;height:auto;border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.4)}
@media (pointer:coarse){.hw-doc__hint{display:none}}

/* 手帳 */
.hw-journal{position:absolute;inset:0;z-index:34;display:grid;place-items:center;padding:calc(64px + env(safe-area-inset-top)) 16px 20px;background:rgba(3,4,6,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:auto}
.hw-journal__panel{width:min(620px,100%);padding:22px 24px;border-radius:16px;background:rgba(18,16,12,.92);border:1px solid rgba(242,179,90,.3)}
.hw-journal h2{margin:0 0 8px;font-size:20px;letter-spacing:.14em}
.hw-journal__obj{margin:0 0 12px;color:#f7d9a8;font-weight:800;font-size:14px}
.hw-journal__list{margin:0;padding-left:1.4em;display:grid;gap:10px}
.hw-journal__list li{opacity:.55;font-size:13.5px;line-height:1.7}
.hw-journal__list li.is-found{opacity:1}
.hw-journal__list b{display:block;font-size:14.5px}
.hw-journal__list span{display:block;opacity:.85;font-family:'Zen Kurenaido',var(--g3d-ui);font-size:15.5px}
.hw-journal__hint{margin:14px 0 0;font-size:12.5px;opacity:.7}
.hw-journal .g3d-btn{display:flex;margin:16px auto 0}

/* 縦持ちのヒント */
.hw-rotate{position:absolute;left:50%;top:38%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(10,13,18,.75);border:1px solid rgba(255,255,255,.18);font-size:12.5px;font-weight:800;white-space:nowrap;animation:g3d-toast .3s ease both}
.hw-rotate span{font-size:16px}

/* タッチ操作（運転）*/
.hw-steer{position:absolute;left:calc(14px + env(safe-area-inset-left));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:14px;pointer-events:none}
.hw-pedals{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.hw-tools{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(62px + env(safe-area-inset-top));display:flex;gap:8px;pointer-events:none}
.hw-ctx{position:absolute;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%);pointer-events:none}
.g3d-tbtn.hw-sbtn{width:84px;height:84px}
.g3d-tbtn.hw-sbtn .g3d-tbtn__icon{font-size:30px}
.g3d-tbtn.hw-sbtn .g3d-tbtn__label{display:none}
.g3d-tbtn.hw-pedal{width:86px;border-radius:18px;font-size:13px;background:linear-gradient(180deg,rgba(40,44,50,.62),rgba(12,14,18,.62))}
.g3d-tbtn.hw-pedal--gas{height:150px;border-color:rgba(242,179,90,.55)}
.g3d-tbtn.hw-pedal--brake{height:104px;border-color:rgba(255,120,110,.45)}
.g3d-tbtn.hw-pedal.is-down{background:rgba(242,179,90,.4)}
.g3d-tbtn.hw-ctxbtn{width:auto;height:48px;min-width:120px;padding:0 20px;flex-direction:row;gap:8px;border-radius:999px;font-size:14px;border-color:var(--accent);background:rgba(20,14,6,.72);color:#f7d9a8}
.hw-tools .g3d-tbtn{width:52px;height:52px}
@media (max-height:480px) and (orientation:landscape){
  .g3d-tbtn.hw-pedal--gas{height:128px}.g3d-tbtn.hw-pedal--brake{height:90px}
  .g3d-tbtn.hw-sbtn{width:76px;height:76px}
  .hw-tools{top:calc(46px + env(safe-area-inset-top))}
  .hw-chip{top:calc(46px + env(safe-area-inset-top));right:auto;left:50%;transform:translateX(-50%)}
  .hw-now{top:calc(96px + env(safe-area-inset-top))}
}
@media (pointer:coarse){
  .hw-dash{bottom:auto;top:calc(56px + env(safe-area-inset-top));padding:5px 12px;gap:10px}
  .hw-dash__speed b{font-size:20px}.hw-dash__clock{font-size:16px}.hw-dash__fuel i{width:44px}
  .g3d-hud__tl{max-width:min(52vw,380px)}
  .hw-chip{top:auto;bottom:calc(200px + env(safe-area-inset-bottom))}
}
@media (max-width:640px) and (orientation:portrait){
  .hw-steer{gap:10px}.g3d-tbtn.hw-sbtn{width:74px;height:74px}
  .g3d-tbtn.hw-pedal{width:74px}.g3d-tbtn.hw-pedal--gas{height:130px}.g3d-tbtn.hw-pedal--brake{height:92px}
  .hw-ctx{bottom:calc(170px + env(safe-area-inset-bottom))}
}

/* タイトルの記録 */
.hw-record{display:inline-block;margin:0 auto;padding:10px 16px;border-radius:14px;background:rgba(10,12,16,.45);border:1px solid rgba(255,255,255,.12);text-align:left;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.hw-record__head{margin:0 0 6px;font-size:12.5px;font-weight:800;letter-spacing:.1em;opacity:.85}
.hw-record__head b{color:var(--accent);font-size:15px}
.hw-record ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 18px}
.hw-record li{font-size:13px;font-weight:700;opacity:.45;white-space:nowrap}
.hw-record li span{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:rgba(255,255,255,.14);font-size:11px}
.hw-record li.is-seen{opacity:1;color:#ffe2bd}
.hw-record li.is-seen span{background:var(--accent);color:#14110c}
.hw-record__best{margin:6px 0 0;font-size:12px;opacity:.75}
@media (max-height:480px) and (orientation:landscape){.hw-record{padding:6px 12px}.hw-record ul{gap:2px 14px}.hw-record li{font-size:12px}}

/* タッチ操作と字幕が重ならないように */
@media (pointer:coarse){
  .g3d-subtitle{max-width:min(62vw,560px);font-size:13.5px;line-height:1.55;padding:6px 12px;bottom:calc(128px + env(safe-area-inset-bottom))}
  .g3d-toast{font-size:12.5px;max-width:90vw;white-space:normal;text-align:center}
}
@media (pointer:coarse) and (orientation:portrait){
  .g3d-subtitle{max-width:92vw;bottom:calc(190px + env(safe-area-inset-bottom))}
  /* 縦持ちでは左上の目的と右上のボタン列を避けて、目的の下に出す */
  .g3d-toast{top:calc(122px + env(safe-area-inset-top));max-width:calc(100vw - 150px)}
}
@media (pointer:coarse) and (max-height:480px) and (orientation:landscape){
  .g3d-subtitle{bottom:calc(98px + env(safe-area-inset-bottom));max-width:min(56vw,520px)}
}

@media (pointer:coarse) and (orientation:portrait){
  .hw-tools{flex-direction:column;top:calc(60px + env(safe-area-inset-top))}
  .g3d-hud__tl{max-width:calc(100vw - 96px)}
  .hw-dash{top:auto;left:calc(14px + env(safe-area-inset-left));transform:none;bottom:calc(104px + env(safe-area-inset-bottom));flex-direction:column;align-items:flex-start;gap:2px;padding:6px 12px}
  .hw-dash__fuel i{width:58px}
  .hw-chip{bottom:auto;top:calc(236px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right))}
  .hw-now{top:calc(130px + env(safe-area-inset-top));right:auto;left:calc(10px + env(safe-area-inset-left))}
}
@media (max-height:480px) and (orientation:landscape){.hw-record ul{display:none}.hw-record__head{margin:0}.hw-record__best{display:none}.hw-record{padding:5px 12px}}

/* ---- 2026-10-06 チェックでの手直し ---- */
/* スマホ横（背の低い画面）: 手帳が画面より背が高く、「閉じる」が下に隠れていた（スクロールしないと見えない）→ 手がかりを2列にして詰め、1画面に収める */
@media (max-height:480px) and (orientation:landscape){
  .hw-journal{padding-top:calc(48px + env(safe-area-inset-top));padding-bottom:8px}
  .hw-journal__panel{padding:12px 18px}
  .hw-journal h2{font-size:16px;margin-bottom:4px}
  .hw-journal__obj{font-size:12.5px;margin-bottom:8px}
  .hw-journal__list{grid-template-columns:1fr 1fr;column-gap:22px;row-gap:6px}
  .hw-journal__list li{font-size:12px;line-height:1.5}
  .hw-journal__list b{font-size:13px}
  .hw-journal__list span{font-size:13px}
  .hw-journal__hint{margin-top:8px;font-size:11.5px}
  .hw-journal .g3d-btn{margin-top:8px;min-height:38px;position:sticky;bottom:4px}   /* 手がかりが増えて背が伸びても「閉じる」は見えたまま */
}
/* PC の背の低い画面（1366×768 のノートPCでブラウザの枠を除くと高さ 625px 前後）で「はじめる」が画面の下に隠れていた → タイトルの文字を少し小さく */
@media (min-width:641px) and (max-height:700px){
  #game-root .g3d-title__name{font-size:clamp(32px,9vh,58px)}
  #game-root .g3d-title__sub{margin-top:8px;line-height:1.7}
}