:root { --c0: #CFCFC8; --c1: #96968E; --c2: #555550; --c3: #151514; --game-w: 960px; --game-h: 720px; }
* { box-sizing: border-box; user-select: none; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--c3); font-family: monospace; color: var(--c3); }
button, input { font-family: monospace; }
.scale-root { position: absolute; left: 0; top: 0; width: var(--game-w); height: var(--game-h); transform-origin: top left; }
.game { position: relative; width: var(--game-w); height: var(--game-h); overflow: hidden; background: var(--c1); border: 6px solid var(--c3); image-rendering: pixelated; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; image-rendering: pixelated; z-index: 0; pointer-events: none; }
.keyboard-hotspot { position: absolute; left: 210px; top: 292px; width: 270px; height: 92px; z-index: 10; cursor: pointer; }
.keyboard-hotspot:hover { outline: 3px solid var(--c0); outline-offset: -3px; }
.pellet { position: absolute; left: 327px; top: 527px; width: 26px; height: 26px; border-radius: 50%; background: var(--c0); border: 3px solid var(--c3); box-shadow: 1px 3px 0 var(--c2), inset -4px -4px 0 var(--c1); display: none; z-index: 15; cursor: pointer; image-rendering: pixelated; }
.pellet.show { display: block; animation: pelletPop 0.18s steps(2); }
@keyframes pelletPop { from { transform: translateY(-16px); }
to { transform: translateY(0); }
} .mamedaifuku { position: absolute; left: 440px; top: 80px; width: 564px; height: 564px; z-index: 12; image-rendering: pixelated; }
.mamedaifuku img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; display: block; pointer-events: none; }
.sprite-changing { animation: spriteTwitch 0.22s steps(2) 2; }
@keyframes spriteTwitch { 0% { transform: translate(0, 0); }
50% { transform: translate(3px, -2px); }
100% { transform: translate(0, 0); }
} .bubble { position: absolute; left: 536px; top: 78px; width: 356px; min-height: 112px; padding: 18px 22px 34px; background: var(--c0); border: 6px solid var(--c3); //     box-shadow: 8px 8px 0 var(--c2); font-size: 22px; line-height: 1.55; white-space: pre-line; display: none; z-index: 30; cursor: pointer; }
.bubble::after { content: ""; position: absolute; right: 74px; bottom: -20px; width: 28px; height: 28px; background: var(--c0); border-right: 6px solid var(--c3); border-bottom: 6px solid var(--c3); transform: rotate(45deg); }
.bubble.show { display: block; }
.tap-indicator { position: absolute; right: 16px; bottom: 8px; font-size: 16px; line-height: 1; color: var(--c3); display: none; animation: blinkTap 0.8s steps(2) infinite; pointer-events: none; }
.tap-indicator.show { display: block; }
@keyframes blinkTap { 0% { opacity: 1; }
50% { opacity: 0.35; }
100% { opacity: 1; }
} .choice { position: absolute; left: 340px; top: 600px; transform: translateX(-50%); display: none; gap: 12px; z-index: 35; }
.choice.show { display: flex; }
button { font-size: 20px; padding: 10px 16px; background: var(--c0); color: var(--c3); border: 5px solid var(--c3); box-shadow: 5px 5px 0 var(--c2); cursor: pointer; }
button:hover { background: var(--c1); }
button:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--c2); }
.restart-button { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: none; z-index: 70; font-size: 24px; padding: 12px 24px; }
.restart-button.show { display: block; }
.restart-button:active { transform: translate(calc(-50% + 3px), 3px); }
.modal { position: absolute; inset: 0; display: none; place-items: center; background: var(--c3); z-index: 50; }
.modal.show { display: grid; }
.input-box { width: 430px; padding: 24px; background: var(--c0); border: 7px solid var(--c3); box-shadow: 10px 10px 0 var(--c2); }
.input-box label { display: block; font-size: 20px; margin-bottom: 14px; }
.input-row { display: flex; gap: 10px; }
input { flex: 1; min-width: 0; font-size: 22px; padding: 10px; background: var(--c0); color: var(--c3); border: 5px solid var(--c3); outline: none; }
.hint { display: none; position: absolute; left: 548px; bottom: 36px; font-size: 18px; color: var(--c3); background: var(--c0); border: 4px solid var(--c3); padding: 6px 10px; z-index: 20; }
/* スマホタップ時の青いハイライトを消す */ * { -webkit-tap-highlight-color: transparent; }
/* 長押しメニューや選択も抑える */ html, body, .game, .keyboard-hotspot, .bubble, .pellet, .choice, button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* ボタンや疑似ボタンの青枠・標準フォーカスを消す */ button, .keyboard-hotspot, .bubble, .pellet { outline: none; -webkit-appearance: none; appearance: none; }
/* タップ直後のブラウザ標準色変化を抑える */ button:focus, button:active, .keyboard-hotspot:focus, .keyboard-hotspot:active, .bubble:focus, .bubble:active, .pellet:focus, .pellet:active { outline: none; -webkit-tap-highlight-color: transparent; }
#footerLinks { position: fixed; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1; white-space: nowrap; color: #96968E; opacity: 0.8; }
#footerLinks .copyright { color: #96968E; }
#footerLinks a { display: inline-grid; place-items: center; width: 24px; height: 24px; color: #CFCFC8; background: #151514; border: 2px solid #555550; text-decoration: none; font-size: 13px; font-weight: bold; -webkit-tap-highlight-color: transparent; }
#footerLinks a:hover { color: #151514; background: #CFCFC8; }
.early-access-badge { position: absolute; left: 18px; top: 18px; z-index: 25; padding: 6px 10px; background: var(--c0); color: var(--c3); border: 4px solid var(--c3); font-size: 16px; line-height: 1; opacity: 0.86; pointer-events: none; }
#forceReloadButton { width: auto; height: 24px; padding: 0 8px; font-size: 13px; line-height: 1; color: #CFCFC8; background: #151514; border: 2px solid #555550; box-shadow: none; }
#forceReloadButton:hover { color: #151514; background: #CFCFC8; }
#forceReloadButton:active { transform: translate(1px, 1px); box-shadow: none; }
.help-button { position: absolute; right: 18px; top: 18px; z-index: 45; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; font-size: 22px; line-height: 1; font-weight: bold; color: var(--c3); background: var(--c0); border: 4px solid var(--c3); box-shadow: 4px 4px 0 var(--c2); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.help-button:hover { background: var(--c1); }
.help-button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c2); }
.help-balloon { position: absolute; right: 18px; top: 66px; z-index: 44; width: 392px; padding: 16px 18px; display: none; color: var(--c3); background: var(--c0); border: 5px solid var(--c3); box-shadow: 6px 6px 0 var(--c2); font-size: 18px; line-height: 1.55; white-space: normal; }
.help-balloon.show { display: block; }
.help-balloon::before { content: ""; position: absolute; right: 10px; top: -14px; width: 22px; height: 22px; background: var(--c0); border-left: 5px solid var(--c3); border-top: 5px solid var(--c3); transform: rotate(45deg); }
.help-title { margin-bottom: 8px; font-size: 21px; font-weight: bold; }
.help-text { margin-bottom: 12px; }
.help-stats { padding-top: 10px; border-top: 3px solid var(--c2); font-size: 17px; }
.keyboard-hotspot:hover { outline: none; }