웹게임?

공부

웹게임?

sourceoftax 2026. 2. 11. 17:56

http://youtube.com/watch?v=iYbAqAclhuk&feature=youtu.be

플레이 영상

학교 동아리 초보 코딩 대회 냈던 거

컨셉

초기 기획안은 다음과 같습니다

초기 화면

집 배경
돌아다니는 마릴리
휴대폰 손에 쥐고 있음(이게 메뉴 화면) -> 휴대폰 앱을 클릭하면 이벤트로 넘어갈 수 있음

이벤트 1(산책)

공통: 화면을 걸어가며 랜덤 이벤트 조우 형식. 마릴리의 총 체력 5. 다니며 다른 포켓몬들을 조우 가능. 조우시 '선공/지켜보기/도망' 중 선택 가능. 호전적인 포켓몬을 만났을 시: '선공'시 해당 포켓몬이 가진 나무열매or조미료 습득 가능. '지켜보기' 시 50% 확률로 공격받음(마릴리의 체력-1), 50% 확률로 아무 일도 일어나지 않음. '도망' 선택시 25% 확률로 공격받음(마릴리의 체력 -1) 중립적인 포켓몬을 만났을 시: '선공'시 해당 포켓몬이 가진 나무열매or조미료 습득 가능. '지켜보기' 시 50% 확률로 공격받음(마릴리의 체력-1), 50% 확률로 온순한 포켓몬이 다가와 나무열매를 건네줌. '도망' 선택시 아무 일도 일어나지 않음 온순한 포켓몬을 만났을 시: '선공'시 해당 포켓몬이 가진 나무열매 습득 가능, '죄책감이 든다...'라는 메시지 나옴. '지켜보기' 시 50% 확률로 온순한 포켓몬이 다가와 나무열매를 건네줌, 50% 확률로 아무 일도 일어나지 않음. '도망' 선택시 아무 일도 일어나지 않음

마릴리의 체력이 0이 되면 강제 귀가. 아래의 이벤트가 나오면(조우 확률 약 10%) 산책 성공으로 처리함. 이후 초기 화면으로 돌아감

1-1. 숲

대량의 나무열매를 획득 가능

1-2. 강

대량의 조미료 획득 가능. 마릴리의 기분이 좋아짐

이벤트 2(요리)

보유한 나무열매와 조미료를 선택해 진입 가능. 소지한 나무열매 or 조미료가 하나도 없다면 진입 불가 2-1. 불 지피기: 클릭 or 스페이스바 연타를 통해 불이 꺼지지 않게 유지해야 함
완성된 요리를 마릴리가 먹는 CG. 이후 초기 화면으로 돌아감
여기에 나무열매와 조미료 조합에 따라 마릴리의 선호가 달라지는 변동성 넣어도 좋을듯?

이벤트 3(목욕)

마릴리 일러스트에 스펀지(마우스 커서)를 대고 클릭하면 거품 묻히기 가능 -> 이후 거품이 충분히(시스템 최대 거품 기준 70% 이상) 묻었다면 샤워기 아이콘 등장 -> 샤워기로 거품을 씻어내면 이벤트 완료. 초기 화면으로 돌아감

해당 로직들을 구현하기 위해 코드를 크게 네 가지로 분류해 작성하였습니다.

Python산책: 턴 수에 따라 이벤트 확률을 증가시키고, 포켓몬 조우 시 성격과 사용자의 선택에 따라 피해·보상 결과를 계산합니다.목욕: 진행도를 받아 샤워기 해금 여부를 판단하는 로직을 담당합니다.
요리: 사용자가 투입한 재료 조합을 레시피 테이블과 비교해 결과와 기분 변화를 결정합니다.
게임의 상태를 저장하고, 프론트엔드에서 필요한 정보를 API로 제공하는 백엔드 역할입니다. 각 모듈에서 해당 코드가 맡은 역할은 다음과 같습니다
HTML
게임 화면의 구조를 정의하는 프론트엔드 레이아웃입니다. 집·산책·요리·목욕을 각각 하나의 section으로 구성해 한 페이지 안에 배치하고, JavaScript가 필요한 화면만 전환하도록 설계했습니다. HUD, 대사창, 선택 버튼, 진행 바 등 주요 UI 요소를 미리 배치하며, 이미지 리소스를 불러오는 경로도 함께 정의합니다.
Javascript산책: 일정 시간마다 조우 요청 + 선택 UI 표시 및 결과 메시지·상태 갱신을 처리합니다.요리: 재료 사용량을 서버에 전달하고, 결과에 맞는 반응 연출을 출력합니다.
목욕: 포인터 이동에 따라 진행도를 증가시키고, 70% 이상일 경우 샤워 모드로 전환합니다.
서버 API를 호출해 상태를 받아오고, 이를 즉시 화면에 반영하는 역할을 합니다. 화면 전환 관리와 대사 출력 로직을 담당하며, 각 기능별 동작 흐름을 제어합니다.
CSS
전체를 풀스크린으로 고정하고 각 장면들을 absolute로 겹쳐 올린 다음 필요한 장면들만 보이게 합니다. HUD는 반투명 패널을 사용해 다른 화면을 완전히 가리지 않게 만들었습니다. 또한 캐릭터의 흔들림 애니메이션, 목욕 커서 변경 등 시각적인 효과를 담당하는 파트입니다.

후기

