/* 한글 팡 — 한지와 단청색. 공용 틀은 /kit/sea.css + gamekit.css */
:root { --gk-bg: #26392F; --gk-panel: #FFF8E8; --gk-panel2: #F2E4C4; --gk-line: rgba(67,50,31,.20); --gk-text: #262117; --gk-text2: #514837; --gk-text3: #716653; --gk-acc: #3F7559; --gk-ink: #FFF9E9; --gk-amb: #D8A943; --gk-red: #A83F38; }
.sea-stage { background-color: #E9DCBD; background-image: repeating-linear-gradient(1deg, rgba(76,55,31,.035) 0 1px, transparent 1px 5px), linear-gradient(rgba(255,250,235,.75), rgba(225,208,170,.76)); }
.fe-play { position: absolute; left: 0; right: 0; top: 48px; bottom: 0; display: flex; flex-direction: column; padding: 2px 8px 8px; gap: 6px; }

/* 목표 줄 + 별 막대 */
.fe-top { flex: none; }
.fe-goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px; min-height: 26px; padding: 3px 10px; border-radius: 14px; background: rgba(255,255,255,.16); font-size: 12.5px; font-weight: 700; color: #E6F7FB; }
.fe-goals .goal { display: flex; align-items: center; gap: 5px; }
.fe-goals .goal canvas { width: 18px; height: 18px; flex: none; }
.fe-goals b { color: #fff; font-variant-numeric: tabular-nums; }
.fe-goals .goal.done, .fe-goals .goal.done b { color: var(--sun); }
.fe-meter { position: relative; height: 9px; margin: 9px 10px 4px; border-radius: 99px; background: rgba(4,49,58,.35); }
.fe-meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--aqua), var(--sun)); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.fe-meter .mk { position: absolute; top: 50%; width: 20px; height: 20px; margin: -11px 0 0 -10px; font-size: 18px; line-height: 20px; text-align: center; color: rgba(4,49,58,.55); transition: color .3s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.fe-meter .mk.on { color: var(--sun); transform: scale(1.25); text-shadow: 0 0 8px rgba(255,209,102,.8); }

/* 판 */
.fe-board { position: relative; flex: 1 1 auto; min-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.sea-stage .fe-board canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 18px; box-shadow: 0 10px 28px rgba(4,49,58,.35); }
.sea-stage .fe-board canvas:focus { outline: none; }
.sea-stage .fe-board canvas:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.fe-toast { position: absolute; left: 50%; top: 10px; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; max-width: 94%; padding: 8px 14px; border-radius: 99px; background: rgba(4,49,58,.88); color: var(--foam); font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .25s, transform .3s; z-index: 2; }
.fe-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 세종대왕 + 말풍선 */
.fe-buk { flex: 0 0 auto; margin-bottom: auto; display: flex; align-items: center; gap: 10px; min-height: 80px; padding: 0 4px; }
.fe-buk img { width: min(150px, 36vw); height: min(150px, 36vw); flex: none; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(58,39,22,.24)); transform-origin: 50% 80%; }
.fe-buk img.bump { animation: feBump .5s cubic-bezier(.34,1.56,.64,1); }
.fe-buk img.chomp { animation: feChomp .6s ease; }
@keyframes feBump { 0% { transform: scale(.86) rotate(-4deg); } 100% { transform: none; } }
@keyframes feChomp { 0%, 100% { transform: none; } 25% { transform: scale(1.12) rotate(-6deg); } 55% { transform: scale(.95) rotate(4deg); } }
.fe-say { position: relative; flex: 1; margin: 0; padding: 11px 14px; border-radius: 18px; background: var(--foam); color: var(--ink); font-size: 15px; font-weight: 750; line-height: 1.4; letter-spacing: -.01em; word-break: keep-all; box-shadow: 0 6px 16px rgba(58,39,22,.18); min-height: 44px; border: 1px solid rgba(67,50,31,.16); }
.fe-say::before { content: ""; position: absolute; left: -8px; top: 50%; margin-top: -8px; border: 8px solid transparent; border-left: 0; border-right-color: var(--foam); }
.fe-say:empty { visibility: hidden; }

/* 시작 화면 덧붙임: 난이도 설명 + 오늘의 판 */
.gk-ov .gk-card { max-height: 100%; overflow: auto; }
.fe-desc { margin: -6px 0 12px; font-size: 12.5px; color: var(--gk-text2); line-height: 1.5; }
.fe-face { display: block; width: 92px; height: 92px; margin: 0 auto -4px; }
.fe-daily { width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(255,209,102,.6); background: linear-gradient(135deg, rgba(255,209,102,.22), rgba(255,209,102,.04) 60%), var(--gk-panel); color: var(--gk-text); font: inherit; cursor: pointer; }
.fe-daily .d1 { font-size: 11.5px; font-weight: 750; color: var(--sun); }
.fe-daily .d2 { font-size: 17px; font-weight: 820; letter-spacing: -.03em; }
.fe-daily .d3 { grid-column: 1; font-size: 12px; color: var(--gk-text2); }
.fe-daily .go { grid-row: 1 / span 3; grid-column: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sun); color: var(--ink); }
.fe-daily .go svg { width: 18px; height: 18px; }
.fe-stars { display: block; margin: 0 0 6px; letter-spacing: 6px; }
.fe-stars i { font-style: normal; font-size: 30px; color: rgba(255,255,255,.22); }
.fe-stars i.on { color: var(--sun); text-shadow: 0 4px 14px rgba(255,209,102,.5); }
.fe-change { width: 100%; margin-top: 8px; }

