:root{
    --ink:#1E2A32; --paper:#FFFFFF; --sky:#AEDCFF; --accent:#E85D4A; --mint:#7ECFC0;
    --hud-bg:rgba(20,30,38,.72); --hud-ink:#F4F9FC;
  }
  html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--sky);
    font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
    -webkit-user-select:none;user-select:none;touch-action:none;}
  #stage{position:fixed;inset:0;}
  #stage::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 42%, transparent 62%, rgba(70,45,25,.12) 100%);}
  canvas{display:block;}

  /* ---------- HUD ---------- */
  .hud{position:fixed;z-index:10;color:var(--hud-ink);}
  #logo{top:14px;left:14px;background:var(--hud-bg);backdrop-filter:blur(6px);
    border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;letter-spacing:.02em;
    display:flex;align-items:center;gap:8px;}
  #logo .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);}
  #logo .demo{font-weight:400;opacity:.65;font-size:11px;letter-spacing:.14em;}
  #hint{top:106px;right:14px;background:var(--hud-bg);backdrop-filter:blur(6px);
    border-radius:12px;padding:9px 13px;font-size:12px;line-height:1.55;opacity:.95;max-width:230px;}
  #hint b{color:#FFD98A;font-weight:700;}
  @media (max-width:640px){ #hint{display:none;} }

  /* 지갑 · 우측 버튼 */
  #wallet{top:56px;left:14px;background:var(--hud-bg);backdrop-filter:blur(6px);
    border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;
    font-variant-numeric:tabular-nums;}
  #topBtns{top:14px;right:14px;display:flex;gap:8px;}
  .hudBtn{border:0;border-radius:999px;padding:10px 15px;font-weight:700;font-size:13px;
    background:var(--hud-bg);color:var(--hud-ink);cursor:pointer;backdrop-filter:blur(6px);
    font-family:inherit;}
  .hudBtn.on{background:#3FA46A;}

  /* 꾸미기 패널 */
  #dressPanel{position:fixed;z-index:12;top:64px;right:14px;width:236px;
    background:var(--hud-bg);backdrop-filter:blur(10px);border-radius:16px;
    padding:14px 16px;color:var(--hud-ink);display:none;}
  #dressPanel h3{margin:0 0 4px;font-size:14px;}
  #dressPanel .sub{font-size:11px;opacity:.7;margin-bottom:10px;}
  .swRow{margin-bottom:10px;}
  .swRow .lbl{font-size:11px;font-weight:700;opacity:.8;margin-bottom:5px;display:block;
    letter-spacing:.06em;}
  .swWrap{display:flex;gap:7px;flex-wrap:wrap;}
  .sw{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);
    cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;color:#fff;padding:0;font-family:inherit;
    text-shadow:0 1px 2px rgba(0,0,0,.6);}
  .sw.sel{border-color:#FFD84D;box-shadow:0 0 0 2px rgba(255,216,77,.35);}
  .sw.hatOpt{border-radius:10px;width:auto;padding:0 9px;height:30px;font-size:11px;}

  /* 토스트 */
  #toast{position:fixed;z-index:14;top:22%;left:50%;transform:translateX(-50%);
    background:rgba(20,30,38,.85);color:#FFE9A8;border-radius:999px;padding:9px 18px;
    font-size:14px;font-weight:700;opacity:0;transition:opacity .25s;pointer-events:none;}

  /* chat bar */
  #chatbar{bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px;width:min(420px,72vw);}
  #chatbar input{flex:1;border:0;border-radius:999px;padding:11px 18px;font-size:14px;
    background:var(--hud-bg);backdrop-filter:blur(6px);color:var(--hud-ink);outline:none;
    font-family:inherit;}
  #chatbar input::placeholder{color:rgba(244,249,252,.5);}
  #chatbar input:focus{box-shadow:0 0 0 2px var(--accent);}
  #chatbar button{border:0;border-radius:999px;padding:0 18px;font-size:14px;font-weight:700;
    background:var(--accent);color:#fff;cursor:pointer;font-family:inherit;}

  /* speech bubbles */
  .bubble{position:fixed;z-index:9;transform:translate(-50%,-100%);max-width:210px;
    background:var(--paper);color:var(--ink);border-radius:14px;padding:8px 12px;
    font-size:13px;line-height:1.45;box-shadow:0 3px 14px rgba(30,42,50,.22);
    opacity:0;transition:opacity .18s;pointer-events:none;word-break:keep-all;}
  .bubble::after{content:"";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
    border:8px solid transparent;border-top-color:var(--paper);border-bottom:0;}
  .bubble .who{font-size:10px;font-weight:700;color:var(--accent);display:block;margin-bottom:2px;}
  .bubble .spk{margin-left:4px;font-size:11px;}

  /* door action button */
  #doorBtn{bottom:150px;right:14px;left:auto;transform:none;border:0;border-radius:999px;
    padding:12px 22px;font-size:15px;font-weight:700;background:#FFD84D;color:#4A3A00;
    box-shadow:0 4px 16px rgba(30,42,50,.3);cursor:pointer;display:none;font-family:inherit;}

  #sitBtn{bottom:104px;right:14px;left:auto;transform:none;border:0;border-radius:999px;
    padding:11px 20px;font-size:14px;font-weight:700;background:#7ECFC0;color:#123A34;
    box-shadow:0 4px 16px rgba(30,42,50,.3);cursor:pointer;display:none;font-family:inherit;}

  /* joystick */
  #joy{bottom:24px;left:24px;width:112px;height:112px;border-radius:50%;
    background:rgba(20,30,38,.28);backdrop-filter:blur(4px);display:none;}
  #joy .thumb{position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;
    background:rgba(255,255,255,.85);transform:translate(-50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.25);}
  @media (pointer:coarse){ #joy{display:block;} }

  /* start overlay */
  #start{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:18px;background:linear-gradient(180deg,#AEDCFF 0%,#D8F0E4 100%);
    color:var(--ink);text-align:center;padding:24px;}
  #start .town{font-size:44px;line-height:1;}
  #start h1{margin:0;font-size:34px;letter-spacing:-.01em;}
  #start p{margin:0;font-size:14px;line-height:1.7;color:#41525C;max-width:340px;word-break:keep-all;}
  #start p b{color:var(--accent);}
  #enterBtn{border:0;border-radius:999px;padding:15px 42px;font-size:17px;font-weight:700;
    background:var(--accent);color:#fff;cursor:pointer;box-shadow:0 6px 20px rgba(232,93,74,.4);
    font-family:inherit;transition:transform .12s;}
  #enterBtn:active{transform:scale(.96);}
  #start .note{font-size:11px;color:#6B7B85;}

  /* fade for door transitions */
  #fade{position:fixed;inset:0;z-index:15;background:#10181E;opacity:0;pointer-events:none;
    transition:opacity .3s;}

  /* location label */
  #loc{bottom:14px;left:14px;background:var(--hud-bg);backdrop-filter:blur(6px);border-radius:999px;
    padding:7px 14px;font-size:12px;font-weight:700;}
  /* 폰에서도 왼쪽 유지 — 오른쪽은 문·앉기 버튼 자리다 */

  button:focus-visible,input:focus-visible{outline:2px solid #FFD84D;outline-offset:2px;}
  @media (prefers-reduced-motion:reduce){ #fade{transition:none;} .bubble{transition:none;} }

  /* 접속 배지 — 로고·지갑 아래 세 번째 줄 */
  #hudAccount{position:fixed;top:98px;left:14px;z-index:11;display:flex;gap:8px;align-items:center;}
  #hudAccount button{border:0;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;
    background:var(--hud-bg);color:var(--hud-ink);backdrop-filter:blur(6px);font-family:inherit;
    cursor:pointer;max-width:44vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* 이름 바꾸기 패널 */
  #namePanel{position:fixed;z-index:16;top:140px;left:14px;width:min(280px,84vw);
    background:var(--hud-bg);backdrop-filter:blur(10px);border-radius:16px;
    padding:14px 16px;color:var(--hud-ink);}
  #namePanel h3{margin:0 0 4px;font-size:14px;}
  #namePanel .sub{font-size:11px;opacity:.72;margin-bottom:10px;line-height:1.55;}
  #nameInput{width:100%;box-sizing:border-box;border:0;border-radius:10px;padding:10px 12px;
    font-size:14px;font-family:inherit;background:rgba(255,255,255,.92);color:#1E2A32;outline:none;}
  #nameInput:focus{box-shadow:0 0 0 2px var(--accent);}
  .nameRow{display:flex;gap:8px;margin-top:10px;}
  .nameRow button{flex:1;border:0;border-radius:999px;padding:9px 0;font-size:13px;font-weight:700;
    font-family:inherit;cursor:pointer;}
  #nameSave{background:var(--accent);color:#fff;}
  #nameCancel{background:rgba(255,255,255,.22);color:var(--hud-ink);}

  /* 꾸미기 패널 안의 계정 칸 */
  #dressPanel{max-height:min(76vh,560px);overflow-y:auto;}
  #dressAccount{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.18);}
  #dressAccount .acctWho{font-size:13px;font-weight:700;margin-bottom:4px;}
  #dressAccount .acctNote{font-size:11px;opacity:.72;line-height:1.5;margin-bottom:8px;}
  .acctBtn{width:100%;border:0;border-radius:999px;padding:10px 0;font-size:13px;font-weight:700;
    font-family:inherit;cursor:pointer;background:rgba(255,255,255,.92);color:#1E2A32;margin-bottom:6px;}
  .acctBtn.ghost{background:rgba(255,255,255,.22);color:var(--hud-ink);}
  .acctBtn:disabled{opacity:.55;cursor:default;}
  .acctMsg{margin:6px 0 0;font-size:11px;font-weight:700;color:#FFD98A;line-height:1.5;}

  /* 에너지 바 — 지갑 아래 */
  #hpWrap{position:fixed;top:98px;left:14px;z-index:11;display:flex;align-items:center;gap:6px;
    background:var(--hud-bg);backdrop-filter:blur(6px);border-radius:999px;padding:7px 12px;}
  #hpIcon{font-size:12px;}
  #hpTrack{width:92px;height:8px;border-radius:999px;background:rgba(255,255,255,.22);overflow:hidden;}
  #hpFill{width:100%;height:100%;border-radius:999px;background:#3FD07A;transition:width .25s,background .25s;}
  /* 접속 배지를 한 칸 아래로 */
  #hudAccount{top:136px;}
  #namePanel{top:178px;}

  /* 감정 버튼 줄 — 채팅창 위 */
  #emoteBar{bottom:64px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:11;}
  #emoteBar button{border:0;border-radius:999px;width:42px;height:42px;font-size:19px;
    background:var(--hud-bg);backdrop-filter:blur(6px);cursor:pointer;font-family:inherit;
    display:flex;align-items:center;justify-content:center;}
  #emoteBar button:active{transform:scale(.92);}

  /* 채팅 히스토리 — 가까운 말만 남는다 */
  #chatLog{bottom:118px;left:50%;transform:translateX(-50%);width:min(420px,72vw);
    opacity:0;pointer-events:none;transition:opacity .6s;}
  #chatLog.live{opacity:1;pointer-events:auto;transition:opacity .15s;}
  #chatLog{
    max-height:132px;overflow-y:auto;background:rgba(20,30,38,.55);backdrop-filter:blur(6px);
    border-radius:12px;padding:8px 12px;font-size:12px;line-height:1.6;color:var(--hud-ink);
    scrollbar-width:thin;}
  #chatLog:empty{display:none;}
  .chatLine b{font-weight:700;}

  /* 공유 화면 타일 (디스코드 다중창처럼) */
  #shareTiles{position:fixed;right:14px;top:64px;z-index:13;display:flex;flex-direction:column;
    gap:8px;max-height:calc(100vh - 140px);overflow-y:auto;}
  .shareTile{position:relative;width:236px;border-radius:12px;overflow:hidden;cursor:pointer;
    background:#10181E;box-shadow:0 4px 14px rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.14);}
  .shareTile video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#10181E;}
  .shareTile .shareName{position:absolute;left:8px;bottom:6px;font-size:11px;font-weight:700;
    color:#FFD98A;text-shadow:0 1px 3px rgba(0,0,0,.8);}
  .shareTile.big{width:min(64vw,900px);}
  @media (max-width:640px){ .shareTile{width:150px;} .shareTile.big{width:92vw;} }

  /* 폰 레이아웃 — 겹침 정리 */
  @media (max-width:640px), (pointer:coarse){
    #emoteBar{bottom:66px;gap:6px;}
    #emoteBar button{width:36px;height:36px;font-size:16px;}
    #chatbar{width:min(420px,64vw);left:calc(50% - 24px);}
    #chatLog{bottom:112px;width:min(420px,80vw);max-height:96px;}
    #hint{display:none;}
    #topBtns{gap:5px;}
    #topBtns .hudBtn{padding:8px 10px;font-size:12px;}
    #shareTiles{top:110px;}
    #doorBtn{bottom:158px;}
    #sitBtn{bottom:112px;}
  }

  /* 폰 달리기 버튼 — 조이스틱 반대편 */
  #runBtn{display:none;bottom:34px;right:24px;width:92px;height:92px;border-radius:50%;
    border:0;background:rgba(20,30,38,.55);backdrop-filter:blur(6px);color:var(--hud-ink);
    font-size:13px;font-weight:700;font-family:inherit;z-index:11;}
  #runBtn.on{background:rgba(63,208,122,.75);}
  @media (pointer:coarse){ #runBtn{display:block;} }

  /* 프레임 측정 표시 (/fps 로 켬) */
  #fpsBox{display:none;top:60px;left:14px;background:rgba(20,30,38,.6);backdrop-filter:blur(6px);
    border-radius:8px;padding:5px 10px;font-size:11px;color:#7ECFC0;z-index:14;font-variant-numeric:tabular-nums;}

  /* 어디서든 바로 가기 — 문을 찾아 걸을 필요 없이 */
  #goBar{top:100px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:12;
    background:none;padding:0;}
  #goBar button{border:0;border-radius:999px;padding:8px 14px;font-size:12px;font-weight:700;
    font-family:inherit;cursor:pointer;color:var(--hud-ink);
    background:var(--hud-bg);backdrop-filter:blur(6px);}
  #goBar button.on{background:rgba(126,207,192,.85);color:#12303A;}
  #goBar button:active{transform:scale(.95);}
  @media (max-width:640px), (pointer:coarse){
    #goBar{top:92px;gap:4px;}
    #goBar button{padding:7px 10px;font-size:11px;}
  }

  /* 게임 HUD 정리 — 왼쪽 상단을 한 묶음의 둥근 패널로 */
  #logo,#wallet,#hpWrap,#hudAccount{left:14px;width:184px;box-sizing:border-box;
    border-radius:14px;background:rgba(20,30,38,.5);}
  #logo{border-radius:14px 14px 6px 6px;}
  #wallet{top:64px;border-radius:6px;}
  #hpWrap{top:100px;border-radius:6px;}
  #hudAccount{top:138px;border-radius:6px 6px 14px 14px;}
  #namePanel{top:184px;}

  #helpBtn{min-width:34px;}
  #helpModal{display:none;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;
    width:min(400px,86vw);background:rgba(24,34,44,.94);backdrop-filter:blur(10px);
    border-radius:18px;padding:20px 22px;color:var(--hud-ink);line-height:1.9;font-size:13px;}
  #helpModal h3{margin:0 0 8px;font-size:15px;}
  #helpModal .dim{opacity:.55;font-size:11px;}
  #helpModal button{margin-top:10px;border:0;border-radius:999px;padding:8px 18px;
    font-family:inherit;font-weight:700;cursor:pointer;background:#7ECFC0;color:#12303A;}

