/* playground.css (V27) — merged from playground-toy.css + arcade-v22.css */ /* ===== from playground-toy.css ===== */ /* footer toy: layer di BAWAH foto (.fig z10), teks & tombol (.foot z20) */ .toy{position:absolute;z-index:5;left:max(21cqw,270px);right:21cqw;top:13%;bottom:12%;display:flex;flex-direction:column;gap:.75rem} .toy canvas{flex:1;width:100%;min-height:0;display:block;cursor:crosshair;touch-action:none} .toycap{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:.35rem 1.5rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.06em;color:var(--on-dark-faint);user-select:none;pointer-events:none} .toycap span{white-space:nowrap} .toycap b{font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums} .alarm{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:var(--alarm,0);background:radial-gradient(ellipse at 60% 45%,rgb(255 30 30/.55),rgb(120 0 0/.35) 60%,rgb(60 0 0/.2))} #toyFx{position:absolute;inset:0;width:100%;height:100%;z-index:11;pointer-events:none;display:none} .foot{pointer-events:none}.foot a{pointer-events:auto} @media (max-width:899px){.toy{display:none}} /* layout desktop (>=900px): foto menempel tepi kanan panel; nav, copyright & tombol sosial di kiri. Canvas .toy tetap memakai ukuran/posisi dasarnya (di bawah foto). Tombol sosial dibatasi agar tidak melewati tepi kiri foto (lebar foto ~ .406 x tinggi footer). */ @media (min-width:900px){ .fig img{left:auto;right:max(1.1111cqw,8px);transform:none} .fsoc{max-width:max(11rem,calc(100cqw - max(1.1111cqw,8px) - var(--foot-h,100lvh) * .406 - var(--fl) - 1.25rem))} } /* HUD gaya CS2 (DOM tipis di atas canvas; ukuran mengikuti tinggi canvas lewat --hu) */ .toyhud{position:absolute;z-index:3;pointer-events:none;font-family:var(--font-sans);color:#e8eef0;text-shadow:0 1px 3px rgb(0 0 0/.7);user-select:none} .toyhud .rad{position:absolute;left:calc(var(--hu)*2);top:calc(var(--hu)*2);width:calc(var(--hu)*21);display:flex;flex-direction:column;gap:calc(var(--hu)*.8)} .toyhud .rad canvas{width:calc(var(--hu)*21);height:calc(var(--hu)*21);display:block;border-radius:50%;box-shadow:0 0 0 1px rgb(255 255 255/.18),0 2px 10px rgb(0 0 0/.4)} .toyhud .rad span{font-size:calc(var(--hu)*2.1);letter-spacing:.01em} .toyhud{visibility:hidden}.toyhud.on{visibility:visible} .toyhud .top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:center;align-items:flex-start;gap:calc(var(--hu)*.6)} .toyhud .rw{position:relative}.toyhud .bm{position:absolute;left:63%;top:34%;width:calc(var(--hu)*1.8);height:calc(var(--hu)*1.8);margin:calc(var(--hu)*-.9) 0 0 calc(var(--hu)*-.9);border-radius:50%;background:#ff3b30;box-shadow:0 0 calc(var(--hu)*1.5) #ff3b30;opacity:0} .toyhud.boom .ln,.toyhud.boom .msg,.toyhud.boom .hint,.toyhud.boom .prog,.toyhud.boom .wc{visibility:hidden} .toyhud .pips{display:flex;gap:calc(var(--hu)*.5);padding-top:0} .toyhud .pips i{display:block;width:calc(var(--hu)*3.4);height:calc(var(--hu)*4.2);background:rgb(20 24 28/.7);border-bottom:calc(var(--hu)*.35) solid #6da0ff;opacity:.9} .toyhud .pips.t i{border-color:#ffb44a;opacity:.5} .toyhud .clk{min-width:calc(var(--hu)*11);text-align:center;background:rgb(14 17 20/.82);padding:calc(var(--hu)*.5) calc(var(--hu)*1) calc(var(--hu)*.6)} .toyhud .clk b{display:block;font:600 calc(var(--hu)*3.4)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:.02em} .toyhud .clk b.red{color:#ff5a48} .toyhud .clk u{display:flex;justify-content:space-between;text-decoration:none;font:600 calc(var(--hu)*2.1)/1.3 var(--font-display);margin-top:calc(var(--hu)*.2)} .toyhud .bot{position:absolute;left:0;right:0;bottom:calc(var(--hu)*1.6);height:calc(var(--hu)*7)} .toyhud .bot>*{position:absolute;bottom:0} .toyhud .money{left:calc(var(--hu)*2);font:500 calc(var(--hu)*3.6)/1 var(--font-display);color:#f4e9b4} .toyhud .hp{left:34%;font:500 calc(var(--hu)*4.8)/1 var(--font-display);display:flex;align-items:baseline;gap:calc(var(--hu)*.6)} .toyhud .hp svg{width:calc(var(--hu)*2.6);height:calc(var(--hu)*2.6);fill:#e8eef0;align-self:center} .toyhud .ln{left:34%;right:34%;bottom:calc(var(--hu)*.3);height:1px;background:linear-gradient(90deg,rgb(255 255 255/.5),rgb(255 255 255/.15))} .toyhud .ct{left:50%;margin-left:calc(var(--hu)*-3.5);width:calc(var(--hu)*7);height:calc(var(--hu)*7);bottom:calc(var(--hu)*.2)} /* progress defuse: tengah-horizontal, bawah-tengah seperti CS2; dasar bar di PROG_Y (var --py), selalu di dalam canvas */ .toyhud .prog{position:absolute;left:50%;top:calc(var(--py,.68)*100%);transform:translate(-50%,-100%);width:22%;opacity:0;transition:opacity .15s} .toyhud .prog.on{opacity:1} .toyhud .prog em{display:block;font-style:normal;text-align:center;font-size:calc(var(--hu)*1.9);letter-spacing:.12em;margin-bottom:calc(var(--hu)*.7)} .toyhud .prog i{display:block;height:calc(var(--hu)*.7);background:rgb(255 255 255/.18)} .toyhud .prog b{display:block;height:100%;width:100%;background:#6da0ff;transform-origin:left;transform:scaleX(0)} .toyhud .msg,.toyhud .hint{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center} .toyhud .msg{top:calc(var(--hu)*13);font:600 calc(var(--hu)*3.2)/1 var(--font-display);letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity .25s} .toyhud .msg.on{opacity:1} .toyhud .hint{top:calc(var(--py,.68)*100% + var(--hu)*2.6);font-size:calc(var(--hu)*2.1);letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .2s} .toyhud .hint.on{opacity:1} /* ikon speaker coret + petunjuk selama audio terkunci (kebijakan autoplay browser) */ .toyhud .snd{position:absolute;right:calc(var(--hu)*2);top:calc(var(--hu)*2);display:flex;align-items:center;gap:calc(var(--hu)*.9);font-size:calc(var(--hu)*1.8);letter-spacing:.08em;text-transform:uppercase;opacity:0;transition:opacity .3s} .toyhud .snd.on{opacity:1} .toyhud .snd svg{width:calc(var(--hu)*3);height:calc(var(--hu)*3);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .toyhud .endv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--hu)*3);background:rgb(5 7 9/.55);opacity:0;visibility:hidden;transition:opacity .35s} .toyhud .endv.on{opacity:1;visibility:visible} .toyhud .endv h3{margin:0;font:700 calc(var(--hu)*9)/1 var(--font-display);text-transform:uppercase;letter-spacing:.02em} .toyhud .endv button{pointer-events:auto;cursor:pointer;font:inherit;text-transform:uppercase;letter-spacing:.06em;font-size:calc(var(--hu)*2.4);height:calc(var(--hu)*7);padding:0 calc(var(--hu)*3.2);text-shadow:none} .toyhud .wc{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none} @media (prefers-reduced-motion:reduce){.toyhud *{transition:none !important}} /* ===== from arcade-v22.css ===== */ /* V22: standalone canvas arcade; does not alter the original bomb defusal game. */ .game-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:2.2rem 0 0} .game-index a{display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;min-width:0;padding:1rem 1.1rem;border:1px solid #2f5962;background:#0f1e24;transition:transform .2s,border-color .2s,background .2s} .game-index a span{font:700 .8rem var(--font-display);color:#02d2e3} .game-index a strong{font:700 1.2rem/1.15 var(--font-display);letter-spacing:.035em} .game-index a small{font-size:.58rem;color:#8aa6b0;letter-spacing:.12em} .game-index a:hover,.game-index a:focus-visible{transform:translateY(-3px);border-color:#02d2e3;background:#113741} .arcade-section{margin-top:clamp(4.5rem,9vw,9rem);scroll-margin-top:3rem} .arcade-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:1.8rem} .arcade-heading>div:first-child{min-width:0} .arcade-eyebrow{display:block;color:#7beaf2;font-size:.7rem;font-weight:700;letter-spacing:.15em;margin-bottom:.9rem} .arcade-heading h2{font:700 clamp(3.3rem,7vw,7rem)/.96 var(--font-display);letter-spacing:-.025em;margin:0;text-transform:uppercase} .arcade-heading h2 em{font-style:normal;color:var(--accent)} .arcade-heading p{max-width:680px;margin:1.1rem 0 0;line-height:1.55;color:#b6c5cb;font-size:clamp(.9rem,1.35vw,1rem)} .arcade-controls{display:flex;align-items:center;justify-content:flex-end;gap:.65rem;flex-wrap:wrap} .arcade-cta,.arcade-secondary{min-height:3.2rem;padding:.8rem 1.15rem;border:1px solid #02d2e3;font-size:.82rem;font-weight:700;letter-spacing:.065em;white-space:nowrap;cursor:pointer;transition:background .2s,transform .2s,color .2s} .arcade-cta{background:#02d2e3;color:#03161d;box-shadow:4px 4px 0 #0c5962} .arcade-secondary{background:transparent;color:#a6ecf3} .arcade-cta:hover,.arcade-cta:focus-visible{background:#b8fbff;transform:translateY(-2px)} .arcade-secondary:hover,.arcade-secondary:focus-visible{background:#11434c;color:#fff} .arcade-frame{position:relative;overflow:hidden;border:1px solid #286170;background:#0a1820;box-shadow:0 22px 70px rgb(0 0 0/.28)} .arcade-frame::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#02d2e3,transparent 67%);pointer-events:none;z-index:4} .arcade-topline{min-height:3.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.8rem 1.1rem;background:#0d2129;border-bottom:1px solid #26515b;font-family:var(--font-sans);color:#9de1e8;font-size:.65rem;font-weight:700;letter-spacing:.09em} .arcade-topline>span{display:flex;align-items:center;gap:.6rem} .arcade-topline i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#24e5c7;box-shadow:0 0 12px #16ad99} .arcade-stats{display:flex;align-items:center;gap:clamp(.7rem,2vw,2rem);flex-wrap:wrap} .arcade-stats span{color:#93bbc4;white-space:nowrap} .arcade-stats b{color:#fff;font-family:var(--font-display);font-size:.98rem;letter-spacing:.04em;margin-left:.4rem} .arcade-frame canvas{display:block;width:100%;height:auto;aspect-ratio:960/460;user-select:none;-webkit-user-select:none} #flappyCanvas{cursor:crosshair;touch-action:none} #slingCanvas{cursor:grab;touch-action:none} #slingCanvas.is-dragging{cursor:grabbing;touch-action:none} .arcade-overlay{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;width:min(88%,440px);min-height:140px;padding:1.5rem 2rem;text-align:center;background:rgb(5 17 24/.88);border:1px solid #4a8a95;box-shadow:0 15px 50px rgb(0 0 0/.35);pointer-events:none;transition:opacity .25s,visibility .25s;z-index:3} .arcade-overlay[hidden]{display:none} .arcade-overlay strong{font:700 clamp(1.8rem,4vw,3rem)/1 var(--font-display);letter-spacing:.045em;color:#b5faff;text-transform:uppercase} .arcade-overlay span{font-size:.86rem;line-height:1.5;color:#d7e9ed} .arcade-footnote{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid #1b343d;padding:.9rem .1rem;color:#8da4ae;font-size:.69rem;letter-spacing:.075em;line-height:1.45;text-transform:uppercase} .arcade-footnote>span:first-child{color:#96e6e9} @media(max-width:780px){ .game-index{gap:.45rem} .game-index a{padding:.75rem .6rem} .game-index a strong{font-size:.89rem} .game-index a small{font-size:.5rem;letter-spacing:.02em} .arcade-heading{align-items:flex-start;flex-direction:column;gap:1.2rem} .arcade-heading h2{font-size:clamp(3.4rem,10vw,5rem)} .arcade-controls{justify-content:flex-start;width:100%} .arcade-cta,.arcade-secondary{min-height:3rem;font-size:.73rem;padding:.8rem .95rem} .arcade-frame canvas{min-height:230px;object-fit:contain} .arcade-topline{padding:.75rem .7rem;font-size:.57rem} .arcade-stats{gap:.6rem} .arcade-stats b{font-size:.83rem;margin-left:.2rem} .arcade-overlay{top:58%;min-height:110px;padding:.75rem 1rem} .arcade-overlay strong{font-size:clamp(1.5rem,6vw,2.5rem)} .arcade-overlay span{font-size:.72rem} } @media(max-width:420px){ .game-index{grid-template-columns:1fr;gap:.4rem} .game-index a{display:grid;grid-template-columns:1.8rem 1fr;align-items:center;gap:.12rem .55rem;min-height:3.8rem} .game-index a span{grid-row:1/3} .game-index a strong{font-size:1rem} .arcade-topline{gap:.4rem;font-size:.52rem} .arcade-stats{width:100%;justify-content:space-between} .arcade-stats span{font-size:.57rem} .arcade-footnote{font-size:.6rem} .arcade-cta,.arcade-secondary{flex:1;white-space:normal;line-height:1.2;text-align:center} } @media(prefers-reduced-motion:reduce){.arcade-cta,.arcade-secondary,.arcade-overlay{transition:none!important}} /* ===== V27: one start-screen style for every game (matches Bombsite A) ===== */ .arcade-frame .arcade-topline{position:relative;z-index:7} .arcade-overlay{inset:0;left:0;top:0;transform:none;width:auto;min-height:0;padding:4.2rem 1.5rem 1.5rem;gap:.55rem;border:0;box-shadow:none;background:linear-gradient(135deg,rgba(9,10,11,.97),rgba(9,31,35,.92));pointer-events:auto;z-index:6} .arcade-overlay .small{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)} .arcade-overlay strong{font:700 clamp(2.2rem,5vw,3.6rem)/1 var(--font-display);color:#f4f7f8;letter-spacing:.01em} .arcade-overlay span{max-width:30rem;color:#a4b1b8;font-size:.92rem;line-height:1.5} .arcade-overlay .launch{margin-top:.6rem} /* the heading button stays as the in-game control; hide it while the start screen is up */ .arcade-section:has(.arcade-overlay:not([hidden])) .arcade-heading :is(.arcade-cta,.arcade-secondary){visibility:hidden} /* heading controls share the launch-button look (flat accent block, no offset shadow) */ .arcade-cta{box-shadow:none;letter-spacing:.08em;padding:1rem 2rem;min-width:190px} .arcade-cta:hover,.arcade-cta:focus-visible{background:#fff;border-color:#fff;transform:none} .arcade-secondary{padding:1rem 1.6rem;letter-spacing:.08em} .cs-section{margin-bottom:0} .cs-section .arcade-heading{margin-bottom:1.8rem} @media(max-width:780px){ .arcade-frame canvas{min-height:260px} .arcade-overlay{padding:4.6rem 1rem 1rem;gap:.4rem} .arcade-overlay .small{font-size:.62rem} .arcade-overlay strong{font-size:clamp(1.6rem,7vw,2.4rem)} .arcade-overlay span{font-size:.74rem;line-height:1.4} .arcade-overlay .launch{margin-top:.35rem;padding:.8rem 1.4rem;min-width:0;font-size:.8rem} .arcade-cta,.arcade-secondary{padding:.85rem 1.1rem;min-width:0} } @media(max-width:520px){#title{font-size:15vw}} /* Bombsite start screen must fit the mobile game box (previously its title was cut off and the caption showed through). IDs beat the page's inline