/* ==========================================================================
   style.css — Pressure Empire. Portrait-first: this one is played with a
   thumb, scrolling, so it has no orientation gate — it simply reflows.
   ========================================================================== */
:root{
  --font-display:'Cinzel','Trajan Pro','Palatino Linotype',Georgia,serif;
  --font-body:'Barlow Semi Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  --ink:#03080e;
  --gold-1:#F0E6D2; --gold-2:#C8AA6E; --gold-3:#C89B3C; --gold-4:#785A28; --gold-5:#463714;
  --dim:#A09B8C; --dimmer:#5B5A56;
  --orange:#FB9245; --water:#5CC8FF; --green:#4ADE80; --red:#E84057;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; min-height:100%;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(92,200,255,.10), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(251,146,69,.10), transparent 55%),
    var(--ink);
  color:var(--gold-1); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}

/* ---- top bar ---------------------------------------------------------- */
.bar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;
  background:linear-gradient(180deg,rgba(3,8,14,.97),rgba(3,8,14,.86));
  border-bottom:1px solid var(--gold-5);
}
.home{
  text-decoration:none; color:var(--dim); font-size:19px; line-height:1;
  padding:4px 8px; border:1px solid var(--gold-5); border-radius:6px;
}
.home:hover{ color:var(--gold-1); }
.wallet{ flex:1; text-align:center; }
#money{
  font:700 clamp(22px,6.4vw,30px)/1 var(--font-body); letter-spacing:.5px;
  color:var(--gold-1); font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(200,170,110,.25);
}
#rate{ margin-top:3px; font:500 10.5px/1 var(--font-body); letter-spacing:1.6px; color:var(--water); }
.barbtns{ display:flex; gap:6px; }
.barbtns button{
  width:32px; height:32px; border-radius:6px; cursor:pointer;
  background:#0a1219; border:1px solid var(--gold-5); color:var(--dim); font-size:14px;
}
.barbtns button:hover{ color:var(--gold-1); border-color:var(--gold-3); }

.wrap{ max-width:560px; margin:0 auto; padding:12px 14px calc(26px + env(safe-area-inset-bottom,0px)); }

/* ---- the job ---------------------------------------------------------- */
.jobcard{
  display:flex; align-items:center; gap:12px;
  background:rgba(1,10,19,.6); border:1px solid var(--gold-5);
  border-radius:8px; padding:10px 13px;
}
.j-left{ flex:1; min-width:0; }
#jobname{ font:600 16px/1.15 var(--font-display); letter-spacing:.6px; color:var(--gold-1); }
#jobclient{ margin-top:3px; font:400 11.5px/1.3 var(--font-body); color:var(--dimmer); }
.j-right{ text-align:right; }
.j-label{ font:700 8px/1 var(--font-body); letter-spacing:2.2px; color:var(--gold-3); }
#jobvalue{ margin-top:4px; font:700 17px/1 var(--font-body); color:var(--orange); font-variant-numeric:tabular-nums; }
#section{ margin-top:4px; font:700 8.5px/1 var(--font-body); letter-spacing:1.6px; color:var(--water); display:none; }
#section.on{ display:block; }

