/*!
 * Garage Ventures — © 2026 MTÜ Startup Garage (Estonia, reg. 80645372). All rights reserved.
 * Licensed under CC BY-NC-ND 4.0 (https://creativecommons.org/licenses/by-nc-nd/4.0/):
 * free to play and share with credit; no commercial use or modified versions without written permission.
 * Contact: info@startupgarage.ee · Original: https://startupgarage.ee/game
 */
/* Garage Ventures — a swipe-card VC game by Startup Garage */
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
[hidden]{display:none!important}
/* Layout: one-screen app. HUD strip, a card stage on painted garage pegboard, an action bar.
   Single committed look (the garage at night), so no light/dark split. */
:root{
  --board:#33495A; --hole:#243540; --board-hi:#466274;
  --paper:#F6F3EC; --paper-2:#E4DDCC; --news:#EAE5D7; --ink:#1C2328; --ink-2:#5A646D; --rule:#D6CEBD;
  --tape:#E8DAAA; --tape-ink:#2A2620;
  --safety:#892778; --hazard-dark:#1C2328;
  --go:#22865A; --go-soft:#DCEEE3; --go-hi:#8FE0B0;
  --stop:#C4422A; --stop-soft:#F5E0D9; --stop-hi:#FF9C88;
  --on-solid:#FFFFFF; --hud-fg:#F1EEE6; --hud-dim:#A7B4BE;
  --f-display:"Barlow Condensed","Arial Narrow","Roboto Condensed",Impact,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-marker:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;
  --f-stamp:"Saira Stencil One","Barlow Condensed",Impact,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;background:var(--board)}
body{
  height:100%;margin:0;overflow:hidden;
  background-color:var(--board);
  background-image:radial-gradient(circle,var(--hole) 0 2.6px,transparent 3.2px);
  background-size:26px 26px;background-position:13px 13px;
  color:var(--hud-fg);font-family:var(--f-body);-webkit-font-smoothing:antialiased;
}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at 50% 45%,transparent 50%,rgba(10,18,24,.45))}
.lean{position:fixed;top:0;bottom:0;width:40vw;pointer-events:none;opacity:0;z-index:0;transition:opacity .15s}
.lean.l{left:0;background:linear-gradient(90deg,rgba(196,66,42,.5),transparent)}
.lean.r{right:0;background:linear-gradient(-90deg,rgba(34,134,90,.5),transparent)}

.app{position:relative;z-index:1;height:100%;max-width:540px;margin:0 auto;
  display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0}

/* HUD */
.hud{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-block:14px 10px}
.k{font:600 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hud-dim);white-space:nowrap}
.fund{display:flex;flex-direction:column;gap:4px;min-width:0}
.cash{font:600 clamp(20px,6.4vw,28px)/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:color .5s}
.cash.up{color:var(--go-hi)} .cash.down{color:var(--stop-hi)}
.delta{font:500 11.5px/1 var(--f-mono);color:var(--hud-dim);font-variant-numeric:tabular-nums}
.delta.pos{color:var(--go-hi)} .delta.neg{color:var(--stop-hi)}
.days,.calls{display:flex;flex-direction:column;gap:5px}
.days{align-items:center} .calls{align-items:flex-end}
.pills{display:flex;gap:4px}
.pd{width:22px;height:24px;display:grid;place-items:center;border:1.5px solid var(--hud-dim);border-radius:4px;
  font:700 13px/1 var(--f-display);color:var(--hud-dim)}
.pd.past{background:var(--board-hi);border-color:var(--board-hi)}
.pd.now{background:var(--safety);border-color:var(--safety);color:#F6F3EC}
.dots{display:flex;gap:6px;height:24px;align-items:center}
.dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--safety)}
.dot.on{background:var(--safety)}
.hazard{height:6px;border-radius:2px;background:repeating-linear-gradient(-45deg,var(--safety) 0 9px,var(--hazard-dark) 9px 18px)}

/* Stage */
.stage{position:relative;display:grid;grid-template-rows:auto 1fr;gap:24px;min-height:0;padding-block:14px 6px}
.meta{display:flex;justify-content:space-between;gap:12px;font:600 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hud-dim)}
.slot{position:relative;min-height:0}
.slot-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

