:root{
    --line:#1a1030;            /* 진한 외곽선 */
    --cream:#fff4e2; --ink:#eef3ff;
    --panel-a:#5a478c; --panel-b:#382a63;     /* 보라 보드 패널 */
    --panel2-a:#42356e; --panel2-b:#281d4c;
    --gold:#ffd23e; --gold2:#ffe89a;
    --red:#ff6272; --red2:#ff93a0;
    --green:#68dd54; --green2:#9df27c;
    --blue:#5cc0ff; --blue2:#a9e2ff;
    --hp:#5fe07a; --mp:#49b6ff;
    --font:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;
    --disp:"Arial Black","Malgun Gothic",sans-serif;
  }
  *{box-sizing:border-box; user-select:none; -webkit-user-drag:none}
  html,body{margin:0;height:100%;color:var(--cream);font-family:var(--font);overflow:hidden;
    background:
      radial-gradient(760px 520px at 50% -8%, #7a60c0, transparent 60%),
      radial-gradient(600px 400px at 50% 108%, #5a478c55, transparent 60%),
      linear-gradient(#2a1f4e,#1a1030)}
  /* ===== 포켓덱스 디바이스 베젤 ===== */
  .device{position:relative;width:min(100vw, 66vh);height:100vh;margin:0 auto;display:flex;flex-direction:column;
    padding:34px 13px 15px;background:linear-gradient(#ff5a5a,#d62b2b 55%,#b31f1f);
    border-radius:30px 30px 22px 22px;
    box-shadow:inset 0 3px 0 rgba(255,255,255,.35), inset 0 -6px 0 rgba(0,0,0,.22), inset 0 0 0 3px #7a1414,
      0 14px 60px rgba(0,0,0,.6)}
  .device::after{content:"";position:absolute;left:13px;right:13px;bottom:15px;height:9px;border-radius:0 0 12px 12px;
    background:linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.32))}
  .brow{position:absolute;top:0;left:0;right:0;height:34px;display:flex;align-items:center;gap:7px;padding:0 16px}
  .brow .world-home{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;
    height:26px;padding:0 9px;border:2px solid #7a1414;border-radius:9px;
    background:linear-gradient(#ff7772,#dc3939);color:var(--cream);font:800 11px/1 var(--font);
    text-shadow:0 1px 0 #9c2424;white-space:nowrap;cursor:pointer;touch-action:manipulation;
    box-shadow:inset 0 1px 0 #ffffff55,0 2px 0 #8b1c1c}
  .brow .world-home::before{content:"";width:6px;height:6px;border-left:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:2px}
  .brow .world-home:hover{background:linear-gradient(#ff9187,#e84743)}
  .brow .world-home:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #7a141455,0 1px 0 #8b1c1c}
  .brow .world-home:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
  .brow .lens{width:24px;height:24px;border-radius:50%;flex:none;
    background:radial-gradient(circle at 34% 30%, #bfefff, #38b6ff 45%, #1667c8 100%);
    border:3px solid #eef4ff;box-shadow:0 0 8px rgba(80,190,255,.8), 0 2px 3px rgba(0,0,0,.4)}
  .brow .leds{display:flex;gap:5px}
  .brow .leds i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
  .brow .leds i:nth-child(1){background:#ff4d4d}
  .brow .leds i:nth-child(2){background:#ffd23e}
  .brow .leds i:nth-child(3){background:#5be36a}
  .brow .pdx{margin-left:auto;font-family:var(--disp);font-size:13px;font-weight:900;color:#fff2c8;letter-spacing:1px;
    text-shadow:0 1.5px 0 #7a1414,0 0 2px rgba(0,0,0,.4)}
  .brow .ball{position:relative;width:20px;height:20px;border-radius:50%;flex:none;
    background:linear-gradient(#d62b2b 0 46%, #111 46% 54%, #fff 54% 100%);
    border:2px solid #111;box-shadow:0 2px 3px rgba(0,0,0,.4)}
  .brow .ball::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    width:6px;height:6px;border-radius:50%;background:#fff;border:2px solid #111}
  .app{position:relative;width:100%;flex:1;min-height:0;margin:0;display:flex;flex-direction:column;
    border-radius:11px;overflow:hidden;box-shadow:0 0 0 3px #120a26, inset 0 0 0 3px rgba(0,0,0,.35)}
/* 모바일: 터치 시 파란 탭 하이라이트 제거(모든 게임 공통) */
*{-webkit-tap-highlight-color:transparent}
button,a,[role=button]{touch-action:manipulation} /* canvas 제외: 게임 캔버스는 자체 드래그·핀치 처리 */