/* ---------- 주민 고르기 (2026-08-26) ----------
   20마리를 색 동그라미로 보여줄 수 없어서(동물은 색이 아니라 얼굴이다) 이름 칩으로 둔다.
   두 줄까지만 보이고 나머지는 가로 스크롤 — 폰에서 패널이 화면을 덮지 않게. */
#dressPanel #swAnimal {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    max-height: 92px;
    overflow-y: auto;
}
#dressPanel .animalSw {
    width: auto;
    height: auto;
    min-width: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    background: rgba(255, 255, 255, 0.14);
    color: #F3EDE2;
    border: 1px solid transparent;
    white-space: nowrap;
}
#dressPanel .animalSw.cur {
    background: #F0C36B;
    color: #2A2015;
    border-color: #FFF3C4;
}
#dressPanel .zodiacRow {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 10px;
    flex-wrap: wrap;
}
#dressPanel .zodiacRow input {
    width: 74px;
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(0, 0, 0, 0.25);
    color: #F3EDE2;
    font-size: 13px;
}
#dressPanel .zodiacRow button {
    padding: 6px 11px;
    border-radius: 999px;
    border: 0;
    background: #86D4C4;
    color: #163A33;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
#dressPanel #zodiacOut {
    font-size: 12px;
    color: #F0C36B;
}

