/* Shared Rando Spin styles (DID game at / and Spin to Shop at /shop). */
@font-face{font-family:Sym2;src:url(/collectors/fonts/NotoSansSymbols2-Regular.ttf)}
@font-face{font-family:NMath;src:url(/collectors/fonts/NotoSansMath-Regular.ttf);unicode-range:U+1D400-1D7FF}
:root{
 --jungle:#163015;--jungle2:#186118;--leaf:#2f8f2f;--site-green:#008000;
 --banana:#ffd700;--gold:#e5d32a;--pom:#f34443;--pom-dk:#b93c38;--avo:#e2ef6f;--avo-dk:#87a023;
 --paper:#f8f7f2;--paper2:#efe9d8;--ink:#2e2f39;--plum:#3c2037;--sky:#5cc8ff;
 --display:'Bungee','Courier Prime',NMath,system-ui,sans-serif;
 --mono:'Courier Prime',NMath,'Noto Color Emoji',Sym2,ui-monospace,monospace;
 --serif:'Abril Fatface',Georgia,serif;
 --hard:4px 4px 0 #000;
}
*{box-sizing:border-box}
html{background:var(--jungle)}
body{margin:0;color:var(--paper);font:17px/1.45 var(--mono);min-height:100vh;
 background:radial-gradient(1200px 500px at 50% -10%,#2a6b2a55,transparent 70%),
  repeating-linear-gradient(45deg,#ffffff05 0 14px,transparent 14px 28px),var(--jungle)}
a{color:var(--banana);text-decoration:none;border-bottom:2px dotted currentColor}a:hover{color:var(--avo)}
.hide{display:none!important}
.mono{font-family:var(--mono);font-size:12px;word-break:break-all}
.muted{opacity:.78;font-size:14px}
.pbar{position:sticky;top:0;z-index:40;text-align:center;padding:6px 8px;background:repeating-linear-gradient(-45deg,#ffd700 0 18px,#111 18px 36px);border-bottom:3px solid #000}
.pbar span{display:inline-block;background:var(--pom);color:#fff;font:400 clamp(13px,2.4vw,18px)/1.2 var(--display);letter-spacing:1px;padding:5px 14px;border:3px solid #000;box-shadow:3px 3px 0 #000}
/* ===== ticker (90s-web marquee, from mondomonkey.com) ===== */
.ticker{background:#000;color:var(--banana);font:700 14px/1 var(--mono);white-space:nowrap;overflow:hidden;border-bottom:3px solid var(--site-green)}
.ticker span{display:inline-block;padding:9px 0;animation:tick 38s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* ===== hero ===== */
.hero{position:relative;overflow:hidden;border-bottom:6px solid #000;
 background:linear-gradient(180deg,#0b1a0bcc,#163015ee 70%,var(--jungle)),url(/collectors/img/pattern.webp) center/1200px auto repeat}
.hero-in{max-width:1000px;margin:0 auto;padding:22px 16px 26px;display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:center;position:relative;z-index:1}
.chimp{width:200px;filter:drop-shadow(6px 6px 0 #000) drop-shadow(0 0 22px #ffd70055);animation:bob 4s ease-in-out infinite;transform-origin:50% 80%}
.chimp:hover{transform:scaleX(-1)}
@keyframes bob{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}
.fancy{font-family:NMath,'Noto Color Emoji',Sym2,serif;font-size:20px;color:var(--avo);letter-spacing:1px;margin-bottom:4px}
.ransom{display:flex;flex-wrap:wrap;gap:4px 3px;align-items:center;line-height:1}
.ransom .w{display:inline-flex;gap:3px;margin-right:12px}
.ransom b{display:inline-block;padding:.08em .14em .02em;box-shadow:2px 3px 0 #0008;font-weight:400}
.r0{background:var(--paper);color:var(--ink);font-family:var(--serif)}
.r1{background:var(--pom);color:#fff;font-family:var(--display)}
.r2{background:var(--banana);color:#111;font-family:var(--mono);font-weight:700!important}
.r3{background:var(--ink);color:var(--paper);font-family:var(--serif)}
.r4{background:var(--avo);color:var(--jungle);font-family:var(--display)}
.r5{background:#fff;color:#1f4fbf;font-family:var(--display)}
h1.ransom{font-size:clamp(34px,7vw,68px);margin:0}
.tagline{margin:12px 0 0;font:700 15px/1.4 var(--mono);color:var(--paper)}
.tagline em{font-style:normal;color:var(--banana)}
.stamp{display:inline-block;margin-top:12px;border:3px dashed var(--pom);color:var(--pom);background:#0008;padding:4px 10px;
 font:400 13px/1.2 var(--display);letter-spacing:1px;transform:rotate(-3deg)}
.sticker{position:absolute;z-index:0;filter:drop-shadow(3px 3px 0 #000);pointer-events:none}
.s1{width:74px;right:4%;top:18px;transform:rotate(14deg)}.s2{width:62px;right:17%;bottom:10px;transform:rotate(-12deg)}.s3{width:58px;right:28%;top:12px;transform:rotate(-24deg)}
/* swiss railway clock (time-traveling chimp) */
.clock{width:64px;height:64px;position:absolute;right:5%;bottom:20px;z-index:0}
.clock .h,.clock .m,.clock .s{transform-origin:50px 50px}
.clock .m{animation:spin 6s linear infinite}.clock .h{animation:spin 72s linear infinite}.clock .s{animation:spin 1.5s steps(60) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* ===== layout + cards ===== */
main{max-width:1000px;margin:0 auto;padding:6px 16px 30px}
.card{position:relative;background:var(--paper);color:var(--ink);border:3px solid #000;box-shadow:6px 6px 0 #000;padding:18px;margin:22px 0;border-radius:4px}
.card.dark{background:#0d1f0d;color:var(--paper);border-color:#000}
.tape:before,.tape:after{content:"";position:absolute;width:86px;height:24px;background:#ffd70099;top:-13px;box-shadow:0 1px 0 #0003}
.tape:before{left:18px;transform:rotate(-5deg)}.tape:after{right:18px;transform:rotate(4deg)}
.card .muted{color:#4a4a55;opacity:1}.card:not(.dark) a{color:var(--jungle2);border-bottom-color:var(--pom)}.card:not(.dark) a:hover{color:var(--pom-dk)}.card.dark .muted{color:#cfe6c0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.row>*{flex:1}
input,select{background:#fff;color:var(--ink);border:3px solid #000;border-radius:3px;padding:11px;font:700 15px var(--mono);width:100%;box-shadow:inset 2px 2px 0 #0002}
input:focus,select:focus{outline:3px solid var(--banana);outline-offset:1px}
button{background:var(--banana);color:#111;border:3px solid #000;border-radius:4px;padding:12px 18px;font:400 16px/1 var(--display);letter-spacing:.5px;cursor:pointer;box-shadow:var(--hard);transition:transform .08s,box-shadow .08s}
button:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 #000}button:active{transform:translate(3px,3px);box-shadow:1px 1px 0 #000}
button.sec{background:#fff}button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:var(--hard)}
.h2{font:400 22px/1.1 var(--display);margin:0 0 10px;letter-spacing:.5px}
pre#chal{white-space:pre-wrap;background:#fff;border:2px dashed #0006;padding:8px;font-size:12px}
/* ===== player bar / spins counter ===== */
#player{display:grid;grid-template-columns:1fr minmax(0,400px);gap:10px;align-items:center}
#pname{font:400 24px/1.1 var(--display);color:var(--banana);word-break:break-word}
.pill{display:inline-block;background:var(--avo);color:var(--jungle);border:2px solid #000;padding:4px 10px;font:700 14px var(--mono);box-shadow:2px 2px 0 #000;margin:3px;transform:rotate(-1.5deg)}
#pleft{background:var(--banana);color:#111;transform:rotate(1.5deg)}
.bananas{font-size:30px;letter-spacing:2px;text-align:right;line-height:1}
.bananas i{font-style:normal;display:inline-block}.bananas i.used{filter:grayscale(1) opacity(.3);transform:rotate(90deg)}
#inelig{color:var(--pom);font-weight:700;grid-column:1/-1}
/* ===== the strip ===== */
#wheel{position:relative;overflow:hidden;height:276px;background:#000;border:3px solid #000;border-radius:4px;
 background:linear-gradient(#000 0 0) padding-box,#000}
#wheel:before,#wheel:after{content:"";position:absolute;left:0;right:0;height:14px;z-index:2;
 background:repeating-linear-gradient(90deg,transparent 0 10px,#e9e3cf 10px 22px,transparent 22px 34px) center/34px 8px repeat-x}
#wheel:before{top:4px}#wheel:after{bottom:4px}
#track{position:absolute;left:0;right:0;top:26px;height:230px}
.slot{position:absolute;left:0;top:0;will-change:transform;backface-visibility:hidden}
.tile{width:160px;margin:0 6px;flex:none;background:var(--paper);color:var(--ink);border:2px solid #000;padding:6px 6px 8px;text-align:center;box-shadow:3px 3px 0 #0009}
.tile.re{transform:rotate(-1.5deg)}.tile.ro{transform:rotate(1.2deg)}
.tile img{width:144px;height:144px;object-fit:cover;background:#222;display:block;margin:0 auto;border:1px solid #000}
.tile .n{font:400 17px/1 var(--display);color:var(--pom-dk);margin:2px 0 6px}
.tile .e{font-size:26px;margin-top:6px;font-family:'Noto Color Emoji',Sym2,sans-serif;line-height:1}
#needle{position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:var(--pom);z-index:3;box-shadow:0 0 0 2px #000,0 0 18px var(--pom)}
#needle:before,#needle:after{content:"";position:absolute;left:-11px;border:14px solid transparent}
#needle:before{top:-2px;border-top-color:var(--banana);filter:drop-shadow(0 2px 0 #000)}#needle:after{bottom:-2px;border-bottom-color:var(--banana)}
.idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--banana);font:400 22px var(--display);text-align:center;padding:20px;z-index:1}
.idle img{width:110px;animation:bob 3s ease-in-out infinite}
#wheel.waiting .idle{display:flex!important}
#spinbtn{width:100%;font-size:30px;padding:16px;background:var(--pom);color:#fff;text-shadow:2px 2px 0 #000;margin-top:16px}
#spinbtn:not(:disabled){animation:wiggle 2.6s ease-in-out infinite}
@keyframes wiggle{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(-1.4deg)}93%{transform:rotate(1.4deg)}96%{transform:rotate(-.8deg)}}
#fair{color:var(--banana);font-weight:700;margin:12px 0 0}#fair:empty{display:none}
/* ===== results ===== */
#result{padding:20px}
.res{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
.res>img{width:260px;height:260px;object-fit:cover;border:3px solid #000;box-shadow:6px 6px 0 #000;transform:rotate(-2deg);background:#222}
.banner{margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.banner .ransom .w:last-child{margin-right:0}.banner .ransom{font-size:clamp(20px,3.2vw,30px)}
.banner .emo{font-size:30px}
.rname{font:700 19px/1.3 var(--mono)}
.rnum{font:400 15px var(--display)}.rnum b{font-size:24px;color:var(--pom-dk);font-weight:400}
.big-e{font-size:42px;font-family:'Noto Color Emoji',Sym2,sans-serif;letter-spacing:2px;margin:4px 0}
.tier{display:inline-block;margin:10px 0;padding:10px 16px;border:3px solid #000;box-shadow:var(--hard);font:400 19px/1.2 var(--display);transform:rotate(-1.5deg);background:var(--paper2)}
.tier .muted{display:block;font:700 13px var(--mono);opacity:.85;color:inherit}
.tier.t1{background:var(--banana);color:#111}.tier.t2{background:var(--avo);color:var(--jungle)}
.tier.t3{background:var(--pom);color:#fff;animation:glow 1.2s ease-in-out infinite alternate}
@keyframes glow{from{box-shadow:var(--hard),0 0 0 #f34443}to{box-shadow:var(--hard),0 0 28px #ffd700}}
.teststamp{display:inline-block;margin:0 0 10px;background:var(--plum);color:var(--banana);border:3px dashed var(--banana);padding:6px 12px;font:400 15px var(--display);transform:rotate(-1deg)}
#ptest{background:var(--plum);color:var(--banana)}
.mock{display:inline-block;background:var(--pom);color:#fff;font:700 12px var(--mono);padding:2px 8px;border:2px solid #000;transform:rotate(-2deg)}
.offers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:10px 0}
.offer{position:relative;background:#fff;border:3px solid #000;padding:14px 14px 12px 34px;box-shadow:5px 5px 0 #000;border-radius:4px 22px 4px 4px}
.offer:before{content:"";position:absolute;left:11px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--jungle);border:2px solid #000}
.offer:nth-child(1){transform:rotate(-1deg)}.offer:nth-child(2){transform:rotate(1deg)}
.offer .price{font:400 28px/1.1 var(--display);color:var(--jungle2)}
.offer textarea{width:100%;height:58px;margin:6px 0;background:#f4f1e6;color:#264d26;border:2px solid #000;font:12px var(--mono)}
.cd{font:700 14px var(--mono);color:var(--pom-dk);margin:4px 0}.cd.exp{color:#999}
#buyout textarea{width:100%;height:64px;background:#f4f1e6;border:2px solid #000;font:12px var(--mono)}
.confetti{position:fixed;top:-60px;font-size:34px;z-index:50;pointer-events:none;animation:fall 2.8s cubic-bezier(.3,.6,.5,1) forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
/* ===== panels + footer ===== */
details.card summary{cursor:pointer;list-style:none;font:400 22px var(--display)}
details.card summary::-webkit-details-marker{display:none}
details.card summary:after{content:" ＋";color:var(--pom)}details[open].card summary:after{content:" －"}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}
.tiers>div{border:3px solid #000;padding:10px;text-align:center;box-shadow:3px 3px 0 #000;background:var(--paper2)}
.tiers>div:nth-child(2){background:var(--banana)}.tiers>div:nth-child(3){background:var(--avo)}.tiers>div:nth-child(4){background:var(--pom);color:#fff}
.tiers .b{font-size:30px}.tiers .p{font:400 18px var(--display)}.tiers .y{font:700 13px var(--mono)}
.rules li{margin:4px 0}
footer{background:#000;color:var(--site-green);border-top:6px solid var(--banana);margin-top:20px;padding:22px 16px 30px;text-align:center}
footer .np{font:400 clamp(18px,3vw,26px)/1.2 var(--display);color:var(--banana);letter-spacing:1px}
footer .np span{color:var(--pom)}
footer p{margin:8px 0;font-size:14px}footer .did{color:#3bd13b;font-size:12px;word-break:break-all}
footer .bb{font:400 14px var(--display);color:var(--avo)}
@media(max-width:700px){
 body{font-size:16px}.hero-in{grid-template-columns:1fr;text-align:center;justify-items:center}.chimp{width:130px}
 .ransom{justify-content:center}.clock,.s3{display:none}.s1{width:50px;top:10px;right:10px}.s2{width:44px;left:10px;right:auto;top:10px;bottom:auto}
 #player{grid-template-columns:1fr}.bananas{text-align:left}
 .res{grid-template-columns:1fr}.res>img{width:100%;max-width:300px;height:auto;aspect-ratio:1;margin:0 auto}
 .offers{grid-template-columns:1fr}.tiers{grid-template-columns:1fr 1fr}
 #buybtn{flex:1 1 100%}#bidamt,#bidcur{flex:1 1 40%}
 .tile{width:128px}.tile img{width:112px;height:112px}#wheel{height:242px}
}
.sfxbtn{position:fixed;right:14px;bottom:14px;z-index:60;background:var(--banana);color:#111;border:3px solid #000;border-radius:999px;padding:10px 16px;font:400 14px/1 var(--display);box-shadow:var(--hard);cursor:pointer}
.sfxbtn[aria-pressed=false]{background:#fff;color:#555}
.sfxbtn b{font-weight:400}
@media(max-width:700px){.sfxbtn{right:10px;bottom:10px;padding:9px 13px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.ticker span{padding-left:16px}}
/* ===== DID game "art" reel (index.html only: #wheel.art). Image first: no Rando number / emojis on the tiles, just title + collection number.
   Tile width follows the wheel (container query): ~44% of the wheel on desktop, ~66% on phones, so the neighbours stay visible. ===== */
#wheel.art{container-type:inline-size;height:auto;padding:26px 0}
#wheel.art #track{position:relative;top:0;--tw:clamp(200px,max(44cqw,min(66cqw,290px)),460px);height:calc((var(--tw) - 20px)*.75 + 84px)}
#wheel.art .tile{width:var(--tw);margin:0 8px;padding:8px 8px 9px;box-shadow:4px 4px 0 #0009}
#wheel.art .tile.re{transform:rotate(-1deg)}#wheel.art .tile.ro{transform:rotate(.8deg)}
#wheel.art .tile img{width:100%;height:calc((var(--tw) - 20px)*.75);object-fit:contain;background:#111;border:2px solid #000}
#wheel.art .tile .ti{font:700 clamp(13px,1.7cqw,16px)/1.25 var(--mono);color:var(--ink);margin:7px 2px 0;height:2.5em;overflow:hidden;
 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word}
#wheel.art .tile .ed{font:400 clamp(15px,2cqw,19px)/1 var(--display);color:var(--pom-dk);margin-top:5px;letter-spacing:1px}
.res.artres{grid-template-columns:minmax(0,400px) 1fr}
.res.artres>img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain;max-height:420px}
/* ===== NFT info card: reads like MintGarden's NFT details / attributes panel, dressed in ransom-note jungle ===== */
.nftinfo{background:var(--paper);padding:0;overflow:hidden}
.nftinfo .mg-top{background:var(--ink);color:var(--paper);padding:14px 18px 12px;border-bottom:3px solid #000}
.nftinfo .mg-top a.mg-coll{display:inline-flex;align-items:center;gap:6px;color:var(--banana);font:700 15px var(--mono);text-decoration:none;border:0}
.nftinfo .mg-coll:hover{text-decoration:underline}
.nftinfo .mg-check{display:inline-block;width:16px;height:16px;border-radius:50%;background:var(--sky);color:#000;font:700 11px/16px var(--mono);text-align:center}
.nftinfo h3{margin:6px 0 0;font:700 clamp(19px,2.6vw,26px)/1.25 var(--mono);word-break:break-word}
.nftinfo .mg-body{padding:16px 18px 18px}
.nftinfo .mg-people{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.nftinfo .mg-person{border:2px solid #000;border-radius:10px;padding:8px 10px;background:#fff;box-shadow:3px 3px 0 #000}
.nftinfo .mg-k{font:700 12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:1px;color:#6b6c78}
.nftinfo .mg-v{font:700 15px/1.3 var(--mono);color:var(--ink);word-break:break-word;margin-top:2px}
.nftinfo .mg-v a{color:#1f4fbf}
.nftinfo .mg-v .st{display:inline-block;padding:1px 8px;border:2px solid #000;border-radius:999px;font:400 12px/1.5 var(--display);transform:rotate(-1.5deg)}
.st.UNSOLD{background:var(--avo)}.st.WIN,.st.TEST_WIN,.st.WIN_ALREADY_PAID{background:var(--banana)}.st.OTHER_OWNER{background:var(--sky)}.st.TED_HELD{background:var(--pom);color:#fff}
.nftinfo h4{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font:400 18px/1 var(--display);letter-spacing:.5px}
.nftinfo h4:after{content:"";flex:1;border-top:3px dashed #0003}
.nftinfo .mg-attrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:16px}
.nftinfo .mg-attr{background:#eaf3ff;border:2px solid #000;border-radius:10px;padding:10px 12px;text-align:center;box-shadow:3px 3px 0 #000}
.nftinfo .mg-attr:nth-child(2n){background:#fff6cc}
.nftinfo .mg-attr .mg-k{color:#1f4fbf;text-transform:none;font:700 21px/1.2 system-ui,sans-serif;letter-spacing:0}
.nftinfo .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.nftinfo .chip{display:inline-block;background:#fff;border:2px solid #000;border-radius:999px;padding:3px 12px;font:400 20px/1.2 var(--display);color:var(--pom-dk);box-shadow:2px 2px 0 #000}
.nftinfo .chip.emo{font:28px/1.15 'Noto Color Emoji',Sym2,sans-serif;padding:2px 10px}
.nftinfo .chip:nth-child(odd){transform:rotate(-2deg)}.nftinfo .chip:nth-child(even){transform:rotate(1.5deg)}
.nftinfo .mg-details{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font:15px/1.35 var(--mono);margin:0 0 16px}
.nftinfo .mg-details dt{font-weight:700;color:#6b6c78}.nftinfo .mg-details dd{margin:0;word-break:break-all}
.nftinfo a.mg-link{display:inline-block;background:var(--banana);color:#111;border:3px solid #000;border-radius:999px;padding:10px 18px;font:400 16px/1 var(--display);text-decoration:none;box-shadow:var(--hard)}
.nftinfo a.mg-link:hover{color:#111;transform:translate(-1px,-1px)}
@media(max-width:700px){.res.artres{grid-template-columns:1fr}.res.artres>img{max-width:100%}.nftinfo .mg-details{grid-template-columns:1fr}.nftinfo .mg-details dd{margin-bottom:6px}}