코드 전반을 작성할 때 동일한 포켓몬 소재+웹게임으로 제작된 POKEROGUE의 코드(https://github.com/pagefaultgames/pokerogue, 공식 깃허브)를 참조했습니다. 이미지는 공식 이미지/

javascripts 코드가 상당히 긴데, 만드는 중간에 개별 기능들을 모듈화하는게 훨씬 편했을 거라는 생각이 들어 아쉬움이 남습니다.

더 넣고 싶은 기능이 많았지만 자꾸만 오류가 나 삭제하게 된 기능들이 다수 있었습니다. 알고리즘에 대한 공부와 게임 엔진을 사용하는 법을 공부해서 다음에는 더 퀄리티 높은 게임을 만들어보고 싶습니다

코드

1. py

from flask import Flask, render_template, jsonify, request, session
import random

app = Flask(__name__)
app.secret_key = "dev-secret-change-me"

POKEMON_DB = [
    {"id": "mankey", "name": "망키", "temper": "aggressive", "loot": {"berries": (0, 1), "spices": (1, 2)}, "weight": 12},
    {"id": "ekans",  "name": "아보", "temper": "aggressive", "loot": {"berries": (0, 1), "spices": (1, 1)}, "weight": 10},
    {"id": "zubat",  "name": "주뱃", "temper": "aggressive", "loot": {"berries": (0, 1), "spices": (1, 1)}, "weight": 8},

    {"id": "pidgey", "name": "구구", "temper": "neutral", "loot": {"berries": (1, 2), "spices": (0, 1)}, "weight": 14},
    {"id": "oddish", "name": "뚜벅쵸", "temper": "neutral", "loot": {"berries": (1, 1), "spices": (0, 2)}, "weight": 10},
    {"id": "sandshrew", "name": "모래두지", "temper": "neutral", "loot": {"berries": (1, 2), "spices": (0, 1)}, "weight": 8},

    {"id": "togepi", "name": "토게피", "temper": "gentle", "loot": {"berries": (1, 2)}, "weight": 10},
    {"id": "chansey","name": "럭키", "temper": "gentle", "loot": {"berries": (2, 3)}, "weight": 6},
    {"id": "eevee",  "name": "이브이", "temper": "gentle", "loot": {"berries": (1, 3)}, "weight": 9},
]

RECIPE_TABLE = {
    (1, 0): {"name": "달콤한 수프", "pref": +1, "message": "평범한 조합이다. 마릴리가 즐거워하며 먹었다."},
    (0, 1): {"name": "짠맛 수프", "pref": 0,  "message": "짠 맛이 느껴진다... 마릴리의 취향은 아닌 것 같다."},
    (1, 1): {"name": "이상적인 수프", "pref": +2, "message": "성공적이다! 마릴리가 매우 기쁜 것 같다."},
    (2, 1): {"name": "진한 수프", "pref": +3, "message": "진한 맛이 느껴진다. 마릴리는 기쁘게 먹었다."},
}

DEFAULT_STATE = {
    "hp": 5,
    "berries": 0,
    "spices": 0,
    "mood": "idle",
    "status": "home",
    "walk_turn": 0
}

def clamp_int(x, lo, hi):
    try:
        x = int(x)
    except:
        x = lo
    return max(lo, min(hi, x))

def pick_pokemon():
    weights = [p["weight"] for p in POKEMON_DB]
    return random.choices(POKEMON_DB, weights=weights, k=1)[0]

def roll_loot(pokemon):
    loot = {}
    for k, (a, b) in pokemon["loot"].items():
        loot[k] = random.randint(a, b)
    return loot

def get_state():
    if "state" not in session:
        session["state"] = DEFAULT_STATE.copy()
    return session["state"]

def save_state(state):
    session["state"] = state

@app.route('/')
def home():
    return render_template('index.html')

@app.get('/api/status')
def get_status():
    return jsonify(get_state())

@app.post('/api/reset')
def api_reset():
    session["state"] = DEFAULT_STATE.copy()
    return jsonify(session["state"])

@app.post('/api/walk/encounter')
def walk_event():
    state = get_state()

    if state["hp"] <= 0:
        return jsonify({"type": "forced_home", "reason": "hp_zero", "state": state})

    state["walk_turn"] = int(state.get("walk_turn", 0)) + 1
    turn = state["walk_turn"]

    chance = 0.0
    if turn >= 4:
        chance = 0.10 * (turn - 3)    
        chance = min(chance, 1.0)

    if random.random() < chance:
        gained = random.randint(2,4)
        state["spices"] += gained
        msg = f"강을 발견했다! 조미료를 {gained}만큼 얻었다."

        state["status"] = "home"
        save_state(state)
        return jsonify({"type": "success_spot", "spot": "river", "message": msg, "state": state})

    pokemon = pick_pokemon()
    save_state(state)  
    return jsonify({
        "type": "encounter",
        "pokemon": {"id": pokemon["id"], "name": pokemon["name"], "temper": pokemon["temper"]},
        "state": state
    })

@app.post("/api/walk/start")
def walk_start():
    state = get_state()
    state["walk_turn"] = 0
    save_state(state)
    return jsonify({"ok": True, "state": state})

@app.post("/api/walk/resolve")
def walk_resolve():
    state = get_state()
    if state["hp"] <= 0:
        state["status"] = "home"
        save_state(state)
        return jsonify({"ended": True, "message": "집에 갈 시간이다", "state": state})

    payload = request.get_json(force=True)
    pokemon_id = payload.get("pokemon_id")
    action = payload.get("action")

    pokemon = next((p for p in POKEMON_DB if p["id"] == pokemon_id), None)
    if not pokemon:
        return jsonify({"error": "invalid_pokemon"}), 400

    temper = pokemon["temper"]
    hp_delta = 0
    loot = {"berries": 0, "spices": 0}
    message = ""

    def take_damage():
        nonlocal hp_delta
        hp_delta -= 1

    def gain_loot():
        rolled = roll_loot(pokemon)
        for k, v in rolled.items():
            loot[k] += v

    if action == "attack":
        gain_loot()
        message = f"{pokemon['name']}에게서 재료를 얻었다!" if temper != "gentle" else f"{pokemon['name']}에게서 재료를 얻었다. 왜인지 죄책감이 든다..."
    elif action == "watch":
        if temper in ("aggressive", "neutral"):
            if random.random() < 0.5:
                take_damage()
                message = f"지켜보다가 {pokemon['name']}에게 공격받았다!"
            else:
                if temper == "neutral":
                    gain_loot()
                    message = f"{pokemon['name']}이(가) 다가와 재료를 건네줬다!"
                else:
                    message = "아무 일도 일어나지 않았다."
        else:
            if random.random() < 0.5:
                gain_loot()
                message = f"{pokemon['name']}이(가) 다가와 나무열매를 건네줬다!"
            else:
                message = "아무 일도 일어나지 않았다."
    elif action == "run":
        if temper == "aggressive":
            if random.random() < 0.25:
                take_damage()
                message = f"도망치다 {pokemon['name']}에게 공격받았다!"
            else:
                message = "무사히 도망쳤다."
        else:
            message = "도망쳤다. 아무 일도 일어나지 않았다."
    else:
        return jsonify({"error": "invalid_action"}), 400

    state["hp"] = max(0, state["hp"] + hp_delta)
    state["berries"] += loot["berries"]
    state["spices"] += loot["spices"]

    ended = False
    if state["hp"] <= 0:
        ended = True
        state["status"] = "home"
        message += " 마릴리가 많이 피곤한 것 같다..."

    save_state(state)
    return jsonify({"ended": ended, "hp_delta": hp_delta, "loot": loot, "message": message, "state": state})

@app.get("/api/cook/can_enter")
def cook_can_enter():
    state = get_state()
    can = (state["berries"] > 0 or state["spices"] > 0)
    return jsonify({"can_enter": can, "state": state})

@app.post("/api/cook/finish")
def cook_finish():
    state = get_state()
    payload = request.get_json(force=True)

    berries_used = clamp_int(payload.get("berries_used", 0), 0, state["berries"])
    spices_used = clamp_int(payload.get("spices_used", 0), 0, state["spices"])

    if berries_used == 0 and spices_used == 0:
        return jsonify({"ok": False, "message": "재료가 없습니다.", "state": state})

    state["berries"] -= berries_used
    state["spices"] -= spices_used

    recipe = RECIPE_TABLE.get((berries_used, spices_used)) or {"name": "이상한 요리", "pref": 0, "message": "마릴리가 애매한 표정으로 먹었다."}

    if recipe["pref"] >= 2:
        state["mood"] = "happy"
    elif recipe["pref"] <= -1:
        state["mood"] = "sad"
    else:
        state["mood"] = "idle"

    save_state(state)
    return jsonify({"ok": True, "recipe": recipe, "used": {"berries": berries_used, "spices": spices_used}, "state": state})

@app.post("/api/bath/progress")
def bath_progress():
    state = get_state()
    payload = request.get_json(force=True)
    percent = int(payload.get("percent", 0))
    percent = max(0, min(100, percent))
    return jsonify({"percent": percent, "unlock_shower": percent >= 70, "state": state})

if __name__ == "__main__":
    app.run(debug=True)

2. html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>project 1</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
  <audio id="bgmPlayer" loop>
    <source id="bgmSource" src="" type="audio/mpeg">
  </audio>

  <audio id="marillSound">
    <source src="{{ url_for('static', filename='sounds/marill_cry.mp3') }}" type="audio/mpeg">
  </audio>

  <div id="hud">
    <div id="hud-hp"></div>
    <div id="hud-items">
      <span id="hud-berries">🍓 0</span>
      <span id="hud-spices">🧂 0</span>
    </div>
  </div>

<div id="dialogue-layer" class="ui-layer" style="display:none;">
  <div id="dialogue-box">
    <div id="dialogue-name" style="display:none;"></div>
    <div id="dialogue-text"></div>
    <div id="dialogue-progress" class="dialogue-progress" style="display:none;">
      <div id="dialogue-progress-fill"></div>
    </div>
    <div id="dialogue-hint">▶</div>
  </div>
</div>


  <div id="game-viewport">
    <section id="screen-home" class="screen" style="display:block;">
      <img src="{{ url_for('static', filename='images/bg_home.png') }}" class="bg">

      <div id="wandering-marill-container">
        <img src="{{ url_for('static', filename='images/marill_idle.png') }}" id="wandering-marill" class="character">
      </div>

      <div id="smartphone-container">
        <img src="{{ url_for('static', filename='images/ui/smartphone_frame.png') }}" id="phone-frame-img">
        <div class="app-screen-overlay">
          <div class="app-grid">
            <button class="app-btn" data-event="walk">
              <img src="{{ url_for('static', filename='images/ui/icon_walk.png') }}" alt="산책">
              <span>산책</span>
            </button>
            <button class="app-btn" data-event="cook">
              <img src="{{ url_for('static', filename='images/ui/icon_cook.png') }}" alt="요리">
              <span>요리</span>
            </button>
            <button class="app-btn" data-event="bath">
              <img src="{{ url_for('static', filename='images/ui/icon_bath.png') }}" alt="목욕">
              <span>목욕</span>
            </button>
          </div>
        </div>
      </div>
    </section>

    <section id="screen-walk" class="screen" style="display:none;">
      <img src="{{ url_for('static', filename='images/bg_forest.png') }}" id="walk-bg" class="bg">
      <img id = "walk-marill" src="{{ url_for('static', filename='images/marill_back.png') }}" class="character walk-ani">
      <img id="enemy-img" class="enemy-img" style="display:none;" />

      <div id="walk-info" class="toast">걷는 중…</div>
      <button id = "walk-exit" class="walk-exit">나가기</button>

      <div id="encounter-ui" class="modal" style="display:none;">
        <p id="encounter-text"></p>
        <div class="row">
          <button id="btn-attack">선공</button>
          <button id="btn-watch">지켜보기</button>
          <button id="btn-run">도망</button>
        </div>
      </div>
    </section>


<section id="screen-cook" class="screen" style="display:none;">
  <img src="{{ url_for('static', filename='images/bg_home.png') }}" class="bg">

  <div id="cook-select" class="panel">
    <h3>요리</h3>

    <div class="row" style="align-items:center;">
      <label>🍓 <input id="cook-berries" type="number" min="0" value="1" /></label>
      <label>🧂 <input id="cook-spices" type="number" min="0" value="0" /></label>
    </div>

    <div class="row">
      <button id="cook-confirm">시작</button>
      <button id="cook-recipe">레시피 확인</button>
      <button id="cook-exit">나가기</button>
    </div>

    <div class="hint" id="cook-select-hint">재료를 고르고 '확인'을 눌러야 요리를 시작합니다</div>
  </div>

  <div id="cook-play" class="cook-stage" style="display:none;">
    <img id="cook-stage-img" class="cook-stage-img"
         src="{{ url_for('static', filename='images/cooking.png') }}" alt="cooking">

    <div id="gauge" class="cook-gauge">
      <div id="gauge-fill"></div>
    </div>

    <div id="cook-phase" class="cook-phase">불 지피기</div>
    <div class="hint" id="cook-hint">화면을 누르면 게이지가 올라갑니다</div>

    <div class="row cook-bottom">
      <button id="cook-play-exit">나가기</button>
    </div>
  </div>

  <div id="cook-result" class="cook-stage" style="display:none;">
    <img id="cook-finish-img" class="cook-stage-img"
         src="{{ url_for('static', filename='images/cooking_finish.png') }}" alt="finish">

    <img id="cook-reaction-img" class="cook-reaction-img" style="display:none;" alt="reaction">

    <div id="cook-result-text" class="cook-result-text"></div>

    <div class="row cook-bottom">
      <button id="cook-result-exit">나가기</button>
    </div>
  </div>
</section>




  <section id="screen-bath" class="screen" style="display:none;">
  <img src="{{ url_for('static', filename='images/bg_bathroom.png') }}" class="bg">

  <div id="bubble-layer">
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
    <div class="bubble"></div>
  </div>

  <div class="bath-center">
    <img id="bath-marill" class="bath-marill"
         src="{{ url_for('static', filename='images/marill_idle.png') }}">

    <div id="bath-progress" class="bath-progress">
      <div id="bath-fill"></div>
    </div>
  </div>

  <div class="panel bath-panel">
    <h3>목욕</h3>
    <div class="hint">화면을 문지르면 마릴리를 씻길 수 있습니다</div>

    <button id="shower-icon" style="display:none;">샤워기</button>
    <div class="row">
      <button id="bath-exit">나가기</button>
    </div>
  </div>
</section>


  <script src="{{ url_for('static', filename='js/main.js') }}"></script>
</body>
</html>

3. js

async function apiGet(url) {
  const r = await fetch(url, { credentials: "same-origin" });
  return r.json();
}
async function apiPost(url, bodyObj = {}) {
  const r = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    credentials: "same-origin",
    body: JSON.stringify(bodyObj)
  });
  return r.json();
}

