:root{
  /* tylerirl.com: black, one cyan accent, Dracula colors for meaning, monospace everywhere (same as cancel.tylerirl.com) */
  --bg:#000000; --panel:rgba(0,0,0,.1); --glass:rgba(0,0,0,.2); --line:rgba(139,233,253,.22);
  --neon:#8be9fd; --neon2:#eaeaea; --acid:#50fa7b; --gold:#f1fa8c;
  --pink:#ff79c6; --lilac:#bd93f9; --orange:#ffb86c; --red:#ff5555;
  --txt:#eaeaea; --dim:#7c8a90;
  --mono:'JetBrains Mono','Fira Mono','Menlo','Consolas',monospace;
  --label:'Share Tech Mono','JetBrains Mono','Fira Mono','Menlo','Consolas',monospace;
  --stage:radial-gradient(circle at 50% 40%,rgba(139,233,253,.30) 0%,rgba(139,233,253,.10) 42%,rgba(139,233,253,.02) 70%,transparent 78%),#010506;
  --ui:1; --r:5px; --btnh-s:32px; --btnh:40px; --btnh-l:50px;
  --btn-t:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .08s,filter .08s;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);font-family:var(--mono);min-height:100%;}
body{background:
  radial-gradient(ellipse 80% 50% at 10% 0%,rgba(139,233,253,.26),transparent 60%),
  radial-gradient(ellipse 70% 50% at 100% 100%,rgba(139,233,253,.14),transparent 60%),
  radial-gradient(ellipse 60% 40% at 90% 10%,rgba(189,147,249,.12),transparent 60%),
  var(--bg);background-attachment:fixed;font-size:14px;}
/* sparkle dust + soft scanlines */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.55;
  background:
    radial-gradient(circle,#fff 0 1px,transparent 1.6px) 12px 20px/110px 130px,
    radial-gradient(circle,var(--pink) 0 1.2px,transparent 1.8px) 70px 90px/150px 170px,
    radial-gradient(circle,var(--neon2) 0 1px,transparent 1.6px) 40px 140px/190px 210px;
  animation:twinkle 5s ease-in-out infinite;}
body:not(.nobg)::before{opacity:.25;}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.09) 0 1px,transparent 1px 3px);}
@keyframes twinkle{50%{opacity:.2;}}
a{color:var(--neon);}
.corner-brackets{position:fixed;inset:0;pointer-events:none;z-index:98;}
.corner-brackets::before,.corner-brackets::after,.corner-brackets .bottom::before,.corner-brackets .bottom::after{content:"";position:absolute;width:40px;height:40px;
  border:0 solid rgba(139,233,253,.5);}
.corner-brackets::before{top:15px;left:15px;border-top-width:2px;border-left-width:2px;}
.corner-brackets::after{top:15px;right:15px;border-top-width:2px;border-right-width:2px;}
.corner-brackets .bottom::before{bottom:15px;left:15px;border-bottom-width:2px;border-left-width:2px;}
.corner-brackets .bottom::after{bottom:15px;right:15px;border-bottom-width:2px;border-right-width:2px;}
@media (max-width:520px){ .corner-brackets{display:none;} }
@media (max-width:820px){ body:has(#screen-main.active) .corner-brackets{display:none;} } /* the stacked layout runs edge to edge */

#app{max-width:1180px;margin:0 auto;min-height:100vh;position:relative;z-index:1;}
.screen{display:none;min-height:100vh;padding:16px;}
.screen.active{display:block;animation:fadein .25s ease-out;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}}
.hidden{display:none!important;}
.note{color:var(--dim);font-size:12px;line-height:1.5;}
.dim{color:var(--dim);}
.row{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:14px;flex-wrap:wrap;}

/* surfaces: thin cyan lines on near-black glass */
/* glass, after the rest of tylerirl.com: a cyan edge lit white along the top and left. Thin enough that the network,
   and the market's weather, show through behind it: a light tint and a slight blur, and the text gets a shadow instead */
.panel,.box{background:var(--panel);backdrop-filter:blur(2.5px) saturate(130%);-webkit-backdrop-filter:blur(2.5px) saturate(130%);
  border:1px solid rgba(139,233,253,.25);border-top-color:rgba(255,255,255,.15);border-left-color:rgba(255,255,255,.1);border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.1),inset 0 0 20px rgba(139,233,253,.03);}
.panel{padding:18px;}
.box{padding:10px 12px 12px;min-width:0;}
.panel h2,#modal-panel h2{font-family:var(--mono);font-size:1.2rem;font-weight:700;color:var(--neon);text-transform:lowercase;letter-spacing:.1em;
  text-shadow:0 0 14px rgba(139,233,253,.45);text-align:center;margin-top:0;}
