@font-face{font-family:"Marker";src:url(/fonts/permanent-marker.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Fredoka";font-weight:500;src:url(/fonts/fredoka-wght-500.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Fredoka";font-weight:700;src:url(/fonts/fredoka-700.woff2) format("woff2");font-display:swap}
:root{
  --field:#e4472b; --deep:#8a1634; --ink:#4b1030; --cream:#fff2d8; --jade:#17a67c; --sun:#ffc531; --navy:#1d2a6b;
  --p0:#e5383b; --p1:#2f7fe6; --p2:#2fa85a; --p3:#f4b61a;
  --display:"Marker","Fredoka",system-ui,sans-serif; --text:"Fredoka",system-ui,sans-serif;
  --r-rivals:76px; --r-prompt:46px; --r-mine:40px; --r-tray:112px; --r-bar:60px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--field);color:var(--cream);font-family:var(--text);font-weight:500;font-size:16px;overflow:hidden;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;outline:none}
[data-input="keys"] button:focus-visible{outline:3px solid var(--sun);outline-offset:1px;border-radius:6px}
img{display:block;-webkit-user-drag:none}
[hidden]{display:none!important}
#app{position:fixed;left:0;top:0;width:100%;height:var(--h,100svh);overflow:hidden}
.screen{position:absolute;inset:0}

/* painted chrome: the canvas is the paint, the text sits on it */
[data-sign]{position:relative;isolation:isolate}
[data-sign]>canvas.face{position:absolute;left:0;top:0;z-index:-1;pointer-events:none}
[data-sign="board"]{color:var(--cream)} [data-sign="cream"],[data-sign="tag"],[data-sign="paper"]{color:var(--ink)} [data-sign="banner"]{color:var(--cream)}
[data-chrome="plain"] [data-sign]>canvas.face{display:none}
[data-chrome="plain"] [data-sign="board"]{background:var(--jade);border-radius:6px} [data-chrome="plain"] [data-sign="cream"],[data-chrome="plain"] [data-sign="tag"],[data-chrome="plain"] [data-sign="paper"]{background:var(--cream);border-radius:6px} [data-chrome="plain"] [data-sign="banner"]{background:var(--deep);border-radius:6px}

.act{font-family:var(--display);font-size:19px;line-height:1;min-height:48px;min-width:104px;padding:2px 26px 4px;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;transition:transform .08s}
.act:active{transform:translateY(2px) scale(.97)}
.act[disabled]{filter:saturate(.25) brightness(.92);cursor:default}
.act.big{font-size:30px;min-height:72px;min-width:220px;padding:2px 48px 6px}
.link{font-family:var(--display);font-size:15px;min-height:44px;padding:2px 16px 3px 26px;display:inline-flex;align-items:center;white-space:nowrap}
kbd{font-family:var(--text);font-weight:700;font-size:12px;line-height:1;padding:4px 6px;border-radius:5px;background:var(--cream);color:var(--ink);box-shadow:0 2px 0 var(--ink)}
[data-input="touch"] kbd{display:none}

