/* ==========================================================================
   style.css — Hard Freeze. Portrait phone only.
   ========================================================================== */
:root{
  --font-display:'Cinzel',Georgia,serif;
  --font-body:'Barlow Semi Condensed','Arial Narrow',sans-serif;
  --ink:#03080e; --gold-1:#F0E6D2; --gold-2:#C8AA6E; --gold-3:#C89B3C; --gold-5:#463714;
  --dim:#A09B8C; --orange:#FB9245; --water:#5CC8FF; --red:#E84057; --food:#7fe0c0;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; height:100%; overflow:hidden; background: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:none;
  touch-action:manipulation;
}

/* ---- desktop poster ---------------------------------------------------- */
#poster{ display:none; }
html.nophone #shell, html.nophone #rotate{ display:none !important; }
html.nophone #poster{
  display:flex; position:fixed; inset:0; align-items:center; justify-content:center;
  text-align:center; padding:30px;
  background:radial-gradient(ellipse at 50% 20%,rgba(92,200,255,.10),transparent 60%),var(--ink);
}
.po-k{ font:700 10px/1 var(--font-body); letter-spacing:5px; color:var(--orange); }
#poster h1{
  margin:14px 0 0; font:700 clamp(46px,9vw,86px)/.92 var(--font-display); letter-spacing:6px;
  background:linear-gradient(180deg,#EAF4FF,#9fb8ce 55%,#3d5e7a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.po-s{ margin:16px 0 0; font:400 14px/1.6 var(--font-body); color:var(--dim); }
.po-big{ margin-top:34px; font:700 15px/1.4 var(--font-body); letter-spacing:3px; color:var(--gold-1); }
.po-url{ margin-top:12px; font:700 clamp(20px,3.4vw,30px)/1 var(--font-body); letter-spacing:2px; color:var(--gold-2); }
.po-alt{ margin-top:34px; font:400 12px/1 var(--font-body); color:#4a4f53; }
.po-links{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.po-links a{
  padding:9px 15px; border-radius:6px; text-decoration:none;
  border:1px solid var(--gold-5); color:var(--dim);
  font:600 11px/1 var(--font-body); letter-spacing:1.4px;
}
.po-links a:hover{ color:var(--gold-1); border-color:var(--gold-3); }

/* ---- landscape gate ---------------------------------------------------- */
#rotate{
  position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; background:var(--ink); text-align:center;
}
body.landscape #rotate{ display:flex; }
.rot-icon{ font-size:52px; color:var(--gold-2); animation:rotSpin 2.4s ease-in-out infinite; }
@keyframes rotSpin{ 0%,100%{transform:rotate(0)} 50%{transform:rotate(-90deg)} }
.rot-title{ margin-top:14px; font:700 17px/1 var(--font-display); letter-spacing:3px; color:var(--gold-1); }
.rot-sub{ margin-top:8px; font:400 11px/1 var(--font-body); color:var(--dim); }

/* ---- shell ------------------------------------------------------------- */
#shell{
  position:fixed; inset:0; max-width:430px; margin:0 auto;
  display:flex; flex-direction:column; background:var(--ink); overflow:hidden;
}
.bar{
  height:46px; flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:0 10px; padding-top:env(safe-area-inset-top,0px);
  background:rgba(3,8,14,.96); border-bottom:1px solid rgba(70,55,20,.5);
}
.back{ width:26px; text-align:center; text-decoration:none; color:var(--dim); font-size:18px; }
.money{
  font:700 17px/1 var(--font-body); color:var(--green,#4ADE80);
  font-variant-numeric:tabular-nums; min-width:62px;
}
.carry{ display:flex; align-items:center; gap:4px; font:700 11px/1 var(--font-body); color:var(--gold-2); }
.carry i{ width:8px; height:8px; border-radius:2px; background:var(--gold-2); }
.fleet{ display:none; gap:3px; flex-direction:column; width:34px; }
.bi{ display:block; height:4px; border-radius:2px; transform-origin:left center; }
.bi.soap{ background:var(--green,#4ADE80); }
.bi.done{ background:var(--water,#5CC8FF); }
#who{ flex:1; text-align:right; font:700 9px/1 var(--font-body); letter-spacing:1.4px; color:var(--gold-2); }
#shoptab{
  padding:7px 10px; border-radius:6px; background:#0a1219; border:1px solid var(--gold-5);
  color:var(--dim); font:700 9px/1 var(--font-body); letter-spacing:1.2px;
}
#shoptab.on{ color:#06101a; background:var(--gold-2); border-color:var(--gold-2); }

.hintbar{
  height:34px; flex:0 0 auto; display:flex; align-items:center; justify-content:center;
  padding:0 14px; background:rgba(1,10,19,.6);
  border-bottom:1px solid rgba(70,55,20,.35);
}
#hint{ font:500 11.5px/1 var(--font-body); color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

#stage{ position:relative; flex:1 1 auto; touch-action:none; overflow:hidden; }
/* The winter sky, so the first paint is weather rather than a black hole
   while the renderer is still standing the yard up. */
#yard{ display:block; width:100%; height:100%; background:#cfe0ef; }

#joy{ position:fixed; width:0; height:0; opacity:0; transition:opacity .12s; pointer-events:none; z-index:20; }
#joy.on{ opacity:1; }
.jbase{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:126px; height:126px; border-radius:50%;
  border:2px solid rgba(200,170,110,.4);
  background:radial-gradient(circle,rgba(10,22,34,.38),rgba(10,22,34,.1) 70%,transparent);
}
.jknob{
  position:absolute; left:50%; top:50%; width:56px; height:56px; border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#EAF4FF,#7FA8C8 55%,#33556E);
  border:2px solid rgba(240,230,210,.85); box-shadow:0 2px 10px rgba(0,0,0,.55);
}

#shopwrap{
  display:none; position:absolute; left:0; right:0; bottom:0; z-index:30;
  max-height:62%; overflow-y:auto; padding:0 12px 16px;
  background:linear-gradient(180deg,rgba(3,8,14,.97),rgba(3,8,14,1));
  border-top:1px solid var(--gold-3);
}
.shead{
  position:sticky; top:0; display:flex; align-items:center; justify-content:space-between;
  padding:12px 0 10px; background:rgba(3,8,14,.98);
  font:700 10px/1 var(--font-body); letter-spacing:3px; color:var(--gold-3);
}
#shopclose{ background:none; border:none; color:var(--dim); font-size:16px; padding:0 4px; }
.scard{
  background:linear-gradient(180deg,rgba(12,23,34,.92),rgba(4,11,17,.95));
  border:1px solid var(--gold-5); border-radius:9px; padding:11px 13px; margin-bottom:8px;
}
.scard.can{ border-color:var(--gold-2); }
.sn{ font:600 13.5px/1.2 var(--font-body); color:var(--gold-1); }
.sb{ margin-top:4px; font:400 11px/1.4 var(--font-body); color:#6c7075; }
.sbuy{
  margin-top:9px; width:100%; padding:10px; border-radius:7px;
  background:linear-gradient(180deg,#2A4863,#101E29); border:1px solid var(--gold-5);
  color:var(--gold-1); font:700 12px/1 var(--font-body); letter-spacing:1.6px;
}
.scard.can .sbuy{ border-color:var(--gold-2); background:linear-gradient(180deg,#43301C,#12202C); }
.smax{ margin-top:9px; font:700 10px/1 var(--font-body); letter-spacing:2px; color:var(--green,#4ADE80); }
.snote{ margin-top:6px; text-align:center; font:400 10.5px/1.5 var(--font-body); color:#4a4f53; }

#toast{
  position:absolute; left:50%; transform:translateX(-50%) translateY(-8px);
  top:92px; z-index:60; padding:9px 16px; 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 .2s, transform .2s;
}
#toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }
#toast b{ display:block; font:700 12.5px/1.2 var(--font-body); color:var(--gold-1); }
#toast span{ display:block; margin-top:2px; font:400 10.5px/1.3 var(--font-body); color:var(--dim); }

#load{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--ink); color:var(--dim); font:500 12px/1 var(--font-body); letter-spacing:2px;
}