/* 公務百工坊前台：全景 3D 夜市場景，HUD 浮在上層（左上名稱卡；右側一欄依序為身分、導覽員、攤位清單，可各自收合；下方工具列）。
   配色先用本檔的 CSS 變數；WP1 的 theme.css（#5）完成後改為引用它。 */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
/* .hud/.card set display, so hidden panels need this to stay hidden */
[hidden]{display:none!important}
/* Layout: full-bleed 3D night-market scene; game HUD floats on top (title card TL; right column with identity, guide and stall list; toolbar BC). Single deliberate look. */
:root{
  --paper:#FFFBF3; --paper-2:#F5EDE0; --ink:#2A2333; --muted:#615868; --line:#E6DACA;
  --lantern:#D94A33; --gold:#F2B33D; --gold-ink:#3A2A08; --night:#28224A;
  --display:'Noto Serif TC', 'Songti TC', serif;
  --body:'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --shadow:0 6px 0 rgba(42,35,51,.12), 0 14px 30px rgba(42,35,51,.18);
  color-scheme: light;
}
html,body{height:100%}
body{background:var(--night);color:var(--ink);font-family:var(--body);overflow:hidden}
button,input{font-family:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
#stage{position:fixed;inset:0;background:linear-gradient(#F3B98F 0%,#E9A9A6 38%,#B7A3D6 100%);transition:background .8s}
body.night #stage{background:linear-gradient(#1C1A3C 0%,#2E2758 55%,#4A3B6E 100%)}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#scene:active{cursor:grabbing}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}

/* scene labels */
.tag{position:absolute;left:0;top:0;transform:translate(-50%,-100%);white-space:nowrap;pointer-events:auto;will-change:transform}
.lane-pill{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 6px;border-radius:999px;background:var(--paper);border:1px solid var(--line);box-shadow:0 3px 0 rgba(42,35,51,.15);font-weight:700;font-size:14px;color:var(--ink);cursor:pointer}
.hex{display:inline-grid;place-items:center;width:26px;height:28px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);color:#fff;font:600 11px var(--mono)}
.plate{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:10px;background:rgba(255,251,243,.94);border:1px solid var(--line);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;box-shadow:0 2px 0 rgba(42,35,51,.12)}
.plate.on{background:var(--gold);border-color:#C98A12;color:var(--gold-ink);box-shadow:0 0 0 4px rgba(242,179,61,.35),0 3px 0 rgba(42,35,51,.18)}
.plate .n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);font:600 11px var(--mono)}
.plate .open{display:inline-flex;align-items:center;gap:3px;margin-left:2px;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:12px;text-decoration:none}
.plate.empty{background:rgba(255,251,243,.75);color:var(--muted);font-weight:500;border-style:dashed;cursor:default}
.bubble{max-width:220px;white-space:normal;padding:8px 12px;border-radius:14px;background:var(--paper);border:1px solid var(--line);box-shadow:0 3px 0 rgba(42,35,51,.14);font-size:13px;line-height:1.5;color:var(--ink);pointer-events:none}
.bubble b{display:block;font-size:11px;color:var(--lantern);font-weight:700;letter-spacing:.04em}
.bubble::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateX(-50%) rotate(45deg)}
/* the guide's tag looks unlike stall plates, so the two are never confused */
.guide-tag{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#3A2A08;font-size:13px;font-weight:700;border:2px solid var(--paper);box-shadow:0 2px 0 rgba(42,35,51,.25),0 0 10px rgba(242,179,61,.6);white-space:nowrap}
/* stall plates hidden by the 場景名牌 choice in the stall list */
.plate.off{display:none}
body.hide-talk .bubble{display:none}

/* HUD: title */
.hud{position:fixed;z-index:5}
#title{top:max(16px,env(safe-area-inset-top,0px));left:max(16px,env(safe-area-inset-left,0px));padding:14px 18px 12px;display:flex;flex-direction:column;gap:2px}
#title .eyebrow{font:600 11px var(--mono);letter-spacing:.18em;color:var(--muted)}
#title h1{margin:0;font:900 34px/1.1 var(--display);letter-spacing:.06em;color:var(--ink)}
#title h1 span{color:var(--lantern)}
#title .stats{font-size:13px;color:var(--muted)}
#modes{top:calc(max(16px,env(safe-area-inset-top,0px)) + 118px);left:max(16px,env(safe-area-inset-left,0px));display:flex;gap:8px}
.chunky{min-height:44px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 4px 0 rgba(42,35,51,.16);transition:transform .08s}
.chunky.turn{padding:0 12px;display:grid;place-items:center}
.chunky:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(42,35,51,.16)}
.chunky[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* HUD: stall menu */
/* HUD: right column — identity, guide card, stall list card; the two cards fold independently */
#side{top:max(16px,env(safe-area-inset-top,0px));right:max(16px,env(safe-area-inset-right,0px));width:340px;max-height:calc(100% - 120px);display:flex;flex-direction:column;gap:10px}
#side .who{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:14px;background:rgba(255,251,243,.92);border:1px solid var(--line);box-shadow:0 3px 0 rgba(42,35,51,.1)}
#side .who .login{margin-left:auto}
#menu{display:flex;flex-direction:column;gap:12px;padding:14px;flex:1 1 auto;min-height:0}
#menu .head{display:flex;align-items:center;gap:8px}
#menu .head h2{margin:0;font:900 16px var(--display);letter-spacing:.06em}
#menu .head .fold{margin-left:auto}
.guest{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--paper-2);font-size:13px;font-weight:700}
.login{min-height:36px;padding:0 12px;border-radius:10px;border:1px dashed #C9BBA8;background:transparent;color:var(--muted);font-size:12px}
#menu-body{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:hidden}
.fold{width:40px;height:40px;flex:0 0 auto;border-radius:12px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);cursor:pointer;display:grid;place-items:center}
.fold svg{width:18px;height:18px;transition:transform .2s}
.fold[aria-expanded="false"] svg{transform:rotate(180deg)}
#guide .head .fold{margin-left:auto}
#guide-body{display:flex;flex-direction:column;gap:10px}
.tabs{display:flex;gap:6px}
.names{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0;padding:8px 0 0;border:0;border-top:1px solid var(--line);font-size:13px}
.names legend{float:left;font-weight:700;color:var(--muted);margin-right:4px;padding:0}
.names label{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);font-weight:700;cursor:pointer}
.names input{position:absolute;opacity:0;width:1px;height:1px}
.names label:has(input:checked){background:var(--ink);color:var(--paper);border-color:var(--ink)}
.names label:has(input:focus-visible){outline:3px solid var(--gold);outline-offset:2px}
body.no-3d .names{display:none}
.tabs button{flex:1;min-height:40px;border-radius:12px;border:1px solid var(--line);background:var(--paper-2);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
#list{overflow:auto;display:flex;flex-direction:column;gap:2px;margin:0 -6px;padding:0 6px}
.lane{border-radius:12px}
.lane>button{width:100%;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 8px;border:0;background:transparent;border-radius:12px;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.lane>button:hover{background:var(--paper-2)}
.lane>button .cnt{margin-left:auto;font:500 12px var(--mono);color:var(--muted)}
.stalls{display:flex;flex-direction:column;gap:2px;padding:0 0 6px 44px}
.stall-row{display:flex;align-items:center;gap:4px}
.stall-row .badge{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:700;vertical-align:1px;white-space:nowrap}
.stall-row .go{flex:1;min-height:40px;display:flex;align-items:center;gap:8px;padding:0 10px;border:0;border-radius:10px;background:transparent;font-size:14px;color:var(--ink);cursor:pointer;text-align:left}
.stall-row .go:hover{background:var(--paper-2)}
.stall-row .go.on{background:var(--gold);color:var(--gold-ink);font-weight:700}
.stall-row .go .n{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--ink);color:var(--paper);font:600 10px var(--mono)}
.stall-row .open{width:40px;height:40px;flex:0 0 auto;border-radius:10px;display:grid;place-items:center;color:var(--ink)}
.stall-row .open:hover{background:var(--paper-2)}
.fav{width:40px;height:40px;border:0;border-radius:10px;background:transparent;cursor:pointer;display:grid;place-items:center}
.fav svg{width:18px;height:18px}
.vacant{font-size:13px;color:var(--muted);padding:4px 10px 8px}

/* HUD: guide dialog (RPG style) */
#guide{display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;flex:0 0 auto}
#guide .head{display:flex;align-items:center;gap:10px}
.portrait{width:52px;height:52px;border-radius:14px;background:var(--night);display:grid;place-items:center;flex:0 0 auto}
.portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
#guide .name{font:900 18px var(--display);letter-spacing:.08em}
#guide .mode{font-size:12px;color:var(--muted)}
/* 阿燈's dialog comes from wp3-guide/guide-dialog.css; the card head above it already shows portrait and name */
#guide .nm-guide-head{display:none}
.hint{font-size:12px;color:var(--muted)}

/* HUD: toolbar */
#bar{left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:20px;max-width:calc(100% - 32px)}
.clock{display:flex;flex-direction:column;padding:0 12px 0 6px;border-right:1px solid var(--line);margin-right:4px}
.clock b{font:600 24px/1 var(--mono);font-variant-numeric:tabular-nums;font-style:italic}
.clock span{font-size:11px;color:var(--muted)}
.tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;min-height:48px;border-radius:12px;border:0;background:transparent;font-size:11px;font-weight:700;color:var(--ink);cursor:pointer}
.tool svg{width:20px;height:20px}
.tool[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* announcement popover */
#news{left:50%;transform:translateX(-50%);bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 84px);width:min(420px,calc(100% - 32px));padding:14px 16px;display:flex;flex-direction:column;gap:8px}
#news h2{margin:0;font:900 18px var(--display);letter-spacing:.06em}
#news ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px}
#news li{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;background:var(--paper-2)}
#news li span:last-child{font:500 12px var(--mono);color:var(--muted)}

/* list mode */
body.list-mode #scene, body.list-mode #labels, body.list-mode #bar{display:none}
body.no-3d #modes{display:none}
@media (min-width: 861px){ body.no-3d.list-mode #side{top:calc(max(16px,env(safe-area-inset-top,0px)) + 132px);max-height:calc(100% - 148px)} }
body.list-mode #side{left:50%;right:auto;transform:translateX(-50%);top:calc(max(16px,env(safe-area-inset-top,0px)) + 176px);width:min(560px,calc(100% - 32px));max-height:calc(100% - 200px)}

/* phone */
@media (max-width: 860px){
  body{overflow:auto}
  #stage{position:relative;height:64vh;min-height:420px}
  .hud{position:static;transform:none}
  #title{position:absolute;top:12px;left:12px;padding:10px 14px}
  #title h1{font-size:26px}
  #modes{position:absolute;top:auto;bottom:12px;left:12px}
  #wrap{display:flex;flex-direction:column;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  #side,#bar,#news{width:auto;max-width:none;max-height:none}
  #bar{flex-wrap:wrap;justify-content:center}
  #news{order:-1}
  body.list-mode #side{transform:none;width:auto}
  body.list-mode #stage{height:auto;min-height:180px}
}
@media (prefers-reduced-motion: reduce){ .chunky{transition:none} }