/* ---------- home ---------- */
#home{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;padding:calc(env(safe-area-inset-top) + 2svh) 16px calc(env(safe-area-inset-bottom) + 3svh)}
#home .backdrop{position:absolute;inset:-4%;background:url(/art/hero.webp) center/cover;animation:drift 38s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.04) translate(-1.5%,0)}to{transform:scale(1.12) translate(1.5%,-1.5%)}}
#sky{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.mark{position:relative;margin:0;align-self:start;width:min(86vw,62svh,640px);filter:drop-shadow(0 6px 0 var(--deep)) drop-shadow(0 14px 22px rgba(75,16,48,.55));animation:sway 5s ease-in-out infinite alternate;transform-origin:50% -20%}
.mark img{width:100%;height:auto}
@keyframes sway{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg)}}
.door{position:relative;display:grid;justify-items:center;gap:10px;width:100%}
.levels{display:flex;gap:6px;justify-content:center}
.lvl{font-family:var(--display);font-size:17px;min-height:46px;min-width:96px;padding:2px 14px 3px 28px;display:inline-flex;align-items:center;justify-content:center;transition:transform .12s;opacity:.92}
.lvl[aria-checked="true"]{transform:translateY(-6px) rotate(-2deg) scale(1.08);opacity:1;filter:drop-shadow(0 0 10px var(--sun)) drop-shadow(0 5px 0 var(--deep))}
.links{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#play>*{animation:beat 1.6s ease-in-out infinite} /* the paint and the word pulse; the button's own box holds still so a tap always lands */
#play{filter:drop-shadow(0 6px 0 var(--deep)) drop-shadow(0 10px 16px rgba(75,16,48,.5))}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.05) rotate(-1deg)}}

/* ---------- table ---------- */
#table{display:grid;grid-template-columns:100%;grid-template-rows:var(--r-rivals) var(--r-prompt) minmax(0,1fr) var(--r-mine) var(--r-tray) var(--r-bar);background:var(--deep) url(/art/ground.webp) center/380px;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
#rivals{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:3px 3px 0;min-width:0}
.rival{display:grid;grid-template-columns:22px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:5px;row-gap:2px;align-content:center;padding:6px 8px 7px 9px;min-width:0;transition:transform .2s}
.rival .mug{width:22px;height:22px;grid-row:1}
.rival .cnt{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:4px;font-size:11px;font-weight:700;line-height:1;white-space:nowrap}
.rival .cnt small{font-size:inherit;display:inline-flex;align-items:center;gap:2px}
.rival .goods{grid-column:1 / -1;justify-content:space-between;gap:1px}
.rival[data-turn="1"]{transform:translateY(3px) scale(1.03);filter:drop-shadow(0 0 7px var(--sun))}
.mug{width:30px;height:30px;object-fit:cover;object-position:50% 4%;border-radius:50%;align-self:center;box-shadow:0 0 0 2.5px var(--pc)}
.p0{--pc:var(--p0)} .p1{--pc:var(--p1)} .p2{--pc:var(--p2)} .p3{--pc:var(--p3)}
.rival .name{font-family:var(--display);font-weight:400;font-size:13px;line-height:1.05;white-space:nowrap;align-self:center;min-width:0}
.mini.sq{border-radius:2px;object-fit:contain}
.goods{display:flex;gap:3px;align-items:center}
.g{display:inline-flex;align-items:center;gap:1px;font-weight:700;font-size:13px;line-height:1;font-variant-numeric:tabular-nums;border-radius:9px;padding:1px 3px 1px 1px}
.g img{width:15px;height:15px;object-fit:contain}
.rival .g{font-size:12px;padding:1px 2px 1px 0;min-width:0} .rival .g img{width:13px;height:13px}
.g.full{background:var(--jade);color:var(--cream)}
.ico{display:inline-block;width:1.15em;height:1.15em;object-fit:contain;vertical-align:-.22em}
.mini{display:inline-block;width:12px;height:12px;object-fit:cover;object-position:50% 4%;border-radius:50%}

#prompt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:3px;padding:1px 3px;min-width:0}
#dir b{font-weight:400}
#dir.flip{animation:dirflip .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes dirflip{0%{scale:1}35%{scale:1.25;filter:drop-shadow(0 0 8px var(--sun))}100%{scale:1}}
#dir{font-family:var(--display);font-size:13px;line-height:1;min-height:34px;min-width:92px;padding:1px 10px 7px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
#say{margin:0;min-height:36px;padding:3px 12px 3px 26px;display:flex;align-items:center;font-size:13.5px;line-height:1.12;min-width:0}
#say span{display:block}
#menu{font-size:13px;min-height:44px;padding:2px 10px 3px 22px}

#street{position:relative;display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden}
#grid{position:relative;--cell:60px}
#empty{position:absolute;left:50%;top:50%;translate:-50% -50%;margin:0;white-space:nowrap}
.stall{position:absolute;left:0;top:0;width:var(--cell);height:var(--cell);transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s,height .45s}
#garland{position:absolute;left:0;right:0;top:0;height:34px;display:flex;justify-content:space-around;align-items:flex-start;pointer-events:none;border-top:2px solid var(--ink)}
#garland img{width:20px;height:auto;transform-origin:50% 0;animation:swing 3.2s ease-in-out infinite alternate,glow 2.4s ease-in-out infinite alternate}
#garland img:nth-child(odd){margin-top:5px;animation-duration:2.7s,2s}
@keyframes swing{from{rotate:-7deg}to{rotate:7deg}}
#street{padding-top:30px}
.stall .art{position:absolute;left:5%;top:9%;width:90%;height:89%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 3px 0 rgba(75,16,48,.5))}
.plate{position:absolute;left:0;top:0;width:40%;aspect-ratio:1;background:url(/art/ui-plate.webp) center/contain no-repeat;display:grid;place-items:center;font-family:var(--display);color:var(--navy);font-size:calc(var(--cell)*.2);line-height:1;padding-top:2%;z-index:2}
.lamps{position:absolute;right:1%;top:0;display:flex;gap:0;z-index:2}
.lamps img{width:calc(var(--cell)*.2);height:auto;margin-left:calc(var(--cell)*-.04);animation:glow 2.4s ease-in-out infinite alternate}
.lamps img:nth-child(2){animation-delay:-.8s} .lamps img:nth-child(3){animation-delay:-1.6s}
@keyframes glow{from{filter:drop-shadow(0 0 1px var(--sun))}to{filter:drop-shadow(0 0 5px var(--sun))}}
.stall .gd{position:absolute;left:0;bottom:1%;width:27%;height:27%;object-fit:contain;z-index:4;filter:drop-shadow(0 0 2px var(--cream)) drop-shadow(0 1px 0 var(--ink))}
.vend{position:absolute;left:27%;bottom:0;width:46%;height:52%;object-fit:cover;object-position:50% 0;z-index:3;filter:drop-shadow(0 0 1.5px var(--pc)) drop-shadow(0 0 1.5px var(--pc)) drop-shadow(0 0 2px var(--pc))}
.stall.leave{pointer-events:none;animation:leave .3s ease-in both}
@keyframes leave{to{opacity:0;scale:.6 .6;translate:0 14px}}
.stall.arrive{animation:arrive .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes arrive{from{opacity:0;scale:.2 .2;translate:0 -40px}to{opacity:1;scale:1 1;translate:0 0}}
.vend.hop{animation:hop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes hop{from{opacity:0;translate:0 -26px;scale:1.5}to{opacity:1;translate:0 0;scale:1}}
.stall[data-can="1"]::before{content:"";position:absolute;left:6%;right:6%;bottom:-2%;height:26%;border-radius:50%;background:radial-gradient(closest-side,var(--sun),rgba(255,197,49,0));animation:pulse 1.1s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:.45}to{opacity:1}}
.stall[aria-pressed="true"] .art,.stall.last .art{filter:drop-shadow(0 0 3px var(--cream)) drop-shadow(0 0 7px var(--sun))}
.stall:has(.flag){z-index:6}
.flag{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);z-index:5;font-family:var(--display);font-size:calc(var(--cell)*.2);line-height:1;white-space:nowrap;padding:.5em .7em .55em 1em;min-width:calc(var(--cell)*.9);text-align:center;animation:hop .3s both}