function renderHUD(state) {
  const hpWrap = document.getElementById("hud-hp");
  if (!hpWrap) return;

  const hp = Number(state?.hp ?? 0);
  hpWrap.innerHTML = "";
  for (let i = 0; i < 5; i++) {
    const span = document.createElement("span");
    span.className = "heart" + (i < hp ? " on" : " off");
    span.textContent = "♥";
    hpWrap.appendChild(span);
  }

  const b = document.getElementById("hud-berries");
  const s = document.getElementById("hud-spices");
  if (b) b.textContent = `🍓 ${Number(state?.berries ?? 0)}`;
  if (s) s.textContent = `🧂 ${Number(state?.spices ?? 0)}`;
}

let currentScreen = "home";

function showScreen(name) {
  document.querySelectorAll(".screen").forEach(s => (s.style.display = "none"));
  const target = document.getElementById(`screen-${name}`);
  if (target) target.style.display = "block";
  currentScreen = name;

  if (name === "home") startWanderingMarill();
  else stopWandering();
}


let wanderTimer = null;
const wander = { x: 50, y: 60, vx: 0, vy: 0 };

function clamp(v, lo, hi) {
  return Math.max(lo, Math.min(hi, v));
}

function startWanderingMarill() {
  const c = document.getElementById("wandering-marill-container");
  const img = document.getElementById("wandering-marill");
  if (!c || !img) return;

  stopWandering();

  wander.x = parseFloat(c.style.left || "50");
  wander.y = parseFloat(c.style.top || "60");
  wander.vx = 0;
  wander.vy = 0;

  wanderTimer = setInterval(() => stepWander(c, img), 120);
}