/* ---------- 마을 점집 (2026-08-26) ----------
   회장 지시대로 홈페이지로 내보내지 않고 마을 화면 위에 띄운다. */
#sajuPanel {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%) scale(0.96);
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: rgba(24, 20, 16, 0.94);
    color: #F3EDE2;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 40;
}
#sajuPanel.on {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
#sajuPanel h3 { margin: 0 0 4px; font-size: 17px; }
#sajuPanel .sub { font-size: 12px; opacity: 0.72; margin-bottom: 12px; line-height: 1.5; }
#sajuPanel .sajuRow { display: flex; gap: 6px; margin-bottom: 8px; }
#sajuPanel input {
    flex: 1;
    min-width: 0;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(0, 0, 0, 0.3);
    color: #F3EDE2;
    font-size: 14px;
}
#sajuPanel #sajuGo {
    flex: 0 0 auto;
    padding: 9px 16px;
    border-radius: 10px;
    border: 0;
    background: #F0C36B;
    color: #2A2015;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
#sajuPanel #sajuGo:disabled { opacity: 0.55; cursor: default; }
#sajuPanel #sajuClose {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #F3EDE2;
    font-size: 14px;
    cursor: pointer;
}
#sajuPanel #sajuOut { margin-top: 12px; font-size: 13.5px; line-height: 1.65; }
#sajuPanel #sajuOut p { margin: 0 0 6px; }
#sajuPanel .sajuMorph {
    margin-top: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    border: 0;
    background: #86D4C4;
    color: #163A33;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

