.sg-game { --sg-ink:#1d211e; --sg-muted:#656d65; --sg-line:#d9ddd4; color:var(--sg-ink); display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; margin:0; font:400 16px/1.65 -apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif; }
.sg-game *, .sg-game *::before, .sg-game *::after { box-sizing:border-box; }
.sg-game [hidden] { display:none !important; }
.sg-game p, .sg-game h2 { margin:0; }
.sg-game button, .sg-game input { color:inherit; font:inherit; }
.sg-game button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
.sg-game button:disabled { cursor:default; }
.sg-game :where(button,input,a):focus-visible { outline:2px solid var(--sg-ink); outline-offset:4px; }
.sg-eyebrow { color:var(--sg-muted); font-size:12px; }
.sg-game h2 { margin-top:16px; font-size:clamp(28px,2.7vw,36px); font-weight:500; letter-spacing:-.025em; line-height:1.18; }
.sg-description { margin-top:24px !important; font-size:17px; max-width:39ch; }
.sg-meaning { margin-top:16px !important; color:var(--sg-muted); font-size:14px; max-width:44ch; }
.sg-links { display:flex; flex-wrap:wrap; gap:4px 24px; margin-top:20px; }
.sg-links a { min-height:44px; display:inline-flex; align-items:center; font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.sg-play { min-width:0; }
.sg-topline { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; padding-bottom:16px; border-bottom:1px solid var(--sg-line); font-size:12px; font-variant-numeric:tabular-nums; }
.sg-topline span:last-child { color:var(--sg-muted); }
.sg-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px; margin-top:20px; }
.sg-action { border:1px solid var(--sg-line); border-radius:6px; background:transparent; padding:10px 16px; min-height:44px; font-size:14px !important; }
.sg-action:first-child { background:var(--sg-ink); color:#fafaf8; border-color:var(--sg-ink); }
.sg-action:hover { border-color:var(--sg-ink); }
.sg-instruction { color:var(--sg-muted); font-size:13px; margin-top:20px !important; line-height:1.7; }
.sg-status { padding-top:20px; min-height:72px; font-size:15px; }
.sg-game[data-phase=success] .sg-status { color:#36522c; }
.sg-song-return { margin-top:16px; padding:20px; background:#eff2e9; border-radius:6px; font-size:14px; }
.sg-song-return a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:5px; margin-top:4px; }
.sg-small-label { font-size:12px; color:var(--sg-muted); display:block; text-align:left; }
.sg-reference { background:#eff2e9; border:1px solid #c4cdb8; border-radius:8px; margin-top:20px; padding:16px; }
.sg-scene, .sg-candidate-scene { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin-top:16px; }
.sg-scene:has(.sg-object:nth-child(4):last-child) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.sg-object { display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; }
.sg-object svg { width:28px; height:30px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.sg-object > span { font-size:10px; overflow-wrap:anywhere; line-height:1.3; }
.sg-take-choices { display:grid; gap:12px; margin-top:20px; }
.sg-take-choice { padding:14px; border:1px solid var(--sg-line); border-radius:8px; background:#fafaf8; text-align:left; width:100%; }
.sg-take-choice:not(:disabled):hover, .sg-take-choice.is-selected { border-color:#658046; }
.sg-game[data-phase=success] .sg-take-choice.is-selected { background:#eff2e9; border-color:#658046; }
.sg-candidate-scene { margin-top:10px; }
.sg-wave-canvas { margin-top:24px; border:1px solid var(--sg-line); border-radius:8px; padding:16px; background:#f3f5ee; }
.sg-waves { display:block; width:100%; height:auto; overflow:visible; fill:none; }
.sg-wave-axis { stroke:#d8ddcf; stroke-width:.7; }
.sg-wave-target { stroke:#1d211e; stroke-width:3; }
.sg-wave-player { stroke:#78a342; stroke-width:2.5; stroke-dasharray:7 3; }
.sg-wave-key { display:flex; flex-wrap:wrap; gap:8px 24px; color:var(--sg-muted); font-size:12px; margin-top:12px; }
.sg-wave-key span { display:flex; align-items:center; gap:8px; }
.sg-wave-key span::before { content:''; width:16px; border-top:2px solid #1d211e; }
.sg-wave-key span:last-child::before { border-color:#78a342; border-top-style:dashed; }
.sg-sliders { display:grid; gap:18px; margin-top:24px; }
.sg-sliders label { display:grid; gap:6px; font-size:14px; }
.sg-sliders label > span { display:flex; justify-content:space-between; gap:12px; }
.sg-sliders output { color:var(--sg-muted); font-variant-numeric:tabular-nums; }
.sg-sliders input { accent-color:#537333; width:100%; height:28px; margin:0; cursor:pointer; }
.sg-road-legend { display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--sg-muted); margin:20px 0 12px; }
.sg-road-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; max-width:360px; }
.sg-road-tile { position:relative; aspect-ratio:1; min-width:0; min-height:60px; padding:0; border:1px solid #d9ddd4; border-radius:6px; background:#f2f4ed; overflow:hidden; }
.sg-road-tile svg { display:block; width:100%; height:100%; fill:none; stroke:#a7b19f; stroke-width:11; stroke-linecap:butt; }
.sg-road-tile.is-connected svg { stroke:#658046; }
.sg-road-tile.is-hint { outline:2px dashed #658046; outline-offset:2px; }
.sg-road-tile.is-start { box-shadow:inset 3px 0 #658046; }
.sg-road-tile.is-lake { box-shadow:inset -3px 0 #5c8693; }
.sg-road-tile:hover:not(:disabled) { background:#e8eddf; border-color:#658046; }
.sg-tile-number { position:absolute; top:3px; left:7px; font-size:10px; color:#55624c; }
.sg-tile-badge { position:absolute; bottom:3px; left:6px; font-size:10px; padding:0 3px; background:#f2f4eddd; border-radius:3px; }
@media(max-width:900px) { .sg-game { grid-template-columns:1fr; gap:28px; } .sg-description { max-width:58ch; } .sg-meaning { max-width:65ch; } }
@media(max-width:480px) { .sg-scene,.sg-candidate-scene { grid-template-columns:repeat(3,minmax(0,1fr)); row-gap:12px; } .sg-scene:has(.sg-object:nth-child(4):last-child) { grid-template-columns:repeat(4,minmax(0,1fr)); } .sg-actions { gap:8px; } .sg-action { padding:10px 12px; } .sg-description { font-size:16px; } .sg-road-board { gap:5px; } }
@media(prefers-reduced-motion:reduce) { .sg-game * { animation:none !important; transition:none !important; } }