function stopWandering() {
  if (wanderTimer) clearInterval(wanderTimer);
  wanderTimer = null;
}

function stepWander(container, img) {
  const minX = 10, maxX = 80;
  const minY = 40, maxY = 75;

  const ax = (Math.random() - 0.5) * 0.67;
  const ay = (Math.random() - 0.5) * 0.5;

  wander.vx = (wander.vx + ax) * 0.82;
  wander.vy = (wander.vy + ay) * 0.82;

  wander.vx = clamp(wander.vx, -0.9, 0.9);
  wander.vy = clamp(wander.vy, -0.6, 0.6);

  const prevX = wander.x;
  wander.x += wander.vx;
  wander.y += wander.vy;

  if (wander.x < minX) { wander.x = minX; wander.vx *= -0.8; }
  if (wander.x > maxX) { wander.x = maxX; wander.vx *= -0.8; }
  if (wander.y < minY) { wander.y = minY; wander.vy *= -0.8; }
  if (wander.y > maxY) { wander.y = maxY; wander.vy *= -0.8; }

  if (wander.x < prevX) img.classList.add("facing-left");
  else img.classList.remove("facing-left");

  container.style.left = `${wander.x}%`;
  container.style.top = `${wander.y}%`;
}

const dialogue = {
  currentFull: "",
  active: false,
  queue: [],
  typing: false,
  typeTimer: null,
  resolveWait: null,

  elLayer: null,
  elBox: null,
  elName: null,
  elText: null,
  elHint: null,

  init() {
    this.elLayer = document.getElementById("dialogue-layer");
    this.elBox   = document.getElementById("dialogue-box");
    this.elName  = document.getElementById("dialogue-name");
    this.elText  = document.getElementById("dialogue-text");
    this.elHint  = document.getElementById("dialogue-hint");

    if (!this.elLayer || !this.elBox || !this.elText || !this.elHint || !this.elName) {
      console.warn("Dialogue DOM missing");
      return;
    }

    this.elLayer.style.display = "none";
    this.elLayer.style.pointerEvents = "none";
    this.elBox.addEventListener("click", () => this.advance());

    window.addEventListener("keydown", (e) => {
      if (!this.active) return;
      if (e.key === " " || e.key === "Enter") {
        e.preventDefault();
        this.advance();
      }
    });
  },

  async show(lines, opts = {}) {
    if (!this.elLayer) this.init();
    if (!this.elLayer) return; 

    const arr = Array.isArray(lines) ? lines : [{ text: String(lines) }];
    for (const it of arr) {
      if (typeof it === "string") this.queue.push({ text: it, name: "" });
      else this.queue.push({ text: String(it.text ?? ""), name: it.name ? String(it.name) : "" });
    }

    if (this.active) return;

    this.active = true;
    this.elLayer.style.display = "block";
    this.elLayer.style.pointerEvents = "none";
    this.elBox.style.pointerEvents = "auto";

    while (this.queue.length > 0) {
      const item = this.queue.shift();
      await this.playOne(item, opts);
    }

    this.elLayer.style.display = "none";
    this.elLayer.style.pointerEvents = "none";
    this.active = false;
  },

  playOne(item, opts) {
    const speed = Number.isFinite(opts.speed) ? opts.speed : 22;

    if (item.name) {
      this.elName.style.display = "block";
      this.elName.textContent = item.name;
    } else {
      this.elName.style.display = "none";
      this.elName.textContent = "";
    }

    this.elText.textContent = "";
    this.elHint.style.display = "none";
    this.typing = true;

    const full = item.text;
    this.currentFull = full;
    let i = 0;

    clearInterval(this.typeTimer);
    this.typeTimer = setInterval(() => {
      i++;
      this.elText.textContent = full.slice(0, i);
      if (i >= full.length) {
        clearInterval(this.typeTimer);
        this.typeTimer = null;
        this.typing = false;
        this.elHint.style.display = "block";
      }
    }, speed);

    return new Promise((resolve) => {
      this.resolveWait = resolve;
    });
  },

  advance() {
    if (!this.active) return;

    if (this.typing) {
      clearInterval(this.typeTimer);
      this.typeTimer = null;
      this.typing = false;
      this.elText.textContent = this.currentFull;
      this.elHint.style.display = "block";
      return;
    }

    if (this.resolveWait && !this.typing) {
      const r = this.resolveWait;
      this.resolveWait = null;
      r();
    }
  }
};

