/* Ink Powpow. Paper-and-ink look shared with the other Ink games: white paper, black ink, no other colors.
   Black targets are the ones that cost points; everything else is white tin with ink outlines. */
:root{
  --paper:#ffffff; --ink:#000000; --soft:#5c5c5c;
  --display:"Fraunces", Georgia, "Times New Roman", serif;
  --ui:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1); --settle:cubic-bezier(.3,.7,.3,1);
  color-scheme:light; box-sizing:border-box;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#ffffff; --ink:#000000; --soft:#5c5c5c; } }
:root[data-theme="dark"]{ --paper:#ffffff; --ink:#000000; --soft:#5c5c5c; }
*,*::before,*::after{ box-sizing:inherit; }
html{ height:100%; }
html,body{ margin:0; height:100%; background:var(--paper); color:var(--ink); font-family:var(--ui); overflow:hidden; overscroll-behavior:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent; }
button{ appearance:none; font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
input{ -webkit-user-select:text; user-select:text; }

@keyframes cardIn{0%{transform:translateY(60vh) scale(.7,1.3)}55%{transform:translateY(-10px) scale(1.06,.94)}75%{transform:translateY(3px) scale(.98,1.02)}100%{transform:none}}
@keyframes pickIn{0%{opacity:0;transform:translateY(24px) scale(.9,1.12)}60%{opacity:1;transform:translateY(-3px) scale(1.03,.97)}100%{opacity:1;transform:none}}
@keyframes rowIn{0%{opacity:0;transform:translateX(-18px)}70%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:none}}
@keyframes trophyIn{0%{opacity:0;transform:translateY(-120px) scale(.7,1.3)}45%{opacity:1;transform:translateY(0) scale(1.25,.72)}62%{transform:translateY(-14px) scale(.9,1.12)}78%{transform:translateY(0) scale(1.06,.95)}100%{transform:none}}
@keyframes wob{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sizzle{0%,100%{transform:translate(50%,-50%) scale(1)}50%{transform:translate(50%,-50%) scale(1.3,.8)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.screen{ position:absolute; inset:0; display:none; flex-direction:column; max-width:480px; margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(env(safe-area-inset-bottom,0px) + 12px); }
.screen.on{ display:flex; }

/* ---------- shared pieces from the other Ink games ---------- */
.panel{ background:var(--paper); border:2.5px solid var(--ink); border-radius:24px; box-shadow:7px 8px 0 var(--ink);
  padding:22px 18px 18px; width:min(440px,100%); text-align:center; animation:cardIn .6s var(--settle); }
.panel h2{ font-family:var(--display); font-weight:900; font-style:italic; font-size:32px; line-height:1.05; margin:0; text-wrap:balance; }
.panel p{ margin:6px 0 16px; font-weight:700; color:var(--soft); line-height:1.4; }
.logo{ font-family:var(--display); font-style:italic; font-weight:900; font-size:56px; line-height:.95; letter-spacing:-.01em; margin:0 0 4px; }
.tag{ font-weight:800; font-size:17px; margin:10px 0 4px; }
.btn{ appearance:none; border:2.5px solid var(--ink); background:var(--ink); color:var(--paper); border-radius:14px; padding:13px 22px;
  font-family:var(--ui); font-weight:800; font-size:16px; cursor:pointer; width:100%; line-height:1.1; transition:transform .2s var(--spring); }
.btn:active{ transform:scale(1.04,.9); }
.btn.ghost{ background:var(--paper); color:var(--ink); }
.btn:disabled{ opacity:.3; cursor:default; transform:none; }
.btn:focus-visible,.event:focus-visible,.linkbtn:focus-visible,.shell:focus-visible,.good:focus-visible,.tube:focus-visible,.seg button:focus-visible,.tog:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }
.linkbtn{ appearance:none; border:0; background:none; padding:2px 4px; font:inherit; font-weight:800; color:var(--ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.linkbtn.center{ display:block; margin:10px auto 0; font-size:13px; }
.how{ text-align:left; font-size:13px; font-weight:600; border:1.5px dashed var(--ink); border-radius:12px; padding:10px 12px; margin:10px 0 14px; line-height:1.45; }
.how p{ margin:0 0 8px !important; color:var(--ink) !important; font-weight:600 !important; }
.how p:last-child{ margin:0 !important; }
.how b{ font-weight:800; }
.sub{ font-size:13px; font-weight:700; color:var(--soft); line-height:1.25; }
.evn{ font-size:12px !important; font-weight:800 !important; color:var(--ink) !important; margin:0 0 4px !important; letter-spacing:.02em; }
.resnote{ font-size:12.5px !important; font-weight:700 !important; color:var(--ink) !important; margin:-4px 0 12px !important; line-height:1.4; display:flex; align-items:center; justify-content:center; gap:6px; }
.panel > .btn + .btn{ margin-top:8px; }
.panel > .linkbtn{ display:inline-block; margin-top:12px; font-size:13px; }
.board{ border:2px solid var(--ink); border-radius:14px; overflow:hidden; margin:10px 0 16px; text-align:left; }
.board .row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:9px 12px; border-top:1.5px solid var(--ink); animation:rowIn .45s var(--settle) both; }
.board .row:first-child{ border-top:0; }
.board .row.me{ background:var(--ink); color:var(--paper); }
.board .nm{ font-weight:800; font-size:14px; line-height:1.2; }
.board .nm small{ display:block; font-weight:600; font-size:12px; opacity:.75; margin-top:2px; }
.board b{ font-family:var(--display); font-weight:900; font-size:21px; text-align:right; font-variant-numeric:tabular-nums; }
.award{ display:grid; place-items:center; margin:0 0 8px; }
.award .troph{ width:130px; height:130px; animation:trophyIn 1s var(--settle) both .2s; transform-origin:50% 100%; }
.award p{ margin:2px 0 0 !important; font-family:var(--display); font-style:italic; font-weight:900; font-size:20px; color:var(--ink) !important; }
.ver{ font-size:11.5px; font-weight:700; color:var(--soft); margin-top:6px; }
.foot-note{ font-size:12px; font-weight:600; color:var(--soft); margin-top:12px; }
.prog{ display:flex; gap:7px; justify-content:center; align-items:center; margin:0 0 12px; }
.prog i{ width:12px; height:12px; border:2px solid var(--ink); border-radius:50%; }
.prog i.done{ background:var(--ink); }
.prog i.now{ background:var(--ink); transform:scale(1.35); }
.prog i.crown{ width:22px; height:16px; border:0; border-radius:0; display:grid; place-items:center; background:none; }
.prog i.crown svg{ width:22px; height:16px; }
.prog i.crown:not(.done):not(.now) svg path{ fill:var(--paper); }
.lifeRow{ display:flex; align-items:center; gap:10px; text-align:left; font-size:12.5px; font-weight:700; margin:0 0 10px; line-height:1.35; }
.lifeRow.center{ justify-content:center; margin:0 0 12px; }
.tokens{ display:flex; gap:5px; flex:none; }
.tokens i{ width:16px; height:16px; border:2px solid var(--ink); border-radius:50%; position:relative; }
.tokens i.on{ background:var(--ink); box-shadow:inset 0 0 0 3px var(--paper); }
.tk{ display:inline-flex; align-items:center; gap:4px; font-family:var(--display); font-weight:900; font-size:18px; margin-left:auto; }
.tk svg{ width:24px; height:24px; }
.tk.big2{ font-size:26px; margin:0; }
.tk.big2 svg{ width:32px; height:32px; }
.ico{ width:24px; height:24px; display:block; flex:none; }
.ico.in{ display:inline-block; width:20px; height:20px; }
.minibelt{ display:flex; gap:4px; }
.minibelt span{ width:30px; height:30px; border:2px solid var(--ink); border-radius:50%; display:grid; place-items:center; }
.minibelt svg{ width:20px; height:20px; }

/* ---------- home ---------- */
#title{ overflow:auto; }
.home{ width:min(440px,100%); margin:auto; text-align:center; padding:8px 0 4px; }
.shelf{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; align-items:end; margin:16px 0 0; padding:0 4px 8px; border-bottom:3px solid var(--ink); position:relative; }
.shelf::after{ content:""; position:absolute; left:6px; right:-4px; bottom:-9px; height:6px; background:var(--ink); }
.prize{ margin:0; position:relative; }
.prize img{ width:100%; display:block; }
.prize.won img{ animation:pickIn .5s var(--settle) both; }
.prize .x2{ position:absolute; top:0; right:0; background:var(--ink); color:var(--paper); border-radius:999px; padding:1px 7px; font-family:var(--display); font-weight:900; font-size:13px; }
.shelfnote{ margin:16px 0 14px; }
.btn.main{ font-family:var(--display); font-style:italic; font-weight:900; font-size:28px; padding:14px 20px 12px; border-radius:18px; box-shadow:5px 6px 0 var(--ink); }
.btn.main small{ display:block; font-family:var(--ui); font-style:normal; font-weight:700; font-size:12.5px; margin-top:5px; opacity:.85; }
.kick{ font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; margin:22px 0 0; }
.events{ display:grid; gap:10px; margin:12px 0 14px; padding-right:5px; }
.event{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; text-align:left; border:2.5px solid var(--ink); border-radius:18px; padding:10px 14px 10px 10px;
  background:var(--paper); box-shadow:4px 5px 0 var(--ink); animation:pickIn .55s var(--settle) both; transition:transform .2s var(--spring); }
.event:active{ transform:scale(1.03,.94); }
.event .bf{ width:52px; height:52px; display:block; border:2px solid var(--ink); border-radius:50%; }
.event .fr{ display:flex; }
.event .fr .bf{ width:40px; height:40px; }
.event .fr .bf + .bf{ margin-left:-14px; }
.ev{ display:grid; gap:2px; min-width:0; }
.ev b{ font-family:var(--display); font-style:italic; font-weight:900; font-size:22px; line-height:1.05; }
.ev i{ font-style:normal; font-size:11.5px; font-weight:800; color:var(--soft); letter-spacing:.02em; }
.ev span{ font-size:13px; font-weight:600; line-height:1.35; }
.ev strong{ font-weight:800; }
.event.friends{ border-style:dashed; }
.homelinks{ margin:4px 0 8px; }
.toggles{ display:flex; gap:8px; justify-content:center; margin:8px 0 0; }
.tog{ display:inline-flex; align-items:center; gap:6px; border:2px solid var(--ink); border-radius:999px; padding:5px 12px 5px 8px; font-size:12.5px; font-weight:800; opacity:.5; }
.tog.on{ opacity:1; }
.tog svg{ width:20px; height:20px; }

/* ---------- booth intro ---------- */
#intro{ justify-content:center; align-items:center; overflow:auto; }
#intro .panel{ margin:auto; }
.barker{ display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center; text-align:left; margin:12px 0 10px; }
.barker p{ margin:0 !important; color:var(--ink) !important; font-weight:600 !important; font-size:14px; }
.barker b{ font-weight:800; }
.bigface{ width:64px; height:64px; display:block; border:2.5px solid var(--ink); border-radius:50%; }
.bigface.c{ width:84px; height:84px; margin:0 auto 10px; }
.rivals{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 14px; }
.rival{ border:2px solid var(--ink); border-radius:14px; padding:8px 8px 9px; text-align:center; display:grid; justify-items:center; gap:1px; }
.rival .face{ width:48px; height:48px; border:2px solid var(--ink); border-radius:50%; margin-bottom:4px; }
.rival b{ font-family:var(--display); font-style:italic; font-weight:900; font-size:16px; line-height:1.05; }
.rival small{ font-size:10.5px; font-weight:800; color:var(--soft); letter-spacing:.03em; text-transform:uppercase; }
.rival span{ font-size:12px; font-weight:600; line-height:1.3; margin-top:3px; }

/* ---------- the booth ---------- */
#play{ touch-action:none; max-width:560px; gap:6px; padding:calc(env(safe-area-inset-top,0px) + 8px) 10px calc(env(safe-area-inset-bottom,0px) + 8px); }
.scores{ margin-top:6px; display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:6px; flex:none; }
.plq{ position:relative; display:flex; align-items:center; gap:5px; border:2px solid var(--ink); border-radius:14px; padding:5px 6px; min-width:0; background:var(--paper); }
.plq.you{ background:var(--ink); color:var(--paper); box-shadow:3px 4px 0 var(--ink); border-width:2.5px; justify-content:center; }
.plq .pf{ width:28px; height:28px; border-radius:50%; border:1.5px solid var(--ink); flex:none; }
.pn{ display:grid; min-width:0; line-height:1; }
.pn b{ font-size:11px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.plq:not(.you) .pn b{ color:var(--soft); }
.pts{ font-family:var(--display); font-weight:900; font-size:22px; font-variant-numeric:tabular-nums; margin-top:2px; }
.plq.you .pts{ font-size:28px; }
.plq .side{ font-style:normal; font-size:13px; margin-left:auto; }
.plq#pl0 .side{ order:-1; margin:0; }
.plq#pl0 .pf{ order:-2; }
.mul{ font-family:var(--display); font-weight:900; font-size:16px; border:2px solid var(--paper); border-radius:999px; padding:1px 7px; opacity:.45; }
.mul.hot{ opacity:1; background:var(--paper); color:var(--ink); }
.ldr{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); width:24px; height:18px; display:none; }
.ldr svg{ width:24px; height:18px; }
.plq.you .ldr svg path{ stroke:var(--ink); }
.plq.lead .ldr{ display:block; animation:wob 1.2s ease-in-out infinite; }
.fuse{ position:relative; display:flex; align-items:center; gap:8px; flex:none; height:44px; }
.fuse .rope{ flex:1; height:6px; position:relative; }
.fuse .rope::before{ content:""; position:absolute; inset:2px 0; border-top:2px dashed var(--ink); opacity:.3; }
.fuse .rope i{ position:absolute; inset:0; background:repeating-linear-gradient(-60deg, var(--ink) 0 3px, var(--paper) 3px 6px); border:2px solid var(--ink); border-radius:4px; transform-origin:0 50%; }
.fuse b{ font-family:var(--display); font-weight:900; font-size:20px; min-width:1.4em; text-align:right; font-variant-numeric:tabular-nums; }
.fuse.late b{ animation:blink .5s linear infinite; }
.stage{ position:relative; flex:1; min-height:0; margin:0 -10px; }
#cv{ position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
.loadnote{ flex:none; margin:0; font-size:12px; font-weight:600; line-height:1.3; text-align:center; min-height:0; max-height:0; overflow:hidden; transition:max-height .2s; }
.loadnote.on{ max-height:40px; }
.loadnote b{ font-weight:800; }
.belt{ flex:none; display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; }
.tube{ position:relative; display:grid; gap:3px; justify-items:center; border:2.5px solid var(--ink); border-radius:14px; padding:6px 8px 5px; background:var(--paper); box-shadow:3px 4px 0 var(--ink); min-width:96px; }
.corks{ display:flex; gap:2px; }
.corks i{ width:9px; height:15px; border:1.8px solid var(--ink); border-radius:2px 2px 4px 4px; clip-path:polygon(0 0,100% 0,85% 100%,15% 100%); background:var(--paper); }
.corks i.on{ background:var(--ink); }
.tube .tf{ position:absolute; left:6px; right:6px; bottom:4px; height:3px; }
.tube .tf i{ position:absolute; inset:0; background:var(--ink); transform-origin:0 50%; transform:scaleX(0); }
.tube small{ font-size:10.5px; font-weight:800; }
.tube.reloading{ box-shadow:none; transform:translateY(2px); }
.tube.reloading small{ animation:blink .6s linear infinite; }
.shells{ display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-start; min-width:0; }
.shell{ position:relative; width:39px; display:grid; justify-items:center; gap:1px; border:2.5px solid var(--ink); border-radius:14px; padding:5px 2px 4px; background:var(--paper); box-shadow:3px 4px 0 var(--ink); transition:transform .2s var(--spring); }
.shell .ico{ width:22px; height:22px; }
.shell small{ display:none !important; }
.shell.empty{ height:40px !important; }
.shell small{ font-size:9px; font-weight:800; line-height:1; white-space:nowrap; max-width:48px; overflow:hidden; text-overflow:ellipsis; }
.shell.on{ background:var(--ink); color:var(--paper); transform:translateY(-6px); box-shadow:4px 8px 0 var(--ink); }
.shell.on .ico g{ stroke:var(--paper); }
.shell.empty{ border-style:dashed; box-shadow:none; opacity:.25; height:48px; }
#pause{ flex:none; width:40px; height:40px; border-radius:50%; border:2.5px solid var(--ink); background:var(--paper); color:var(--ink);
  box-shadow:3px 4px 0 var(--ink); display:grid; place-items:center; cursor:pointer; padding:0; transition:transform .28s var(--spring); }
#pause svg{ width:26px; height:26px; }
#pause:active{ transform:scale(1.12,.86); }
#pause:focus-visible{ outline:3px solid var(--ink); outline-offset:4px; }
@media (max-width:380px){ .shell{ width:36px; } .shells{ gap:4px; } .tube{ min-width:76px; padding:6px 6px 5px; } .corks i{ width:8px; } }

.banner{ position:fixed; left:50%; top:40%; transform:translate(-50%,-50%); z-index:40; display:none; max-width:min(340px,86vw); text-align:center; background:var(--ink); color:var(--paper); border-radius:18px;
  padding:10px 24px 12px; box-shadow:0 0 0 3px var(--paper), 7px 8px 0 3px var(--ink); pointer-events:none; }
.banner.on{ display:block; }
.banner.mini{ top:24%; padding:6px 16px 8px; }
.banner.mini b{ font-size:22px; }
.banner.mini small{ font-size:12px; margin-top:2px; }
.banner b{ display:block; font-family:var(--display); font-style:italic; font-weight:900; font-size:34px; line-height:1.1; text-wrap:balance; }
.banner small{ display:block; font-size:13px; font-weight:700; margin-top:4px; line-height:1.35; }

/* ---------- the shell cart ---------- */
#cart{ gap:10px; overflow:auto; }
.shophead{ display:flex; justify-content:space-between; align-items:center; }
.shophead h2{ font-family:var(--display); font-style:italic; font-weight:900; font-size:34px; margin:0; }
.goods{ display:grid; gap:10px; margin:4px 0 auto; padding:4px 5px 8px 0; }
.good{ display:grid; grid-template-columns:44px 1fr auto; gap:10px; align-items:center; text-align:left; border:2.5px solid var(--ink); border-radius:16px; padding:8px 10px;
  background:var(--paper); box-shadow:4px 5px 0 var(--ink); animation:pickIn .5s var(--settle) both; transition:transform .2s var(--spring); }
.good:active{ transform:scale(1.03,.94); }
.good.up{ border-style:double; border-width:5px; padding:6px 8px; }
.good:disabled{ box-shadow:none; border-style:dashed; }
.good:disabled > *{ opacity:.4; }
.good.sold > *{ opacity:.35; }
.gi{ width:44px; height:44px; border:2px solid var(--ink); border-radius:50%; display:grid; place-items:center; }
.gi .ico{ width:28px; height:28px; }
.gt b{ display:block; font-family:var(--display); font-style:italic; font-weight:900; font-size:19px; line-height:1.05; }
.gt small{ display:block; font-size:12px; font-weight:600; line-height:1.35; margin-top:2px; }
.price{ display:flex; align-items:center; gap:2px; font-family:var(--display); font-weight:900; font-size:18px; }
.price svg{ width:22px; height:22px; }
.cartbelt{ display:flex; align-items:center; justify-content:space-between; gap:8px; border:1.5px dashed var(--ink); border-radius:12px; padding:8px 10px; }

/* ---------- overlay cards and tips ---------- */
.veil{ position:fixed; inset:0; z-index:30; display:none; overflow-y:auto; background:rgba(255,255,255,.82);
  padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px); }
.veil.on{ display:grid; }
.veil .panel{ margin:auto; }
.veil .toggles{ margin-top:14px; }
.tip{ position:fixed; left:16px; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 118px); z-index:25; display:none; max-width:420px; margin:0 auto; background:var(--paper);
  border:2.5px solid var(--ink); border-radius:16px; box-shadow:4px 5px 0 var(--ink); padding:12px 14px 10px; font-size:13.5px; font-weight:600; line-height:1.4; text-align:left; pointer-events:auto; }
.tip.on{ display:block; }
.tip b{ font-weight:800; }
.tip .linkbtn{ display:block; margin:6px 0 0 auto; }
.seg{ display:flex; gap:6px; justify-content:center; margin:0 0 14px; }
.seg.wrap{ flex-wrap:wrap; }
.seg button{ border:2px solid var(--ink); border-radius:999px; padding:7px 14px; font-weight:800; font-size:13.5px; }
.seg button.on{ background:var(--ink); color:var(--paper); }
.names{ display:grid; gap:8px; margin:0 0 14px; }
.names label{ display:flex; gap:8px; align-items:center; }
.names .pf{ width:36px; height:36px; border:2px solid var(--ink); border-radius:50%; flex:none; }
.names input{ flex:1; min-width:0; border:2px solid var(--ink); border-radius:12px; padding:9px 12px; font:inherit; font-weight:700; font-size:16px; background:var(--paper); color:var(--ink); }
.names input:focus{ outline:3px solid var(--ink); outline-offset:1px; }
.tgts{ display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; text-align:left; margin:0 0 14px; }
.tgts span{ display:grid; grid-template-columns:36px 1fr; column-gap:6px; align-items:center; font-size:12px; font-weight:600; line-height:1.25; }
.tgts .ti{ width:36px; height:36px; grid-row:span 2; }
.tgts b{ font-weight:800; font-size:12.5px; }
.shelllist{ display:grid; gap:6px; text-align:left; margin:0 0 12px; }
.shelllist div{ display:grid; grid-template-columns:28px 1fr; gap:8px; align-items:center; font-size:12.5px; font-weight:600; line-height:1.35; }
.shelllist .ico{ width:28px; height:28px; }
.shelllist b{ font-weight:800; }

@media (prefers-reduced-motion: reduce){
  .panel,.event,.board .row,.award .troph,.good,.prize.won img{ animation:none; }
  .plq.lead .ldr,.fuse.late b,.tube.reloading small{ animation:none; }
  .shell,.event,.btn{ transition:none; }
}