#mine{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 8px;min-width:0}
#mine .goods{gap:5px}
#mine .g{font-size:17px;color:var(--cream);padding:2px 7px 2px 3px;background:rgba(75,16,48,.55)}
#mine .g img{width:23px;height:23px}
#mine .g small{font-size:11px;opacity:.8;font-weight:500}
#mine .g.full{background:var(--jade)}
#mine .crew{display:inline-flex;align-items:center;gap:5px;font-size:13px;line-height:1.05;text-align:left;white-space:nowrap}
#mine .crew .mug{width:28px;height:28px}
#mine[data-tight] .g small{display:none} #mine[data-tight] .g{padding-right:5px}

#tray{display:flex;align-items:center;justify-content:center;gap:5px;padding:2px 4px;min-width:0}
.card{position:relative;width:min(70px,calc((100% - 8px - (var(--n,5) - 1)*5px)/var(--n,5)));height:100px;flex:0 0 auto;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:9px 5px 7px;transition:transform .14s}
.card .num{font-family:var(--display);font-size:22px;line-height:.9;color:var(--navy)}
.card .art{width:100%;height:100%;min-height:0;object-fit:contain}
.card .pay{display:flex;gap:1px;align-items:center;height:17px}
.card .pay img{width:15px;height:15px;object-fit:contain}
.card .pay .vend{position:absolute;left:auto;right:5px;bottom:auto;top:28px;width:22px;height:22px;border-radius:50%}
.card[data-legal="0"]{filter:saturate(.35) brightness(.8)}
.card.kept{filter:none;transform:translateY(8px) scale(.82) rotate(3deg);opacity:.92}
.card.kept:nth-of-type(even){transform:translateY(8px) scale(.82) rotate(-3deg)}
.card[aria-pressed="true"]{transform:translateY(-10px) rotate(-2deg);filter:drop-shadow(0 0 8px var(--sun)) drop-shadow(0 6px 0 var(--deep))}
.card.in{animation:dealin .4s cubic-bezier(.2,1.3,.4,1) both;animation-delay:calc(var(--i)*60ms)}
@keyframes dealin{from{opacity:0;translate:60px 30px;rotate:12deg}to{opacity:1;translate:0 0;rotate:0deg}}
.note{margin:0;padding:10px 22px 10px 34px;font-size:14px;line-height:1.2;max-width:100%;text-align:center}

#bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:0 6px 4px;min-width:0}

/* wide: the street takes the left, everything else stacks on the right */
@media (min-aspect-ratio:5/4){
  #table{grid-template-columns:minmax(0,1fr) clamp(300px,34vw,460px);grid-template-rows:var(--r-prompt) minmax(0,1fr) var(--r-mine) var(--r-tray) var(--r-bar)}
  #street{grid-column:1;grid-row:1 / -1}
  #prompt{grid-column:2;grid-row:1} #rivals{grid-column:2;grid-row:2;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));padding:3px} #mine{grid-column:2;grid-row:3} #tray{grid-column:2;grid-row:4} #bar{grid-column:2;grid-row:5}
  #home{grid-template-rows:none;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;padding:2svh 4vw}
  .mark{align-self:center;width:min(48vw,82svh,760px)}
}
@media (min-aspect-ratio:5/4) and (min-height:600px) and (min-width:1100px){
  :root{--r-prompt:52px;--r-mine:56px;--r-tray:150px;--r-bar:76px}
  .rival{grid-template-columns:44px auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:4px;padding:8px 26px} .rival .mug{width:44px;height:44px;grid-row:1 / 3} .rival .name{font-size:19px;grid-column:2} .rival .cnt{grid-column:3;grid-row:1;justify-content:flex-start;gap:12px;font-size:14px} .rival .goods{grid-column:2 / -1;grid-row:2;justify-content:flex-start;gap:8px} .rival .g{font-size:17px} .rival .g img{width:22px;height:22px} .mini{width:16px;height:16px}
  #say{font-size:17px;min-height:46px;padding-left:34px} #dir{font-size:17px;min-height:44px;min-width:92px} #menu{font-size:16px;min-height:44px}
  .card{width:min(84px,calc((100% - 8px - (var(--n,5) - 1)*5px)/var(--n,5)));height:132px;padding:12px 6px 9px} .card .pay .vend{top:38px;width:26px;height:26px} .card .num{font-size:28px} .card .pay{height:21px} .card .pay img{width:19px;height:19px}
  .act{font-size:22px;min-height:56px}
  #mine .g{font-size:20px} #mine .g img{width:28px;height:28px} #mine .crew{font-size:15px}
}
@media (min-height:760px) and (max-aspect-ratio:5/4){
  :root{--r-rivals:84px;--r-prompt:48px;--r-mine:46px;--r-tray:132px;--r-bar:68px}
  .card{height:118px;width:min(80px,calc((100% - 8px - (var(--n,5) - 1)*5px)/var(--n,5)))} .card .num{font-size:25px}
  .rival .name{font-size:14px} #say{font-size:15px}
}

