:root { --ink:#192432; --paper:rgba(255,254,248,.96); --blue:#245da8; --line:#cad8ed; --soft-blue:#e8effb; --orange:#ea6515; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif; background:#13110c url("background-comic.png") center / cover fixed no-repeat; }
body::before { content:""; position:fixed; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(16,12,7,.32),rgba(255,173,21,.10)); }
.site-shell { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:48px 0; }
.ranking-card { overflow:hidden; background:var(--paper); border:3px solid #17120e; box-shadow:10px 10px 0 rgba(0,0,0,.35); }
.hero { padding:28px 32px 0; color:white; background:linear-gradient(110deg,#14396c,#2d71bd); }
.eyebrow { margin:0 0 8px; font-size:.75rem; font-weight:800; letter-spacing:.18em; opacity:.8; }
.headline-row { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
h1 { margin:0; font-size:clamp(1.65rem,4vw,2.45rem); letter-spacing:.02em; }
.subtitle { margin:7px 0 24px; color:#dbe9fb; font-size:.92rem; }
.heat-badge { flex:0 0 auto; min-width:114px; padding:9px 14px; text-align:center; color:#fff6d1; background:#e95912; border:2px solid #ffcf54; box-shadow:4px 4px 0 #102c52; transform:rotate(2deg); }
.heat-badge span { display:block; font-size:.65rem; letter-spacing:.15em; font-weight:800; }.heat-badge strong { font-family:Georgia,serif; font-size:2rem; line-height:1.1; }.heat-badge small { font-weight:bold; }
.status-bar { display:flex; align-items:center; flex-wrap:wrap; gap:10px; min-height:45px; padding:10px 0; font-size:.82rem; color:#eaf3ff; border-top:1px solid rgba(255,255,255,.25); }
.live-dot { width:9px; height:9px; border-radius:50%; background:#ffce3f; box-shadow:0 0 0 4px rgba(255,206,63,.18); }.divider { width:1px; height:15px; background:rgba(255,255,255,.35); }
.refresh-button { margin-left:auto; padding:6px 10px; cursor:pointer; font:inherit; font-weight:bold; color:#174c8d; background:#fff; border:0; border-radius:2px; }.refresh-button:hover { background:#ffedaa; }
.content-area { padding:24px 32px 16px; }.intro-row { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }.intro-row p { margin:0; font-weight:600; }
.select-wrap select { padding:8px 28px 8px 10px; color:#25497a; font:inherit; font-weight:bold; background:#fff; border:1px solid #9fb6d8; border-radius:2px; }
.table-wrap { overflow-x:auto; border:1px solid var(--line); }table { width:100%; min-width:580px; border-collapse:collapse; background:#fff; }th,td { padding:11px 16px; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }th:last-child,td:last-child { border-right:0; }tr:last-child td { border-bottom:0; }th { color:#263d64; font-size:.9rem; background:#e3ebfa; }th:nth-child(2),td.place { text-align:left; }td { font-size:.94rem; }td.rank { width:74px; font-weight:bold; color:#3e506c; }td.temp { width:180px; font-weight:800; color:#bf4612; font-size:1.03rem; }td.time { width:160px; color:#49586a; font-variant-numeric:tabular-nums; }.place a { color:#1665bf; text-decoration:none; font-weight:bold; }.place a:hover { text-decoration:underline; }tbody tr:nth-child(even) { background:#f8fbff; }tbody tr:first-child { background:#fff7e3; }.table-count { margin:10px 0 0; text-align:right; color:#68798e; font-size:.78rem; }
footer { padding:16px 32px 22px; color:#59697a; font-size:.75rem; border-top:1px solid #e0e5e8; }footer p { margin:3px 0; }.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:640px) { .site-shell { width:min(100% - 16px,1120px); padding:16px 0; }.ranking-card { border-width:2px; box-shadow:5px 5px 0 rgba(0,0,0,.35); }.hero,.content-area,footer { padding-left:16px; padding-right:16px; }.headline-row { align-items:center; }.heat-badge { min-width:91px; padding:6px 8px; }.heat-badge strong { font-size:1.55rem; }.status-bar { gap:7px; }.refresh-button { margin-left:0; }.intro-row { align-items:flex-start; flex-direction:column; }th,td { padding:10px 12px; } }

.refresh-button:disabled { cursor:not-allowed; color:#65758a; background:#d9e1ec; opacity:.9; }