/* 配色はレトロ携帯機（game.css）から借りる。ページは筐体のクリーム色より
   わずかに明るくして、筐体が「机の上の物体」として浮くようにする。
   暗色版は持たない —— 筐体は実体のある物なので、明暗で色が変わるのは筋が通らない */
:root{--page:#faf7ef;--surface:#fffdf8;--ink:#3f382c;--sub:#5f5648;--muted:#7a6e56;--line:#e3dac6;--soft:#f3ecdc;--well:#39412f;--accent:#e35a4b;--accent-hover:#cf4536;--green:#5a7a4a;--radius:8px;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;font-synthesis:none}



*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--page)}body{margin:0;background:var(--page);color:var(--ink);font-size:14px;line-height:1.65;-webkit-font-smoothing:antialiased}button,input{font:inherit}button{color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:3px}a{color:inherit;text-decoration:none}.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}.site-shell{min-height:100svh;display:flex;flex-direction:column}.site-header{border-bottom:1px solid var(--line);position:relative;z-index:2}.header-inner{max-width:920px;margin:auto;min-height:46px;padding:0 24px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:10px;margin-right:6px;font-size:21px;font-weight:700;letter-spacing:.04em;white-space:nowrap}.brand-mark{width:34px;height:34px;flex:none;object-fit:contain}
/* ワードマーク。囲みを持たせるとマスコットと主役を奪い合うので、
   枠なしの文字組みだけにしてマスコットを主役に立てる。
   レトロ感は書体（Anton）＋珊瑚色の罫＋カタカナで担保する */

/* Anton は極端な圧縮体。素の sans を代替にすると 16% も幅が変わって
   webfont 到着時に「大きい→小さい」と目に見えて詰まる。Impact は実測 +2.1% */
.brand-word b{display:block;font-family:Anton,Impact,"Arial Narrow",sans-serif;font-weight:400;font-size:17px;line-height:1;letter-spacing:2px;color:#4a4133}
.brand-word .rule{display:block;height:2px;border-radius:2px;background:var(--accent);margin:2.5px 0 2px}
.brand-word em{display:block;font-style:normal;font-weight:700;font-size:7px;line-height:1;letter-spacing:2.5px;text-align:center;color:#8a7550}.header-actions{margin-left:auto;display:flex;gap:8px}.icon-button{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--sub);font-size:15px;line-height:1}.icon-button:hover{border-color:var(--muted);color:var(--ink)}.color-strip{height:3px;background:linear-gradient(90deg,#46b5c4 0 14.28%,#e8b93f 14.28% 28.57%,#9d6bce 28.57% 42.85%,#6bbf59 42.85% 57.14%,#e35a4b 57.14% 71.42%,#4a7fd4 71.42% 85.71%,#e8913f 85.71%)}
.site-footer{margin-top:auto;display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding:12px 24px;color:var(--muted);font-size:11px}.site-footer button{border:0;background:transparent;color:inherit;padding:0;text-decoration:underline}.content-section{width:min(780px,calc(100% - 36px));margin:0 auto;padding:0 10px 30px}.content-section:first-of-type{margin-top:48px}.content-section h2{margin:0 0 10px;border-left:4px solid var(--accent);padding-left:10px;font-size:16px;font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif;color:var(--ink)}.content-section p{margin:0;color:var(--sub);font-size:13px;line-height:2}.faq-section{padding-bottom:48px}.faq-section details{padding:12px 2px;border-bottom:1px solid var(--line)}.faq-section summary{cursor:pointer;font-weight:700;font-family:'Zen Maru Gothic','Hiragino Maru Gothic ProN','Hiragino Sans',sans-serif}.faq-section details p{margin-top:5px}
.modal{width:min(430px,calc(100% - 32px));max-height:80dvh;overflow:auto;border:0;border-radius:12px;background:var(--surface);color:var(--ink);padding:0;box-shadow:0 12px 40px rgb(0 0 0 / .25)}.modal::backdrop{background:rgb(20 20 20 / .45)}.modal-head{display:flex;position:sticky;top:0;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:14px 18px;background:var(--surface);font-size:15px}.modal-head button{border:0;background:transparent;padding:2px 6px;font-size:22px;color:var(--muted)}.modal-body{padding:16px 18px}.modal-body p{margin:0}.modal-body h3{margin:0 0 4px;font-size:13.5px}.modal-body section+section{margin-top:14px}.modal-body small{color:var(--muted)}.modal-help-grid{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;border-radius:8px;background:var(--soft);padding:10px 14px;font-size:12.5px}.modal-tabs{display:flex;gap:8px;margin-bottom:12px}.modal-tabs button{flex:1;border:0;border-radius:6px;background:var(--soft);padding:7px;font-size:12.5px;font-weight:700}.modal-tabs button[aria-selected="true"]{background:var(--well);color:#fff}.rank-empty{padding:26px 0;text-align:center;color:var(--muted);font-size:12.5px}.rank-row{display:grid;grid-template-columns:26px 1fr auto 56px;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:8px 6px;font-size:13px}.rank-row strong{text-align:center}.rank-row time{width:56px;color:var(--muted);font-size:10.5px;text-align:right}.rank-row .you{margin-left:5px;color:var(--accent);font-size:10px}.modal-note{margin-top:10px!important;text-align:center;color:var(--muted);font-size:10.5px}.setting-row{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:10px 2px}.setting-row:last-of-type{border:0}.setting-row label{font-weight:700}.setting-row small{display:block;font-weight:400}.toggle-button{min-width:62px;border:0;border-radius:14px;background:#ccc;padding:6px 16px;color:#fff;font-size:12px;font-weight:700}.toggle-button.is-on{background:var(--green)}.setting-name{width:130px;border:1px solid var(--line);border-radius:6px;background:transparent;padding:7px 10px;color:var(--ink);text-align:center}.menu-list{display:grid}.menu-list button{border:0;border-bottom:1px solid var(--line);background:transparent;padding:13px 4px;text-align:left}.menu-list button:last-child{border:0}
@media (max-width:720px){.header-inner{min-height:50px;padding:0 12px;gap:8px}.brand{font-size:18px;gap:7px}.header-actions{gap:6px}.icon-button{width:30px;height:30px;font-size:14px}.brand-mark{width:34px;height:34px}.brand-word b{font-size:18px;letter-spacing:1.5px}.brand-word .rule{height:2px;margin:2.5px 0 2px}.brand-word em{font-size:7px;letter-spacing:2px}.site-footer{gap:12px;padding:12px 14px}.content-section{width:min(100% - 24px,420px);padding-bottom:28px}.content-section:first-of-type{margin-top:34px}.faq-section{padding-bottom:34px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}