/* 과일 합치기(수박 만들기) — 과수원 마켓 톤: 크림 바탕 + 나무 상자 + 수박 레드/그린 포인트 */
#fm-game { position:relative; width:100%; max-width:100%; margin:0 auto; border:1px solid #e6cda6; border-radius:20px; overflow:hidden; background:#fff7e8; color:#4a2f18; box-shadow:0 18px 45px rgba(120,70,20,.14); user-select:none; -webkit-user-select:none; }
#fm-game, #fm-game * { box-sizing:border-box; }
#fm-game [hidden] { display:none !important; }
#fm-game button { font-family:inherit; }
#fm-game button:focus-visible { outline:3px solid #ff9f43; outline-offset:-3px; }
.fm-toolbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:11px 16px; background:linear-gradient(110deg,#2f9a52,#1d7a3e); color:#fff; }
.fm-brand { display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.12em; font-size:.72rem; }
.fm-brand > i { font-size:22px; color:#ffd1d1; }
.fm-brand small { display:block; margin-top:2px; font-size:.66rem; font-weight:600; opacity:.9; letter-spacing:.02em; }
.fm-tools { display:flex; gap:6px; flex-shrink:0; }
.fm-tools button { min-height:36px; padding:0 11px; border-radius:8px; border:1px solid #ffffff55; background:#ffffff1c; color:#fff; font-weight:700; font-size:.74rem; cursor:pointer; }
.fm-tools button[aria-pressed="true"] { background:#ffffff33; border-color:#fff; }
.fm-tools button:disabled { opacity:.4; cursor:default; }
.fm-body { display:grid; grid-template-columns:minmax(0,1fr) 250px; grid-template-rows:auto auto 1fr; grid-template-areas:"stage top" "stage evo" "stage keys"; gap:12px; padding:12px; align-items:start; }
.fm-stage { grid-area:stage; display:flex; justify-content:center; align-items:flex-start; }
.fm-canvaswrap { position:relative; display:inline-block; outline:none; border-radius:16px; }
.fm-canvaswrap:focus-visible { box-shadow:0 0 0 3px #ff9f43; }
#fm-canvas { display:block; touch-action:none; border-radius:16px; background:#fff9ec; -webkit-tap-highlight-color:transparent; cursor:crosshair; }
#fm-hint { position:absolute; left:10px; right:10px; bottom:6px; text-align:center; font-size:.72rem; font-weight:700; color:#7a4b22; pointer-events:none; text-shadow:0 1px 0 #fff; }
.fm-top { grid-area:top; display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:6px; }
.fm-top > div { text-align:center; padding:10px 6px; border-radius:14px; background:#fff; border:1px solid #f0dcbd; min-height:82px; display:flex; flex-direction:column; justify-content:center; }
.fm-top small { display:block; font-size:.62rem; font-weight:700; color:#9a7150; letter-spacing:.04em; }
.fm-top strong { display:block; line-height:1.3; font-size:1.3rem; font-weight:900; font-variant-numeric:tabular-nums; color:#4a2f18; }
.fm-top .fm-scorebox { background:linear-gradient(160deg,#fff3f3,#ffe1e1); border-color:#ffc9c9; }
.fm-top .fm-scorebox strong { color:#d92d2d; font-size:1.65rem; }
.fm-top .fm-nextbox strong { display:flex; align-items:center; justify-content:center; gap:4px; }
#fm-next { width:44px; height:44px; display:block; margin:0 auto; }
#fm-nextname { font-size:.75rem; font-weight:800; color:#2f9a52; }
.fm-evo { grid-area:evo; padding:10px 8px 6px; border-radius:14px; background:#fff; border:1px solid #f0dcbd; }
.fm-evo small { display:block; text-align:center; font-size:.64rem; font-weight:700; color:#9a7150; margin-bottom:2px; }
#fm-evo { display:block; width:100%; height:72px; }
.fm-evo .fm-maxline { text-align:center; font-size:.72rem; color:#6b4a2b; margin-top:2px; }
.fm-evo .fm-maxline b { color:#d92d2d; }
.fm-keys { grid-area:keys; padding:10px 12px; border-radius:14px; background:#fff; border:1px solid #f0dcbd; font-size:.7rem; line-height:1.7; color:#6b4a2b; }
.fm-keys kbd { display:inline-block; padding:0 6px; border:1px solid #d9c3a3; border-bottom-width:2px; border-radius:5px; background:#fdf6ea; color:#4a2f18; font-family:inherit; font-size:.66rem; font-weight:800; box-shadow:none; }
.fm-overlay { position:absolute; inset:0; z-index:8; display:flex; align-items:center; justify-content:center; padding:18px; border-radius:16px; background:linear-gradient(180deg,#fff7e8aa,#fff1d9ee 30%,#ffeccff5); }
.fm-panel { width:100%; max-width:380px; text-align:center; padding:24px 18px; border:1px solid #ecd2ad; border-radius:18px; background:#fffdf8; box-shadow:0 16px 45px rgba(120,70,20,.2); }
.fm-eyebrow { display:inline-block; font-size:.67rem; font-weight:800; letter-spacing:.12em; color:#2f9a52; margin-bottom:8px; }
.fm-panel h2 { margin:0 0 14px; color:#3d2412; font-size:1.75rem; font-weight:900; word-break:keep-all; letter-spacing:-.04em; }
.fm-panel p { margin:0 0 14px; color:#6b4a2b; line-height:1.75; font-size:.84rem; word-break:keep-all; }
.fm-panel p b { color:#d92d2d; }
.fm-demo { display:flex; gap:6px; justify-content:center; align-items:center; margin:0 0 14px; font-size:1.5rem; }
.fm-demo span { opacity:.85; }
.fm-demo i { font-style:normal; font-size:.9rem; color:#9a7150; font-weight:800; }
.fm-primary { min-width:200px; padding:14px 26px; border:0; border-radius:12px; cursor:pointer; color:#fff; background:linear-gradient(130deg,#ff5a5a,#d92d2d); font-size:1rem; font-weight:900; box-shadow:0 5px 0 #9c1d1d,0 12px 24px rgba(217,45,45,.25); touch-action:manipulation; }
.fm-primary:active { transform:translateY(3px); box-shadow:0 2px 0 #9c1d1d; }
.fm-primary span { opacity:.75; margin-left:8px; }
.fm-best { margin:0 0 14px; color:#9a7150; font-size:.8rem; font-weight:700; min-height:1em; }
.fm-best b { color:#d92d2d; }
.fm-note { display:block; margin-top:14px; color:#9a7150; font-size:.62rem; line-height:1.5; }
.fm-final { margin:2px 0 8px; font-size:3.9rem; line-height:1; font-weight:900; color:#d92d2d; font-variant-numeric:tabular-nums; }
.fm-final small { font-size:.9rem; color:#9a7150; margin-left:4px; }
.fm-grade { margin:2px 0 8px; font-size:1.2rem; font-weight:900; color:#1d7a3e; }
.fm-detail { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 12px; margin:0 0 18px; color:#9a7150; font-size:.76rem; }
.fm-detail b { color:#3d2412; }
.fm-newrecord { display:inline-block; margin:0 0 12px; padding:5px 14px; border-radius:20px; background:#fff3d6; border:1px solid #f2c979; color:#b7791f; font-size:.76rem; font-weight:900; }
.fm-guide { margin-top:16px; padding:14px 16px; border-radius:16px; text-align:left; line-height:1.7; }
.fm-guide h3 { margin:0 0 6px; font-size:1rem; font-weight:900; }
.fm-guide p { margin:0 0 4px; font-size:.9rem; line-height:1.65; }
.fm-guide small { font-size:.8rem; opacity:.75; }
/* ── 전체화면 ──
   Fullscreen API 가 있으면 그걸 쓰고, 아이폰 사파리(요소 전체화면 미지원)는 fixed 오버레이로 같은 화면을 만든다.
   두 경로 모두 .fm-fs 를 붙여 한 벌의 CSS 로 처리한다. 노치 대응은 env(safe-area-inset-*). */
body.fm-noscroll { overflow:hidden; }
#fm-game.fm-fs { position:fixed; inset:0; z-index:99999; width:auto; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; }
#fm-game.fm-fs .fm-body { flex:1; min-height:0; grid-template-rows:auto 1fr; grid-template-areas:"stage top" "stage evo";
    padding:calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
#fm-game.fm-fs .fm-stage { height:100%; min-height:0; align-items:center; }
#fm-game.fm-fs .fm-keys { display:none; }
#fm-game.fm-fs .fm-evo { align-self:start; }
@media (max-width:720px), (max-height:560px) {
    /* 좁거나 낮은 화면(가로로 든 휴대폰 포함)에서는 게임판에 화면을 몰아 준다 */
    #fm-game.fm-fs .fm-body { grid-template-columns:1fr; grid-template-rows:auto 1fr; grid-template-areas:"top" "stage"; gap:8px; }
    #fm-game.fm-fs .fm-evo { display:none; }
    #fm-game.fm-fs .fm-top > div { min-height:0; padding:6px 4px; }
    #fm-game.fm-fs .fm-top strong { font-size:1rem; }
    #fm-game.fm-fs .fm-top .fm-scorebox strong { font-size:1.3rem; }
    #fm-game.fm-fs #fm-next { width:30px; height:30px; }
}

@media (max-width:720px) {
    .fm-body { grid-template-columns:1fr; grid-template-rows:auto auto auto; grid-template-areas:"top" "stage" "evo"; gap:10px; padding:10px; }
    .fm-keys { display:none; }
    .fm-top > div { min-height:72px; padding:8px 4px; }
    .fm-top strong { font-size:1.1rem; }
    .fm-top .fm-scorebox strong { font-size:1.45rem; }
    #fm-next { width:38px; height:38px; }
    .fm-toolbar { padding:9px 12px; } .fm-brand { font-size:.64rem; gap:7px; } .fm-brand > i { font-size:19px; } .fm-tools button { padding:0 9px; }
    .fm-overlay { padding:12px; } .fm-panel { padding:20px 12px; } .fm-panel h2 { font-size:1.45rem; } .fm-panel p { font-size:.78rem; } .fm-final { font-size:3.2rem; }
}
@media (prefers-reduced-motion:reduce) { .fm-primary { transition:none; } }