/* ==========================================================================
   PONSTEL - the chrome.
   Ponsfamily glass, dark green, lime accent. Dark only. The 3D world keeps its
   own bright pastel palette; everything the UI draws over it lives here.
   ========================================================================== */

:root{
  /* ground */
  --bg-page:      #080c08;
  --bg-deep:      #050805;
  --bg-white:     #101710;
  --bg-elevated:  #162014;
  --panel-green:  #18200f;

  /* ink */
  --text-primary: #f2f4ee;
  --text-muted:   rgba(242,244,238,.58);
  --text-subtle:  rgba(242,244,238,.40);

  /* accent */
  --accent:        #d4fc50;
  --accent-hover:  #e2ff66;
  --accent-soft:   #1c2610;
  --accent-contrast:#111;
  --accent-line:   rgba(212,252,80,.28);

  --green-deep:   #0d3b1e;
  --green-mid:    #16803c;
  --green-glow:   rgba(153,202,42,.16);

  /* glass */
  --glass-fill:      rgba(16,23,16,.72);
  --glass-border:    rgba(255,255,255,.09);
  --glass-highlight: inset 0 1px 0 rgba(232,255,153,.14);
  --glass-blur:      blur(18px) saturate(1.35);

  --divider: rgba(242,244,238,.12);
  --radius-float: 28px;
  --radius-card:  24px;
  --radius-panel: 20px;
  --radius-inner: 12px;
  --radius-pill:  999px;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --shadow-soft: 0 4px 24px rgba(0,0,0,.45);
  --btn-glow: 0 8px 24px rgba(212,252,80,.28);
  --font: ui-rounded, "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior:none;
}
canvas{ display:block; width:100%; height:100%; touch-action:none; }
/* Base size for every inline icon.
   ⚠ An <svg> with only a viewBox and no width fills whatever contains it. One
   unstyled icon in the build dialog's heading rendered as a full page hammer. */
svg{ width:1em; height:1em; flex:none; vertical-align:-.14em; }
#app{ position:fixed; inset:0; }
.hidden{ display:none !important; }
button{ font:inherit; color:inherit; }

/* ------------------------------------------------------------------ glass */
.glass{
  background-color: var(--glass-fill);
  border-radius: var(--radius-panel);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-border), var(--shadow-soft);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.72rem 1.15rem; border:0; cursor:pointer;
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  box-shadow: inset 0 0 0 1px var(--glass-border);
  color: var(--text-primary);
  font-weight:650; font-size:.94rem; letter-spacing:.01em;
  transition: transform .16s var(--ease-out), background-color .16s;
}
.btn:hover{ background: #1d2a19; transform: translateY(-1px); }
.btn:active{ transform: translateY(0); }
.btn-primary{
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  color: var(--accent-contrast); box-shadow: var(--btn-glow);
  font-weight:800;
}
.btn-primary:hover{ background: var(--accent-hover); }
.btn-ghost{ background: transparent; box-shadow: inset 0 0 0 1px var(--glass-border); }
.btn svg{ width:1.05em; height:1.05em; flex:none; }

/* =========================================================== 1. landing */
#landing{
  position:fixed; inset:0; z-index:40;
  display:flex; flex-direction:column;
  /* The hotel is live behind this. The scrim is heavy under the copy and
     nearly clear on the right so you can see what you are about to play. */
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(13,59,30,.55), transparent 58%),
    linear-gradient(96deg,
      rgba(5,8,5,.95) 0%, rgba(5,8,5,.90) 34%,
      rgba(5,8,5,.62) 54%, rgba(5,8,5,.22) 78%, rgba(5,8,5,.10) 100%);
  animation: fade-in .5s var(--ease-out);
}
#landing.leaving{ opacity:0; pointer-events:none; transition: opacity .45s var(--ease-out); }
@keyframes fade-in{ from{ opacity:0 } to{ opacity:1 } }

.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.4rem; gap:1rem;
}
.brand{ display:flex; align-items:center; gap:.65rem; }
.brand img{
  width:44px; height:44px; border-radius:13px; object-fit:cover;
  box-shadow: 0 0 0 1px var(--glass-border), 0 4px 14px rgba(0,0,0,.5);
  background: var(--bg-white);
}
.brand b{ font-size:1.02rem; letter-spacing:.16em; font-weight:800; }
.brand span{ display:block; font-size:.7rem; color:var(--text-subtle); letter-spacing:.06em; }