/* ---- the surface ------------------------------------------------------ */
#stage{
  position:relative; margin-top:10px;
  aspect-ratio:3/2; width:100%;
  border:1px solid var(--gold-4); border-radius:8px; overflow:hidden;
  background:#0a1219; box-shadow:0 10px 30px rgba(0,0,0,.5);
  touch-action:none;
}
#stage canvas{ position:absolute; inset:0; display:block; }
#grime{ cursor:crosshair; }
#stage.done{ animation:flash .55s ease-out; }
@keyframes flash{ 0%{ box-shadow:0 0 0 0 rgba(74,222,128,0);} 35%{ box-shadow:0 0 0 4px rgba(74,222,128,.55), 0 0 40px rgba(74,222,128,.4);} 100%{ box-shadow:0 10px 30px rgba(0,0,0,.5);} }
#wand{
  position:absolute; left:0; top:0; width:30px; height:30px; border-radius:50%;
  pointer-events:none; opacity:0; transition:opacity .12s;
  background:radial-gradient(circle,rgba(191,233,255,.55),rgba(92,200,255,.18) 60%,transparent 72%);
  border:1px solid rgba(191,233,255,.75);
}
#wand.on{ opacity:1; }
.hint{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font:600 10px/1 var(--font-body); letter-spacing:2.4px; color:rgba(240,230,210,.66);
  text-shadow:0 1px 4px #000; pointer-events:none;
  animation:hintPulse 2.6s ease-in-out infinite;
}
@keyframes hintPulse{ 50%{ opacity:.35; } }
#stage.done .hint{ display:none; }
#poplayer{ position:absolute; inset:0; pointer-events:none; }
.pop{
  position:absolute; font:700 15px/1 var(--font-body); color:var(--green);
  text-shadow:0 2px 6px #000; animation:popUp 1.1s ease-out forwards;
}
.pop.big{ font-size:22px; color:var(--orange); }
@keyframes popUp{ 0%{ opacity:0; transform:translateY(6px) scale(.9);} 18%{opacity:1; transform:translateY(0) scale(1);} 100%{ opacity:0; transform:translateY(-38px) scale(1.04);} }

/* ---- progress --------------------------------------------------------- */
.progress{ display:flex; align-items:center; gap:10px; margin-top:10px; }
.p-track{ flex:1; height:10px; background:#0a1219; border:1px solid var(--gold-5); border-radius:99px; overflow:hidden; }
#barfill{
  height:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,#2E6E8E,var(--water) 60%,#DFF6FF);
  box-shadow:0 0 14px rgba(92,200,255,.5); transition:transform .12s linear;
}
#barpct{ min-width:44px; text-align:right; font:700 13px/1 var(--font-body); color:var(--gold-2); font-variant-numeric:tabular-nums; }