/* Card stack */
.deck{position:relative;width:min(100%,400px);max-height:100%;display:flex;flex-direction:column;border-radius:14px;
  background:var(--paper-2);box-shadow:0 7px 0 -3px #C9C1AE,0 14px 0 -6px #A99F8A,0 26px 40px -16px rgba(0,0,0,.65)}
.card,.sheet{position:relative;display:flex;flex-direction:column;min-height:0;background:var(--paper);color:var(--ink);border-radius:14px}
.card{flex:1 1 auto;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .25s;will-change:transform}
.card.dragging{transition:none;cursor:grabbing}
.card.enter,.sheet{animation:cardIn .34s cubic-bezier(.2,.8,.2,1)}
.card.fly-r{transition:transform .3s ease-in,opacity .3s ease-in;transform:translate3d(135%,0,0) rotate(22deg)!important;opacity:0}
.card.fly-l{transition:transform .3s ease-in,opacity .3s ease-in;transform:translate3d(-135%,0,0) rotate(-22deg)!important;opacity:0}
.card.shake{animation:shake .38s}
@keyframes cardIn{from{transform:translate3d(0,26px,0) scale(.96);opacity:0}to{transform:none;opacity:1}}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
.sheet{width:min(100%,400px);max-height:100%;box-shadow:0 26px 40px -16px rgba(0,0,0,.65)}
.card-body,.sheet-body{overflow-y:auto;min-height:0;padding:30px 20px 18px;display:flex;flex-direction:column;gap:14px;overscroll-behavior:contain}
.sheet-body{padding-bottom:20px}

.tape{position:absolute;top:-15px;left:16px;z-index:2;max-width:calc(100% - 32px);
  background:var(--tape);color:var(--tape-ink);font:400 22px/1.15 var(--f-marker);padding:6px 16px 5px;
  transform:rotate(-2.2deg);box-shadow:0 2px 3px rgba(0,0,0,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  clip-path:polygon(0 10%,3% 0,50% 4%,97% 0,100% 8%,99% 50%,100% 92%,96% 100%,50% 96%,4% 100%,0 92%,1% 50%)}
.tape.big{font-size:27px;padding:7px 18px 6px}
.tape.big + .sheet-body{padding-top:40px}

.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ask{display:flex;flex-direction:column;gap:3px;min-width:0}
.ik{font:600 10.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.amt{font:800 44px/.95 var(--f-display);letter-spacing:-.005em;font-variant-numeric:tabular-nums}
.terms{font:600 12.5px/1.25 var(--f-mono);color:var(--ink-2);margin-top:3px;font-variant-numeric:tabular-nums}
.terms b{color:var(--ink);font-weight:600}
.chips{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.cat{font:600 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:999px;padding:5px 9px;white-space:nowrap}
.cat.stg{background:var(--ink);color:var(--paper)}
.loc{font:600 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;padding-right:2px}
.loc::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--stop);margin-right:5px;vertical-align:1px}
.facts{display:grid;grid-template-columns:78px minmax(0,1fr);gap:9px 12px;margin:0;padding-top:12px;border-top:1.5px dashed var(--rule)}
.facts dt{font:600 10px/1.75 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.facts dd{margin:0;font:400 14.5px/1.42 var(--f-body)}
.facts dd.hl{font-weight:600}

.ribbon{margin:-30px -20px 0;height:34px;border-radius:14px 14px 0 0;display:flex;align-items:center;justify-content:flex-end;padding-right:14px;
  background:repeating-linear-gradient(-45deg,var(--safety) 0 10px,var(--hazard-dark) 10px 20px)}
.ribbon span{background:var(--hazard-dark);color:var(--paper);font:700 13px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;padding:5px 9px}

.intel{border-radius:10px;padding:12px 14px;animation:noteIn .35s cubic-bezier(.2,.8,.2,1)}
.intel.flag{background:var(--stop-soft)} .intel.news{background:var(--go-soft)}
.intel-tag{display:inline-block;font:700 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;padding:4px 7px;border-radius:4px;color:var(--on-solid);margin-bottom:8px}
.flag .intel-tag{background:var(--stop)} .news .intel-tag{background:var(--go)}
.intel p{margin:0;font:italic 400 14.5px/1.45 var(--f-body)}
@keyframes noteIn{from{transform:translateY(10px) rotate(-1deg);opacity:0}to{transform:none;opacity:1}}

.stamp{position:absolute;top:64px;z-index:3;font:400 40px/1 var(--f-stamp);text-transform:uppercase;letter-spacing:.04em;
  padding:7px 12px 3px;border:4px solid currentColor;border-radius:8px;opacity:0;pointer-events:none;background:rgba(246,243,236,.8)}
.stamp.invest{left:16px;color:var(--go);transform:rotate(-13deg)}
.stamp.pass{right:16px;color:var(--stop);transform:rotate(13deg)}
.stamp.slam{animation:slam .22s ease-out forwards}
@keyframes slam{from{opacity:0;scale:1.7}to{opacity:1;scale:1}}

/* Result clipping */
.clip{position:relative;width:min(100%,400px);max-height:100%;display:flex;flex-direction:column;background:var(--news);color:var(--ink);
  transform:rotate(-1.2deg);box-shadow:0 26px 40px -16px rgba(0,0,0,.65);animation:clipIn .42s cubic-bezier(.2,.8,.2,1)}
@keyframes clipIn{from{transform:translateY(-30px) rotate(3deg);opacity:0}to{transform:rotate(-1.2deg);opacity:1}}
.clip-body{overflow-y:auto;min-height:0;padding:18px 20px 20px;display:flex;flex-direction:column;gap:12px}
.mast{display:flex;flex-direction:column;align-items:center;gap:5px;padding-bottom:9px;border-bottom:4px double var(--ink)}
.mast .paper{font:800 23px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase}
.mast .date{font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.headline{margin:0;font:800 34px/.98 var(--f-display);text-transform:uppercase;text-wrap:balance;letter-spacing:.005em}
.story{margin:0;font:italic 400 14.5px/1.45 var(--f-body);color:var(--ink)}
.why{display:flex;flex-direction:column;gap:5px}
.luck{margin:0;font:400 15px/1.3 var(--f-marker);color:var(--ink-2);transform:rotate(-1deg)}
.scrib{position:absolute;top:-16px;right:10px;z-index:2;font:400 30px/1 var(--f-marker);transform:rotate(9deg);pointer-events:none}
.scale{display:flex;flex-direction:column;gap:6px}
.segs,.ends{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.seg{height:9px;border-radius:2px;background:var(--rule)}
.seg.on[data-t="0"]{background:var(--stop)}
.seg.on[data-t="1"]{background:var(--ink-2)}
.seg.on[data-t="2"],.seg.on[data-t="3"]{background:var(--go)}
.ends{font:500 9.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);text-align:center}
.ends b{color:var(--ink);font-weight:600}
.money{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:8px;padding-top:11px;border-top:1px solid var(--rule)}
.money div{display:flex;flex-direction:column;gap:5px;min-width:0}
.money div:last-child{align-items:flex-end;text-align:right}
.money b{font:800 32px/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.money b.up{color:var(--go)} .money b.down{color:var(--stop)}
.arrow{font:800 26px/1 var(--f-display);color:var(--ink-2);padding-bottom:3px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.row.net{padding-top:8px;border-top:1.5px dashed var(--rule)}
.row.net span{font:800 30px/1 var(--f-display)} .row.net b{font:600 19px/1.2 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.callout,.roundbox{display:flex;flex-direction:column;gap:5px;padding:11px 13px;border-radius:8px}
.callout.miss{background:var(--stop-soft)} .callout.save{background:var(--go-soft)}
.roundbox{background:var(--paper-2)}
.callout .ik,.roundbox .ik{color:var(--ink)}
.callout b{font:800 32px/1 var(--f-display);font-variant-numeric:tabular-nums}
.callout.miss b{color:var(--stop)} .callout.save b{color:var(--go)}
.callout p,.roundbox p{margin:0;font:400 13.5px/1.4 var(--f-body)}
.explain{margin:0;font:400 12.5px/1.45 var(--f-body);color:var(--ink-2)}
.up{color:var(--go)} .down{color:var(--stop)} .muted{color:var(--ink-2)}

/* Sheets: start, day end, report */
.lede{margin:0;font:400 16px/1.45 var(--f-body)}
.lede .amt{display:block;margin-bottom:8px}
.best{margin:0;font:500 12px/1.4 var(--f-mono);color:var(--ink-2)}
.log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.log li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-bottom:1.5px dashed var(--rule)}
.log li:first-child{padding-top:2px}
.log .nm{font:700 19px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;min-width:0}
.log .act{grid-column:1;font:400 13px/1.3 var(--f-body);color:var(--ink-2)}
.log .res{grid-column:2;grid-row:1 / span 2;align-self:center;font:600 15px/1 var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
.tot{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tot div{display:flex;flex-direction:column;gap:5px}
.tot b{font:600 19px/1.1 var(--f-mono);font-variant-numeric:tabular-nums}
.note{margin:0;font:400 13px/1.45 var(--f-body);color:var(--ink-2)}
.final-top{display:flex;flex-direction:column;gap:5px}
.final-top .amt{font-size:50px}
.mult{font:600 14px/1.35 var(--f-mono)}
.split{font:500 12.5px/1.4 var(--f-mono);color:var(--ink-2)}
.rank{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:10px;background:var(--paper-2)}
.rank b{font:400 30px/1.05 var(--f-marker);color:var(--ink)}
.rank p,.power p{margin:0;font:400 14px/1.45 var(--f-body)}
.power{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:10px;border:1.5px dashed var(--ink-2)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:0}
.stats div{display:flex;flex-direction:column;gap:4px;min-width:0}
.stats dt{font:600 9.5px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.stats dd{margin:0;font:700 20px/1.1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;overflow-wrap:anywhere}
.cta{margin:0;padding-top:12px;border-top:1.5px dashed var(--rule);font:400 14px/1.45 var(--f-body)}
.made{margin-top:auto;font-size:13px;color:var(--ink-2)}
.made a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* Bar */
.bar{display:flex;flex-direction:column;gap:9px;padding-block:10px 14px}
.btns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr);gap:10px}
.btns.one{grid-template-columns:minmax(0,1fr)} .btns.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.btn{appearance:none;border:0;border-radius:10px;height:54px;padding:0 10px;min-width:0;overflow:hidden;font:700 19px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s,filter .12s,opacity .2s;white-space:nowrap}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:focus-visible{outline:3px solid var(--safety);outline-offset:2px}
.btn:disabled{opacity:.38;cursor:not-allowed;filter:none}
.btn-pass{background:var(--stop);color:var(--on-solid)}
.btn-invest{background:var(--go);color:var(--on-solid)}
.btn-ask,.btn-ghost{background:transparent;color:var(--hud-fg);box-shadow:inset 0 0 0 2px var(--hud-dim)}
.btn-main{background:var(--safety);color:#F6F3EC}
.cnt{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--safety);color:#F6F3EC;font:600 12px/1 var(--f-mono);letter-spacing:0}
.hint{margin:0;font:500 10.5px/1 var(--f-mono);color:var(--hud-dim);text-align:center;letter-spacing:.08em}

.toast{position:absolute;left:50%;top:0;translate:-50% -8px;z-index:7;width:max-content;max-width:min(92%,380px);background:var(--ink);color:var(--paper);
  font:500 13px/1.35 var(--f-body);padding:9px 14px;border-radius:8px;box-shadow:0 8px 20px rgba(0,0,0,.4);opacity:0;pointer-events:none;
  transition:opacity .2s,translate .2s;text-align:center}
.toast.show{opacity:1;translate:-50% 0}

.banner{position:fixed;left:0;right:0;top:46%;translate:0 -50%;z-index:8;pointer-events:none;background:var(--hazard-dark);color:var(--paper);
  text-align:center;padding:14px 16px 12px;border-block:7px solid transparent;
  border-image:repeating-linear-gradient(-45deg,var(--safety) 0 9px,var(--hazard-dark) 9px 18px) 7;
  animation:band 1.35s cubic-bezier(.65,0,.35,1) forwards}
.banner b{display:block;font:800 56px/.9 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.banner span{display:block;margin-top:6px;font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--hud-fg)}
@keyframes band{0%{clip-path:inset(0 100% 0 0)}22%{clip-path:inset(0 0 0 0)}78%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}

@media (max-height:700px){
  .amt{font-size:38px} .final-top .amt{font-size:42px}
  .card-body,.sheet-body{gap:11px;padding-top:27px}
  .facts{gap:7px 12px} .facts dd,.intel p{font-size:13.5px}
  .btn{height:48px} .hud{padding-block:10px 8px} .stage{gap:22px;padding-block:10px 4px}
  .headline{font-size:30px}
}
@media (max-width:420px){
  .hud{gap:8px} .cash{font-size:21px} .pd{width:20px} .k{letter-spacing:.1em}
  .btns{gap:8px}
  .btn{font-size:17px;letter-spacing:.03em;gap:6px;padding:0 6px}
}
@media (max-width:380px){
  .facts{grid-template-columns:66px minmax(0,1fr)}
  .btn{font-size:16px;letter-spacing:.02em}
  .pd{width:19px}
  .amt{font-size:38px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Optional join button on the fund report (shown when the page gets ?join=<url>) */
.cta-link{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;background:var(--safety);color:#F6F3EC;font:700 17px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:12px 16px;border-radius:10px}
.cta-link:focus-visible{outline:3px solid var(--ink);outline-offset:2px}

/* Web integration perf */
.card.dragging{will-change:transform}
@media (max-width:600px){body::after{display:none}.deck{box-shadow:0 7px 0 -3px #C9C1AE,0 14px 0 -6px #A99F8A,0 14px 20px -12px rgba(0,0,0,.5)}}

/* Desktop: wider game so cards fit without inner scrolling */
@media (min-width:1024px){
  .app{max-width:1000px}
  .deck,.sheet,.clip{width:min(100%,820px)}
  .card-body,.sheet-body{padding:34px 32px 22px}
  .clip-body{padding:22px 32px 24px}
}

/* GPU compositing */
.card,.deck,.slot-in{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card{contain:layout}
.slot-in{contain:layout;padding-top:18px}
.tape{z-index:5;max-width:calc(100% - 24px);will-change:transform}
.lean{will-change:opacity;transform:translateZ(0)}