/* お問い合わせフォーム（contact.html）の「ご提案・営業」ミニゲーム用CSS。
3種: ドットをつかまえろ(contact-game.js) / 業務のムダを撃ち落とせ(contact-shooter.js) / 動きで浮かぶ数字(contact-motion.js)。
色は contact.html の :root 変数（--gold --red --line --bg-3 など）に合わせる。変数が無くても動くよう既定値を持つ。 */
/* ゲーム欄の枠 */
#game-box{border:2px dashed var(--gold,#ffd840);padding:16px;margin:0 0 22px;background:var(--bg,#05060a)}
#game-box[hidden]{display:none}
.game-lead{font-size:13px;color:var(--gold,#ffd840);margin-bottom:10px;line-height:1.7}
.game-info{font-family:var(--ff-mono,monospace);font-size:13px;color:var(--dim,#b6afa1);min-height:2.6em;line-height:1.6;margin-bottom:10px}
.game-help{font-size:12px;color:var(--dim,#b6afa1);line-height:1.7;margin-top:8px;text-align:center}
.game-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 共通ボタン（.cform button の幅100%・大きな文字を上書きする） */
.cform .game-btn{width:auto;min-height:44px;padding:10px 16px;font-size:16px;letter-spacing:2px;box-shadow:4px 4px 0 var(--red-dim,#880010)}
.cform .game-btn-sub{background:var(--bg-3,#151619);border-color:var(--dim,#b6afa1)}
.cform .game-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.cform .game-btn[hidden]{display:none}
/* 1. ドットをつかまえろ */
.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:320px;margin:0 auto 14px}
.cform .game-cell{width:100%;aspect-ratio:1/1;min-height:48px;padding:0;background:var(--bg-3,#151619);border:2px solid var(--line,rgba(236,232,223,.16));box-shadow:none;letter-spacing:0;font-size:0}
.cform .game-cell:hover{transform:none}
.cform .game-cell.on{background:var(--gold,#ffd840);border-color:var(--fg,#ece8df);box-shadow:0 0 12px var(--gold,#ffd840);animation:g-pop .25s steps(2)}
.cform .game-cell.still{animation:none}
.cform .game-cell:disabled{opacity:1;cursor:default}
.cform .game-start{padding:10px;font-size:16px;box-shadow:4px 4px 0 var(--red-dim,#880010);max-width:320px;display:block;margin:0 auto}
.cform .game-start:disabled{cursor:not-allowed}
@keyframes g-pop{0%{transform:scale(.85)}100%{transform:scale(1)}}
/* 2. 業務のムダを撃ち落とせ（シューティング。論理320x240のキャンバスを親幅に合わせて縮める） */
.shooter-stage{width:100%;max-width:480px;margin:0 auto}
.shooter-canvas{display:block;width:100%;height:auto;aspect-ratio:4/3;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;border:2px solid #373741}
.shooter-canvas:focus{outline:none}
.shooter-canvas:focus-visible{outline:2px solid var(--gold,#ffd840);outline-offset:2px}
.shooter-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}
.shooter-result{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line,rgba(236,232,223,.16));text-align:center}
.shooter-result[hidden]{display:none}
.shooter-result-title{font-family:var(--ff-pixel,sans-serif);color:var(--gold,#ffd840);font-size:15px;line-height:1.6;margin-bottom:6px}
.shooter-result-score{font-family:var(--ff-term,monospace);font-size:22px;color:var(--fg,#ece8df);letter-spacing:1px;margin-bottom:12px}
/* 3. 動きで浮かぶ数字（論理260x260のキャンバス。最大300px） */
.motion-lead{font-size:13px;color:var(--fg,#ece8df);line-height:1.8;margin-bottom:12px}
.motion-stage{width:100%;max-width:300px;margin:0 auto 12px}
.motion-canvas{display:block;width:100%;height:auto;aspect-ratio:1/1;background:var(--bg,#05060a);border:2px solid var(--line,rgba(236,232,223,.16));image-rendering:pixelated}
.motion-digits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:320px;margin:0 auto 12px}
.cform .motion-digit{width:100%;aspect-ratio:1/1;min-height:48px;padding:0;font-family:var(--ff-term,monospace);font-size:28px;letter-spacing:0;background:var(--bg-3,#151619);border:2px solid var(--line,rgba(236,232,223,.16));box-shadow:none}
.cform .motion-digit:hover{transform:none}
.cform .motion-digit:disabled{opacity:.45}
@media (max-width:420px){
#game-box{padding:12px}
.cform .game-btn{padding:10px 12px;letter-spacing:1px}
}
@media (prefers-reduced-motion:reduce){.cform .game-cell.on{animation:none}}