@font-face{font-family:"Rubik";src:url(fonts/rubik-heb.woff2) format("woff2");font-weight:300 900;unicode-range:U+0590-05FF,U+20AA,U+25CC,U+FB1D-FB4F;font-display:swap}
@font-face{font-family:"Rubik";src:url(fonts/rubik-lat.woff2) format("woff2");font-weight:300 900;unicode-range:U+0000-00FF,U+2000-206F,U+2212;font-display:swap}
:root{--glass:rgba(13,24,42,.82);--glass2:rgba(20,34,58,.92);--line:rgba(255,255,255,.12);--ink:#eef4ff;--mut:#9fb3cf;--acc:#3ddc97;--acc2:#4cc9f0;--warn:#ffb703;--bad:#ff5d6c;--gold:#ffd166;--r:14px;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#0f1b2d}
body{font-family:"Rubik",system-ui,"Segoe UI",Arial,sans-serif;color:var(--ink);font-size:15px;-webkit-text-size-adjust:100%;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
#app{position:fixed;inset:0;overflow:hidden}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
/* top */
#top{position:absolute;top:calc(8px + var(--st));left:calc(8px + var(--sl));right:calc(8px + var(--sr));display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:5}
#top>*{pointer-events:auto}
#stats{display:flex;gap:6px;align-items:stretch}
.st{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:6px 6px;height:42px;white-space:nowrap}
.st .ic{font-size:17px}.st b{font-size:16px;font-weight:700;letter-spacing:.2px}.st small{font-size:11px;color:var(--mut);font-weight:500}
.st.neg b{color:var(--bad)}.st.warn b{color:var(--warn)}
.trend{font-style:normal;font-size:10px}.trend.up{color:var(--acc)}.trend.down{color:var(--bad)}
.tools{display:flex;gap:6px}
.tb{width:42px;height:42px;border-radius:12px;background:var(--glass);border:1px solid var(--line);font-size:18px;backdrop-filter:blur(8px)}
#energy{display:flex;gap:8px;align-items:center;background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:12px;padding:6px 10px;text-align:right}
.eb{flex:1 1 0;min-width:0;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:6px;align-items:center;transition:opacity .4s}
.eb.dim{opacity:.55}
.eb .lb{font-size:12px;color:var(--mut);grid-row:1/3;white-space:nowrap}
.eb em{font-style:normal;font-size:11px;color:var(--mut);direction:ltr;text-align:right;white-space:nowrap}
.bar{height:9px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden;direction:rtl}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#2bd4a0,#3ddc97);border-radius:6px;transition:width .5s}
.bar.bad i{background:linear-gradient(90deg,#ff8a5b,#ff5d6c)}
.emeta{display:flex;flex-direction:column;align-items:flex-start;font-size:11.5px;color:var(--mut);gap:1px;white-space:nowrap}
.emeta #wx{position:absolute}
.emeta{position:relative;padding-inline-start:22px}
.emeta #wx{right:0;top:50%;transform:translateY(-50%);font-size:17px}
.emeta b{color:var(--acc);font-weight:600}
/* mission */
#mission{position:absolute;top:calc(112px + var(--st));right:calc(8px + var(--sr));width:min(300px,62vw);background:var(--glass);border:1px solid var(--line);border-radius:12px;z-index:4;backdrop-filter:blur(8px);overflow:hidden}
#mHead{display:flex;width:100%;justify-content:space-between;align-items:center;gap:8px;padding:8px 10px;font-size:12.5px;font-weight:600;text-align:right}
#mHead b{background:rgba(61,220,151,.18);color:var(--acc);border-radius:8px;padding:1px 7px;font-size:12px}
.mbody{display:none;padding:0 10px 10px;font-size:12.5px}
#mission.open .mbody{display:block}
#mGoal{margin:0 0 6px;color:var(--mut);line-height:1.4}
#mList{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
#mList li{display:flex;gap:6px;align-items:center}#mList li b{width:16px;color:var(--mut)}#mList li span{flex:1}#mList li em{font-style:normal;color:var(--mut);font-size:11.5px;direction:ltr}
#mList li.ok b,#mList li.ok em{color:var(--acc)}
/* badge, zoom */
#badge{position:absolute;top:calc(112px + var(--st));left:calc(8px + var(--sl));z-index:4;background:var(--gold);color:#1b2433;border-radius:20px;padding:7px 12px;font-weight:700;box-shadow:0 4px 14px rgba(0,0,0,.3);animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.08)}}
.zoom{position:absolute;left:calc(8px + var(--sl));bottom:calc(150px + var(--sb));display:flex;flex-direction:column;gap:6px;z-index:4}
.zoom button{width:40px;height:40px;border-radius:12px;background:var(--glass);border:1px solid var(--line);font-size:19px;font-weight:700;backdrop-filter:blur(8px)}
/* next */
#next{position:absolute;right:calc(10px + var(--sr));bottom:calc(150px + var(--sb));z-index:6;background:linear-gradient(135deg,#3ddc97,#20b2aa);color:#06231a;font-weight:800;font-size:16px;border-radius:26px;padding:12px 18px;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 -3px 0 rgba(0,0,0,.15)}
#next:active{transform:translateY(2px)}
/* dock */
#dock{position:absolute;left:0;right:0;bottom:0;z-index:5;background:var(--glass2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px calc(6px + var(--sr)) calc(6px + var(--sb)) calc(6px + var(--sl))}
#tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
#tabs::-webkit-scrollbar,#cards::-webkit-scrollbar{display:none}
#tabs button{flex:1 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;border-radius:10px;font-size:12.5px;color:var(--mut);white-space:nowrap}
#tabs button.on{background:rgba(76,201,240,.16);color:#fff;box-shadow:inset 0 -2px 0 var(--acc2)}
#tabs span{font-size:15px}
#cards{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 2px;scrollbar-width:none;scroll-snap-type:x proximity}
.card{position:relative;flex:0 0 96px;height:96px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:4px 4px 5px;scroll-snap-align:start;cursor:pointer;transition:transform .15s}
.card img{width:70px;height:auto;max-height:52px;object-fit:contain;margin-bottom:2px}
.card .tb{position:absolute;top:8px;font-size:22px;color:#fff;width:auto;height:auto;background:none;border:0}
.card b{font-size:11.5px;font-weight:600;line-height:1.15;text-align:center}
.card small{font-size:11px;color:var(--gold);font-weight:600}
.card.sel{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset;background:rgba(61,220,151,.12)}
.card.poor small{color:var(--bad)}
.card.lock{opacity:.45}.card.lock small{color:var(--mut)}
.card.own small{color:var(--acc)}
.card .ic{font-size:30px;margin-bottom:6px}
.card .i{position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.14);font-size:12px;font-weight:700;font-family:Georgia,serif;font-style:italic}
/* hint */
#hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(150px + var(--sb));z-index:6;background:var(--glass2);border:1px solid var(--acc);border-radius:12px;padding:8px 40px 8px 12px;font-size:12.5px;max-width:min(92vw,520px);text-align:center;line-height:1.4}
#hint span{color:var(--acc)}
#hintX{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.12)}
/* toast */
#toast{position:absolute;left:50%;top:calc(120px + var(--st));transform:translate(-50%,-20px);opacity:0;z-index:20;background:rgba(10,18,32,.94);border:1px solid var(--line);border-radius:12px;padding:9px 14px;font-size:13.5px;transition:.3s;pointer-events:none;max-width:92vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast .bad{color:var(--bad)}
.float{position:absolute;z-index:7;font-weight:800;font-size:15px;pointer-events:none;transform:translateX(-50%);animation:fl 1.4s ease-out forwards;text-shadow:0 2px 4px rgba(0,0,0,.6)}
@keyframes fl{to{transform:translate(-50%,-50px);opacity:0}}
/* modal */
#modal{position:absolute;inset:0;z-index:30;background:rgba(5,10,20,.55);display:flex;align-items:center;justify-content:center;padding:calc(10px + var(--st)) 10px calc(10px + var(--sb))}
#modal[hidden]{display:none}
.mcard{background:linear-gradient(180deg,#17263f,#101c30);border:1px solid var(--line);border-radius:18px;padding:16px 16px 14px;width:min(460px,100%);max-height:100%;overflow:auto;box-shadow:0 20px 50px rgba(0,0,0,.5);animation:pop .25s ease-out;user-select:text;-webkit-user-select:text}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.mcard h2{margin:2px 0 4px;font-size:20px}.mcard h3{margin:12px 0 6px;font-size:15px;color:var(--acc2)}
.mcard .sub{margin:0 0 10px;color:var(--mut);font-size:13px}
.mcard .info{font-size:14px;line-height:1.6;color:#d6e2f3;margin:8px 0}
.mcard .live{background:rgba(255,209,102,.12);border-radius:10px;padding:6px 10px;font-size:13.5px;margin:6px 0}
.bimg{display:block;width:150px;margin:0 auto 4px}
.bigic{font-size:52px;text-align:center}
.stats{list-style:none;padding:0;margin:8px 0;display:grid;gap:4px}
.stats li{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:5px 8px;background:rgba(255,255,255,.05);border-radius:8px}
.stats li span{color:var(--mut)}.pos{color:var(--acc)}.neg{color:var(--bad)}
.btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btns button,.sbtns button,.tbtns button{flex:1 1 auto;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.1);font-weight:600;font-size:15px;min-height:44px}
button.pri{background:linear-gradient(135deg,#3ddc97,#20b2aa);color:#06231a}
button.danger{background:rgba(255,93,108,.18);color:#ffb3ba}
.etab{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0}
.etab th,.etab td{padding:6px 6px;border-bottom:1px solid var(--line);text-align:center}
.etab td:first-child,.etab th:first-child{text-align:right}
.etab tr.tot td{font-weight:700;color:#fff}.etab tr.bad td{color:var(--bad);font-weight:700}
.etab.money td:last-child{text-align:left;direction:ltr;font-weight:600}
.mix{display:flex;gap:8px;margin:10px 0}.mix div{flex:1;background:rgba(255,255,255,.06);border-radius:10px;padding:8px 4px;text-align:center}
.mix b{display:block;font-size:20px;color:var(--acc)}.mix span{font-size:11.5px;color:var(--mut)}
.mixbar{display:flex;height:12px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.08)}
.mixleg{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:12px;color:var(--mut);margin-top:6px}.mixleg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:4px}
.tips{margin:10px 0 0;padding-inline-start:18px;font-size:13.5px;line-height:1.55;color:#ffe3a3}
.okmsg{color:var(--acc);font-size:14px}
.seg{display:flex;gap:6px}.seg button{flex:1;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.08);font-weight:600}.seg button small{display:block;font-size:11px;color:var(--mut);font-weight:400}
.seg button.on{background:rgba(76,201,240,.25);box-shadow:inset 0 0 0 1.5px var(--acc2)}
/* resident */
.mcard.resident{width:min(520px,100%)}
.res{display:flex;gap:12px;align-items:flex-end}
.por{width:110px;height:110px;flex:0 0 110px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#2a4468,#162740);object-fit:cover;object-position:top;border:3px solid var(--acc2)}
.res.complain .por{border-color:var(--bad)}.res.idea .por{border-color:var(--gold)}.res.happy .por{border-color:var(--acc)}
.bub{position:relative;flex:1;background:#f4f7fb;color:#1b2433;border-radius:16px 16px 16px 4px;padding:10px 12px;margin-bottom:24px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.bub::after{content:"";position:absolute;right:-8px;bottom:12px;border:8px solid transparent;border-left-color:#f4f7fb;border-right:0}
.bub .who{font-weight:700;font-size:13.5px;color:#1f5f8b}.bub .who span{font-weight:500;color:#5c6b80}
.bub p{margin:4px 0 0;font-size:15px;line-height:1.55}
.choices{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.choice{text-align:right;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid var(--line);font-size:14.5px;font-weight:500;display:flex;gap:8px;align-items:center;min-height:46px}
.choice:hover{background:rgba(76,201,240,.15)}
.choice em{font-style:normal;margin-inline-start:auto;color:var(--gold);font-weight:700;white-space:nowrap}
.choice.poor{opacity:.5}.choice small{color:var(--bad)}
/* done / win */
.mdone{text-align:center}.mdone p{line-height:1.6}.medal{font-size:56px;line-height:1}
.unlock{background:rgba(61,220,151,.12);border-radius:10px;padding:8px;font-size:13.5px}
.cert{background:#fffdf6;color:#1b2433;border-radius:14px;padding:6px}.certin{border:3px double #c9a227;border-radius:10px;padding:12px;text-align:center}
.cert h2{color:#1f4e79}.cert .sub{color:#6b7a90}.cert .mix div{background:#f0f4fa}.cert .mix b{color:#1f8a5b}.cert .mix span{color:#4a5a70}
.clogo{height:38px;display:block;margin:0 auto}
.cert .nm{display:block;margin:6px 0;font-weight:600}.cert input{font:inherit;border:0;border-bottom:2px solid #c9a227;background:transparent;text-align:center;width:60%;padding:4px;color:#1b2433}
.learn{text-align:right;padding-inline-start:18px;margin:6px 0;font-size:13.5px;line-height:1.55}
.cert .learn{color:#2a3a50}
.menu{display:grid;gap:8px}.menu button{padding:12px;border-radius:12px;background:rgba(255,255,255,.08);text-align:right;font-weight:600}
.credit{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--mut)}.credit img{height:30px;background:#fff;border-radius:6px;padding:2px 4px}
/* tutorial */
#tut{position:absolute;inset:0;z-index:40}
#tut .hole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(5,10,20,.62);border:2px solid var(--gold);transition:all .3s;pointer-events:none}
#tut .hole[hidden]{display:block;left:50%;top:50%;width:0;height:0;border:0}
#tut .tbox{position:absolute;left:50%;transform:translateX(-50%);width:min(420px,92vw);background:#f4f7fb;color:#1b2433;border-radius:16px;padding:14px 14px 12px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
#tut .tbox.mid{top:50%!important;transform:translate(-50%,-50%)}
#tut .tn{font-size:12px;color:#5c6b80;font-weight:600}
#tut p{margin:4px 0 10px;font-size:15px;line-height:1.55}
.tbtns{display:flex;gap:8px}.tbtns .skip{flex:0 0 auto;background:transparent!important;color:#5c6b80}
/* start */
#start{position:absolute;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 45%,rgba(10,18,32,.55),rgba(8,14,26,.9)),url(img/start-bg.jpg) center/cover no-repeat #0f1b2d;padding:20px;transition:opacity .5s}
#start.gone{opacity:0;pointer-events:none}
.sbox{text-align:center;max-width:520px}
.kicker{display:inline-block;font-size:13px;letter-spacing:1px;color:var(--acc);background:rgba(61,220,151,.12);border:1px solid rgba(61,220,151,.35);border-radius:20px;padding:4px 12px}
#start h1{font-size:clamp(42px,9vw,72px);margin:10px 0 6px;font-weight:800;background:linear-gradient(135deg,#fff,#a8f0d1 60%,#4cc9f0);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
#start p{font-size:16px;line-height:1.6;color:#d6e2f3;margin:0 auto 16px;max-width:440px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.sbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.sbtns .big{font-size:19px;padding:14px 38px;flex:0 0 auto}.sbtns button{flex:0 0 auto}
.brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px;font-size:14px;color:#d6e2f3}.brand img{height:40px;background:#fff;border-radius:8px;padding:3px 6px}
/* confetti */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}.confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:cf 2.5s linear forwards}
@keyframes cf{to{transform:translateY(105vh) rotate(720deg)}}
/* landscape phones */
@media (max-height:480px) and (orientation:landscape){
  #top{flex-direction:row;gap:6px;top:calc(6px + var(--st))}
  #stats{flex:1.15}#energy{flex:1;padding:4px 8px}
  .st{height:38px;padding:4px}.st b{font-size:14px}.st .ic{font-size:15px}.tb{width:38px;height:38px}
  .emeta{display:none}
  #mission{top:calc(52px + var(--st));width:min(270px,40vw)}
  #badge{top:calc(52px + var(--st))}
  #dock{display:flex;align-items:center;gap:6px;padding-top:4px;padding-bottom:calc(4px + var(--sb))}
  #tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px;flex:0 0 auto}
  #tabs button{padding:3px 6px;font-size:11px;justify-content:flex-start}#tabs span{font-size:12px}
  .zoom{flex-direction:row-reverse}.zoom button{width:36px;height:36px}
  #cards{flex:1;padding:2px}
  .card{flex-basis:84px;height:84px}.card img{width:58px;max-height:40px}
  #next,.zoom,#hint{bottom:calc(98px + var(--sb))}
  #next{padding:9px 14px;font-size:14px}
  .mcard{padding:12px}.por{width:80px;height:80px;flex-basis:80px}.bimg{width:110px}
  #toast{top:calc(56px + var(--st))}
  #tut .tbox{width:min(460px,70vw);padding:10px 12px}#tut p{font-size:13.5px;margin:2px 0 6px;line-height:1.45}.tbtns button{min-height:36px;padding:6px 12px;font-size:14px}
  .mcard h2{font-size:17px}.mcard .info{font-size:13px;margin:4px 0}.bub p{font-size:14px}.choice{min-height:38px;padding:7px 12px;font-size:13.5px}
}
/* narrow phones */
@media (max-width:480px){#popcap{display:none}#tabs{gap:2px}#tabs button{flex:1 1 0;flex-direction:column;gap:0;padding:3px 2px;font-size:10.5px;min-width:0}#tabs span{font-size:16px}}
@media (max-width:380px){.st{padding:4px 3px;gap:2px}.st b{font-size:14px}.st small{display:none}.tb{width:36px}.eb em{font-size:10px}.card{flex-basis:88px}}
/* desktop */
@media (min-width:900px) and (min-height:600px){
  #top{left:50%;right:auto;transform:translateX(-50%);width:min(980px,96vw);flex-direction:row}
  #stats{flex:1.2}#energy{flex:1}
  #mission{top:calc(70px + var(--st));right:16px;width:320px}
  #mission .mbody{display:block}
  #badge{top:calc(70px + var(--st));left:16px}
  #dock{left:50%;right:auto;transform:translateX(-50%);bottom:10px;width:min(780px,96vw);border:1px solid var(--line);border-radius:16px}
  #next{bottom:178px;right:calc(50% - min(390px,48vw));font-size:18px;padding:14px 22px}
  .zoom{bottom:178px;left:calc(50% - min(390px,48vw))}
  #hint{bottom:160px}
  .card{flex-basis:104px;height:104px}.card img{width:80px;max-height:58px}
  .mcard{padding:20px}
  #toast{top:84px}
}
@media print{body *{visibility:hidden}#cert,#cert *{visibility:visible}#cert{position:fixed;inset:0;margin:auto;width:90%;height:auto}#modal{background:none}}

.say{position:absolute;top:8px;left:8px;width:32px;height:32px;border-radius:50%;background:#e3ecf7;font-size:15px;display:flex;align-items:center;justify-content:center;z-index:1}
.say.on{background:var(--acc);animation:pulse 1s infinite}
.say[hidden]{display:none}
.bub{padding-left:46px}
#tut .tbox{padding-left:50px}
#tut .say{top:10px;left:10px}
#helpBtn{font-weight:800;font-size:20px!important;color:var(--gold)}
.learn.help li{margin-bottom:6px}.learn.help b{color:var(--acc2)}

.later{align-self:center;color:var(--mut);font-size:13px;padding:6px 14px;text-decoration:underline}
.choice small.own{color:var(--acc)}

#app.pre #top,#app.pre #dock,#app.pre #next,#app.pre .zoom,#app.pre #mission,#app.pre #badge{visibility:hidden}