*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:none} body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif}
  #game{position:relative;width:100vw;height:100vh;overflow:hidden;cursor:grab} #game:active{cursor:grabbing}
  .map{position:absolute;inset:0;width:2400px;height:1600px;background:var(--floor);transform-origin:0 0}
  .map:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--grid) 1px,transparent 1px),linear-gradient(var(--grid) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}

  /* Zones (Rooms) */
  .room{position:absolute;border:3px solid var(--line);background:var(--bg-tint-0);border-radius:2px;transition:background-color .3s ease,border-color .3s ease}
  .room h4{margin:0;padding:8px 12px;font-size:13px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;background:var(--bg-shade-2);border-bottom:2px solid var(--line)}
  .room-label{position:absolute;top:-26px;left:0;background:var(--panel);border:2px solid var(--line);padding:4px 10px;font-size:12px;font-weight:800;color:var(--accent);white-space:nowrap}

  .room-command{left:48px;top:48px;width:720px;height:420px}
  .room-desk{left:816px;top:48px;width:720px;height:420px}
  .room-research{left:1584px;top:48px;width:720px;height:420px}
  .room-cron{left:48px;top:516px;width:480px;height:360px}
  .room-break{left:576px;top:516px;width:480px;height:360px}
  .room-review{left:1104px;top:516px;width:480px;height:360px}
  .room-server{left:1632px;top:516px;width:672px;height:360px}
  .room-publish{left:48px;top:912px;width:720px;height:420px}
  .room-storage{left:816px;top:912px;width:720px;height:420px}
  .room-meeting{left:1584px;top:912px;width:720px;height:420px}

  /* Furniture */
  .furniture{position:absolute;pointer-events:none}
  .desk{width:72px;height:48px;background:var(--wall);border:2px solid var(--line);box-shadow:4px 4px 0 var(--bg-shade-2)}
  .desk:before{content:"";position:absolute;top:-8px;left:8px;width:56px;height:12px;background:var(--furniture-border);border:2px solid var(--line)}
  .chair{position:absolute;width:24px;height:24px;background:var(--line);border:2px solid var(--line);border-radius:50%;transform:translate(-50%,-50%)}
  .sofa{width:120px;height:48px;background:var(--furniture-border);border:2px solid var(--line);border-radius:4px}
  .server-rack{width:48px;height:96px;background:var(--pet-stage-bg);border:2px solid var(--line);box-shadow:inset 0 0 20px var(--planning-glow)}
  .server-rack:after{content:"";position:absolute;inset:4px;background:repeating-linear-gradient(0deg,transparent,transparent 10px,var(--planning-glow) 10px,var(--planning-glow) 12px)}
  .plant{width:36px;height:36px;background:var(--success);border:2px solid var(--success);border-radius:50%;box-shadow:0 0 12px var(--success-glow)}
  .whiteboard{width:144px;height:96px;background:var(--panel-2);border:3px solid var(--line);box-shadow:4px 4px 0 var(--bg-shade-2)}

  /* Avatars */
  .avatar{position:absolute;width:48px;height:48px;z-index:10;transition:opacity .3s ease,filter .3s ease;will-change:transform}
  .avatar .body{width:32px;height:32px;position:absolute;left:8px;top:8px;border-radius:10px;border:2px solid var(--bg-shade-3)}
  .avatar .ear{position:absolute;top:2px;width:10px;height:14px;border-radius:4px 4px 0 0}
  .avatar .ear.left{left:6px;transform:rotate(-12deg)}.avatar .ear.right{right:6px;transform:rotate(12deg)}
  .avatar .eye{position:absolute;top:14px;width:5px;height:5px;background:var(--eye,#111);border-radius:50%}
  .avatar .eye.left{left:13px}.avatar .eye.right{right:13px}
  .avatar .badge{position:absolute;bottom:-2px;right:-4px;font-size:9px;font-weight:900;background:var(--accent-2);color:var(--shadow);padding:1px 4px;border:2px solid var(--shadow)}
  .avatar .name-tag{position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:var(--solid-panel);color:var(--ink);font-size:10px;padding:2px 6px;border-radius:2px;white-space:nowrap;pointer-events:none;z-index:20}

  /* Speech bubble */
  .bubble{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);background:var(--panel-fallback);border:2px solid var(--line);padding:6px 10px;border-radius:4px;font-size:11px;color:var(--ink);white-space:nowrap;pointer-events:none;z-index:30;opacity:0;transition:opacity .3s,background-color .3s ease,border-color .3s ease,color .3s ease;max-width:180px;overflow:hidden;text-overflow:ellipsis}
  .bubble.show{opacity:1}
  .bubble:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);border-width:6px 6px 0;border-style:solid;border-color:var(--line) transparent transparent}

  /* Status dot under avatar */
  .status-dot{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:8px;height:8px;border-radius:50%;border:2px solid var(--bg)}
  .avatar[data-status=planning] .status-dot{background:var(--planning)}
  .avatar[data-status=researching] .status-dot{background:var(--researching)}
  .avatar[data-status=building] .status-dot{background:var(--building);animation:pulse 1.4s infinite}
  .avatar[data-status=reviewing] .status-dot{background:var(--reviewing)}
  .avatar[data-status=blocked] .status-dot{background:var(--blocked)}
  .avatar[data-status=done] .status-dot{background:var(--done)}
  .avatar[data-status=waiting] .status-dot{background:var(--waiting)}
  .avatar[data-status=paused]{opacity:.78;filter:saturate(.65)}
  .avatar[data-status=paused] .status-dot{background:var(--paused,var(--waiting))}
  .avatar[data-status=idle] .status-dot{background:var(--waiting)}
  .avatar[data-status=stale] .status-dot{background:var(--blocked)}

  /* Directional facing: counter-flip text/labels so they stay readable */
  .avatar[data-facing="left"] .name-tag,
  .avatar[data-facing="left"] .bubble,
  .avatar[data-facing="left"] .human-label,
  .avatar[data-facing="left"] .status-dot {
    transform: translateX(-50%) scaleX(-1);
  }
  .avatar[data-facing="left"] .badge { transform: scaleX(-1); }
  .avatar[data-facing="left"]::after { transform: translateX(-50%) scaleX(-1); }

  /* Walking animation */
  .avatar.walking .body{animation:bounce .4s infinite alternate}
  @keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-3px)}}

  /* Tail intentionally disabled: side/bottom protrusions read as nose/eyes at small pixel scale. */
  .avatar .body::after{content:none;display:none}

  /* Shadow */
  .avatar::after{content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:28px;height:6px;background:var(--bg-shade-3);border-radius:50%;opacity:.42;z-index:-1}
  .avatar.walking::after{animation:shadowPulse .4s infinite alternate}
  @keyframes shadowPulse{from{transform:translateX(-50%) scale(1);opacity:.42}to{transform:translateX(-50%) scale(.62);opacity:.22}}

  /* Ear wiggle when walking */
  .avatar.walking .ear.left{animation:earWiggleL .4s infinite alternate}
  .avatar.walking .ear.right{animation:earWiggleR .4s infinite alternate}
  @keyframes earWiggleL{from{transform:rotate(-12deg)}to{transform:rotate(-26deg)}}
  @keyframes earWiggleR{from{transform:rotate(12deg)}to{transform:rotate(26deg)}}

  /* Idle breathe */
  .avatar:not(.walking) .body{animation:breathe 2.6s infinite ease-in-out}
  @keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

  /* Blink */
  .avatar .eye{animation:blink 4.2s infinite}
  @keyframes blink{0%,97%,100%{transform:scaleY(1)}98.5%{transform:scaleY(.15)}}

  /* HUD */
  .hud{position:fixed;top:12px;left:12px;z-index:100;background:var(--overlay-bg);border:2px solid var(--line);padding:12px 16px;border-radius:2px;box-shadow:4px 4px 0 var(--bg-shade-2);max-width:280px;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
  .hud h1{margin:0 0 4px;font-size:16px}.hud small{color:var(--muted);font-size:11px;display:block;margin-bottom:8px}
  .hud-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;font-size:11px}
  .hud-stats span{display:flex;align-items:center;gap:4px}.hud-stats b{font-size:14px}
  .hud-live{display:inline-block;width:8px;height:8px;background:var(--success,#91f07a);border-radius:50%;animation:pulse 1.4s infinite;margin-right:6px}
  .version-badge{display:inline-block;margin-top:4px;padding:2px 8px;background:var(--bg-tint-2);border:2px solid var(--line);border-radius:2px;font-size:10px;font-weight:800;color:var(--accent)}
  .hud-ctrl{position:fixed;bottom:16px;right:16px;z-index:100;display:flex;gap:8px}
  .hud-ctrl button{background:var(--panel);border:2px solid var(--line);color:var(--ink);padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;border-radius:2px;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
  .hud-ctrl button:hover{border-color:var(--accent,#ffdf78)}
  /* Movement controls */
  .hud-movement{position:fixed;top:12px;right:12px;z-index:100;background:var(--overlay-bg);border:2px solid var(--line);padding:10px 14px;border-radius:2px;box-shadow:4px 4px 0 var(--bg-shade-2);display:flex;flex-direction:column;gap:6px}
  .hud-movement .hud-row{display:flex;align-items:center;gap:6px}
  .hud-movement label{font-size:11px;font-weight:700;color:var(--muted);min-width:32px}
  .hud-movement button{background:var(--panel);border:2px solid var(--line);color:var(--ink);padding:4px 8px;font-size:11px;font-weight:700;cursor:pointer;border-radius:2px;min-width:56px}
  .hud-movement button:hover{border-color:var(--accent)}
  .hud-movement button.active{background:var(--bg-shade-1);border-color:var(--accent);color:var(--accent)}
  .hud-movement .theme-row{margin-top:4px;padding-top:6px;border-top:1px dashed var(--border-tint-1)}
  .hud-movement .theme-dot{display:inline-block;width:8px;height:8px;border-radius:50%;border:1px solid var(--ink);margin-right:4px;vertical-align:middle}
  #calmBtn{flex:1;font-size:12px;padding:6px 10px;background:transparent;border-color:var(--success);color:var(--reviewing)}
  #calmBtn.active{background:var(--success-bg);border-color:var(--success);color:var(--success-ink)}
  #focusBtn{flex:1;font-size:12px;padding:6px 10px;background:transparent;border-color:var(--accent);color:var(--accent)}
  #focusBtn.active{background:var(--accent-bg);border-color:var(--accent);color:var(--ink)}
  #zenBtn{flex:1;font-size:12px;padding:6px 10px;background:transparent;border-color:var(--success);color:var(--success)}
  #zenBtn.active{background:var(--success-bg);border-color:var(--success);color:var(--success-ink)}
  #cacheBtn{flex:1;font-size:12px;padding:6px 10px;background:transparent;border-color:var(--line);color:var(--muted)}
  #cacheBtn:hover{border-color:var(--accent);color:var(--accent)}
  /* Calm overlay */
  .calm-overlay{position:fixed;inset:0;background:var(--bg-shade-1);pointer-events:none;z-index:50;opacity:0;transition:opacity .6s}
  .calm-overlay.on{opacity:1}
  @keyframes pulse{50%{opacity:.35}}

  /* Human-readable labels */
  .human-label{position:absolute;bottom:-28px;left:50%;transform:translateX(-50%);background:var(--solid-panel);color:var(--ink);font-size:10px;padding:3px 8px;border-radius:2px;white-space:nowrap;pointer-events:none;z-index:20;opacity:0;transition:opacity .2s}
  .avatar:hover .human-label,.avatar:focus .human-label{opacity:1}
  .human-label .hl-action{color:var(--accent);font-weight:700}
  .human-label .hl-what{color:var(--muted)}

  /* Tooltip on hover */
  .tooltip{position:fixed;background:var(--overlay-bg);border:2px solid var(--line);padding:10px 14px;border-radius:2px;font-size:12px;pointer-events:none;z-index:200;opacity:0;transition:opacity .15s;max-width:220px}
  .tooltip.show{opacity:1}
  .tooltip .tt-role{color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}
  .tooltip .tt-name{font-size:14px;font-weight:800;margin-bottom:4px}
  .tooltip .tt-task{color:var(--muted);font-size:11px;margin-bottom:4px}
  .tooltip .tt-meta{color:var(--muted);font-size:10px}

  @media (max-width:768px){
    .hud{top:8px;left:8px;padding:8px 12px;max-width:220px}
    .hud h1{font-size:14px}.hud-stats{font-size:10px}
    .room h4{font-size:11px;padding:6px 8px}
    .hud-movement{top:8px;right:8px;padding:8px 10px}
    .hud-movement button{min-width:48px;padding:3px 6px;font-size:10px}
  }
  @media (max-width:480px){
    .hud{top:6px;left:6px;padding:6px 10px;max-width:180px}
    .hud h1{font-size:12px;margin-bottom:2px}
    .hud small{font-size:10px}
    .hud-stats b{font-size:12px}
    .hud-movement{position:fixed;top:auto;bottom:56px;right:6px;left:auto;flex-direction:row;gap:4px;padding:6px 8px}
    .hud-movement .hud-row{gap:4px}
    .hud-movement label{display:none}
    .hud-movement button{min-width:44px;padding:2px 6px;font-size:10px}
    .hud-ctrl{bottom:6px;right:6px;gap:6px}
    .hud-ctrl button{padding:6px 10px;font-size:14px}
    .room h4{font-size:10px;padding:4px 6px}
    .avatar{width:36px;height:36px}
    .avatar .body{width:24px;height:24px;left:6px;top:6px}
    .avatar .ear{width:8px;height:10px}
    .avatar .eye{width:4px;height:4px;top:10px}
    .avatar .eye.left{left:10px}.avatar .eye.right{right:10px}
    .avatar .badge{font-size:8px;padding:0 2px;border-width:1px}
    .avatar .name-tag{font-size:9px;padding:1px 4px;top:-16px}
    .bubble{font-size:10px;padding:4px 8px;max-width:140px}
    /* Small-scale readability: hide decorative appendages that read as eyes/tails */
    .avatar .ear{display:none}
    .avatar .badge{display:none}
  }
  /* === Keyboard Help Overlay === */
  .kbd-help{position:fixed;inset:0;z-index:200;background:var(--overlay-dark);display:none;align-items:center;justify-content:center;padding:20px}
  .kbd-help.open{display:flex}
  .kbd-help-card{position:relative;width:100%;max-width:420px;background:var(--overlay-bg);border:3px solid var(--accent);box-shadow:10px 10px 0 var(--shadow);padding:24px;border-radius:2px}
  .kbd-help-card h3{margin:0 0 14px;font-size:18px;color:var(--accent)}
  .kbd-help-card dl{display:grid;gap:10px;margin:0}
  .kbd-help-card dt{font-size:13px;font-weight:800;color:var(--accent-2);display:flex;align-items:center;gap:6px}
  .kbd-help-card dd{margin:0;font-size:13px;color:var(--muted)}
  .kbd-help-card kbd{background:var(--panel);border:2px solid var(--line);padding:2px 7px;border-radius:3px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--ink);box-shadow:0 2px 0 var(--bg-shade-2)}
  .kbd-help-card .close-btn{position:absolute;top:10px;right:10px;background:transparent;border:2px solid var(--line);color:var(--muted);padding:4px 10px;font-size:12px;font-weight:800;cursor:pointer;border-radius:2px}
  .kbd-help-card .close-btn:hover{border-color:var(--accent);color:var(--accent)}
  @media (max-width:480px){ .kbd-help-card{padding:16px} .kbd-help-card h3{font-size:16px} .kbd-help-card dd{font-size:12px} }

/* === Agent Detail Panel === */
.detail-backdrop{position:fixed;inset:0;background:var(--overlay-dark);z-index:180;display:none;opacity:0;transition:opacity .25s ease}
.detail-backdrop.show{display:block;opacity:1}
.detail-panel{position:fixed;top:0;right:0;width:380px;height:100vh;background:var(--panel);border-left:3px solid var(--accent);box-shadow:-8px 0 0 var(--shadow);z-index:190;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1);overflow-y:auto;padding:24px 22px 32px}
.detail-panel.open{transform:translateX(0)}
.detail-close{position:absolute;top:12px;right:12px;background:transparent;border:2px solid var(--line);color:var(--muted);width:32px;height:32px;font-size:16px;font-weight:800;cursor:pointer;border-radius:2px;display:flex;align-items:center;justify-content:center}
.detail-close:hover{border-color:var(--accent);color:var(--accent)}
.detail-avatar{width:64px;height:64px;margin:0 auto 12px;position:relative}
.detail-avatar .body{width:44px;height:44px;position:absolute;left:10px;top:10px;border-radius:12px;border:2px solid var(--bg-shade-3);background:var(--bg-shade-2)}
.detail-avatar .ear{position:absolute;top:4px;width:14px;height:18px;border-radius:4px 4px 0 0;background:var(--bg-shade-2)}
.detail-avatar .ear.left{left:6px;transform:rotate(-12deg)}.detail-avatar .ear.right{right:6px;transform:rotate(12deg)}
.detail-avatar .eye{position:absolute;top:20px;width:7px;height:7px;background:var(--eye,#111);border-radius:50%}
.detail-avatar .eye.left{left:18px}.detail-avatar .eye.right{right:18px}
.detail-name{margin:0 0 6px;font-size:18px;color:var(--accent);text-align:center}
.detail-status{text-align:center;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:4px}
.detail-headline{text-align:center;font-size:14px;color:var(--ink);margin-bottom:18px;padding:8px 12px;background:var(--bg-tint-0);border:2px solid var(--line);border-radius:2px}
.detail-section{margin-bottom:16px}
.detail-label{font-size:11px;font-weight:800;color:var(--accent-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.detail-value{font-size:13px;color:var(--ink);line-height:1.5;background:var(--bg-tint-0);padding:10px 12px;border:2px solid var(--line);border-radius:2px;word-break:break-word}
.detail-progress-wrap{position:relative;height:22px;background:var(--bg-shade-2);border:2px solid var(--line);border-radius:11px;margin-bottom:16px;overflow:hidden}
.detail-progress-bar{height:100%;background:var(--accent);width:0%;transition:width .6s ease}
.detail-progress-text{position:absolute;top:0;right:8px;height:100%;display:flex;align-items:center;font-size:11px;font-weight:800;color:var(--shadow)}
.detail-toggle-tech{display:block;width:100%;padding:10px 14px;background:var(--bg-tint-0);border:2px solid var(--line);color:var(--accent);font-size:12px;font-weight:800;cursor:pointer;border-radius:2px;margin-bottom:16px;text-align:left}
.detail-toggle-tech:hover{border-color:var(--accent);background:var(--bg-tint-1)}
.detail-tech{display:none}
.detail-tech.open{display:block}
.detail-changes{margin-top:8px}
.detail-change-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:12px}
.detail-change-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.detail-change-text{flex:1;color:var(--ink)}
.detail-change-time{color:var(--muted);font-size:11px;white-space:nowrap}
@media (max-width:768px){
  .detail-panel{width:340px;padding:20px 18px 28px}
}
@media (max-width:480px){
  .detail-panel{width:100%;border-left:none;border-top:3px solid var(--accent);top:auto;bottom:0;height:70vh;transform:translateY(100%)}
  .detail-panel.open{transform:translateY(0)}
}

/* === Onboarding Tour === */
.onboarding-overlay{position:fixed;inset:0;z-index:300;background:var(--overlay-dark);display:none;align-items:center;justify-content:center;padding:20px}
.onboarding-overlay.show{display:flex}
.onboarding-card{position:relative;width:100%;max-width:460px;background:var(--overlay-bg);border:3px solid var(--accent);box-shadow:10px 10px 0 var(--shadow);padding:28px;border-radius:2px}
.onboarding-card .close-btn{position:absolute;top:10px;right:10px;background:transparent;border:2px solid var(--line);color:var(--muted);padding:4px 10px;font-size:12px;font-weight:800;cursor:pointer;border-radius:2px}
.onboarding-card .close-btn:hover{border-color:var(--accent);color:var(--accent)}
.onboarding-step{text-align:center}
.onboarding-icon{font-size:42px;margin-bottom:8px}
.onboarding-step h3{margin:0 0 10px;font-size:18px;color:var(--accent)}
.onboarding-step p{margin:0;font-size:14px;color:var(--ink);line-height:1.6}
.onboarding-step kbd{background:var(--panel);border:2px solid var(--line);padding:2px 7px;border-radius:3px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;color:var(--ink);box-shadow:0 2px 0 var(--bg-shade-2)}
.onboarding-actions{display:flex;align-items:center;justify-content:space-between;margin-top:22px;gap:10px}
.btn-prev,.btn-next{padding:8px 16px;background:var(--bg-tint-0);border:2px solid var(--line);color:var(--accent);font-size:13px;font-weight:800;cursor:pointer;border-radius:2px}
.btn-prev:hover,.btn-next:hover{border-color:var(--accent);background:var(--bg-tint-1)}
.step-dots{display:flex;gap:6px;justify-content:center;flex:1}
.step-dots span{width:8px;height:8px;border-radius:50%;background:var(--bg-shade-2);display:inline-block}
.step-dots span.active{background:var(--accent)}
@media (max-width:480px){
  .onboarding-card{padding:20px}
  .onboarding-step h3{font-size:16px}
  .onboarding-step p{font-size:13px}
}
  .fav-star{position:absolute;top:-14px;right:-6px;font-size:13px;z-index:25;filter:drop-shadow(1px 1px 0 var(--shadow));pointer-events:none}
  #favBtn{flex:1;font-size:12px;padding:6px 10px;background:transparent;border-color:var(--accent-2);color:var(--accent-2)}
  #favBtn.active{background:var(--accent-bg);border-color:var(--accent-2);color:var(--ink)}