:root { color-scheme: dark; --paper:#f2eee5; --muted:#b5b9b8; --base:#121a1c; --line:#394346; --accent:#ffd166; }
* { box-sizing:border-box; }
body { margin:0; background:var(--base); color:var(--paper); font-family:system-ui,-apple-system,'Segoe UI',sans-serif; line-height:1.75; }
a { color:inherit; text-underline-offset:4px; }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline:3px solid #65e6dc; outline-offset:5px; }
[hidden] { display:none !important; }
html[data-language='ja'] [data-lang='en'],html[data-language='en'] [data-lang='ja'] { display:none; }
.skip { position:absolute; left:16px; top:-100px; background:var(--accent); color:#121a1c; padding:8px; z-index:9; }
.skip:focus { top:8px; }
.site-head,main,.site-foot { width:min(1120px, calc(100% - 40px)); margin-inline:auto; }
.site-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:20px 0; border-bottom:1px solid var(--line); }
.brand { font-weight:800; text-decoration:none; letter-spacing:.03em; }
.head-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.languages { display:flex; gap:8px; }
.languages button { min-height:44px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--paper); padding:6px 12px; cursor:pointer; }
.languages button[aria-pressed='true'] { background:var(--paper); color:var(--base); }
.hero { padding:44px 0 28px; max-width:800px; }
.eyebrow { color:var(--accent); font-size:.85rem; letter-spacing:.12em; font-weight:800; }
h1 { font-size:clamp(1.7rem,4.5vw,3rem); line-height:1.35; margin:10px 0 16px; overflow-wrap:anywhere; }
h2 { font-size:1.35rem; line-height:1.5; margin:10px 0; }
p { margin:12px 0; }
.muted,.hero>p:last-child { color:var(--muted); }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.card { border:1px solid var(--line); border-radius:16px; background:#1a2528; overflow:hidden; display:flex; flex-direction:column; }
.card-body { padding:24px; display:flex; flex-direction:column; flex:1; align-items:flex-start; }
.card-body p { margin-bottom:22px; }
.card-body .play { margin-top:auto; }
.card img { width:100%; height:215px; object-fit:cover; object-position:center; }
.number-art { min-height:126px; display:flex; align-items:center; padding:26px; font-weight:900; font-size:2.4rem; letter-spacing:.05em; color:#ffd166; background:repeating-linear-gradient(-35deg,#243234,#243234 18px,#203033 18px,#203033 36px); }
.play { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 22px; color:#171d1d; background:var(--accent); border:0; border-radius:8px; font-weight:750; text-decoration:none; cursor:pointer; }
.play:disabled { opacity:.6; cursor:wait; }
.external { background:transparent; color:var(--paper); border:1px solid #789094; }
.tag { font-size:.8rem; letter-spacing:.06em; color:var(--accent); }
.site-foot { margin-top:48px; padding:24px 0; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px; color:var(--muted); }
.ad-area { margin-top:48px; border-top:1px solid var(--line); padding:26px 0; text-align:center; }
.ad-label { color:var(--muted); font-size:.8rem; }
#page-ad:not([hidden]) { min-height:100px; margin-top:12px; padding:16px; background:#202c2e; }
.ad-area:has(#page-ad[hidden]) { display:none; }
.game-panel { padding:24px; border:1px solid var(--line); border-radius:14px; background:#081115; text-align:center; }
#game-frame { width:100%; height:min(68vw,720px); min-height:340px; border:0; display:block; background:#071015; }
.game-help { max-width:800px; margin-top:24px; }
.game-help summary { cursor:pointer; padding:8px 0; min-height:44px; font-weight:700; }
.game-help ul { padding-left:24px; }
@media(max-width:680px) { .cards { grid-template-columns:1fr; gap:20px; } .hero { padding-top:28px; } .site-head,main,.site-foot { width:calc(100% - 28px); } .card-body { padding:20px; } .game-panel { padding:8px; } #game-frame { min-height:390px; } .head-actions { gap:10px; } }
@media(orientation:landscape) and (max-height:540px) { #game-frame { height:85vh; min-height:260px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto; } }

.free-guide { margin-top:22px; padding:16px 20px; border:1px solid #527366; border-radius:12px; background:#182b25; color:var(--paper); }
.free-guide strong { display:block; color:#b6eed4; font-size:1.1rem; line-height:1.5; }
.free-guide p { margin:6px 0 2px; }
.free-guide small { display:block; color:var(--muted); font-size:.8rem; }
.card.is-building { border-color:#6b899b; border-style:dashed; background:#1b262e; }
.card.is-building .number-art { color:#bedbea; background:repeating-linear-gradient(-35deg,#273946,#273946 18px,#243441 18px,#243441 36px); }
.build-status { display:inline-flex; align-items:center; gap:8px; padding:5px 12px; margin-bottom:10px; border:1px solid #6b899b; border-radius:999px; background:#293d4b; color:#dcf0ff; font-size:.9rem; font-weight:750; line-height:1.6; }
.status-dot { flex:0 0 8px; height:8px; border-radius:50%; background:#a8d6f5; }
.card-body .build-note { color:#bed1de; font-size:.9rem; margin:0 0 18px; }
@media(max-width:680px) { .free-guide { padding:14px 16px; } .build-status { max-width:100%; } }