/* ========================================================== OVERTHINK ARCADE — shared Y2K chassis Every app sets --a/--b/--ink/--paper + a [data-skin] on ========================================================== */ *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} :root{ --a:#00b7ff; --b:#ff2fa0; --ink:#0a0a1a; --paper:#eef6ff; --chrome1:#ffffff; --chrome2:#c9d4e2; --chrome3:#8a97a8; --font-ui:"Trebuchet MS","Verdana",sans-serif; --font-disp:"Impact","Haettenschweiler","Arial Black",sans-serif; --font-mono:"Courier New",monospace; } body{ font-family:var(--font-ui); color:var(--ink); background:var(--paper); min-height:100vh; padding:14px 10px 60px; overflow-x:hidden; cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2l7 18 2.5-7.5L20 10z' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 3 2, auto; } /* ---------- SKINS: each app gets a different wallpaper vibe ---------- */ body[data-skin="chrome"]{background: repeating-linear-gradient(135deg,rgba(255,255,255,.5) 0 12px,transparent 12px 24px), linear-gradient(160deg,var(--paper),color-mix(in srgb,var(--a) 22%,var(--paper)));} body[data-skin="bubble"]{background: radial-gradient(circle at 12% 18%,color-mix(in srgb,var(--b) 35%,transparent) 0 9px,transparent 10px), radial-gradient(circle at 78% 62%,color-mix(in srgb,var(--a) 35%,transparent) 0 14px,transparent 15px), radial-gradient(circle at 42% 88%,color-mix(in srgb,var(--b) 25%,transparent) 0 6px,transparent 7px), var(--paper);background-size:180px 180px,240px 240px,140px 140px,auto;} body[data-skin="grid"]{background: linear-gradient(color-mix(in srgb,var(--a) 30%,transparent) 1px,transparent 1px) 0 0/28px 28px, linear-gradient(90deg,color-mix(in srgb,var(--a) 30%,transparent) 1px,transparent 1px) 0 0/28px 28px, var(--paper);} body[data-skin="stars"]{background: radial-gradient(2px 2px at 20% 30%,var(--b),transparent), radial-gradient(2px 2px at 70% 20%,var(--a),transparent), radial-gradient(3px 3px at 45% 70%,var(--b),transparent), radial-gradient(2px 2px at 88% 80%,var(--a),transparent), linear-gradient(190deg,var(--ink),color-mix(in srgb,var(--a) 30%,var(--ink))); background-size:300px 300px,320px 320px,260px 260px,340px 340px,auto;color:var(--paper);} body[data-skin="stripe"]{background: repeating-linear-gradient(45deg,color-mix(in srgb,var(--b) 14%,var(--paper)) 0 22px,var(--paper) 22px 44px);} body[data-skin="gel"]{background: radial-gradient(120% 70% at 50% -10%,color-mix(in srgb,var(--a) 55%,#fff),transparent), radial-gradient(90% 60% at 90% 110%,color-mix(in srgb,var(--b) 45%,#fff),transparent),var(--paper);} body[data-skin="matrix"]{background: repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px), linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--a) 35%,var(--ink)));color:var(--paper);} body[data-skin="paper"]{background: repeating-linear-gradient(0deg,transparent 0 27px,color-mix(in srgb,var(--a) 30%,transparent) 27px 28px), linear-gradient(90deg,transparent 0 46px,color-mix(in srgb,var(--b) 45%,transparent) 46px 48px,transparent 48px), #fffdf4;} body[data-skin="stars"] .win,body[data-skin="matrix"] .win{--chrome1:#f4f4ff;} /* ---------- window chrome ---------- */ .win{ max-width:880px;margin:0 auto 18px;background:var(--chrome1); /* the window is always a light surface — dark skins tint the wallpaper, not the app */ color:var(--ink); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink),0 0 0 1px #fff inset; border-radius:8px 8px 4px 4px;overflow:hidden; } .titlebar{ display:flex;align-items:center;gap:8px;padding:6px 8px; background:linear-gradient(180deg,var(--a),color-mix(in srgb,var(--b) 60%,var(--a))); border-bottom:2px solid var(--ink);color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.55); } .titlebar b{font:700 13px/1.1 var(--font-ui);letter-spacing:.06em;flex:1; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tb-dots{display:flex;gap:4px} .tb-dots i{width:14px;height:14px;border:2px solid var(--ink);background:var(--chrome2); display:block;border-radius:2px;box-shadow:1px 1px 0 rgba(0,0,0,.4) inset} .tb-dots i:last-child{background:#ff5f5f} .winbody{padding:16px} /* ---------- typography ---------- */ h1{font:400 clamp(26px,6vw,46px)/.95 var(--font-disp);letter-spacing:.01em;margin:0 0 6px; text-transform:uppercase;color:var(--ink); text-shadow:2px 2px 0 var(--b),4px 4px 0 color-mix(in srgb,var(--a) 70%,#fff);} h2{font:700 15px/1.2 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;margin:0 0 8px} p{margin:0 0 10px;font-size:14px;line-height:1.55} small{font-size:11.5px} a{color:color-mix(in srgb,var(--b) 80%,var(--ink))} .tagline{font:italic 700 14px/1.35 var(--font-ui);margin:0 0 12px; color:color-mix(in srgb,var(--b) 75%,var(--ink))} .marquee{overflow:hidden;white-space:nowrap;border:2px solid var(--ink); background:var(--ink);color:#9cff57;font:700 12px/1 var(--font-mono); padding:6px 0;margin:0 0 14px;border-radius:4px} .marquee span{display:inline-block;padding-left:100%;animation:mq 22s linear infinite} @keyframes mq{to{transform:translateX(-100%)}} .rainbow{height:6px;border:0;margin:14px 0;border-radius:4px; background:linear-gradient(90deg,#ff004d,#ff8a00,#ffe600,#3fff5e,#00d0ff,#8a4bff,#ff2fa0);} .blink{animation:bl 1s steps(2,end) infinite} @keyframes bl{50%{opacity:0}} /* ---------- panels / bevels ---------- */ .panel{border:2px solid var(--ink);border-radius:6px;padding:12px; background:color-mix(in srgb,var(--a) 8%,#fff); box-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 25%,transparent)} .panel.warn{background:#fffbe6;border-style:dashed} /* ---------- buttons ---------- */ .btn{ font:700 14px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase; padding:12px 20px;border:2px solid var(--ink);border-radius:8px;cursor:pointer; background:linear-gradient(180deg,#fff 0 45%,var(--a) 45% 100%); color:var(--ink);box-shadow:3px 3px 0 var(--ink);transition:.08s; } .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)} .btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)} .btn.big{font-size:17px;padding:15px 28px; background:linear-gradient(180deg,#fff 0 42%,var(--b) 42% 100%);color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,.4)} .btn.ghost{background:#fff;box-shadow:2px 2px 0 var(--ink);font-size:12px;padding:9px 14px} .btn[disabled]{opacity:.4;cursor:not-allowed} /* ---------- questions ---------- */ .progwrap{display:flex;align-items:center;gap:10px;margin-bottom:14px} .prog{flex:1;height:18px;border:2px solid var(--ink);border-radius:10px;background:#fff;overflow:hidden} .prog i{display:block;height:100%;width:0;transition:width .3s; background:repeating-linear-gradient(90deg,var(--b) 0 8px,var(--a) 8px 16px)} .progwrap small{font:700 11px var(--font-mono);white-space:nowrap} .qnum{font:700 11px var(--font-mono);letter-spacing:.12em;opacity:.6;text-transform:uppercase} .qtitle{font:700 clamp(17px,3.6vw,23px)/1.25 var(--font-ui);margin:4px 0 4px} .qhint{font-size:12.5px;opacity:.72;margin:0 0 12px;font-style:italic} .opts{display:grid;gap:8px} .opt{display:flex;align-items:center;gap:10px;padding:11px 13px;border:2px solid var(--ink); border-radius:7px;background:#fff;cursor:pointer;font-size:14px;line-height:1.3; box-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 30%,transparent);transition:.1s} .opt:hover{background:color-mix(in srgb,var(--a) 16%,#fff);transform:translateX(3px)} .opt.on{background:linear-gradient(90deg,color-mix(in srgb,var(--b) 30%,#fff),color-mix(in srgb,var(--a) 26%,#fff)); box-shadow:3px 3px 0 var(--ink)} .opt i{width:16px;height:16px;flex:none;border:2px solid var(--ink);background:#fff;border-radius:50%} .opt.sq i{border-radius:3px} .opt.on i{background:var(--b);box-shadow:0 0 0 2px #fff inset} .slide{width:100%;-webkit-appearance:none;appearance:none;height:16px;border:2px solid var(--ink); border-radius:10px;background:linear-gradient(90deg,var(--a),var(--b));margin:16px 0 6px} .slide::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--a));border:2px solid var(--ink);cursor:grab} .slide::-moz-range-thumb{width:26px;height:26px;border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,var(--a));border:2px solid var(--ink);cursor:grab} .slidelbl{display:flex;justify-content:space-between;font:700 11px var(--font-mono);opacity:.7} .slideval{text-align:center;font:400 32px/1 var(--font-disp);margin:6px 0 0;color:var(--b)} input[type=text],input[type=number],textarea,select{ width:100%;font:400 15px var(--font-ui);padding:11px 12px;border:2px solid var(--ink); border-radius:6px;background:#fff;color:var(--ink); box-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 25%,transparent) inset} textarea{min-height:130px;font-family:var(--font-mono);font-size:13px;resize:vertical} input:focus,textarea:focus,select:focus{outline:3px solid var(--b);outline-offset:1px} .field{margin:0 0 10px} .field label{display:block;font:700 11px var(--font-mono);letter-spacing:.1em; text-transform:uppercase;margin:0 0 4px;opacity:.75} .row{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:520px){.row{grid-template-columns:1fr}} /* upload zones */ .drop{border:3px dashed var(--ink);border-radius:10px;padding:24px 14px;text-align:center; background:color-mix(in srgb,var(--a) 10%,#fff);cursor:pointer;transition:.12s} .drop:hover,.drop.hot{background:color-mix(in srgb,var(--b) 18%,#fff);transform:scale(1.01)} .drop b{display:block;font:700 15px var(--font-ui);margin-bottom:4px} .thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .thumbs figure{margin:0;width:92px} .thumbs img{width:92px;height:92px;object-fit:cover;border:2px solid var(--ink); border-radius:6px;box-shadow:2px 2px 0 var(--ink);display:block} .thumbs figcaption{font:700 10px var(--font-mono);text-align:center;margin-top:3px} /* roster rows */ .roster{display:grid;gap:10px} .rrow{border:2px solid var(--ink);border-radius:8px;padding:10px;background:#fff; box-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 30%,transparent)} .rrow .rhead{display:flex;gap:8px;align-items:center;margin-bottom:8px} .rrow .rhead input{flex:1} .rkill{border:2px solid var(--ink);background:#ff6b6b;color:#fff;font:700 13px var(--font-ui); width:32px;height:32px;border-radius:6px;cursor:pointer;flex:none} .mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px} .mini label{display:block;font:700 10px var(--font-mono);letter-spacing:.08em; text-transform:uppercase;opacity:.7;margin-bottom:2px} .mini input[type=range]{width:100%} /* ---------- loading ---------- */ .loadbox{text-align:center;padding:26px 10px} .loadbox .spin{width:64px;height:64px;margin:0 auto 14px;border:6px solid var(--a); border-top-color:var(--b);border-radius:50%;animation:sp .8s linear infinite} @keyframes sp{to{transform:rotate(360deg)}} .loadlog{font:700 12px/1.7 var(--font-mono);text-align:left;max-width:420px;margin:12px auto 0; background:var(--ink);color:#9cff57;padding:10px 12px;border-radius:6px;min-height:120px} /* ---------- results ---------- */ .dialwrap{text-align:center;margin:6px 0 14px} .dial{width:190px;height:190px;margin:0 auto;border-radius:50%;border:5px solid var(--ink); display:grid;place-items:center;position:relative; box-shadow:5px 5px 0 var(--ink),0 0 0 8px #fff inset} .dial .num{font:400 62px/1 var(--font-disp);color:var(--ink)} .dial .cap{font:700 10px var(--font-mono);letter-spacing:.14em;opacity:.7} .verdict{font:400 clamp(22px,5.2vw,38px)/1.05 var(--font-disp);text-transform:uppercase; margin:12px 0 6px;text-align:center; text-shadow:2px 2px 0 var(--b)} .subverdict{text-align:center;font-size:14.5px;line-height:1.55;max-width:560px;margin:0 auto 4px} .bars{display:grid;gap:9px;margin:8px 0} .bar b{font:700 11px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:3px} .bar .track{height:20px;border:2px solid var(--ink);border-radius:10px;background:#fff;overflow:hidden;position:relative} .bar .track i{display:block;height:100%;width:0;transition:width .8s cubic-bezier(.2,1.3,.4,1); background:linear-gradient(90deg,var(--a),var(--b))} .bar .track u{position:absolute;right:7px;top:0;line-height:16px;font:700 11px var(--font-mono);text-decoration:none} .receipts{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px} .receipts li{border-left:5px solid var(--b);background:color-mix(in srgb,var(--a) 10%,#fff); padding:8px 10px;font-size:13.5px;line-height:1.45;border-radius:0 6px 6px 0} .receipts li::before{content:"▸ ";font-weight:700;color:var(--b)} .lead{display:grid;gap:8px;margin:8px 0} .lead .lrow{display:flex;align-items:center;gap:10px;border:2px solid var(--ink);border-radius:8px; padding:9px 11px;background:#fff;box-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 30%,transparent)} .lead .lrow.top{background:linear-gradient(90deg,color-mix(in srgb,var(--b) 26%,#fff),#fff); box-shadow:4px 4px 0 var(--ink)} .lead .rank{font:400 26px/1 var(--font-disp);width:34px;color:var(--b)} .lead .who{flex:1;font-weight:700;font-size:14.5px} .lead .sc{font:700 13px var(--font-mono)} .lead .note{flex-basis:100%;font-size:12px;opacity:.75;font-style:italic} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:9px;margin:10px 0} .stat{border:2px solid var(--ink);border-radius:8px;padding:9px 10px;background:#fff; box-shadow:2px 2px 0 color-mix(in srgb,var(--ink) 30%,transparent)} .stat b{display:block;font:700 10px var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.65} .stat span{font:400 25px/1.1 var(--font-disp);color:color-mix(in srgb,var(--b) 80%,var(--ink))} .stat em{display:block;font-size:11px;opacity:.7;font-style:normal;margin-top:2px} .chart{display:flex;align-items:flex-end;gap:5px;height:130px;border:2px solid var(--ink); border-radius:8px;padding:8px;background:#fff;margin:10px 0} .chart div{flex:1;background:linear-gradient(180deg,var(--b),var(--a));border:1px solid var(--ink); border-radius:3px 3px 0 0;position:relative;min-height:3px;transition:height .7s} .chart div span{position:absolute;bottom:-2px;left:0;right:0;text-align:center; font:700 8.5px var(--font-mono);color:#fff;text-shadow:0 0 3px #000} /* ---------- mascot ---------- */ .mascot{display:flex;align-items:center;gap:12px;border:2px solid var(--ink);border-radius:10px; padding:10px 12px;margin:0 0 14px;background: linear-gradient(180deg,#fff,color-mix(in srgb,var(--a) 18%,#fff)); box-shadow:3px 3px 0 var(--ink)} .mascot img{width:74px;height:74px;object-fit:contain;image-rendering:pixelated;flex:none; animation:bob 1.9s ease-in-out infinite} @keyframes bob{50%{transform:translateY(-7px) rotate(-3deg)}} .mascot .mtxt{flex:1;min-width:0} .mascot .mname{font:700 13px var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--b)} .mascot .mline{font-size:12.5px;line-height:1.4;font-style:italic} .mascot .mrole{font:700 9.5px var(--font-mono);letter-spacing:.12em;opacity:.55;text-transform:uppercase} /* ---------- footer / chrome junk ---------- */ .foot{max-width:880px;margin:0 auto;text-align:center;font:700 11px/1.7 var(--font-mono); opacity:.8;padding:6px 8px} .foot .badges{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0} .badgechip{border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:4px; padding:3px 7px;font:700 9.5px var(--font-mono);letter-spacing:.05em;text-decoration:none;display:inline-block} .counter{display:inline-block;background:#000;color:#0f0;border:2px solid var(--ink); padding:2px 6px;font:700 13px var(--font-mono);letter-spacing:.24em;border-radius:3px} .sparkle{position:fixed;pointer-events:none;font-size:13px;z-index:9999;animation:sk .8s ease-out forwards} @keyframes sk{to{transform:translateY(-26px) scale(.2) rotate(140deg);opacity:0}} .nav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px} /* index / hub grid */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .tile{display:block;text-decoration:none;color:var(--ink);border:2px solid var(--ink); border-radius:9px;padding:11px;background:#fff;box-shadow:3px 3px 0 var(--ink);transition:.1s} .tile:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)} .tile .tt{font:700 13.5px/1.25 var(--font-ui);margin:6px 0 3px} .tile .td{font-size:11.5px;line-height:1.4;opacity:.75} .tile .chip{font:700 9px var(--font-mono);letter-spacing:.1em;border:2px solid var(--ink); border-radius:3px;padding:2px 5px;display:inline-block;text-transform:uppercase} .tile img{width:46px;height:46px;object-fit:contain;image-rendering:pixelated;float:right;margin-left:6px}