//산책 모듈


const walk = {
  timer: null,
  pending: null,
  exitBound: false,
  _busy: false,

  async start() {
    this.stopTimerOnly();
    this.pending = null;

    const bg = document.getElementById("walk-bg");
    const mar = document.getElementById("walk-marill");
    if (bg) bg.src = "/static/images/bg_forest.png";
    if (mar) {
      mar.src = "/static/images/marill_back.png";
      mar.classList.add("walk-ani");
      mar.style.left = "";
      mar.style.bottom = "";
      mar.style.transform = "";
    }

    const enc = document.getElementById("encounter-ui");
    const enemy = document.getElementById("enemy-img");
    if (enc) enc.style.display = "none";
    if (enemy) enemy.style.display = "none";

    if (!this.exitBound) {
      this.exitBound = true;
      const exitBtn = document.getElementById("walk-exit");
      if (exitBtn) {
        exitBtn.addEventListener("click", () => {
          this.stop();
          showScreen("home");
        });
      }
    }

    this.timer = setInterval(async () => {
      if (this._busy) return;
      this._busy = true;

      let res = null;
      try {
        res = await apiPost("/api/walk/encounter", {});
      } catch (e) {
        console.error("walk encounter failed", e);
      } finally {
        this._busy = false;
      }
      if (!res) return;

      if (res.type === "success_spot" && res.spot === "river") {
        if (bg) bg.src = "/static/images/bg_river.png";
        if (mar) {
          mar.src = "/static/images/marill_happy.png";
          mar.classList.remove("walk-ani");
          mar.style.left = "50%";
          mar.style.bottom = "22%";
          mar.style.transform = "translateX(-50%)";
        }

        renderHUD(res.state);
        await dialogue.show(res.message || "");

        this.stop();
        showScreen("home");
        return;
      }

      if (res.type === "encounter") {
        this.pending = {
          pokemon_id: res.pokemon.id,
          pokemon_name: res.pokemon.name,
          temper: res.pokemon.temper
        };
        this.showEncounter(res.pokemon);
        this.stopTimerOnly();
      }
    }, 3000);
  },

  stopTimerOnly() {
    if (this.timer) clearInterval(this.timer);
    this.timer = null;
  },

  stop() {
    this.stopTimerOnly();
    this.pending = null;
    const enc = document.getElementById("encounter-ui");
    const enemy = document.getElementById("enemy-img");
    if (enc) enc.style.display = "none";
    if (enemy) enemy.style.display = "none";
  },

  showEncounter(p) {
    const map = { aggressive: "호전적인", neutral: "중립적인", gentle: "온순한" };
    const t = document.getElementById("encounter-text");
    if (t) t.textContent = `${map[p.temper]} ${p.name}이(가) 나타났다!`;

    const enemy = document.getElementById("enemy-img");
    if (enemy) {
      enemy.src = `/static/images/walk/p_${p.id}.png`;
      enemy.style.display = "block";
    }

    const enc = document.getElementById("encounter-ui");
    if (enc) enc.style.display = "block";
  },

  async choose(action) {
    if (!this.pending) return;

    let res;
    try {
      res = await apiPost("/api/walk/resolve", {
        pokemon_id: this.pending.pokemon_id,
        action
      });
    } catch (e) {
      console.error("walk resolve failed", e);
      this.pending = null;
      this.start();
      return;
    }

    if (res?.error) {
      console.warn(res);
      this.pending = null;
      this.start();
      return;
    }

    const enc = document.getElementById("encounter-ui");
    const enemy = document.getElementById("enemy-img");
    if (enc) enc.style.display = "none";
    if (enemy) enemy.style.display = "none";

    renderHUD(res.state);
    await dialogue.show(res.message || "");

    this.pending = null;

    if (res.ended) {
      this.stop();
      showScreen("home");
      return;
    }

    this.start();
  }
};

//요리 모듈