.chain-chip{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.4rem .78rem; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size:.76rem; font-weight:700;
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
.chain-chip i{ width:7px; height:7px; border-radius:50%; background: var(--accent); }

.nav-right{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.buy-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.42rem .85rem; border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--accent-hover), var(--accent));
  color: var(--accent-contrast); text-decoration:none;
  font-size:.76rem; font-weight:800; letter-spacing:.02em;
  box-shadow: 0 6px 18px rgba(212,252,80,.24);
  transition: transform .16s var(--ease-out);
}
.buy-chip:hover{ transform: translateY(-1px); }
.buy-chip svg{ width:13px; height:13px; }
#ca-line{ font-size:.72rem; letter-spacing:.02em; }
#ca-line a{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.hero{
  flex:1; display:flex; align-items:center;
  padding: 0 clamp(1.2rem, 6vw, 5.5rem);
}
.hero-inner{ max-width: 620px; }
.hero h1{
  margin:0; font-size: clamp(3rem, 9vw, 5.6rem); line-height:.92;
  letter-spacing:-.02em; font-weight:800;
}
.hero h1 em{
  font-style:normal;
  background: linear-gradient(94deg, var(--accent), #8fe07a 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .tag{
  margin:.9rem 0 0; font-size: clamp(1.05rem,2.4vw,1.4rem);
  color: var(--text-primary); font-weight:650;
}
.hero .blurb{
  margin:.7rem 0 0; max-width:46ch; color: var(--text-muted);
  font-size:.98rem; line-height:1.55;
}
.play-row{ margin-top:1.7rem; display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; position:relative; }
#play-now{ padding:1rem 1.8rem; font-size:1.06rem; letter-spacing:.04em; }
#play-now svg:last-child{ transition: transform .2s var(--ease-out); }
#play-now.open svg:last-child{ transform: rotate(180deg); }

.menu{
  position:absolute; top: calc(100% + .6rem); left:0; z-index:5;
  width: min(360px, 88vw); padding:.5rem;
  display:none; flex-direction:column; gap:.3rem;
  animation: rise .22s var(--ease-out);
}
.menu.open{ display:flex; }
@keyframes rise{ from{ opacity:0; transform: translateY(-6px) } to{ opacity:1; transform:none } }
.menu button{
  display:flex; align-items:flex-start; gap:.75rem; width:100%; text-align:left;
  padding:.8rem .85rem; border:0; background:transparent; cursor:pointer;
  border-radius: var(--radius-inner); color: var(--text-primary);
  transition: background-color .14s;
}
.menu button:hover{ background: rgba(212,252,80,.09); }
.menu button svg{ width:20px; height:20px; margin-top:2px; flex:none; color: var(--accent); }
.menu b{ display:block; font-size:.95rem; font-weight:700; }
.menu small{ display:block; color: var(--text-muted); font-size:.8rem; margin-top:.12rem; line-height:1.35; }

.facts{ margin-top:1.6rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.fact{
  padding:.42rem .8rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--glass-border);
  font-size:.78rem; color: var(--text-muted); font-weight:600;
}

.foot{
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding: 1rem 1.4rem 1.5rem;
}
.x-btn{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:11px; border:0; cursor:pointer;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px var(--glass-border);
  color: var(--text-primary);
  transition: background-color .16s, transform .16s var(--ease-out);
}
.x-btn:hover{ background: rgba(212,252,80,.12); transform: translateY(-1px); color: var(--accent); }
.x-btn svg{ width:15px; height:15px; }
.foot p{ margin:0; font-size:.8rem; color: var(--text-subtle); }
.foot a{ color: var(--text-muted); text-decoration:none; border-bottom:1px solid var(--divider); }
.foot a:hover{ color: var(--accent); }

/* ============================================================== 2. HUD */
#hud{ position:fixed; inset:0; z-index:20; pointer-events:none; font-size:14px; }
#hud > *{ pointer-events:auto; }

.hud-tl{ position:absolute; top:14px; left:14px; display:flex; gap:10px; align-items:stretch; }
.hud-tr{ position:absolute; top:14px; right:14px; display:flex; gap:8px; align-items:center; }
.hud-bl{ position:absolute; bottom:14px; left:14px; width:min(310px,42vw); display:flex; flex-direction:column; gap:8px; }
.hud-br{ position:absolute; bottom:14px; right:14px; display:flex; gap:8px; align-items:flex-end; }
/* The prompt is a child of the bottom-left column so that on a narrow window it
   simply stacks above the job list and cannot land on top of it. On a wide one
   it lifts out to the centre of the screen where it belongs. */
#hud-prompt{ align-self:flex-start; }
@media (min-width: 901px){
  #hud-prompt{
    position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
    width:max-content; max-width:min(520px, 44vw);
  }
}