/* ---- stats ------------------------------------------------------------ */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.stat{
  background:rgba(1,10,19,.5); border:1px solid var(--gold-5); border-radius:7px;
  padding:8px 6px; text-align:center; min-width:0;
}
.s-k{ display:block; font:700 8px/1 var(--font-body); letter-spacing:1.8px; color:var(--gold-3); margin-bottom:5px; }
.stat span:last-child{ font:600 12px/1.15 var(--font-body); color:var(--gold-1);
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- shop ------------------------------------------------------------- */
.tabs{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:16px; }
.tab{
  padding:10px 4px; cursor:pointer; border-radius:7px;
  background:#0a1219; border:1px solid var(--gold-5); color:var(--dim);
  font:700 10px/1 var(--font-body); letter-spacing:1.6px;
  transition:color .15s, border-color .15s, background .15s;
}
.tab.on{ color:#06101a; background:linear-gradient(180deg,#E4C77A,#A8832F); border-color:var(--gold-2); }

.shop{ margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.card{
  background:linear-gradient(180deg,rgba(12,23,34,.92),rgba(4,11,17,.95));
  border:1px solid var(--gold-5); border-radius:8px; padding:11px 13px;
  transition:border-color .16s, box-shadow .16s, transform .1s;
}
.card.can{
  cursor:pointer; border-color:var(--gold-2);
  box-shadow:0 0 0 1px rgba(200,170,110,.22), 0 0 20px rgba(200,170,110,.14);
}
.card.can:active{ transform:scale(.99); }
.card.owned{ opacity:.62; }
.card.nope{ animation:shake .32s; border-color:var(--red); }
@keyframes shake{ 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.c-top{ display:flex; align-items:baseline; gap:8px; }
.c-name{ flex:1; font:600 14px/1.2 var(--font-body); color:var(--gold-1); }
.c-tag{ font:700 10.5px/1 var(--font-body); letter-spacing:1.2px; color:var(--water); white-space:nowrap; }
.c-note{ margin-top:5px; font:400 11.5px/1.45 var(--font-body); color:var(--dimmer); }
.c-buy{ margin-top:9px; }
.c-cost{
  display:inline-block; padding:6px 14px; border-radius:6px;
  background:#0d1a26; border:1px solid var(--gold-4);
  font:700 12.5px/1 var(--font-body); color:var(--gold-2); font-variant-numeric:tabular-nums;
}
.card.can .c-cost{ background:linear-gradient(180deg,#2A4863,#101E29); color:var(--gold-1); border-color:var(--gold-2); }
.c-owned{ font:700 10px/1 var(--font-body); letter-spacing:2px; color:var(--green); }

.lockedlist{ margin-top:4px; border-top:1px dashed rgba(120,90,40,.35); padding-top:8px; }
.lockrow{
  display:flex; justify-content:space-between; gap:10px; padding:4px 2px;
  font:500 11px/1.3 var(--font-body); color:#3f423f;
}
.gate{
  text-align:center; padding:20px 14px; border:1px dashed var(--gold-5); border-radius:8px;
  font:400 12.5px/1.6 var(--font-body); color:var(--dim);
}
.gate span{ display:block; margin-top:7px; color:var(--gold-2); font-weight:700; letter-spacing:1.6px; }
.crewhead{
  padding:8px 4px 2px; font:400 12px/1.4 var(--font-body); color:var(--dim); text-align:center;
}
.crewhead b{ color:var(--gold-1); }

.foot{ margin-top:22px; text-align:center; font:400 10.5px/1.5 var(--font-body); color:#34383c; }

/* ---- toast / welcome -------------------------------------------------- */
#toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(-14px);
  top:calc(62px + env(safe-area-inset-top,0px)); z-index:60;
  min-width:210px; max-width:92vw; padding:10px 18px; border-radius:8px; text-align:center;
  background:rgba(4,14,22,.96); border:1px solid var(--gold-3);
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
.t-t{ font:700 13px/1.2 var(--font-body); letter-spacing:.8px; color:var(--gold-1); }
.t-s{ margin-top:3px; font:400 11px/1.3 var(--font-body); color:var(--dim); }

#sandbox{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  padding:7px 14px calc(7px + env(safe-area-inset-bottom,0px));
  background:rgba(251,146,69,.14); border-top:1px solid var(--orange);
  font:700 10px/1.4 var(--font-body); letter-spacing:1.6px; color:var(--orange);
  text-align:center;
}
#sandbox.on{ display:block; }
#sandbox a{ color:var(--gold-1); }
body.sandbox .wrap{ padding-bottom:64px; }

#welcome{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(2,7,12,.88); backdrop-filter:blur(3px);
}
#welcome.on{ display:flex; }
.w-inner{
  max-width:340px; width:100%; text-align:center; padding:26px 22px;
  background:linear-gradient(180deg,rgba(10,20,30,.97),rgba(1,8,14,.98));
  border:1px solid var(--gold-3); border-radius:10px;
}
.w-k{ font:700 9px/1 var(--font-body); letter-spacing:3px; color:var(--gold-3); }
.w-m{ margin-top:12px; font:700 34px/1 var(--font-body); color:var(--green); font-variant-numeric:tabular-nums; }
.w-s{ margin-top:8px; font:400 12px/1.4 var(--font-body); color:var(--dim); }
.w-btn{
  margin-top:18px; width:100%; padding:13px; cursor:pointer; border-radius:7px;
  background:linear-gradient(180deg,#43301C,#12202C); border:1px solid var(--orange);
  color:var(--gold-1); font:700 12px/1 var(--font-body); letter-spacing:2.6px;
}

/* ---- wide screens: put the surface and the shop side by side ---------- */
@media (min-width:900px){
  .wrap{ max-width:1080px; display:grid; grid-template-columns:1.25fr .95fr;
         grid-template-areas:'job shoptabs' 'stage shop' 'prog shop' 'stats shop' 'foot foot';
         column-gap:22px; align-items:start; }
  .jobcard{ grid-area:job; }
  #stage{ grid-area:stage; aspect-ratio:16/10; }
  .progress{ grid-area:prog; }
  .stats{ grid-area:stats; }
  .tabs{ grid-area:shoptabs; margin-top:0; }
  .shop{ grid-area:shop; max-height:none; }
  .foot{ grid-area:foot; }
}