.panel h2::after,.brand::after{content:"_";animation:tirlblink 1s steps(2) infinite;}
@keyframes tirlblink{50%{opacity:0;}}
.kicker,.box-h,.hint,.foot,.stat-grid span{font-family:var(--label);text-transform:uppercase;letter-spacing:.15em;color:#666;}
.box-h{font-size:.6rem;font-weight:bold;display:flex;justify-content:space-between;margin:4px 0 8px;}
.box-h span{color:var(--neon);}
.hint{font-size:.55rem;letter-spacing:.1em;text-align:center;margin:14px 0 4px;}

/* ---------- buttons: one system (cyan acts, green is on, gold costs, red destroys) ---------- */
.btn,.pick,.tog,.mute,.icon-btn,.card{font-family:var(--mono);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:var(--btn-t);}
.btn:focus-visible,.pick:focus-visible,.tog:focus-visible,.icon-btn:focus-visible,.card:focus-visible{outline:2px solid var(--neon2);outline-offset:2px;}
.btn:active,.pick:active,.tog:active,.icon-btn:active,.card:active{transform:translateY(1px);filter:brightness(.88);}
.btn:disabled,.pick:disabled,.tog:disabled{cursor:not-allowed;transform:none;filter:none;box-shadow:none;}
.btn{min-height:var(--btnh);padding:10px 20px;font-size:14px;font-weight:500;text-transform:lowercase;letter-spacing:.06em;background:#0d1418;border-color:var(--neon);color:var(--neon);}
.btn:hover{background:rgba(139,233,253,.1);box-shadow:0 0 18px rgba(139,233,253,.22);}
.btn:disabled,.btn:disabled:hover{background:#0d1418;color:#3d4a4f;border-color:#243036;}
.btn.big{min-height:var(--btnh-l);font-size:15px;padding:13px 26px;background:rgba(139,233,253,.12);letter-spacing:.12em;
  box-shadow:0 0 22px rgba(139,233,253,.25),inset 0 0 18px rgba(139,233,253,.08);}
.btn.big:hover{background:var(--neon);color:#000;box-shadow:0 0 30px rgba(139,233,253,.5);}
.btn.big:disabled,.btn.big:disabled:hover{background:rgba(139,233,253,.04);color:#3d4a4f;box-shadow:none;}
.btn.small{min-height:var(--btnh-s);font-size:11px;padding:6px 12px;border-color:#333;color:#8a979c;background:transparent;}
.btn.small:hover{border-color:var(--neon);color:var(--neon);background:rgba(139,233,253,.1);}
.btn.small:disabled{opacity:.4;}
.btn.danger{border-color:rgba(255,85,85,.5);color:var(--red);}
.btn.danger:hover{background:rgba(255,85,85,.12);border-color:var(--red);color:var(--red);}
.pick,.tog{min-height:var(--btnh-s);padding:6px 12px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:lowercase;background:transparent;color:#8a979c;}
.tog{min-width:54px;}
.pick:hover,.tog:hover{border-color:var(--neon);color:var(--neon);}
.pick.on{background:rgba(139,233,253,.14);color:var(--neon);border-color:var(--neon);box-shadow:0 0 14px rgba(139,233,253,.25);}
.pick.alert::after{content:" •";color:var(--gold);}
.tog.on{background:rgba(80,250,123,.14);color:var(--acid);border-color:var(--acid);}
.mute,.icon-btn{border:1px solid #333;background:transparent;color:var(--txt);min-width:34px;height:32px;font-size:14px;}
.mute:hover,.icon-btn:hover{border-color:var(--neon);}
.seg{display:flex;gap:4px;} .seg.wrap{flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:rgba(139,233,253,.04);border:1px solid var(--line);border-radius:4px;padding:2px 8px;white-space:nowrap;}
.chip.bad{color:var(--red);border-color:rgba(255,85,85,.5);}
.coin{width:14px;height:14px;border-radius:50%;vertical-align:-2px;object-fit:cover;}
.name-in{font-family:var(--mono);border:1px solid var(--line);border-radius:4px;background:rgba(0,0,0,.5);color:var(--neon);padding:7px 10px;font-size:13px;}
.name-in:focus{outline:none;border-color:var(--neon);box-shadow:0 0 14px rgba(139,233,253,.2);}

/* ---------- title ---------- */
.title-wrap{text-align:center;padding-top:6vh;max-width:560px;margin:0 auto;}
.kicker{font-size:12px;margin-top:10px;}
h1.game-title{font-family:var(--mono);font-weight:800;text-transform:lowercase;letter-spacing:.02em;line-height:1.05;font-size:clamp(34px,9vw,58px);
  color:#fff;text-shadow:0 0 18px rgba(139,233,253,.75),0 0 46px rgba(139,233,253,.35);margin:10px 0;}
h1.game-title .is{color:var(--neon);text-shadow:0 0 18px rgba(139,233,253,.9);display:inline-block;animation:grow 3.2s ease-in-out infinite;}
@keyframes grow{50%{transform:scale(1.04);}}
.title-sub{color:var(--pink);margin:6px 0 18px;}
#title-you{width:min(240px,60vw);height:auto;background:var(--stage);border:1px solid var(--neon);border-radius:16px;display:block;margin:0 auto;}
#title-you.pop{animation:pop .3s cubic-bezier(.3,1.6,.5,1);}
@keyframes pop{from{transform:scale(.92) rotate(-2deg);}}
.cur{font-style:normal;animation:tirlblink 1s steps(2) infinite;}
.title-menu{display:flex;gap:6px;justify-content:center;margin-top:22px;flex-wrap:wrap;}
.foot{margin-top:26px;font-size:10px;line-height:1.8;}
.foot a{color:#5a8a96;}

/* ---------- main screen ---------- */
#topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.brand{font-size:1rem;text-transform:lowercase;letter-spacing:.1em;color:var(--neon);text-shadow:0 0 12px rgba(139,233,253,.4);}
.brand b{color:#fff;}
.top-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
#phase{display:flex;align-items:center;gap:8px;font-size:12px;margin-right:6px;}
.pbar{display:block;width:90px;height:6px;border-radius:3px;background:#0c1519;overflow:hidden;}
.pbar u{display:block;height:100%;transition:width .3s linear;}
#phase-left{color:var(--dim);font-size:11px;min-width:44px;}

.layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:10px;align-items:start;}
.side{display:flex;flex-direction:column;gap:10px;position:sticky;top:10px;}
.main{min-height:60vh;}
/* a screen and up: the two columns are one height, about two thirds of the window, and the page sits in the
   middle of it top to bottom, like cancel.tylerirl.com. The tabs and the feed scroll inside. */
@media (min-width:821px){
  #screen-main.active,#screen-title.active{display:flex;flex-direction:column;justify-content:safe center;min-height:100vh;min-height:100dvh;}
  #screen-main.active>*{flex:none;}
  /* in the game, use the window: as wide as it is (up to a very big monitor) and as tall, less the header and hint */
  /* the corner brackets keep a 60px gutter each side */
  #app:has(#screen-main.active){max-width:min(2200px * var(--ui), 100vw - 120px);}
  #screen-main.active>.layout{flex:1 1 0;min-height:620px;}
  /* a big window: the whole interface scales up with it (--ui is set from the window size in game.js), like the cancel's */
  #screen-main.active,#screen-title.active .title-wrap,#modal-panel{zoom:var(--ui);}
  #screen-main.active,#screen-title.active{min-height:calc(100vh / var(--ui));min-height:calc(100dvh / var(--ui));}
  #modal-panel{max-height:calc(86vh / var(--ui));}
  .title-wrap{padding-top:0;}
  .layout{grid-template-columns:clamp(300px,21vw,380px) minmax(0,1fr);grid-template-rows:minmax(0,1fr);align-items:stretch;}
  .side{position:static;min-height:0;overflow-y:auto;padding:14px;margin:-14px;} /* room for the key highlight, which a scroller would clip */
  .side>.box{flex:none;}
  #log-box{flex:1 1 0;min-height:90px;display:flex;flex-direction:column;}
  #log-box #log{max-height:none;flex:1;min-height:0;} /* beats the phone cap further down */
  .main{min-height:0;display:flex;flex-direction:column;}
  #tabs{flex:none;margin-bottom:0;}
  #tab-body{flex:1;min-height:0;overflow-y:auto;padding:14px;margin:-2px -14px -14px;} /* the same room for the highlight */
  /* her picture beside the post button, so the feed keeps its room */
  .side #you-box{display:grid;grid-template-columns:minmax(118px,40%) 1fr;gap:6px 12px;align-items:center;text-align:left;}
  .side #you-wrap{grid-row:1/4;width:100%;margin:0;}
  .side .post-val{margin:0;align-self:end;}
  .side .buffs{justify-content:flex-start;margin:0;}
  .side #btn-meme{align-self:start;padding:8px 4px;font-size:10.5px;letter-spacing:0;white-space:nowrap;}
}
#tab-body,#log,.side{scrollbar-width:thin;scrollbar-color:rgba(139,233,253,.3) transparent;}

/* you: the thing you click */
#you-box{text-align:center;}
#you-wrap{all:unset;display:block;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;margin:0 auto;width:min(190px,48vw);border-radius:16px;position:relative;}
#you-wrap:focus-visible{outline:2px solid var(--neon2);outline-offset:2px;}
#you{width:100%;height:auto;display:block;background:var(--stage);border:1px solid var(--neon);border-radius:16px;
  box-shadow:0 0 22px rgba(139,233,253,.18);transition:box-shadow .2s;}
#you-wrap:hover #you{box-shadow:0 0 32px rgba(139,233,253,.4);}
#you-wrap.boop #you{animation:boop .16s ease-out;}
@keyframes boop{40%{transform:scale(.95) rotate(-1.5deg);}}
.post-val{font-size:11px;color:var(--pink);margin:8px 0 4px;}
.buffs{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;min-height:0;margin-bottom:6px;}
#btn-meme{width:100%;font-size:12px;}
.float{position:fixed;z-index:120;pointer-events:none;color:var(--pink);font-weight:bold;font-size:15px;text-shadow:0 0 8px rgba(255,121,198,.6),1px 1px 0 #000;
  animation:floatup .9s ease-out forwards;}
@keyframes floatup{to{transform:translateY(-60px);opacity:0;}}

/* resources */
.res-row{display:grid;grid-template-columns:20px 1fr auto auto;grid-template-rows:auto auto;column-gap:6px;align-items:baseline;padding:3px 0;font-size:13px;}
.res-row .ri{grid-row:1/3;align-self:center;text-align:center;}
.res-row .rn{font-weight:bold;}
.res-row .rv{text-align:right;color:#fff;font-variant-numeric:tabular-nums;}
.res-row .rc{color:var(--dim);font-size:11px;font-variant-numeric:tabular-nums;}
.res-row .rr{grid-column:2/5;grid-row:2;text-align:right;font-size:10px;color:var(--acid);margin-top:-2px;}
.res-row .rr.neg{color:var(--red);}
.res-row .rbar{grid-column:2/5;grid-row:2;align-self:end;height:2px;background:#0c1519;border-radius:1px;overflow:hidden;margin-right:80px;}
.res-row .rbar u{display:block;height:100%;opacity:.75;}
.res-row.full .rv{color:var(--gold);}
.pop{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line);}
.pop b{color:#fff;} .pop .pos{color:var(--acid);} .pop .neg{color:var(--red);}
.pop .idle{color:var(--gold);}

/* the feed */
#log{max-height:280px;overflow-y:auto;font-size:12px;line-height:1.45;}
#log .ln{padding:3px 0;border-bottom:1px dashed rgba(139,233,253,.08);}
#log .ln:first-child{animation:fadein .3s;}
#log .ln.bad{color:#ff9a9a;} #log .ln.dim{color:var(--dim);}
#log b{color:#fff;}

/* tabs */
#tabs{margin-bottom:12px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;}
.card{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--glass);border-top-color:rgba(255,255,255,.12);border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);color:var(--txt);padding:10px 12px;min-height:96px;}
.card:hover{border-color:var(--neon);box-shadow:0 0 20px rgba(139,233,253,.18);}
.card .ct{display:flex;justify-content:space-between;gap:8px;align-items:baseline;}
.card .ct b{color:var(--neon);font-size:14px;text-transform:lowercase;}
.card .ct em{font-style:normal;color:#fff;font-weight:bold;font-size:13px;}
.card .cd{font-size:11px;color:#9aa6ab;line-height:1.45;flex:1;}
.card .fx{color:var(--dim);}
.card .cc{font-size:12px;}
.cost{display:flex;flex-wrap:wrap;gap:4px 10px;}
.cost i{font-style:normal;color:#55656b;}
.cost i.ok{color:var(--gold);}
.cost i.over{color:var(--red);}
.card.cant{border-color:rgba(139,233,253,.08);}
.card.cant .ct b{color:#5d8a95;}
.card.blocked::after{content:"needs more storage";font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);}
.card.owned{opacity:.5;cursor:default;border-style:dashed;}
.card.owned:hover{box-shadow:none;border-color:var(--line);}
.done{color:var(--acid);font-size:11px;}

/* jobs */
.pop-head{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;margin-bottom:10px;}
.pop-head #pop-idle{color:var(--gold);}
.jobs{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.job{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--glass);border-top-color:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.job .jn{display:flex;flex-direction:column;gap:2px;min-width:0;}
.job .jn b{color:var(--neon);text-transform:lowercase;}
.job .jn span{font-size:11px;color:#9aa6ab;}
.job .jn .jr{color:var(--dim);font-size:10px;}
.job .jc{display:flex;align-items:center;gap:8px;flex:none;}
.job .jc b{min-width:28px;text-align:center;font-size:16px;color:#fff;}
.job .jc .btn{min-width:36px;padding:4px 0;font-size:16px;}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;}
.mil{all:unset;cursor:pointer;position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--stage);}
.mil img{width:100%;height:100%;display:block;object-fit:cover;}
.mil i{position:absolute;right:2px;bottom:1px;font-style:normal;font-size:12px;text-shadow:0 0 3px #000;}
.mil:hover{border-color:var(--neon);box-shadow:0 0 14px rgba(139,233,253,.3);}
.mil.j-idle{border-color:rgba(241,250,140,.5);} .mil.j-idle img{filter:saturate(.6) brightness(.8);}
.mil.j-poster{border-color:rgba(255,121,198,.6);} .mil.j-memer{border-color:rgba(80,250,123,.6);}
.mil.j-keeper{border-color:rgba(189,147,249,.7);} .mil.j-trader{border-color:rgba(241,250,140,.7);}
.mil.j-artist{border-color:rgba(139,233,253,.8);} .mil.j-streamer{border-color:rgba(255,184,108,.7);}
.mil.j-mod{border-color:#fff;}
canvas.portrait{width:min(240px,60vw);height:auto;display:block;margin:0 auto 8px;border-radius:14px;border:1px solid var(--neon);}

/* grass, stats */
.grass-top{text-align:center;display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:16px;}
.big-num{font-size:24px;color:var(--acid);}
.big-num b{color:#fff;}
.stat-grid{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-size:13px;margin-bottom:16px;max-width:420px;}
.stat-grid span{font-size:.65rem;align-self:center;}
.stat-grid b{text-align:right;}
.achs{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;}
.ach{border:1px solid var(--line);border-top-color:rgba(255,255,255,.12);background:var(--glass);border-radius:10px;padding:8px 10px;opacity:.45;display:flex;flex-direction:column;gap:2px;}
.ach b{font-size:12px;} .ach span{font-size:11px;color:var(--dim);}
.ach.got{opacity:1;border-color:rgba(241,250,140,.5);} .ach.got b{color:var(--gold);}

/* sparkles */
.sparkle{all:unset;position:fixed;z-index:110;font-size:34px;cursor:pointer;filter:drop-shadow(0 0 12px rgba(139,233,253,.9));
  animation:sparkle 1.6s ease-in-out infinite,fadein .4s;}
@keyframes sparkle{50%{transform:translateY(-10px) rotate(12deg) scale(1.12);filter:drop-shadow(0 0 22px rgba(255,121,198,.9));}}

/* modal, toasts */
#modal{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:50;display:flex;align-items:center;justify-content:center;padding:16px;}
#modal-panel{background:rgba(0,0,0,.55);max-width:480px;width:100%;max-height:86vh;overflow-y:auto;animation:pop .22s cubic-bezier(.3,1.5,.5,1);line-height:1.5;}
#modal-panel p{font-size:13px;}
#modal-panel b{color:#fff;}
#modal .seg{justify-content:center;margin-top:10px;}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13px;}
.save-box{width:100%;height:90px;margin-top:8px;font-family:var(--mono);font-size:10px;background:#000;color:var(--neon);border:1px solid var(--line);border-radius:6px;padding:6px;}
#toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:130;display:flex;flex-direction:column;gap:8px;width:min(420px,92vw);pointer-events:none;}
.toast{padding:10px 14px;border-radius:10px;background:#06090b;border:1px solid var(--gold);font-size:13px;box-shadow:0 0 22px rgba(241,250,140,.2);animation:fadein .25s;transition:opacity .3s;}
.toast.out{opacity:0;}
.update-note{position:fixed;bottom:16px;right:16px;z-index:131;background:#06090b!important;}

/* phones: you, resources, the tabs, then the feed */
@media (max-width:820px){
  .screen{padding:10px;}
  .layout{display:flex;flex-direction:column;align-items:stretch;}
  .side{display:contents;}
  #you-box{order:1;} .side>.box:nth-child(2){order:2;} .main{order:3;min-height:0;} #log-box{order:4;}
  #you-box{display:grid;grid-template-columns:110px 1fr;gap:4px 12px;align-items:center;text-align:left;}
  #you-wrap{grid-row:1/5;width:110px;}
  .post-val{margin:0;} .buffs{justify-content:flex-start;margin:0;}
  .grid{grid-template-columns:1fr 1fr;}
  .card{min-height:0;padding:8px 10px;}
  #phase{width:100%;order:3;margin:0;}
  .pbar{flex:1;}
}
@media (max-width:420px){ .grid{grid-template-columns:1fr;} }

/* ---------- motion: the backdrop, the market's weather, things thrown ---------- */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}
body.nobg #bg-canvas{display:none;}
#fx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:125;pointer-events:none;display:block;}
body{--ph:139,233,253;}
body[data-phase="accum"]{--ph:80,250,123;} body[data-phase="mania"]{--ph:241,250,140;}
body[data-phase="dist"]{--ph:255,184,108;}  body[data-phase="bear"]{--ph:160,130,255;}

/* each phase has its own weather. Tiles divide 600px and every layer moves exactly 600px, so the loop never jumps. */
#weather{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.5;transition:opacity 1.5s;}
#weather::before,#weather::after{content:"";position:absolute;inset:-600px;opacity:0;transition:opacity 2s;}
body.nobg #weather{display:none;}
@keyframes w-up{from{transform:translateY(600px);}to{transform:none;}}
@keyframes w-down{from{transform:none;}to{transform:translateY(600px);}}
@keyframes w-left{from{transform:none;}to{transform:translate(-600px,120px);}}
/* accumulation: green motes, rising slowly, things growing */
body[data-phase="accum"] #weather::before{opacity:1;background-image:radial-gradient(circle,rgba(80,250,123,.85) 0 1.5px,rgba(80,250,123,.2) 3px,transparent 6px);
  background-size:200px 150px;animation:w-up 40s linear infinite;}
body[data-phase="accum"] #weather::after{opacity:.8;background-image:radial-gradient(circle,rgba(200,255,170,.7) 0 1px,transparent 3px);
  background-size:120px 200px;background-position:50px 20px;animation:w-up 26s linear infinite;}
/* mania: gold glitter and streaks, going up fast */
body[data-phase="mania"] #weather::before{opacity:1;background-image:linear-gradient(0deg,transparent 0 40%,rgba(241,250,140,.55) 49%,rgba(255,255,255,.8) 50%,transparent 51%);
  background-size:150px 200px;-webkit-mask-image:linear-gradient(90deg,transparent 0 49%,#000 49% 51%,transparent 51%);mask-image:linear-gradient(90deg,transparent 0 49%,#000 49% 51%,transparent 51%);
  -webkit-mask-size:150px 200px;mask-size:150px 200px;animation:w-up 2.4s linear infinite;}
body[data-phase="mania"] #weather::after{opacity:1;background-image:radial-gradient(circle,rgba(255,255,220,.95) 0 1.2px,rgba(241,250,140,.3) 2.5px,transparent 5px);
  background-size:120px 100px;animation:w-up 7s linear infinite;}
/* distribution: confetti changing hands, sliding sideways */
body[data-phase="dist"] #weather::before{opacity:1;background-image:radial-gradient(circle,rgba(255,184,108,.9) 0 2px,transparent 2.5px),radial-gradient(circle,rgba(255,121,198,.85) 0 1.6px,transparent 2.2px),radial-gradient(circle,rgba(139,233,253,.8) 0 1.4px,transparent 2px);
  background-size:200px 150px,150px 200px,120px 120px;background-position:0 0,70px 40px,30px 90px;animation:w-left 18s linear infinite;}
/* bear market: snow, falling, and the edges close in */
body[data-phase="bear"] #weather::before{opacity:1;background-image:radial-gradient(circle,rgba(230,235,255,.85) 0 1.8px,transparent 2.6px);
  background-size:150px 120px;animation:w-down 22s linear infinite;}
body[data-phase="bear"] #weather::after{opacity:.7;background-image:radial-gradient(circle,rgba(200,210,255,.6) 0 1px,transparent 2px);
  background-size:100px 75px;background-position:40px 30px;animation:w-down 36s linear infinite;}

/* a faint grade over everything, in the phase's color */
#grade{position:fixed;inset:0;z-index:120;pointer-events:none;transition:background 2s,box-shadow 2s;}
body[data-phase="accum"] #grade{background:linear-gradient(180deg,rgba(80,250,123,.03),transparent 40%);}
body[data-phase="mania"] #grade{background:linear-gradient(180deg,rgba(255,220,120,.06),rgba(255,160,60,.02) 50%,transparent);}
body[data-phase="dist"]  #grade{background:linear-gradient(180deg,rgba(255,150,120,.04),rgba(255,121,198,.03));}
body[data-phase="bear"]  #grade{background:linear-gradient(180deg,rgba(60,50,170,.10),rgba(20,10,70,.14));box-shadow:inset 0 0 160px 30px rgba(4,2,20,.85);}
/* research: a scan passes down the screen */
#grade::after{content:"";position:absolute;left:0;right:0;top:-12%;height:12%;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(189,147,249,.16) 70%,rgba(220,200,255,.55) 98%,transparent);}
body.scan #grade::after{animation:scan 1.1s cubic-bezier(.4,0,.6,1);}
@keyframes scan{0%{top:-12%;opacity:1;}100%{top:100%;opacity:1;}}
/* touching grass: the screen goes green and white, then comes back */
body.grassing #grade{animation:grassing 2.6s ease-out;}
@keyframes grassing{0%{background:rgba(80,250,123,0);}15%{background:rgba(220,255,225,.9);}45%{background:rgba(80,250,123,.35);}100%{background:rgba(80,250,123,0);}}

/* the market turns: its name comes across the screen */
#phase-banner{position:fixed;left:0;right:0;top:38%;z-index:126;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;
  --pc:#8be9fd;padding:18px 0;}
#phase-banner::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.75) 20%,rgba(0,0,0,.75) 80%,transparent);
  border-top:1px solid var(--pc);border-bottom:1px solid var(--pc);box-shadow:0 0 40px -10px var(--pc);z-index:-1;}
#phase-banner span{font-size:34px;}
#phase-banner b{font-size:clamp(28px,6vw,54px);letter-spacing:.25em;text-transform:uppercase;color:var(--pc);text-shadow:0 0 24px var(--pc),2px 0 0 rgba(255,85,85,.6),-2px 0 0 rgba(139,233,253,.6);}
#phase-banner i{font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#ccc;}
#phase-banner.show{animation:banner 2.8s cubic-bezier(.2,.8,.3,1) forwards;}
#phase-banner.show b{animation:glitch 2.8s steps(1) forwards;}
@keyframes banner{0%{opacity:0;transform:scaleY(.1);}8%{opacity:1;transform:scaleY(1.1);}12%{transform:none;}80%{opacity:1;}100%{opacity:0;transform:translateY(-14px);}}
@keyframes glitch{0%{transform:translateX(-30px) skewX(20deg);}6%{transform:translateX(8px) skewX(-8deg);}10%,60%{transform:none;}
  62%{transform:translate(-4px,1px) skewX(6deg);clip-path:inset(20% 0 40% 0);}64%{transform:none;clip-path:none;}}

/* you: she breathes, glows in the phase's color, and in a frenzy goes all colors */
#you-wrap{animation:breathe 4.2s ease-in-out infinite;}
@keyframes breathe{50%{transform:translateY(-3px);}}
#you{box-shadow:0 0 22px rgba(var(--ph),.25),0 0 0 1px rgba(var(--ph),.15);transition:box-shadow 2s;}
#you-wrap:hover #you{box-shadow:0 0 34px rgba(var(--ph),.5);}
body.frenzy #you{animation:frenzy 1.2s linear infinite;border-color:#fff;}
body.frenzy #you-wrap::after{content:"";position:absolute;inset:-9px;border-radius:22px;pointer-events:none;
  background:conic-gradient(from var(--a,0deg),#ff79c6,#f1fa8c,#50fa7b,#8be9fd,#bd93f9,#ff79c6);filter:blur(9px);opacity:.95;z-index:-1;animation:spin 1.6s linear infinite;}
@keyframes frenzy{0%{filter:hue-rotate(0) saturate(1.3);}100%{filter:hue-rotate(360deg) saturate(1.3);}}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false;}
@keyframes spin{to{--a:360deg;}}
.pbar u{box-shadow:0 0 10px rgba(var(--ph),.8);}

/* buying: the card flashes and a light passes over it */
.card{position:relative;overflow:hidden;}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(139,233,253,.35) 48%,rgba(255,255,255,.55) 50%,rgba(139,233,253,.35) 52%,transparent 70%);transform:translateX(-100%);}
.card.bought{animation:bought .5s ease-out;}
.card.bought::before{animation:sheen .6s ease-out;}
.card.bought .ct em{animation:bump .4s cubic-bezier(.3,1.8,.5,1);display:inline-block;}
@keyframes bought{0%{border-color:#fff;box-shadow:0 0 30px rgba(139,233,253,.6),inset 0 0 30px rgba(139,233,253,.25);}100%{}}
@keyframes sheen{0%{opacity:1;transform:translateX(-100%);}100%{opacity:1;transform:translateX(100%);}}
@keyframes bump{40%{transform:scale(1.6);color:var(--gold);}}
/* a card you can afford breathes a little */
.card:not(.cant):not(.owned){border-color:rgba(139,233,253,.38);}
.card:not(.cant):not(.owned) .ct b{text-shadow:0 0 10px rgba(139,233,253,.45);}

/* tabs: the cards come in one after another */
#tab-body.enter .card,#tab-body.enter .job,#tab-body.enter .ach{animation:cardin .35s cubic-bezier(.2,.8,.3,1) both;}
#tab-body.enter .card:nth-child(2),#tab-body.enter .job:nth-child(2){animation-delay:.03s;}
#tab-body.enter .card:nth-child(3),#tab-body.enter .job:nth-child(3){animation-delay:.06s;}
#tab-body.enter .card:nth-child(4),#tab-body.enter .job:nth-child(4){animation-delay:.09s;}
#tab-body.enter .card:nth-child(5),#tab-body.enter .job:nth-child(5){animation-delay:.12s;}
#tab-body.enter .card:nth-child(6),#tab-body.enter .job:nth-child(6){animation-delay:.15s;}
#tab-body.enter .card:nth-child(n+7),#tab-body.enter .job:nth-child(n+7){animation-delay:.18s;}
@keyframes cardin{from{opacity:0;transform:translateY(10px) scale(.98);}}

/* someone new in the gallery */
.mil.new{animation:newface .8s cubic-bezier(.3,1.6,.5,1);}
.mil.new::after{content:"";position:absolute;inset:0;border-radius:8px;box-shadow:inset 0 0 0 2px #fff;animation:fadeout 1.4s forwards;}
@keyframes newface{0%{transform:scale(.2) rotate(-12deg);filter:brightness(3);}60%{filter:brightness(1.4);}100%{transform:none;filter:none;}}
@keyframes fadeout{to{opacity:0;}}
.mil:hover img{transform:scale(1.08);} .mil img{transition:transform .2s;}

/* a full resource shimmers */
.res-row.full .rbar u{background-image:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)!important;background-size:50% 100%;background-repeat:no-repeat;
  background-color:currentColor;animation:full 1.6s linear infinite;}
@keyframes full{from{background-position:-100% 0;}to{background-position:200% 0;}}

/* the feed: new lines slide in */
#log .ln:first-child{animation:logline .4s cubic-bezier(.2,.8,.3,1);}
@keyframes logline{from{opacity:0;transform:translateX(-12px);background:rgba(139,233,253,.12);}}

/* calm: the same game, with the motion turned down */
body.calm #weather,body.calm #phase-banner{display:none;}
body.calm #you-wrap,body.calm #you,body.calm .card,body.calm .card::before,body.calm .mil,body.calm #tab-body .card,body.calm #tab-body .job,
body.calm .res-row .rbar u,body.calm #log .ln,body.calm h1.game-title .is,body.calm::before,body.calm #grade{animation:none!important;}

/* text over thin glass: a soft dark halo keeps it legible whatever is drifting past behind it */
.box,.panel,#topbar,.hint{text-shadow:0 0 6px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.8);}
.btn.big:hover,.pick.on{text-shadow:none;}

/* the way over to the companion game, cancel.tylerirl.com: its red, so it reads as the other place */
.sister{display:flex;align-items:center;gap:12px;max-width:420px;margin:22px auto 0;padding:10px 14px;text-align:left;text-decoration:none;color:var(--txt);
  border:1px solid rgba(255,85,85,.4);border-top-color:rgba(255,255,255,.15);border-radius:12px;background:rgba(40,0,6,.25);
  backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);transition:var(--btn-t);}
.sister:hover{border-color:var(--red);background:rgba(255,85,85,.1);box-shadow:0 0 24px rgba(255,85,85,.25);}
.sister img{width:46px;height:46px;border-radius:50%;flex:none;box-shadow:0 0 0 2px rgba(255,85,85,.5);}
.sister:hover img{animation:wobble .5s ease-in-out;}
.sister span{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sister b{color:#ff8b8b;text-transform:lowercase;letter-spacing:.06em;}
.sister i{font-style:normal;font-size:11px;color:#9aa6ab;line-height:1.45;}
.sister em{font-style:normal;color:#ff8b8b;margin-left:auto;font-size:16px;}
@keyframes wobble{30%{transform:rotate(-12deg) scale(1.08);}65%{transform:rotate(8deg);}}
.sister-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 4px;margin-right:4px;border:1px solid rgba(255,85,85,.4);border-radius:var(--r);
  color:#ff8b8b;text-decoration:none;font-size:12px;letter-spacing:.04em;text-transform:lowercase;transition:var(--btn-t);}
.sister-pill:hover{border-color:var(--red);background:rgba(255,85,85,.1);box-shadow:0 0 16px rgba(255,85,85,.25);}
.sister-pill img{width:24px;height:24px;border-radius:50%;}
@media (max-width:820px){ .sister-pill span{display:none;} .sister-pill{padding:0 8px 0 4px;} }

/* ---------- the layers that open as you touch grass ---------- */
.ng{font-size:10px;font-weight:normal;color:var(--acid);border:1px solid rgba(80,250,123,.35);border-radius:4px;padding:0 4px;margin-left:4px;vertical-align:1px;}
.challenge-bar{margin:0 0 10px;padding:8px 12px;border:1px solid rgba(241,250,140,.4);border-radius:10px;background:rgba(241,250,140,.06);font-size:12px;color:#ddd;}
.challenge-bar b{color:var(--gold);}
.unlock-note{border-left:2px solid var(--acid);padding-left:10px;}
.big-note{text-align:center;font-size:18px;color:var(--gold);margin:18px 0;}
.auto-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;margin:0 0 10px;color:#ccc;}
.auto-row select{padding:5px 8px;}
.card.active{border-color:var(--gold);box-shadow:0 0 18px rgba(241,250,140,.2);}
/* a ritual's cooldown, a raid on its way home */
.cdbar{display:block;height:3px;border-radius:2px;background:rgba(139,233,253,.1);overflow:hidden;margin-top:2px;}
.cdbar u{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--lilac),var(--neon));transition:width .3s linear;}
[data-raid] .cdbar u{background:linear-gradient(90deg,var(--red),var(--orange));}
/* remilios: red-edged, so they're easy to pick out in the crowd */
.mil.remilio{border-radius:50% 50% 8px 8px;}
.mil.remilio::before{content:"R";position:absolute;left:3px;top:1px;font-size:9px;font-weight:bold;color:#ff8b8b;text-shadow:0 0 3px #000;z-index:1;}
.mil.j-away{opacity:.45;border-style:dashed;}
.mil.j-dev{border-color:rgba(166,227,255,.8);} .mil.j-acolyte{border-color:rgba(255,210,127,.8);} .mil.j-seer{border-color:rgba(195,166,255,.9);}
canvas.portrait[height="600"]{aspect-ratio:1;}
/* relics */
.relic-shelf{margin-top:16px;}
.relics{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;}
.relic{display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:6px 8px;border:1px solid rgba(241,250,140,.35);
  border-radius:10px;background:var(--glass);}
.relic span{grid-row:1/3;font-size:22px;text-align:center;}
.relic b{font-size:12px;color:var(--gold);text-transform:lowercase;}
.relic i{font-style:normal;font-size:10px;color:#9aa6ab;}
.relic.unknown{border-color:var(--line);opacity:.4;} .relic.unknown b{color:#666;}
/* the milestones: what each reset opens */
.milestones{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.ms{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--glass);opacity:.45;}
.ms em{grid-row:1/3;align-self:center;font-style:normal;font-size:18px;font-weight:bold;text-align:center;color:#666;}
.ms b{font-size:13px;text-transform:lowercase;} .ms span{font-size:11px;color:#9aa6ab;}
.ms.got{opacity:1;border-color:rgba(80,250,123,.45);} .ms.got em,.ms.got b{color:var(--acid);}
.ms.next{opacity:1;border-color:rgba(241,250,140,.5);box-shadow:0 0 18px rgba(241,250,140,.12);} .ms.next em,.ms.next b{color:var(--gold);}
/* the cathedral: ten blocks narrowing to a spire, lit as they're built */
.cathedral{display:grid;grid-template-columns:minmax(120px,200px) 1fr;gap:18px;align-items:end;margin-bottom:14px;}
.spire{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0;}
.spire i{display:block;height:18px;width:calc(100% - var(--k)*9%);border:1px solid rgba(195,166,255,.25);border-radius:3px;background:rgba(195,166,255,.04);}
.spire i:first-child{height:34px;clip-path:polygon(50% 0,100% 100%,0 100%);border:0;background:rgba(195,166,255,.12);}
.spire i.on{background:linear-gradient(180deg,rgba(220,200,255,.9),rgba(160,120,255,.6));border-color:#fff;box-shadow:0 0 14px rgba(195,166,255,.6);}
.spire i.next{border-color:var(--gold);animation:blink 1.4s steps(2) infinite;}
.spire i.on:first-child{background:linear-gradient(180deg,#fff,#c3a6ff);}
@keyframes blink{50%{border-color:transparent;}}
.stages{display:flex;flex-direction:column;gap:3px;font-size:11px;}
.stage{display:flex;justify-content:space-between;gap:10px;padding:3px 8px;border-radius:6px;color:#666;}
.stage b{font-weight:normal;text-transform:lowercase;} .stage span{color:#555;text-align:right;}
.stage.done{color:#c3a6ff;} .stage.done span{color:#9aa6ab;}
.stage.next{color:var(--gold);background:rgba(241,250,140,.06);} .stage.next span{color:#bbb;}
@media (max-width:600px){ .cathedral{grid-template-columns:1fr;} .spire{width:100%;max-width:220px;margin:0 auto;} }
[data-ws]{width:100%;max-width:440px;}
body.calm .spire i.next{animation:none;}

/* a tab with something you can afford right now: gold, breathing, and how many */
.pick.ready{position:relative;color:var(--gold);border-color:rgba(241,250,140,.6);background:rgba(241,250,140,.06);animation:tabready 2.2s ease-in-out infinite;}
.pick.ready::after{content:attr(data-n);position:absolute;top:-7px;right:-7px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--gold);color:#000;font-size:10px;font-weight:bold;line-height:16px;text-align:center;box-shadow:0 0 10px rgba(241,250,140,.6);}
.pick.ready.alert::after{content:attr(data-n);} /* the count wins over the idle dot */
.pick.ready:hover{background:rgba(241,250,140,.14);color:var(--gold);border-color:var(--gold);}
@keyframes tabready{50%{box-shadow:0 0 14px rgba(241,250,140,.35);}}
body.calm .pick.ready{animation:none;}

/* ---------- keys and pads: the highlight says what Enter (or Ⓐ) will press ---------- */
button,select,input,a{outline:none;}
body.kb .ksel{outline:3px solid var(--acid)!important;outline-offset:3px;box-shadow:0 0 0 6px rgba(80,250,123,.2),0 0 22px rgba(80,250,123,.5)!important;
  position:relative;z-index:5;animation:kpulse 1.1s ease-in-out infinite;}
body.kb .card.ksel{transform:translateY(-3px);border-color:var(--acid);}
body.kb #you-wrap.ksel{border-radius:16px;}
@keyframes kpulse{50%{outline-color:#e9ffd0;}}
body.calm.kb .ksel{animation:none;}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:12px;margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:10px;}
.keys b{color:var(--neon);} .keys span{color:#bbb;}

/* ---------- phones ---------- */
button,a,select{touch-action:manipulation;} /* no double-tap zoom on anything you can press */
#post-fab{display:none;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;width:72px;height:72px;padding:0;border-radius:50%;
  overflow:hidden;border:2px solid var(--neon);background:var(--stage);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  box-shadow:0 0 0 4px rgba(0,0,0,.6),0 0 24px rgba(var(--ph),.5);animation:fabin .25s cubic-bezier(.3,1.6,.5,1);}
#post-fab canvas{width:118%;height:auto;margin:-2% 0 0 -9%;display:block;pointer-events:none;}
#post-fab:active{transform:scale(.92);}
@keyframes fabin{from{transform:scale(0);}}
@media (max-width:820px){
  body.you-off #post-fab{display:block;}
  #screen-main{padding-bottom:100px;} /* room to scroll the last card clear of the post button */
  /* nine tabs in one row you can swipe along, not three rows */
  #tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding:14px 14px 12px;margin:-14px -14px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  #tabs::-webkit-scrollbar{display:none;}
  #tabs .pick{flex:none;}
  .box-h{flex-wrap:wrap;gap:4px;}
  .job{flex-wrap:wrap;} .job .jn{flex:1 1 180px;}
  .job .jc .btn{min-width:44px;min-height:40px;}
  .relics{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
  .stage{flex-direction:column;gap:0;} .stage span{text-align:left;}
  #modal{align-items:flex-end;padding:8px;} #modal-panel{max-height:88vh;border-radius:18px 18px 10px 10px;}
  .set-row{flex-wrap:wrap;}
  .seg.wrap .pick{flex:1 1 auto;}
  .toast{font-size:12px;}
}

/* ---------- polish ---------- */
/* buying several */
.buy-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font-size:12px;color:#aaa;}
.buy-bar .note{font-size:10px;}
.buy-n{display:inline-block;font-size:10px;font-weight:bold;color:#000;background:var(--neon);border-radius:4px;padding:0 5px;margin-right:6px;vertical-align:1px;}
/* how long until you can afford it */
.cost .eta{font-size:10px;color:#7c8a90;letter-spacing:.02em;flex-basis:100%;}
/* where a number comes from */
.res-row{cursor:help;border-radius:6px;}
.res-row:hover{background:rgba(139,233,253,.05);}
#tip{position:fixed;z-index:115;width:min(300px,calc(100vw - 16px));padding:10px 12px;font-size:12px;border-radius:12px;pointer-events:auto;
  background:rgba(2,6,8,.92);border:1px solid rgba(139,233,253,.35);border-top-color:rgba(255,255,255,.2);box-shadow:0 8px 30px rgba(0,0,0,.6);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadein .15s;}
#tip>b{font-size:13px;}
#tip .tip-d{color:#8a979c;font-size:11px;margin:3px 0 6px;}
#tip table{width:100%;border-collapse:collapse;}
#tip td{padding:2px 0;color:#ccc;} #tip td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--acid);white-space:nowrap;padding-left:10px;}
#tip tr.m td{color:#9aa6ab;} #tip tr.m td:last-child{color:var(--gold);}
#tip tr.neg td:last-child{color:var(--red);}
#tip tr.sum td{border-top:1px solid var(--line);font-weight:bold;color:#fff;padding-top:4px;}
/* the next market phase */
#phase-next{color:#666;font-size:11px;cursor:help;}
/* new things */
.new-tag{display:inline-block;font-size:9px;font-weight:bold;letter-spacing:.08em;text-transform:uppercase;color:#000;background:var(--pink);
  border-radius:4px;padding:1px 5px;margin-left:4px;vertical-align:2px;animation:newtag 1.6s ease-in-out infinite;}
@keyframes newtag{50%{box-shadow:0 0 10px rgba(255,121,198,.8);}}
.card.fresh{border-color:rgba(255,121,198,.55);}
.pick.fresh:not(.on){border-color:rgba(255,121,198,.6);color:var(--pink);}
.pick.fresh:not(.on)::before{content:"new ";font-size:9px;font-weight:bold;color:var(--pink);}
body.calm .new-tag{animation:none;}
/* the miladys tab */
.job .jc .all{min-width:40px;font-size:10px;}
.gal-ctl{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 8px;}
.gal-ctl select{padding:5px 8px;font-size:12px;}
/* welcome back */
.away{margin:6px 0 10px;padding-left:18px;font-size:13px;line-height:1.7;}
/* a posting milestone: she glows */
#you-wrap.beam #you{animation:beam 2.2s ease-out;}
@keyframes beam{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9),0 0 60px rgba(255,121,198,.9);filter:brightness(1.6);}100%{box-shadow:0 0 22px rgba(var(--ph),.25);filter:none;}}
/* a sparkle about to go: it rings and fades */
.sparkle.fading{animation:sparkle 1.6s ease-in-out infinite,sparkfade 3s linear forwards;}
.sparkle.fading::after{content:"";position:absolute;inset:-14px;border:2px solid rgba(139,233,253,.8);border-radius:50%;animation:sparkring 1s ease-out infinite;}
@keyframes sparkfade{to{opacity:.15;}}
@keyframes sparkring{from{transform:scale(.6);opacity:1;}to{transform:scale(1.4);opacity:0;}}
/* sliders */
input[type=range]{accent-color:var(--neon);width:150px;}

/* the clock: which cycle of the market this run is on, and how long the run has gone */
.clock{display:flex;align-items:center;gap:7px;background:none;border:1px solid rgba(139,233,253,.18);border-radius:4px;padding:3px 8px;
  font:inherit;font-size:11px;color:var(--dim);cursor:pointer;margin-right:4px;white-space:nowrap;}
.clock b{color:var(--neon);font-weight:bold;}
.clock:hover,.clock.ksel{border-color:var(--neon);color:#fff;}
#clock-run{font-variant-numeric:tabular-nums;min-width:44px;text-align:right;}
.runs-wrap{overflow-x:auto;margin-bottom:16px;}
.runs{border-collapse:collapse;font-size:12px;width:100%;max-width:640px;white-space:nowrap;}
.runs th{font-family:var(--label);text-transform:uppercase;letter-spacing:.15em;font-size:.6rem;color:#666;text-align:left;padding:4px 10px 4px 0;font-weight:normal;}
.runs td{padding:4px 10px 4px 0;border-top:1px solid rgba(255,255,255,.06);font-variant-numeric:tabular-nums;}
.runs tr.now td{color:var(--neon);}
.runs i{font-style:normal;}
@media (max-width:820px){ .clock{order:2;} }

/* automation: the robots' switches, above the buildings */
.auto-box{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px;padding:8px 10px;border:1px dashed rgba(139,233,253,.25);border-radius:8px;font-size:12px;}
.auto-h{font-family:var(--label);text-transform:uppercase;letter-spacing:.15em;font-size:.6rem;color:var(--neon);margin-right:4px;}
.auto-box .seg{align-items:center;gap:4px;color:#888;font-size:11px;margin-left:6px;}
.auto-ct{flex-basis:100%;color:var(--dim);font-size:11px;}
.skip-list{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0;}

/* the new internet: a ring of seven that becomes a mesh */
.cathedral.nn{align-items:center;}
.nn-ring{width:100%;max-width:200px;margin:0 auto;display:block;overflow:visible;}
.nn-ring line{stroke:rgba(139,233,253,.12);stroke-width:1.2;}
.nn-ring line.on{stroke:rgba(139,233,253,.6);filter:drop-shadow(0 0 3px rgba(139,233,253,.8));}
.nn-ring circle{fill:rgba(0,0,0,.5);stroke:#333;stroke-width:1.5;}
.nn-ring g.on circle{stroke:var(--neon);fill:rgba(139,233,253,.15);}
.nn-ring g.next circle{stroke:var(--gold);stroke-dasharray:3 3;animation:nnspin 6s linear infinite;transform-box:fill-box;transform-origin:center;}
.nn-ring text{font-size:12px;text-anchor:middle;}
.nn-ring g:not(.on):not(.next) text{opacity:.3;}
.nn-ring text.mid{font-family:var(--label);font-size:11px;fill:var(--neon);letter-spacing:.15em;text-transform:uppercase;}
@keyframes nnspin{to{transform:rotate(360deg);}}
.nn-box{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--panel);}
.nn-h{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;} .nn-h b{color:var(--gold);font-size:15px;} .nn-h span{color:var(--dim);font-size:11px;}
.nn-row{display:grid;grid-template-columns:110px 1fr auto;gap:4px 10px;align-items:center;font-size:12px;margin:6px 0;}
.nn-row .pbar{width:auto;height:8px;} .nn-row u{background:linear-gradient(90deg,var(--neon),var(--acid));}
.nn-row b{font-variant-numeric:tabular-nums;font-weight:normal;} .nn-row em{grid-column:2/4;font-style:normal;color:var(--dim);font-size:11px;}
.nn-req{font-size:12px;color:#ccc;margin:8px 0;}
.nn-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 4px;}
@media (max-width:600px){ .nn-row{grid-template-columns:1fr auto;} .nn-row .pbar{grid-column:1/3;grid-row:2;} .nn-row em{grid-column:1/3;} }

/* charts */
#chart-pick{display:flex;gap:3px;flex-wrap:wrap;justify-content:flex-end;}
#chart-pick .pick{min-height:0;padding:2px 7px;font-size:13px;letter-spacing:0;}
.chart{position:relative;margin:0 0 16px;max-width:760px;}
.chart svg{display:block;width:100%;height:auto;overflow:visible;}
.chart .grid{stroke:rgba(255,255,255,.07);stroke-width:1;}
.chart .ax{fill:#777;font-size:10px;font-family:var(--label);}
.chart .xh line{stroke:rgba(255,255,255,.35);stroke-width:1;}
.chart .xh circle{stroke:#000;stroke-width:2;}
.chart .xh.hidden,.chart-tip.hidden{display:none;}
.chart .bar{fill:var(--neon);opacity:.75;} .chart .bar.ch{fill:var(--gold);} .chart .bar:hover{opacity:1;}
.chart-tip{position:absolute;top:-6px;background:rgba(0,0,0,.88);border:1px solid var(--line);border-radius:6px;padding:4px 8px;font-size:11px;pointer-events:none;white-space:nowrap;color:var(--txt);}
.chart-tip span{color:var(--dim);}

/* settings: which notifications */
.notify-kinds{flex-wrap:wrap;gap:6px;justify-content:flex-start;}

/* the ending */
.ending{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-start;justify-content:center;padding:24px;overflow:auto;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.1),rgba(0,0,0,.65));animation:endin 2s ease both;}
.ending.out{animation:endout .9s ease forwards;}
body.the-end .screen,body.the-end #post-fab{opacity:0;transition:opacity 2s;pointer-events:none;}
.end-in{max-width:640px;width:100%;text-align:center;margin:auto;}
.end-in>*{opacity:0;animation:endline 1.6s ease forwards;animation-delay:var(--d);}
.ending.skip .end-in>*{animation-delay:0s!important;animation-duration:.4s;}
.end-in p{font-size:clamp(15px,2.2vw,20px);color:#ddd;margin:0 0 12px;text-shadow:0 0 12px #000;}
.end-in h1{font-size:clamp(26px,5vw,48px);color:var(--neon);text-transform:lowercase;letter-spacing:.06em;margin:26px 0;text-shadow:0 0 30px rgba(139,233,253,.7),0 0 4px #000;}
.end-in .cursor{animation:endblink 1s steps(1) infinite;}
.end-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px;margin:0 auto 22px;max-width:560px;}
.end-stats span{font-family:var(--label);text-transform:uppercase;letter-spacing:.15em;font-size:.6rem;color:#888;display:block;}
.end-stats b{display:block;font-size:18px;color:#fff;margin-top:2px;}
.end-credits p{font-size:12px!important;color:#999!important;} .end-credits a{color:var(--neon);}
.end-credits .row{justify-content:center;margin-top:16px;gap:10px;display:flex;flex-wrap:wrap;}
.end-skip{position:fixed;right:18px;bottom:18px;opacity:.6!important;animation:none!important;}
@keyframes endin{from{opacity:0;}to{opacity:1;}}
@keyframes endout{to{opacity:0;}}
@keyframes endline{from{opacity:0;transform:translateY(8px);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
@keyframes endblink{50%{opacity:0;}}