.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; border-radius: var(--radius-pill);
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  font-weight:700; font-size:.86rem; white-space:nowrap;
}
.pill svg{ width:15px; height:15px; color: var(--accent); }
.pill.cash{ color: var(--accent); font-variant-numeric: tabular-nums; }
.pill.warn{ color:#ffd36b; }
.pill.muted{ color: var(--text-muted); font-weight:600; }

.hotel-card{
  display:flex; flex-direction:column; gap:2px;
  padding:.55rem .9rem; border-radius: var(--radius-panel);
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.hotel-card b{ font-size:.95rem; letter-spacing:.1em; }
.stars{ display:flex; gap:2px; }
.stars svg{ width:13px; height:13px; color:#3a4436; }
.stars svg.on{ color: var(--accent); }
.stars svg.half{ color: #8fa04a; }

.tasks{ display:flex; flex-direction:column; gap:6px; }
.task{
  display:flex; align-items:center; gap:.55rem;
  padding:.5rem .7rem; border-radius: var(--radius-inner);
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  font-size:.82rem; color: var(--text-primary);
  animation: rise .2s var(--ease-out);
}
.task svg{ width:16px; height:16px; flex:none; color: var(--accent); }
.task.urgent svg{ color:#ff9b6b; }

.prompt{
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem 1rem; border-radius: var(--radius-pill);
  background: var(--glass-fill);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--accent-line);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  font-weight:650; font-size:.9rem;
}
.prompt kbd{
  padding:.16rem .48rem; border-radius:7px; font:inherit; font-size:.78rem; font-weight:800;
  background: var(--accent); color: var(--accent-contrast);
}
.prompt.dim{ opacity:.6; box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-border); }
.prompt .bar{ width:70px; height:5px; border-radius:99px; background: rgba(255,255,255,.16); overflow:hidden; }
.prompt .bar i{ display:block; height:100%; background: var(--accent); width:0; transition: width .1s linear; }

.icon-btn{
  width:40px; height:40px; display:grid; place-items:center; border:0; cursor:pointer;
  border-radius:13px; background: var(--glass-fill);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-border);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  color: var(--text-primary); transition: background-color .15s, transform .15s var(--ease-out);
}
.icon-btn:hover{ color: var(--accent); transform: translateY(-1px); }
.icon-btn svg{ width:19px; height:19px; }
.icon-btn small{
  position:absolute; transform: translate(15px,-15px);
  font-size:.58rem; font-weight:800; color: var(--text-subtle);
}

/* chat */
.chat-log{ display:flex; flex-direction:column; gap:3px; max-height:26vh; overflow:hidden; }
.chat-line{
  font-size:.8rem; padding:.3rem .6rem; border-radius:10px; width:fit-content; max-width:100%;
  background: rgba(8,12,8,.62); box-shadow: inset 0 0 0 1px var(--glass-border);
  backdrop-filter: blur(8px);
}
.chat-line b{ color: var(--accent); font-weight:700; }
#chat-input{
  width:100%; padding:.5rem .8rem; border-radius: var(--radius-pill); border:0;
  background: var(--glass-fill); box-shadow: 0 0 0 1px var(--accent-line);
  color: var(--text-primary); font:inherit; font-size:.85rem;
  backdrop-filter: var(--glass-blur);
}
#chat-input:focus{ outline:none; box-shadow: 0 0 0 2px var(--accent); }

/* =========================================================== 3. modals */
.scrim{
  position:fixed; inset:0; z-index:60; display:none;
  align-items:center; justify-content:center; padding:1.2rem;
  background: rgba(4,7,4,.72); backdrop-filter: blur(6px);
}
.scrim.open{ display:flex; animation: fade-in .18s var(--ease-out); }
.modal{
  width:min(560px, 96vw); max-height:86vh; overflow:auto;
  padding:1.3rem; border-radius: var(--radius-card);
  background: linear-gradient(145deg, var(--panel-green), var(--bg-white) 64%);
  box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-border), 0 20px 60px rgba(0,0,0,.6);
  animation: rise .22s var(--ease-out);
}
.modal h2{ margin:0 0 .2rem; font-size:1.15rem; letter-spacing:.02em; display:flex; align-items:center; gap:.5rem; }
.modal h2 svg{ width:1.1em; height:1.1em; color: var(--accent); }
.modal p.sub{ margin:0 0 1rem; color: var(--text-muted); font-size:.88rem; }
.modal .row{ display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem; }
.modal input[type=text]{
  width:100%; padding:.7rem .9rem; border-radius: var(--radius-inner); border:0;
  background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--glass-border);
  color: var(--text-primary); font:inherit;
}
.modal input[type=text]:focus{ outline:none; box-shadow: inset 0 0 0 1px var(--accent); }
.modal label{ display:block; font-size:.78rem; color: var(--text-subtle); margin:.8rem 0 .3rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* build catalogue */
.cat{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:.55rem; }
.cat button{
  text-align:left; padding:.7rem .8rem; border:0; cursor:pointer;
  border-radius: var(--radius-inner); color: var(--text-primary);
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--glass-border);
  transition: background-color .14s, transform .14s var(--ease-out);
}
.cat button:hover:not(:disabled){ background: rgba(212,252,80,.10); transform: translateY(-1px); }
.cat button:disabled{ opacity:.42; cursor:not-allowed; }
.cat b{ display:block; font-size:.88rem; }
.cat small{ display:block; color: var(--text-muted); font-size:.74rem; margin-top:.15rem; line-height:1.3; }
.cat .price{ display:block; margin-top:.4rem; color: var(--accent); font-weight:800; font-size:.82rem; }

