/* Town (/) — the hub map: Ren's dialog + Ask, six portals on platforms, notice board. */
.scene.town{height:100vh;height:100svh;min-height:780px;max-height:1000px}
/* entrance: one choreographed sequence, ~950ms. sky settles (0) → Ren's window rises (60ms) → Ren drops in (160ms)
   → portals land bottom-up, left→right, 55ms apart (240–570ms, each 380ms) → ledges start floating (≥1s). */
.town .sky{animation:skyin 1s var(--ease-out) both}
@keyframes skyin{from{transform:scale(1.04)}}

/* NPC + dialog */
.talk{position:absolute;inset:0;pointer-events:none}
.talk>*{pointer-events:auto}
.npc{position:absolute;z-index:9;left:5.5%;bottom:128px;width:170px;height:auto!important;animation:npcdrop 460ms 160ms var(--ease-pop) both,idle 2.6s 1s ease-in-out infinite;transform-origin:50% 100%}
@keyframes idle{50%{transform:scale(1.015,.985)}}
@keyframes npcdrop{from{transform:translateY(-40px);opacity:0}}
.npc-name{position:absolute;z-index:9;left:calc(5.5% + 85px);bottom:100px;transform:translateX(-50%)}
.npc-name .plate{background:rgba(28,22,40,.82);font-size:14px;padding:4px 8px 3px}
.npc-name .plate b{color:var(--gold-ink)}
.dialog{position:absolute;z-index:20;left:3.4%;top:max(150px,19%);width:640px;padding:0 0 18px;animation:pop 480ms 60ms var(--ease-out) both}
@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.98)}}
.dialog .bar .barbtn{margin-left:auto;font:800 13px var(--f-game);color:var(--ink);background:linear-gradient(#fffdf5,#efe3c5);border:1.5px solid var(--bar-ink);border-radius:7px;padding:2px 10px 0;cursor:pointer;text-shadow:none}
.dialog .body{position:relative;display:grid;grid-template-columns:1fr;padding:16px 26px 0}
.dialog .who{font:800 13px var(--f-game);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dialog h1{margin:2px 0 4px;font:800 30px/1.08 var(--f-game);letter-spacing:-.01em}
.dialog h1 .big{display:inline-block;font-size:2.5em;line-height:.85;color:var(--maple);letter-spacing:-.03em;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:0 4px 0 var(--ink);margin:6px 6px 4px 0;vertical-align:-6px}
.dialog .say{margin:0 0 16px;color:var(--ink-2);font-size:16px}
.dialog .say b{color:var(--up)}
.dialog::after{content:"";position:absolute;left:70px;bottom:-21px;width:30px;height:22px;background:var(--win-2);border:2px solid var(--ink);border-top:0;clip-path:polygon(0 0,100% 0,10% 100%)}
.ask{position:relative}
.ask label{display:block;font:800 19px var(--f-game);margin:0 0 6px}
.ask .chips{margin-top:12px}
.ask.busy .btn{filter:grayscale(.5);pointer-events:none}
.shot{border:0;background:transparent;width:40px;height:40px;border-radius:8px;cursor:pointer;color:var(--ink-2);display:grid;place-items:center;flex:none}
.shot:hover{background:var(--win-2)}
.att{position:relative;flex:none}
.att img{width:40px;height:40px;object-fit:cover;border-radius:6px;border:1.5px solid var(--win-line)}
.att button{position:absolute;top:-7px;right:-7px;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;font:800 12px/1 var(--f-game);cursor:pointer;padding:0}
.drop{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(255,253,245,.92);border:3px dashed var(--maple);border-radius:10px;font:800 22px var(--f-game);color:var(--maple)}

/* suggestions (dark tooltip list) */
.results{position:absolute;left:0;right:0;top:calc(100% - 34px);z-index:50;max-height:340px;overflow:auto;padding:6px}
.results a{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:5px;text-decoration:none;color:#eef1ff}
.results a:hover,.results a.sel{background:rgba(143,163,220,.22)}
.results img{width:30px;height:30px;object-fit:contain;flex:none}
.results .n{flex:1;min-width:0;font-weight:700;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.results .p{font:800 16px var(--f-game);color:#fff;white-space:nowrap}
.results .p small{font:700 12px var(--f-ui);margin-left:5px}
.results .p .up{color:var(--up-l)}.results .p .dn{color:var(--down-l)}
.results .askrow .n,.results .lvrow .p{color:#9fe0ff}
.results .lvic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:linear-gradient(#fff1a0,#e2b31c);color:var(--ink);font:800 13px var(--f-game)}

/* chat thread (Ren answers inside the dialog) */
.dialog.chatting .intro{display:none}
.dialog.chatting .ask label{font-size:15px}
.dialog.chatting .ask .chips{display:none}
.thread{max-height:max(240px,calc(100vh - 580px));overflow:auto;margin:0 -10px 12px;padding:4px 10px;display:flex;flex-direction:column;gap:12px;scrollbar-width:thin}
.turn{display:flex;flex-direction:column;gap:8px}
.you{align-self:flex-end;max-width:85%;background:#fff;border:2px solid var(--ink);border-radius:12px 12px 2px 12px;padding:7px 12px;font-weight:700;box-shadow:0 2px 0 var(--ink)}
.you img{max-width:180px;max-height:120px;border-radius:6px;margin-bottom:4px}
.ren{position:relative;align-self:flex-start;max-width:96%;background:var(--tip);color:var(--tip-ink);border:1.5px solid var(--tip-line);border-radius:2px 12px 12px 12px;padding:10px 14px 12px;font-size:15px;line-height:1.5}
.ren .who{display:block;font:800 13px var(--f-game);color:var(--gold-ink);letter-spacing:.04em;margin-bottom:2px}
.ren .txt b{color:#fff}
.ren .txt a{color:#9fe0ff;font-weight:700}
.ren .txt.err{color:#ffb4a4}
.ren .dots{display:inline-flex;gap:3px;vertical-align:middle}
.ren .dots i{width:6px;height:6px;border-radius:50%;background:var(--gold-ink);animation:dot 1s infinite}
.ren .dots i:nth-child(2){animation-delay:.15s}.ren .dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{50%{opacity:.25;transform:translateY(-2px)}}
.ren .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;margin-top:8px}
.ren .slots:empty,.ren .fu:empty{display:none}
.islot{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:7px;background:rgba(143,163,220,.12);border:1px solid rgba(143,163,220,.35);text-decoration:none;color:#eef1ff;min-width:0}
.islot:hover{background:rgba(143,163,220,.26)}
.islot .slot{width:36px;height:36px;background:radial-gradient(circle,#3b4675,#1c2240);border-color:rgba(143,163,220,.6)}
.islot .slot img{width:28px;height:28px}
.islot .n{flex:1;min-width:0;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.islot b{font:800 14px var(--f-game);white-space:nowrap}
.islot small{font:700 11px var(--f-ui)}.islot .up{color:var(--up-l)}.islot .dn{color:var(--down-l)}
.ren .fu{margin-top:10px}
.ren .fu button{background:rgba(234,240,255,.95)}

/* portals */
.plate.big{font-size:19px}
.portal .tip .tp{margin:0}
.portal .tip .tp b{color:#fff}
.signpost{left:33%;bottom:132px;width:120px;z-index:7}
.signpost img{width:120px;height:auto}
.signpost span{position:absolute;left:10px;top:18px;width:92px;text-align:center;font:800 13px/1.05 var(--f-game);color:#fff4d8;text-shadow:0 1px 0 #4a2a10}
/* --o = landing order (ground row left→right, then the middle ledges, then the top ones); DOM order stays as is */
.climb .plat{--o:0;animation:platin 380ms calc(240ms + var(--o) * 55ms) var(--ease-pop) both}
.climb .plat.float{animation:platin 380ms calc(240ms + var(--o) * 55ms) var(--ease-pop) both,float 7s calc(1000ms + var(--o) * 120ms) ease-in-out infinite}
.climb .plat:nth-of-type(7){--o:0}  /* Market Room, ground left */
.climb .plat:nth-of-type(1){--o:1}  /* Prices */
.climb .plat:nth-of-type(2){--o:2}  /* Sell */
.climb .plat:nth-of-type(5){--o:3}  /* Level up */
.climb .plat:nth-of-type(6){--o:4}  /* Upgrades */
.climb .plat:nth-of-type(3){--o:5}  /* Characters */
.climb .plat:nth-of-type(4){--o:6}  /* Economy */
.climb .plat.float:nth-of-type(2n){animation-duration:380ms,8.5s}
/* Ren's number counts up once per session (town.js); the box keeps its width while it rolls */
.dialog h1 .big{text-align:center;font-variant-numeric:tabular-nums;transform-origin:50% 75%}
.dialog h1 .big.landed{animation:multland 520ms var(--ease-pop)}
@keyframes multland{30%{transform:scale(1.16) rotate(-2deg)}}
/* 7th portal: the live Free Market Room, a golden gate that spins */
.fmgate .gate{position:relative}
.fmgate .gate img{filter:hue-rotate(-25deg) saturate(1.5) brightness(1.08) drop-shadow(0 0 14px rgba(255,200,60,.9))}
.fmgate .ring{position:absolute;z-index:1;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent,rgba(255,214,90,.75),transparent 30%,rgba(255,140,40,.6),transparent 60%,rgba(255,236,150,.8),transparent 85%);
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 54%,#000 64%,transparent 66%);mask:radial-gradient(circle,transparent 52%,#000 54%,#000 64%,transparent 66%);animation:fmring 5s linear infinite}
@keyframes fmring{to{transform:rotate(1turn)}}
.fmgate .gate::before{content:"";position:absolute;left:50%;top:50%;width:150px;height:170px;margin:-85px 0 0 -75px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,90,.55),rgba(255,160,40,.18) 60%,transparent);animation:fmglow 2.4s ease-in-out infinite;pointer-events:none}
@keyframes fmglow{50%{transform:scale(1.12);opacity:.7}}
.fmgate .plate{background:linear-gradient(rgba(120,70,8,.92),rgba(70,38,4,.92));box-shadow:0 0 0 2px rgba(255,211,107,.7),0 0 18px rgba(255,190,60,.55)}
.fmgate .plate small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#7ee08e;margin-right:5px;vertical-align:1px;box-shadow:0 0 0 3px rgba(126,224,142,.3)}
@keyframes platin{from{opacity:0;translate:0 22px}}

/* ---------- below: notice board ---------- */
.under{position:relative;background:linear-gradient(var(--earth-2),#2c1c10 60%,var(--earth-3));padding:70px 0 90px;color:#f6ead4}
.under::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 400px at 20% 0,rgba(255,180,90,.12),transparent 70%);pointer-events:none}
.cols{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:26px;align-items:start}
.under .win{color:var(--ink)}
.chartwin p{margin:0 0 8px;color:var(--ink-2);font-size:14.5px}
.chartwin .btn{margin-top:8px}

/* ---------- MOBILE: vertical climb ---------- */
@media (max-width:820px){
  .scene.town{height:auto;min-height:0;max-height:none;overflow:visible;padding:0 0 10px;background:linear-gradient(#9fd0f5,#d8ecf5 30%,#f7e7c3 70%,#cfe3a3)}
  .town .sky{position:absolute;inset:0;background-size:auto 640px;background-position:38% 0;-webkit-mask:linear-gradient(#000 420px,transparent 640px);mask:linear-gradient(#000 420px,transparent 640px);animation:none}
  .haze{display:none}
  .talk{position:relative;inset:auto;padding:14px 12px 0}
  .dialog{position:relative;left:auto;top:auto;width:auto;padding-bottom:14px}
  .dialog .body{padding:14px 16px 0}
  .dialog h1{font-size:23px}
  .dialog::after{left:64px}
  .thread{max-height:60vh}
  .results{top:calc(100% - 30px)}
  .npc{position:relative;left:auto;bottom:auto;width:104px;margin:14px auto 0 26px}
  .climb{position:relative;display:flex;flex-direction:column;gap:0;padding:6px 0 0}
  .plat{position:relative;left:auto!important;top:auto!important;bottom:auto!important;width:62%!important;margin:0 0 0 4%}
  .climb .plat:nth-of-type(even){margin:0 4% 0 auto}
  .climb .plat:first-of-type{width:94%!important;margin:-122px 3% 0;align-items:flex-end}
  .climb .plat:first-of-type .portal{margin-right:12%}
  .plat.float,.climb .plat.float{animation:none}
  .climb .plat{animation:none}
  .portal>.tip{display:none}
  .rung{display:block;height:64px;width:40px;margin:-28px auto -10px 32%;background:url(../img/world/ladder.webp) center top/40px auto repeat-y;position:relative;z-index:7}
  .rung.r{margin-left:60%}
  .town .ground{position:relative;left:0;width:100%;height:90px;background-size:160% 80px;background-position:50% 0}
  .town .ground::after{top:70px}
  .under{padding:44px 0 60px}
  .cols{grid-template-columns:1fr;gap:20px}
}
@media (max-width:420px){
  .dialog h1 .big{font-size:2.2em}
  .ask .field{padding-left:10px}
  .ask .btn{padding:6px 10px 4px}
}
/* tablet (821–1180): keep Ren's window clear of the ground portals' name plates */
@media (max-width:1180px) and (min-width:821px){
  .dialog{top:158px;width:min(560px,50%)}
  .dialog h1{font-size:26px}
  .dialog .body{padding-top:12px}
  .dialog .who{display:none}
  .dialog h1 .big{font-size:2.1em}
  .dialog .say{margin-bottom:12px}
  #ask-chips button:nth-of-type(3){display:none}
}
/* Market Room portal busy meter (js/town.js) */
.fmr-bm{display:inline-flex;gap:1.5px;padding:1.5px;border:1px solid rgba(0,0,0,.55);border-radius:3px;background:rgba(36,32,46,.55);vertical-align:-1px}
.fmr-bm i{width:4px;height:7px;border-radius:1px;background:rgba(255,255,255,.18)}
.fmr-bm i.on{background:hsl(calc(130 - var(--k) * 125) 72% 52%)}