const cook = {
  gauge: 0,
  onTap: null,
  _finishing: false,
  berriesUsed: 0,
  spicesUsed: 0,
  els: null,

  bindEls() {
    if (this.els) return;
    this.els = {
      select: document.getElementById("cook-select"),
      play: document.getElementById("cook-play"),
      result: document.getElementById("cook-result"),

      bInp: document.getElementById("cook-berries"),
      sInp: document.getElementById("cook-spices"),

      btnConfirm: document.getElementById("cook-confirm"),
      btnRecipe: document.getElementById("cook-recipe"),
      btnExitSelect: document.getElementById("cook-exit"),

      stageImg: document.getElementById("cook-stage-img"),
      phase: document.getElementById("cook-phase"),
      hint: document.getElementById("cook-hint"),
      gaugeFill: document.getElementById("gauge-fill"),

      btnExitPlay: document.getElementById("cook-play-exit"),

      finishImg: document.getElementById("cook-finish-img"),
      reactImg: document.getElementById("cook-reaction-img"),
      resultText: document.getElementById("cook-result-text"),
      btnResultExit: document.getElementById("cook-result-exit"),
    };

    const must = [
      "select","play","result",
      "bInp","sInp",
      "btnConfirm","btnRecipe","btnExitSelect",
      "stageImg","phase","hint","gaugeFill",
      "btnExitPlay",
      "finishImg","reactImg","resultText","btnResultExit"
    ];
    for (const k of must) {
      if (!this.els[k]) throw new Error("COOK DOM missing: " + k);
    }

    this.els.btnConfirm.addEventListener("click", () => this.confirmEnter());
    this.els.btnRecipe.addEventListener("click", () => this.showRecipe());

    this.els.btnExitSelect.addEventListener("click", () => this.exitToHome());
    this.els.btnExitPlay.addEventListener("click", () => this.exitToHome());
    this.els.btnResultExit.addEventListener("click", () => this.exitToHome());
  },

  showOnly(which) {
    this.els.select.style.display = (which === "select") ? "block" : "none";
    this.els.play.style.display   = (which === "play")   ? "flex"  : "none";
    this.els.result.style.display = (which === "result") ? "flex"  : "none";
  },

  async start() {
    this.bindEls();
    this.stop();

    const can = await apiGet("/api/cook/can_enter");
    renderHUD(can.state);

    if (!can.can_enter) {
      await dialogue.show("재료가 하나도 없으면 요리할 수 없습니다.");
      showScreen("home");
      return;
    }

    this.els.bInp.max = String(can.state.berries);
    this.els.sInp.max = String(can.state.spices);

    this.els.bInp.value = can.state.berries > 0 ? "1" : "0";
    this.els.sInp.value = "0";

    this.showOnly("select");
  },

  async showRecipe() {
    const text =
`레시피
🍓1 🧂0 : 달콤한 수프
🍓0 🧂1 : 짠맛 수프
🍓1 🧂1 : 이상적인 수프
🍓2 🧂1 : 진한 수프
그 외 조합 : 이상한 요리`;
    await dialogue.show(text);
  },

  confirmEnter() {
    const b = parseInt(this.els.bInp.value || "0", 10) || 0;
    const s = parseInt(this.els.sInp.value || "0", 10) || 0;

    if (b === 0 && s === 0) {
      alert("재료를 1개 이상 선택해야 합니다.");
      return;
    }

    this.berriesUsed = b;
    this.spicesUsed = s;

    this.enterCooking();
  },

  enterCooking() {
    this.stop();
    this.gauge = 0;
    this.renderGauge();

    this.els.stageImg.src = "/static/images/cooking.png";
    this.els.phase.textContent = "요리 중";
    this.els.hint.textContent = "화면을 누르면 게이지가 올라갑니다";

    this.showOnly("play");

    const screen = document.getElementById("screen-cook");
    this.onTap = () => {
      this.gauge = Math.min(100, this.gauge + 4.5);
      this.renderGauge();
      if (this.gauge >= 100) this.finish();
    };
    screen.addEventListener("pointerdown", this.onTap);
  },

  renderGauge() {
    if (this.els?.gaugeFill) this.els.gaugeFill.style.width = `${this.gauge}%`;
  },

  stop() {
    const screen = document.getElementById("screen-cook");
    if (this.onTap) screen.removeEventListener("pointerdown", this.onTap);
    this.onTap = null;
    this._finishing = false;
  },

  reactionAssetByPref(pref) {
    if (pref >= 2) return "/static/images/cooking_react_happy.png";
    if (pref <= -1) return "/static/images/cooking_react_sad.png";
    return "/static/images/cooking_react_idle.png";
  },

  async finish() {
    if (this._finishing) return;
    this._finishing = true;

    this.stop();

    const res = await apiPost("/api/cook/finish", {
      berries_used: this.berriesUsed,
      spices_used: this.spicesUsed
    });

    this._finishing = false;

    if (!res.ok) {
      alert(res.message);
      showScreen("home");
      return;
    }

    renderHUD(res.state);

    this.showOnly("result");
    this.els.finishImg.src = "/static/images/cooking_finish.png";

    const pref = Number(res.recipe?.pref ?? 0);
    const reactSrc = this.reactionAssetByPref(pref);

    this.els.reactImg.style.display = "block";
    this.els.reactImg.src = reactSrc;
    this.els.reactImg.onerror = () => {
      this.els.reactImg.style.display = "none";
    };

    this.els.resultText.textContent = "";
    this.els.resultText.style.display = "none";

    await dialogue.show([
      { text: `${res.recipe.name}를 만들었다.` },
      { text: res.recipe.message }
    ]);
  },

  exitToHome() {
    this.stop();
    showScreen("home");
  }
};

// 목욕 모듈