/* 규칙 설명(판 아래) */
.fe-rules { max-width: 760px; margin: 10px auto 0; padding: 0 14px; font-size: 13px; color: var(--mute); }
.fe-rules summary { cursor: pointer; font-weight: 800; color: var(--foam); padding: 6px 0; }
.fe-legend { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 10px; }
.fe-legend li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; }
.fe-legend canvas { width: 44px; height: 44px; border-radius: 12px; }
.fe-legend b { display: block; font-size: 14px; color: var(--foam); }
.fe-legend span { line-height: 1.5; }
.fe-note { margin: 8px 0 0; line-height: 1.6; }
body.playing .fe-rules { display: none; }

@media (max-height: 700px) { .fe-buk { min-height: 76px; } .fe-buk img { width: 80px; height: 80px; } .fe-say { font-size: 14px; padding: 9px 12px; } }
@media (prefers-reduced-motion: reduce) { .fe-buk img.bump, .fe-buk img.chomp { animation: none; } }
.sea-stage .fe-goals .goal canvas { position: static; top: auto; width: 18px; height: 18px; border-radius: 0; box-shadow: none; }
.gk-title { font: 400 39px/1.05 NanumBrush, Pretendard, sans-serif; color: #4D2D22; }
.gk-kick { color: #3F7559; }
.gk-ov { background: rgba(35,48,39,.82); }
.gk-card { padding: 18px; border-radius: 20px; background: rgba(255,248,232,.96); box-shadow: 0 18px 46px rgba(42,30,18,.28); }
.gk-btn.pri { background: #3F7559; color: #FFF9E9; }
.gk-seg button[aria-pressed="true"] { background: #E4C66B; color: #241F16; box-shadow: inset 0 0 0 1px rgba(89,61,27,.24); }

/* 판정 보정(클로드): 한지 위 점수판 대비, 세종대왕 크게 */
.sea-stage .gk-pill, .sea-stage .gk-ic, .gk-pill, .gk-ic { background: #FFF9EC; color: #201C18; border: 1px solid rgba(32,28,24,.16); box-shadow: 0 2px 8px rgba(32,28,24,.12); }
.gk-pill b { color: #201C18; } .gk-pill i { color: #5F564B; } .gk-pill.score b { color: #167C78; }
.gk-ic svg, .gk-ic { color: #201C18; fill: currentColor; }
.fe-goals { background: rgba(32,28,24,.06); color: #4A4238; }
.fe-goals b { color: #201C18; }
.fe-buk { min-height: 150px; }
.fe-buk img { width: min(190px, 46vw); height: min(190px, 46vw); }
.fe-say { font-size: 16px; }
@media (max-height: 700px) { .fe-buk img { width: 110px; height: 110px; } }