.plots{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.4rem; }
.plots button{
  padding:.4rem .7rem; border:0; cursor:pointer; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--glass-border);
  color: var(--text-muted); font-size:.78rem; font-weight:700;
}
.plots button.sel{ background: var(--accent); color: var(--accent-contrast); }
.plots button.taken{ opacity:.35; cursor:not-allowed; }

/* wallet list */
.wallets{ display:flex; flex-direction:column; gap:.4rem; }
.wallets button{
  display:flex; align-items:center; gap:.7rem; padding:.7rem .8rem; border:0; cursor:pointer;
  border-radius: var(--radius-inner); color: var(--text-primary);
  background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--glass-border);
}
.wallets button:hover{ background: rgba(212,252,80,.10); }
.wallets img{ width:26px; height:26px; border-radius:8px; }
.wallets button svg{ width:24px; height:24px; color: var(--accent); }

/* toasts */
#toasts{
  position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:70;
  display:flex; flex-direction:column; gap:.4rem; align-items:center; pointer-events:none;
}
.toast{
  padding:.55rem 1rem; border-radius: var(--radius-pill);
  background: var(--glass-fill); box-shadow: var(--glass-highlight), 0 0 0 1px var(--glass-border);
  backdrop-filter: var(--glass-blur); font-size:.85rem; font-weight:650;
  animation: rise .2s var(--ease-out);
}
.toast.good{ color: var(--accent); box-shadow: var(--glass-highlight), 0 0 0 1px var(--accent-line); }
.toast.bad{ color:#ff9b6b; }

/* --------------------------------------------------------------- mobile */
/* The work prompt lives bottom centre and the job list bottom left. On a wide
   window they never meet; below about 900px the prompt's own width reaches the
   list and the two sit on top of each other, so the prompt goes up a storey. */
@media (max-width: 720px){
  .hero{ padding-top:1rem; }
  .hud-bl{ width:min(260px,60vw); }
  #hud{ font-size:13px; }
  .hotel-card b{ font-size:.85rem; }
  .prompt{ font-size:.82rem; padding:.5rem .8rem; }
  .prompt .bar{ width:48px; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}