const bath = {
  percent: 0,
  unlocked: false,
  showerMode: false,
  washProgress: 0,
  onMove: null,
  smileTimer: null,


  dProg: null,
  dFill: null,

  isNearEl(e, el, threshold = 90) {
    const r = el.getBoundingClientRect();
    const cx = r.left + r.width / 2;
    const cy = r.top + r.height / 2;
    return Math.hypot(e.clientX - cx, e.clientY - cy) <= threshold;
  },

  placeBubblesNearMarill() {
    const marill = document.getElementById("bath-marill");
    const layer = document.getElementById("bubble-layer");
    if (!marill || !layer) return;

    const mr = marill.getBoundingClientRect();
    const lr = layer.getBoundingClientRect();
    const cx = (mr.left + mr.right) / 2 - lr.left;
    const cy = (mr.top + mr.bottom) / 2 - lr.top;

    const bubbles = Array.from(layer.querySelectorAll(".bubble"));
    bubbles.forEach((b) => {
      const dx = (Math.random() - 0.5) * 260;
      const dy = (Math.random() - 0.5) * 180;
      b.style.left = `${cx + dx}px`;
      b.style.top = `${cy + dy}px`;
    });
  },

  start() {
    this.stop();

    this.dProg = document.getElementById("dialogue-progress");
    this.dFill = document.getElementById("dialogue-progress-fill");
    if (this.dProg) this.dProg.style.display = "block";
    if (this.dFill) this.dFill.style.width = "0%";

    this.percent = 0;
    this.unlocked = false;
    this.showerMode = false;
    this.washProgress = 0;

    const layer = document.getElementById("bubble-layer");
    if (layer) layer.style.display = "none";

    const bathFill = document.getElementById("bath-fill");
    if (bathFill) bathFill.style.width = "0%";

    const screen = document.getElementById("screen-bath");
    const showerBtn = document.getElementById("shower-icon");
    const marill = document.getElementById("bath-marill");
    if (!screen || !showerBtn || !marill) return;

    showerBtn.style.display = "none";

    screen.classList.add("sponge-cursor");
    screen.classList.remove("shower-cursor");

    const idleSrc = "/static/images/marill_idle.png";
    const smileSrc = "/static/images/marill_smile.png";
    this.smileTimer = setInterval(() => {
      marill.src = smileSrc;
      setTimeout(() => { marill.src = idleSrc; }, 700);
    }, 4500);

    let last = 0;

    this.onMove = async (e) => {
      const now = performance.now();
      if (now - last < 30) return;
      last = now;

      if (!this.showerMode) {
        if (!this.isNearEl(e, marill, 130)) return;

        this.percent = Math.min(100, this.percent + 1);

        if (bathFill) bathFill.style.width = `${this.percent}%`;

        if (this.dFill) this.dFill.style.width = `${this.percent}%`;

        if (layer && this.percent > 0) {
          layer.style.display = "block";
          this.placeBubblesNearMarill();
        }

        const res = await apiPost("/api/bath/progress", { percent: this.percent });
        if (res.unlock_shower && !this.unlocked) {
          this.unlocked = true;
          showerBtn.style.display = "inline-block";
          
        }
      } else {
        await this.washMove(e);
      }
    };

    screen.addEventListener("pointermove", this.onMove);
    showerBtn.onclick = () => this.enableShowerMode();
  },

  enableShowerMode() {
    const screen = document.getElementById("screen-bath");
    const layer = document.getElementById("bubble-layer");
    if (layer) layer.style.display = "block";

    this.showerMode = true;
    this.washProgress = 0;

    if (this.dFill) this.dFill.style.width = "0%";

    if (screen) {
      screen.classList.remove("sponge-cursor");
      screen.classList.add("shower-cursor");
    }
  },

  async washMove(e) {
    const bubbles = Array.from(document.querySelectorAll("#bubble-layer .bubble"));
    if (bubbles.length === 0) return;

    const threshold = 110;
    let near = false;
    for (const b of bubbles) {
      if (this.isNearEl(e, b, threshold)) { near = true; break; }
    }
    if (!near) return;

    this.washProgress = Math.min(100, this.washProgress + 2);

    const bathFill = document.getElementById("bath-fill");
    if (bathFill) bathFill.style.width = `${this.washProgress}%`;

    if (this.dFill) this.dFill.style.width = `${this.washProgress}%`;

    if (this.washProgress >= 100) {
      await dialogue.show([{ text: "목욕 완료." }]);
      this.stop();
      showScreen("home");
    }
  },

  stop() {
    const screen = document.getElementById("screen-bath");
    if (this.smileTimer) clearInterval(this.smileTimer);
    this.smileTimer = null;

    if (screen && this.onMove) screen.removeEventListener("pointermove", this.onMove);
    this.onMove = null;

    if (screen) {
      screen.classList.remove("sponge-cursor");
      screen.classList.remove("shower-cursor");
    }

    const dProg = document.getElementById("dialogue-progress");
    if (dProg) dProg.style.display = "none";
  }
};


window.addEventListener("load", async () => {
  try {
    const state = await apiGet("/api/status");
    renderHUD(state);
  } catch (e) {
    console.error("status fetch failed", e);
  }

  try {
    document.querySelectorAll(".app-btn").forEach(btn => {
      btn.addEventListener("click", async () => {
        const type = btn.dataset.event;

        if (type === "walk") {
          showScreen("walk");
          await apiPost("/api/walk/start", {});
          walk.start();
        } else if (type === "cook") {
          showScreen("cook");
          cook.start();
        } else if (type === "bath") {
          showScreen("bath");
          bath.start();
        }
      });
    });

    const a = document.getElementById("btn-attack");
    const w = document.getElementById("btn-watch");
    const r = document.getElementById("btn-run");
    if (a) a.addEventListener("click", () => walk.choose("attack"));
    if (w) w.addEventListener("click", () => walk.choose("watch"));
    if (r) r.addEventListener("click", () => walk.choose("run"));

    const bathExit = document.getElementById("bath-exit");
    if (bathExit) {
      bathExit.addEventListener("click", () => {
        bath.stop();
        showScreen("home");
      });
    }

    showScreen("home");
  } catch (e) {
    console.error("boot bind failed", e);
  }
});

4. css

body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; }

#walk-info { display: none !important; }
.walk-exit{
  position:absolute;
  right:16px;
  top:16px;
  z-index: 60;
}

.ui-layer{
  position:absolute;
  inset:0;
  z-index:1000;
  pointer-events: none; 
}


#dialogue-layer{
  display:block;
  pointer-events: none;
  background: rgba(0,0,0,0);
}

.dialogue-progress{
  margin-top: 10px;
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  overflow: hidden;
}
#dialogue-progress-fill{
  width: 0%;
  height: 100%;
  background: rgba(120,200,255,0.9);
}


#dialogue-box{
   pointer-events:auto;
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  width:min(640px, 94vw);
  min-height:92px;
  background:rgba(0,0,0,0.75);
  border:2px solid rgba(255,255,255,0.85);
  border-radius:12px;
  padding:12px 14px;
  color:#fff;
  font-family: system-ui, -apple-system, sans-serif;
  box-sizing:border-box;
}

#encounter-ui { pointer-events: auto; z-index: 200; }
#screen-walk { z-index: 1; } 

#dialogue-name{
  font-size:13px;
  opacity:0.9;
  margin-bottom:6px;
}

#dialogue-text{
  font-size:16px;
  line-height:1.35;
  white-space:pre-wrap;
  word-break:keep-all;
}


#dialogue-hint{
  position:absolute;
  right:12px;
  bottom:10px;
  font-size:14px;
  opacity:0.85;
  animation: blink 0.9s infinite steps(2, end);
}

@keyframes blink{
  50%{ opacity:0.15; }
}


#screen-bath.sponge-cursor { cursor: url("/static/images/ui/cursor_sponge.png") 16 16, auto; }
#screen-bath.shower-cursor { cursor: url("/static/images/ui/cursor_shower.png") 16 16, auto; }