/* ---------- sheets ---------- */
#sheet{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:12px;background:rgba(75,16,48,.72)}
.panel{width:min(100%,430px);max-height:100%;display:grid;gap:10px;justify-items:center;padding:34px 30px 26px;text-align:center;animation:rise .28s cubic-bezier(.2,1.3,.4,1) both}
@keyframes rise{from{opacity:0;translate:0 30px;scale:.92}to{opacity:1;translate:0 0;scale:1}}
.panel h2{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05;margin:0;padding:8px 34px 16px;min-width:210px}
.panel p{margin:0;font-size:15px;line-height:1.25}
.panel .row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.lines{display:grid;gap:5px;width:100%;margin:0;padding:0;list-style:none;text-align:left}
.lines li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:8px;font-size:15px;line-height:1.15}
.lines .mug{grid-row:auto}
.lines .got{display:flex;gap:6px;align-items:center;font-weight:700}
.lines .got img{width:19px;height:19px;object-fit:contain}
.lines li.win{font-weight:700}
.step{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:34px;color:var(--navy)}
.step button{width:48px;height:48px;font-family:var(--display);font-size:30px;line-height:1;border-radius:50%;background:var(--navy);color:var(--cream)}
.step button[disabled]{opacity:.3}
.pays{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;width:100%}
.payg{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-height:50px;padding:2px 6px 2px 10px;border-radius:10px;background:rgba(29,42,107,.1);font-size:15px;text-align:left}
.step.sm{gap:8px;font-size:24px} .step.sm button{width:44px;height:44px;font-size:26px} .step.sm b{min-width:1.2ch;text-align:center;font-weight:400}
.payg img{width:26px;height:26px;object-fit:contain}
.payg b{font-family:var(--display);font-size:22px;color:var(--navy);font-weight:400;min-width:1ch;text-align:right}
.payg[aria-pressed="true"]{background:var(--sun)}
.payg[disabled]{opacity:.35}
.hero-mug{width:120px;height:120px;object-fit:cover;object-position:50% 2%;border-radius:50%;box-shadow:0 0 0 5px var(--pc),0 0 0 9px var(--cream)}
.how{display:grid;gap:8px;text-align:left;width:100%;margin:0;padding:0;list-style:none}
.how li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:10px;align-items:center;font-size:14.5px;line-height:1.22}
.how img{width:42px;height:42px;object-fit:contain}
.cred{display:grid;gap:6px;text-align:left;font-size:14px;line-height:1.25;width:100%;max-height:52svh;overflow:auto;margin:0;padding:0 0 26px;list-style:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 30px),transparent);mask-image:linear-gradient(#000 calc(100% - 30px),transparent)}
.cred b{font-weight:700}
.opts{display:grid;gap:8px;width:100%;text-align:left;font-size:14px}
.opts .row{justify-content:flex-start;gap:4px;align-items:center}
.opt{min-height:44px;min-width:44px;padding:4px 12px;border-radius:9px;background:rgba(29,42,107,.12);font-weight:700}
.opt[aria-pressed="true"]{background:var(--navy);color:var(--cream)}

.flyer{position:fixed;left:0;top:0;z-index:30;pointer-events:none;height:auto}
#fly{position:fixed;inset:0;pointer-events:none;z-index:30}
#toast{position:absolute;left:50%;bottom:calc(var(--r-bar) + var(--r-tray) + 6px);translate:-50% 0;z-index:40;max-width:min(92%,420px);padding:10px 18px;border-radius:12px;background:var(--navy);color:var(--cream);font-size:15px;line-height:1.2;text-align:center;opacity:0;pointer-events:none;transition:opacity .2s}
#toast.on{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

[data-types="5"] .rival .g{font-size:11px;padding:0 1px 0 0} [data-types="5"] .rival .g img{width:12px;height:12px}
[data-types="5"] #mine .g{font-size:14px;padding:2px 4px 2px 2px} [data-types="5"] #mine .g img{width:18px;height:18px} [data-types="5"] #mine .g small{display:none}

@media (min-aspect-ratio:5/4) and (min-height:600px) and (min-width:1100px){ .door{gap:16px} .act.big{font-size:40px;min-height:96px;min-width:300px} .lvl{font-size:22px;min-height:56px;min-width:124px;padding-left:36px} .link{font-size:18px;min-height:50px;padding-left:32px} #home .links .link{font-size:18px} }

/* a phone on its side: street left, a 320px stack right, rivals in a row, the prompt on two lines */
@media (min-aspect-ratio:5/4) and (max-height:599px), (min-aspect-ratio:5/4) and (max-width:1099.9px){
  :root{--r-mine:36px;--r-bar:52px}
  #table{grid-template-columns:minmax(0,1fr) clamp(320px,38vw,400px);grid-template-rows:84px var(--r-rivals) var(--r-mine) minmax(0,1fr) var(--r-bar)}
  #prompt{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:46px 38px;gap:0 3px}
  #dir{grid-column:1;grid-row:1;justify-self:start} #menu{grid-column:3;grid-row:1} #say{grid-column:1 / -1;grid-row:2;font-size:13px}
  #rivals{grid-template-columns:repeat(3,1fr);grid-template-rows:none;padding:3px 3px 0}
  #mine{padding:0 6px} #mine .goods{gap:3px} #mine .g{font-size:15px;padding:2px 5px 2px 2px} #mine .g img{width:19px;height:19px} #mine .g small{font-size:10px}
  #mine .crew{font-size:12px} #mine .crew .mug{width:24px;height:24px}
  #mine[data-tight] .g{padding-right:4px}
  #bar{padding:0 6px 2px}
}
@media (max-height:500px){
  #sheet{padding:6px}
  .panel{width:min(100%,620px);padding:18px 28px 16px;gap:6px}
  .panel h2{font-size:20px;padding:5px 30px 12px}
  .hero-mug{width:56px;height:56px;box-shadow:0 0 0 3px var(--pc),0 0 0 6px var(--cream)}
  .lines,.pays,.how{grid-template-columns:1fr 1fr;column-gap:16px}
  .opts{grid-template-columns:1fr 1fr;column-gap:16px;gap:4px 16px} .opts>div:last-child{grid-column:1 / -1}
  .how li{font-size:13px;grid-template-columns:30px minmax(0,1fr);gap:8px} .how img{width:30px;height:30px}
  .cred{max-height:34svh}
  .levels{gap:3px} .lvl{font-size:15px;min-width:80px;padding:2px 10px 3px 22px} .act.big{font-size:26px;min-height:60px;min-width:190px}
}
@media (max-width:374px) and (max-aspect-ratio:5/4){ #mine{padding:0 6px;gap:4px} #mine .goods{gap:3px} #mine .g{font-size:16px;padding:2px 5px 2px 2px} #mine .g img{width:21px;height:21px} #mine .crew{font-size:12.5px} }
.rival[data-tight] .g{font-size:11px;padding:0 1px 0 0;letter-spacing:-.3px} .rival[data-tight] .g img{width:11px;height:11px}
@media (min-aspect-ratio:5/4) and (min-height:600px) and (min-width:1100px){ .rival[data-tight] .g{font-size:17px;letter-spacing:0;padding:1px 3px 1px 1px} .rival[data-tight] .g img{width:22px;height:22px} }
@media (min-aspect-ratio:5/4) and (min-height:600px) and (min-width:1100px){
  .rival{grid-template-columns:64px auto minmax(0,1fr);column-gap:14px;row-gap:6px;padding:8px 30px} .rival .mug{width:64px;height:64px} .rival .name{font-size:25px} .rival .cnt{font-size:16px;gap:14px} .rival .cnt .mini{width:20px;height:20px}
  .rival .g,.rival[data-tight] .g{font-size:21px;gap:2px} .rival .g img,.rival[data-tight] .g img{width:26px;height:26px} .rival .goods{gap:10px}
  .panel{width:min(100%,540px);padding:40px 40px 30px;gap:12px} .panel h2{font-size:30px;padding:10px 44px 20px} .panel p{font-size:17px} .lines li{font-size:18px;grid-template-columns:38px minmax(0,1fr) auto} .lines .mug{width:38px;height:38px} .lines .got img{width:24px;height:24px} .lines .g{font-size:17px} .lines .g img{width:22px;height:22px}
  .how li{font-size:16px} .cred{font-size:16px} .payg{font-size:17px;min-height:56px}
}

/* ---------- win by owning: one purse of coins, and the kinds of stall a player owns ---------- */
.purse{display:inline-flex;align-items:center;gap:2px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kinds{display:inline-flex;gap:4px;align-items:center}
.k{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;outline:1.5px dashed rgba(75,16,48,.4);outline-offset:-1.5px}
.k img{width:12px;height:12px;object-fit:contain;opacity:.45;filter:grayscale(1)}
.k.has{background:var(--jade);outline:2px solid var(--cream);outline-offset:-1px;box-shadow:0 0 0 1px var(--ink)}
.k.has img{opacity:1;filter:none;width:13px;height:13px}
.rival .goods:has(.k){justify-content:space-around}
#mine .purse{font-size:19px;color:var(--cream);padding:3px 9px 3px 4px;border-radius:14px;background:rgba(75,16,48,.55)}
#mine .purse img{width:24px;height:24px;object-fit:contain}
#mine .k{width:30px;height:30px;background:rgba(75,16,48,.55);outline-color:rgba(255,242,216,.45)} #mine .k img{width:20px;height:20px;opacity:.6}
#mine .k.has{background:var(--jade);outline-color:var(--cream)} #mine .k.has img{width:21px;height:21px;opacity:1}
.lines .got .purse{gap:3px} .lines .k{width:25px;height:25px} .lines .got .k img{width:17px;height:17px}
.card .kind{position:absolute;right:7px;top:8px;width:14px;height:14px;object-fit:contain;filter:drop-shadow(0 1px 0 rgba(75,16,48,.35))}
.card:has(.kind) .num{justify-self:start;padding-left:4px}

/* the first player: a token that sits on whoever leads, and travels when the lead changes */
.first{font-style:normal;font-family:var(--display);font-size:11px;line-height:1;display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--sun);color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 0 9px 1px var(--sun)}
.first.pop{animation:firstpop .7s cubic-bezier(.2,1.6,.4,1)}
@keyframes firstpop{0%{scale:.2;rotate:-50deg}55%{scale:1.7}100%{scale:1;rotate:0deg}}
.rival .name{grid-column:2;grid-row:1}
.rival .first{grid-column:2;grid-row:1;justify-self:end;align-self:center;width:24px;height:24px;margin-right:1px}
.rival[data-lead] .name{margin-right:29px}
.rival[data-lead],#mine[data-lead] .crew .mug{--lead:1}
.rival[data-lead] .mug,#mine[data-lead] .crew .mug{box-shadow:0 0 0 2.5px var(--pc),0 0 0 5px var(--sun)}
#mine .first{width:30px;height:30px;font-size:12.5px}
@media (min-aspect-ratio:5/4) and (min-height:600px) and (min-width:1100px){
  .rival .first{grid-column:3;width:42px;height:42px;font-size:18px} .rival[data-lead] .name{margin-right:0}
  .rival .k{width:30px;height:30px} .rival .k img{width:20px;height:20px} .rival .k.has img{width:22px;height:22px} .rival .goods:has(.k){justify-content:flex-start;gap:10px}
  #mine .first{width:40px;height:40px;font-size:16px} #mine .purse{font-size:22px} #mine .purse img{width:28px;height:28px} #mine .k{width:36px;height:36px} #mine .k img{width:24px;height:24px}
  .card .kind{width:18px;height:18px;right:9px;top:11px}
  .lines .k{width:30px;height:30px} .lines .got .k img{width:20px;height:20px}
}
@media (min-aspect-ratio:5/4) and (max-height:599px), (min-aspect-ratio:5/4) and (max-width:1099.9px){
  #mine .purse{font-size:16px;padding:2px 7px 2px 3px} #mine .purse img{width:20px;height:20px} #mine .k{width:25px;height:25px} #mine .k img,#mine .k.has img{width:17px;height:17px} #mine .first{width:26px;height:26px;font-size:11px} #mine .kinds{gap:3px}
}
@media (max-width:374px) and (max-aspect-ratio:5/4){ #mine .purse{font-size:17px;padding:3px 7px 3px 3px} #mine .purse img{width:21px;height:21px} #mine .k{width:27px;height:27px} #mine .k img,#mine .k.has img{width:18px;height:18px} #mine .kinds{gap:3px} #mine .first{width:27px;height:27px;font-size:11.5px} }
.how .ico{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em}
.rival .k img,.lines .k img{opacity:.6;filter:grayscale(1) brightness(.62)} .rival .k.has img,.lines .k.has img{opacity:1;filter:none}
.first{animation:firstglow 1.3s ease-in-out infinite alternate}
@keyframes firstglow{from{box-shadow:0 0 0 2px var(--ink),0 0 4px 0 var(--sun)}to{box-shadow:0 0 0 2px var(--ink),0 0 12px 3px var(--sun)}}
.first.pop{animation:firstpop .7s cubic-bezier(.2,1.6,.4,1)}
.card:has(.kind) .num{font-size:20px}
@media (min-aspect-ratio:5/4) and (min-height:600px) and (min-width:1100px){ .card:has(.kind) .num{font-size:25px} .rival .first{width:50px;height:50px;font-size:21px} }