:root{--ink:#1d2025;--gray:#5b5f66;--paper:#f7f4ec;--kinari:#efeadd;--green:#2f6b3a;--teal:#0f766e;--line:#1d2025}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans JP",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;display:flex;flex-direction:column;overscroll-behavior:none;max-width:560px;margin:0 auto;background:var(--kinari)}
button{font:inherit;color:inherit}
.hud{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--green);color:#fff;border-bottom:2px solid var(--line)}
.where b{font-size:20px;font-weight:900;letter-spacing:.04em}
.where .sub{margin-left:8px;font-size:13px;font-weight:700;opacity:.85}
.who{background:#fff;color:var(--ink);border:2px solid var(--line);border-radius:4px;padding:4px 10px;font-size:14px;font-weight:700;cursor:pointer}
.who b{color:var(--teal);font-size:16px}
.stage{position:relative;flex:none;width:100%;aspect-ratio:16/15;background:#2f6b3a;overflow:hidden;touch-action:none}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.place{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:#fff;border:2px solid var(--line);border-radius:4px;padding:4px 12px;font-size:14px;font-weight:900;white-space:nowrap}
.win{position:fixed;left:12px;right:12px;bottom:calc(150px + env(safe-area-inset-bottom));z-index:5;background:#fff;border:3px solid var(--line);border-radius:4px;padding:12px 14px;box-shadow:0 0 0 3px #fff}
.win .who-name{margin:0 0 4px;font-size:13px;font-weight:900;color:var(--teal)}
.win .msg{margin:0;font-size:16px;line-height:1.7;font-weight:700;white-space:pre-line}
.choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.choices button{flex:1 1 auto;min-height:44px;border:2px solid var(--line);border-radius:4px;background:var(--paper);font-weight:900;font-size:15px;cursor:pointer;padding:6px 10px}
.choices button.go{background:var(--teal);color:#fff;border-color:var(--teal)}
.pad{display:grid;grid-template-columns:132px 1fr 96px;align-items:center;gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--kinari);border-top:2px solid var(--line)}
.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,40px);gap:0}
.dpad button{border:2px solid var(--line);background:#fff;border-radius:4px;font-size:14px;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.dpad button:active,.dpad button.on{background:var(--ink);color:#fff}
.dpad [data-d=up]{grid-column:2;grid-row:1}
.dpad [data-d=left]{grid-column:1;grid-row:2}
.dpad [data-d=right]{grid-column:3;grid-row:2}
.dpad [data-d=down]{grid-column:2;grid-row:3}
.hint{margin:0;font-size:12px;color:var(--gray);line-height:1.5;text-align:center}
.abtn{width:84px;height:84px;border-radius:4px;border:2px solid var(--line);background:var(--teal);color:#fff;font-weight:900;font-size:15px;cursor:pointer;justify-self:end}
.abtn:active{background:var(--ink)}
.abtn.long{font-size:13px;line-height:1.35;padding:4px}
.golist{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 16px;background:var(--kinari);border-top:1px solid #d6cfbd}
.gl-h{grid-column:1/-1;margin:0;font-size:13px;font-weight:900;color:var(--gray)}
.golist button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:56px;padding:8px 7px;background:#fff;border:2px solid var(--line);border-radius:4px;cursor:pointer;text-align:left}
.golist b{font-size:13px;white-space:nowrap;font-weight:900;color:var(--teal);line-height:1.3}
.golist span{font-size:12px;color:var(--gray)}
body.ogp .golist{display:none}
.note{flex:1 0 auto;margin:0;padding:6px 16px calc(6px + env(safe-area-inset-bottom));font-size:12px;color:var(--gray);background:var(--kinari)}
.ogp-title{position:absolute;left:48px;bottom:44px;background:#fff;border:4px solid var(--line);border-radius:4px;padding:20px 28px}
.ogp-title p{margin:0}
.ogp-title .k{font-size:22px;font-weight:900;color:var(--teal)}
.ogp-title .t{font-size:64px;font-weight:900;line-height:1.2}
.ogp-title .s{font-size:26px;font-weight:700;color:var(--gray)}
body.ogp .hud,body.ogp .pad,body.ogp .note{display:none}
body.ogp{max-width:none;width:1200px;height:630px;flex-direction:row;justify-content:flex-end;background:#24552d;margin:0}
body.ogp .stage{width:672px;height:630px;aspect-ratio:auto;position:static}
body.ogp .ogp-title{left:40px;bottom:auto;top:150px;width:470px}
body.ogp .ogp-title .t{font-size:46px;white-space:nowrap}
body.ogp .ogp-title .s{font-size:22px}
.gate{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(36,85,45,.92)}
.gate[hidden]{display:none}
.gate-in{width:100%;max-width:400px;background:var(--paper);border:3px solid var(--line);border-radius:4px;padding:22px 20px}
.gate-in p{margin:0}
.g-k{font-size:13px;font-weight:900;color:var(--teal)}
.g-t{font-size:28px;font-weight:900;margin:2px 0 10px!important}
.g-m{font-size:15px;line-height:1.7;font-weight:700}
.g-line{display:block;width:100%;min-height:52px;margin:16px 0 10px;border:0;border-radius:4px;background:#06c755;color:#fff;font-size:17px;font-weight:900;cursor:pointer}
.g-s{font-size:13px;line-height:1.6;color:var(--gray)}
.g-note{margin-top:12px!important;padding-top:10px;border-top:1px solid #d6cfbd;font-size:12px;color:var(--gray)}