#screen-bath .bg{ z-index: 1;}
#bubble-layer { display: none;position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;}

.bubble{ position:absolute;
  width:72px;
  height:72px;
  background: url("/static/images/ui/bubble.png") center/contain no-repeat;
  opacity: 0.95;}
  
#bath-marill{position:absolute;
  left:50%;
  top:56%;
  transform:translate(-50%,-50%);
  width:220px;
  z-index:40;}
#bath-ui{ position:absolute;
  left:50%;
  top:72%;
  transform:translateX(-50%);
  width:min(520px, 92vw);
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
  pointer-events:auto;}



#game-viewport { position: relative; width: 100vw; height: 100vh; }
.screen { position: absolute; inset: 0; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.character { position: absolute; bottom: 20%; left: 45%; width: 140px; }
.walk-ani { animation: walkbob 0.6s infinite alternate; }
@keyframes walkbob { from { transform: translateY(0); } to { transform: translateY(-6px); } }

.walk-marill{
  position:absolute;
  left:50%;
  top:60%;
  transform:translate(-50%,-50%);
  width:160px;
  animation: walkJitter 0.35s infinite alternate;
  z-index: 30;
}

@keyframes walkJitter{
  from { transform: translate(-50%,-50%) translate(-2px,-2px); }
  to   { transform: translate(-50%,-50%) translate(2px,2px); }
}

.enemy-img{
  position:absolute;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  width:140px;
  z-index: 35;
}

#wandering-marill-container {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: top 0.25s linear, left 0.25s linear;
  transform-origin: 50% 70%;
  animation: waddle 0.9s infinite ease-in-out;
}

@keyframes waddle {
  0%   { transform: translate(-50%, -50%) translateY(0) rotate(-3deg); }
  50%  { transform: translate(-50%, -50%) translateY(-2px) rotate(3deg); }
  100% { transform: translate(-50%, -50%) translateY(0) rotate(-3deg); }
}

#wandering-marill.facing-left { transform: scaleX(-1); }

.bubble {
  position: absolute;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: url("/static/images/ui/bubble.png") center/contain no-repeat;
  opacity: 0.95;
}

#smartphone-container {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 300px;
  height: auto;
}
#phone-frame-img { width: 100%; display: block; }

.app-screen-overlay {
  position: absolute;
  top: 12%;
  left: 8%;
  width: 84%;
  height: 75%;
  overflow: hidden;
}
.app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  padding: 10px;
}
.app-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.1s;
}
.app-btn img { width: 100%; max-width: 60px; -webkit-user-drag: none; user-select: none; }
.app-btn span { display: block; color: white; font-size: 12px; margin-top: 5px; }
.app-btn:active { transform: scale(0.9); filter: brightness(0.8); }

#hud {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 50;
  background: rgba(0,0,0,0.35);
  padding: 8px 10px;
  border-radius: 10px;
  color: #fff;
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  gap: 12px;
}
#hud-hp { display: flex; gap: 3px; }
.heart { font-size: 18px; }
.heart.off { opacity: 0.25; }
#hud-items { display: flex; gap: 10px; }

.modal {
  position: absolute;
  left: 50%; top: 55%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.65);
  color: white;
  padding: 14px 16px;
  border-radius: 12px;
  z-index: 40;
  min-width: 260px;
}
.panel {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.55);
  color: white;
  padding: 16px 16px;
  border-radius: 12px;
  z-index: 30;
  width: min(420px, 92vw);
}
.row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
button { padding: 10px 12px; border-radius: 10px; border: none; cursor: pointer; }
.hint { opacity: 0.9; font-size: 13px; margin-top: 6px; }

.toast {
  position: absolute;
  left: 50%; top: 20%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.45);
  color: white;
  padding: 10px 14px;
  border-radius: 999px;
  z-index: 25;
}


#gauge { width: 100%; height: 16px; background: rgba(255,255,255,0.2); border-radius: 999px; overflow: hidden; margin-top: 10px; }
#gauge-fill { width: 50%; height: 100%; background: rgba(255,200,0,0.9); }

.feed .post { display: grid; gap: 8px; }
.post-img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; opacity: 0.9; }

.bath-center{
  position:absolute;
  left:50%;
  top:54%;
  transform:translate(-50%,-50%);
  z-index: 45;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  pointer-events:none; 
}

.bath-marill{
  width:220px; 
  display:block; position: static; transform: none;
}

.bath-progress{
  display:block;
  width:min(360px, 86vw);
  height:16px;
  background: rgba(255,255,255,0.35);
  border-radius:999px;
  overflow:hidden;
  z-index:9999;
  position:relative;
}

#bath-fill{
  display:block;
  width:0%;
  height:100%;
  background: rgba(120,200,255,0.9);
}

#bath-marill{
  position: static !important;
  left:auto !important;
  top:auto !important;
  transform:none !important;
  z-index: auto !important;
}

.bath-panel{
  top:78% !important;
}

.cook-stage{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(520px, 92vw);
  z-index: 35;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  pointer-events:auto;
  background: rgba(0,0,0,0.55);
  border-radius:12px;
  padding:16px;
  box-sizing:border-box;
}

.cook-stage-img{
  width:min(320px, 70vw);
  display:block;
}

.cook-gauge{
  width:100%;
  height:16px;
  background: rgba(255,255,255,0.2);
  border-radius:999px;
  overflow:hidden;
}

.cook-phase{
  font-size:14px;
  opacity:0.95;
}

.cook-bottom{
  justify-content:center;
}

.cook-reaction-img{
  width:min(220px, 50vw);
  display:block;
  opacity:0.98;
}

.cook-result-text{
  width:100%;
  white-space:pre-wrap;
  word-break:keep-all;
  font-size:14px;
  line-height:1.35;
  opacity:0.95;
}

#cook-phase,
#cook-hint,
.cook-result-text {
  color: #ffffff;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.8),
    0 0 6px rgba(0,0,0,0.6);
}

.cook-stage {
  background: rgba(0, 0, 0, 0.65);
}

현재글웹게임?

🦔

11723, 백준, 파이썬, 연산자 오버로딩, 백준11723, 언어학, 백준11866, 분리 컴파일, 햄부기, C++, 백준 11399, 캡슐화,

Today :
Yesterday :

🦔

웹게임?

'공부'의 다른글

티스토리툴바

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31