/* 사주 질문 답변 — 오늘 운세 카드와 구분되게 한 칸 안에 넣는다 */
#sajuPanel .sajuWait { opacity: 0.7; font-style: italic; }
#sajuPanel .sajuAnswer {
    margin: 10px 0 6px;
    padding: 11px 13px;
    border-radius: 12px;
    background: rgba(240, 195, 107, 0.13);
    border-left: 3px solid #F0C36B;
}
#sajuPanel .sajuAnswer b {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #F0C36B;
}
#sajuPanel .sajuAnswer p { margin: 0 0 5px; }

/* ---------- 말 걸기 (2026-08-26) ----------
   수락해야 소리가 오간다. 버튼은 가까이 갔을 때만 뜬다. */
#talkBtn {
    display: none;
    left: 50%;
    transform: translateX(-50%);
    bottom: 156px;
    padding: 11px 20px;
    border-radius: 999px;
    border: 0;
    background: #F0C36B;
    color: #2A2015;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    z-index: 22;
}
#talkAsk {
    display: none;
    left: 50%;
    transform: translateX(-50%);
    top: 88px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(24, 20, 16, 0.95);
    color: #F3EDE2;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
    z-index: 30;
    text-align: center;
}
#talkAsk.on { display: block; }
#talkAsk #talkAskWho { font-size: 14px; font-weight: 600; }
#talkAsk .talkAskRow { display: flex; gap: 6px; margin-top: 10px; }
#talkAsk .talkAskRow button {
    flex: 1;
    padding: 8px 12px;
    border-radius: 10px;
    border: 0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
#talkAsk #talkYes { background: #86D4C4; color: #163A33; }
#talkAsk #talkNo { background: rgba(255, 255, 255, 0.16); color: #F3EDE2; }
#talkAsk #talkBan { background: rgba(224, 122, 140, 0.28); color: #FFD9E0; }

/* ---------- 유리판 칸 선택 (2026-08-26) ----------
   조준이 아니라 선택이다. 왼쪽/오른쪽만 고르면 그 칸 한가운데로 뛴다. */
#glassLeft, #glassRight {
    display: none;
    bottom: 112px;
    padding: 14px 22px;
    border-radius: 999px;
    border: 0;
    background: rgba(168, 216, 240, 0.92);
    color: #16303D;
    font-size: 16px;
    font-weight: 800;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    z-index: 22;
}
#glassLeft { left: calc(50% - 116px); }
#glassRight { left: calc(50% + 8px); }