/* ===== WIDE LAYOUT VARIANT ===== */
/* 1. Banner pictures hidden for now. Remove class "nobanners" from <html> (or add ?banners=1) to bring them back. */
html.nobanners .ban{display:none}
.wrap{display:block}
.cpanel{display:none}
/* card pop-in on scroll */
.sec.pre{opacity:0;transform:translateY(26px) scale(.96)}
.sec.vis{opacity:1;transform:none;transition:opacity .5s ease,transform .55s cubic-bezier(.2,1.3,.4,1)}
@media (prefers-reduced-motion:reduce){.sec.pre{opacity:1;transform:none}}
@media(min-width:800px){
  header{max-width:none;padding:44px 28px 24px}
  .sws,.stylebar{max-width:none}
  .wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start;padding:20px 24px 60px;max-width:2400px;margin:0 auto}
  main{max-width:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;grid-auto-flow:row dense}
  main .empty{grid-column:1/-1;margin:0}
  .sec{margin:0!important}
  .sec#price.isopen{grid-column:1/-1}
  .cpanel{display:block;position:sticky;top:calc(var(--bh,150px) + 16px);max-height:calc(100vh - var(--bh,150px) - 100px);overflow:auto;border-radius:30px;animation:cslide .7s cubic-bezier(.2,1.2,.4,1) both;zoom:var(--z,1)}
  .cpanel .sec{margin:0!important}
  .cpanel .sbody{padding:22px 24px 26px}
}
@media(min-width:1600px){
  .wrap{grid-template-columns:minmax(0,1fr) 420px}
  main{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:800px) and (max-width:1099px){main{grid-template-columns:minmax(0,1fr)}.wrap{grid-template-columns:minmax(0,1fr) 340px}}
@keyframes cslide{from{opacity:0;transform:translate(60px,-30px)}}
@media(max-width:799px){html,body{overflow-x:clip}}
/* ===== v2 ===== */
@media(min-width:2200px){main{grid-template-columns:repeat(4,minmax(0,1fr))}.wrap{max-width:none}}
@media(min-width:800px){main>.sec:not(.isopen){display:none}main .sec#price.isopen{grid-column:span 2}
 .fs{top:auto;bottom:72px;right:16px}}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.9,.3,1)}
/* visuals */
.vwrap{margin:6px 0 16px}
.vz{display:block;width:100%;height:auto;max-height:220px;margin:4px 0 8px;color:inherit;overflow:visible}
.vz .ln{fill:none;stroke:currentColor;stroke-width:2;opacity:.55}.vz .thin{stroke-width:1.2;opacity:.3}
.vz .f1{fill:var(--g)}.vz .f1o{fill:var(--g)}.vz .f2{fill:currentColor;opacity:.28}.vz .f3{fill:currentColor;opacity:.09}
.vz .tx{fill:currentColor;font:600 12px Inter,sans-serif;opacity:.85}.vz .txi{fill:#fff;font:700 12px Inter,sans-serif}
.vz .il{fill:currentColor;font:600 9px Inter,sans-serif;opacity:.5;letter-spacing:.5px;text-transform:uppercase}
.vz .big{fill:currentColor;font:800 26px Fraunces,serif}
.vz .ar{fill:none;stroke:var(--g);stroke-width:3}.vz .dash{stroke-dasharray:4 4;animation:dash 1.6s linear infinite}
.vz .ring{fill:none;stroke:var(--g);stroke-width:2;transform-origin:165px 72px;animation:ring 2.8s ease-out infinite}
.vz .draw{stroke:var(--g);stroke-width:3;opacity:1;stroke-dasharray:400;animation:draw 2.4s ease-out both}
.vz .trk{fill:none;stroke:currentColor;opacity:.15;stroke-width:16;stroke-linecap:round}
.vz .gauge{fill:none;stroke:var(--g);stroke-width:16;stroke-linecap:round;stroke-dasharray:315;stroke-dashoffset:315;animation:gauge 2s .3s ease-out forwards}
.vz .trk2{fill:none;stroke:currentColor;opacity:.2;stroke-width:4}.vz .prog{fill:none;stroke:var(--g);stroke-width:4;stroke-dasharray:240;animation:draw 2.4s ease-out both}
.vz .node{fill:currentColor;opacity:.25}.vz .dot{fill:var(--g)}.vz .spin{transform-origin:160px 90px;animation:spin 12s linear infinite}
.vz .pulse{animation:pulse 3s ease-in-out infinite}.vz .typing circle{animation:pulse 1.2s ease-in-out infinite}.vz .typing circle:nth-child(3){animation-delay:.2s}.vz .typing circle:nth-child(4){animation-delay:.4s}
@keyframes dash{to{stroke-dashoffset:-16}}@keyframes ring{from{transform:scale(.6);opacity:.8}to{transform:scale(1.5);opacity:0}}
@keyframes draw{from{stroke-dashoffset:400}}@keyframes gauge{to{stroke-dashoffset:40}}@keyframes pulse{50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.vz *{animation:none!important}.vz .gauge{stroke-dashoffset:40}}
.vpic{margin:0 0 10px;position:relative;border-radius:18px;overflow:hidden}.vpic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.vpic figcaption{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;font:600 10px Inter,sans-serif;padding:3px 8px;border-radius:999px}
.t-neon .vz .ln{stroke:#05d9e8}.t-neon .vz .ring,.t-neon .vz .draw{filter:drop-shadow(0 0 4px var(--g))}
.t-steam .vz .tx{font-family:'Special Elite',monospace}.t-fantasy .vz .tx{font-family:Cinzel,serif}
/* v3 drag to reorder (desktop) */
@media(min-width:800px) and (pointer:fine){main>.sec .banbtn{cursor:grab}}
.sec.dragging{opacity:.35;outline:3px dashed var(--g);outline-offset:-3px}
.dragghost{position:fixed;z-index:200;pointer-events:none;opacity:.92;transform:rotate(1.5deg);box-shadow:0 20px 40px rgba(0,0,0,.45);border-radius:20px;overflow:hidden}
.draghint{grid-column:1/-1;margin:0;text-align:center;font:600 13px Inter,sans-serif;opacity:.6}
@media(max-width:799px){.draghint{display:none}}
/* v4 real basketball in LA header (same seam design as the bottom basketball button) */
.t-la header::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cdefs%3E%3CradialGradient id='b' cx='35%25' cy='30%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23f0883a'/%3E%3Cstop offset='.6' stop-color='%23d2691e'/%3E%3Cstop offset='1' stop-color='%239a4510'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='28' cy='28' r='26.5' fill='url(%23b)' stroke='%233b1d0a' stroke-width='1.5'/%3E%3Cpath d='M1.5 28H54.5M28 1.5V54.5M10 9Q23 28 10 47M46 9Q33 28 46 47' stroke='%233b1d0a' stroke-width='2.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat!important;box-shadow:none!important}
.resetlay{display:none}
@media(min-width:800px){.resetlay{display:inline-flex;align-items:center;border-radius:999px;border:3px solid currentColor;background:transparent;color:inherit;font:800 14px Inter;padding:10px 18px;min-height:48px;cursor:pointer}.resetlay:active{transform:scale(.93)}}
/* v5 */
.draghint{margin:14px 24px -6px;text-align:center}
@media(min-width:800px){.cpanel{max-height:none!important;overflow:visible!important}.cpanel.tall{}
 .board .fs{position:absolute;top:12px;right:16px;bottom:auto}}
/* v6 chat bubbles (HTML, size to text) */
.chat{display:flex;flex-direction:column;gap:8px;margin:6px 0 10px;font:600 14px/1.35 Inter,sans-serif}
.bub{max-width:85%;width:fit-content;padding:9px 14px;border-radius:18px;overflow-wrap:anywhere}
.bub.you{align-self:flex-start;background:color-mix(in srgb,currentColor 10%,transparent);border-bottom-left-radius:6px}
.bub.bot{align-self:flex-end;background:var(--g);color:#fff;border-bottom-right-radius:6px;animation:bubin .6s 1s both}
.bub.typing{display:flex;gap:5px;padding:12px 14px}.bub.typing i{width:7px;height:7px;border-radius:50%;background:var(--g);animation:pulse 1.2s ease-in-out infinite}.bub.typing i:nth-child(2){animation-delay:.2s}.bub.typing i:nth-child(3){animation-delay:.4s}
.chat .il2{align-self:flex-end;font:600 9px Inter,sans-serif;opacity:.5;letter-spacing:.5px;text-transform:uppercase}
@keyframes bubin{from{opacity:0;transform:translateY(8px)}}
.t-steam .chat{font-family:'Special Elite',monospace}.t-fantasy .chat{font-family:Cinzel,serif}.t-retro .bub{border-radius:24px}
/* v6 gauge */
.gz .gauge{animation:gauge 2s .3s ease-out forwards,glow 3.2s 2.3s ease-in-out infinite}
.gz .needle{transform-origin:160px 130px;transform:rotate(155deg);animation:surge 2s .3s cubic-bezier(.3,1.2,.5,1) both,strain 3.2s 2.3s ease-in-out infinite}
.gz .needle line{stroke:currentColor;stroke-width:4;stroke-linecap:round}.gz .hub{fill:currentColor}
.gz .tipring{fill:none;stroke:var(--g);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring2 1.6s ease-out infinite}
.gz .sl path{stroke:var(--g);stroke-width:2.5;stroke-linecap:round;fill:none;stroke-dasharray:6 30;animation:speed 1s linear infinite;opacity:.7}
@keyframes surge{from{transform:rotate(0)}}
@keyframes strain{0%,100%{transform:rotate(155deg)}20%{transform:rotate(158deg)}25%{transform:rotate(154deg)}45%{transform:rotate(160deg)}50%{transform:rotate(156deg)}70%{transform:rotate(159deg)}}
@keyframes glow{50%{filter:brightness(1.35) saturate(1.2)}}
@keyframes ring2{from{transform:scale(.6);opacity:.9}to{transform:scale(2.4);opacity:0}}
@keyframes speed{to{stroke-dashoffset:-36}}
/* gentle extra movement */
.vz .node{animation:pulse 2.4s ease-in-out infinite}
.vz .f1o{animation:pulse 3.5s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.gz *,.chat *{animation:none!important}.gz .needle{transform:rotate(155deg)}}
.sec.dragging{opacity:1!important;background:transparent!important;box-shadow:none!important;border:3px dashed var(--g)!important;outline:0}.sec.dragging>*{visibility:hidden}
.sec.dragging{position:relative;min-height:90px;border-color:var(--acc)!important}
.sec.dragging::after{content:"Place here";visibility:visible;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 22px Inter,sans-serif;letter-spacing:1px;color:var(--acc);pointer-events:none}
/* v7 report button + modal + recommended tiles */
.rptbtn{display:inline-flex;align-items:center;gap:10px;margin-top:18px;border-radius:999px;border:3px solid var(--acc);background:var(--g);color:#fff;font:800 16px Inter,sans-serif;padding:12px 22px;min-height:52px;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.3);transition:transform .15s}
.rptbtn:hover{transform:translateY(-2px)}.rptbtn:active{transform:scale(.95)}
.rptbtn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.t-la .rptbtn{background:#FDB927;color:#2a1245;border-color:#552583}.t-neon .rptbtn{background:#0d0221;color:#05d9e8;border-color:#05d9e8;box-shadow:0 0 14px rgba(5,217,232,.45)}.t-steam .rptbtn{background:linear-gradient(#c9a35a,#8a6a33);color:#2a1d0c;border-color:#5a4430}.t-fantasy .rptbtn{background:#7a4fb5;border-color:#e7c35a}.t-retro .rptbtn{background:#d9531e;border-color:#e8a317}
.rptbox{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto}
.rptbox h3{font-size:clamp(22px,3vw,30px);margin:8px 0}
.ropts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.ropt{border:2px solid var(--acc);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}.ropt b{font:800 22px Inter,sans-serif;color:var(--g)}.ropt span{font-size:14px;line-height:1.35}
.rfree{font-weight:800;margin:4px 0 10px}.rbtns{display:flex;gap:8px;flex-wrap:wrap}.rbtns .pill{opacity:1;cursor:pointer}
.rform input:disabled{opacity:.7;cursor:not-allowed}.rsample{font-weight:800;color:var(--g)}
.t-neon .ropt b,.t-neon .rsample{color:#05d9e8}
@media(max-width:520px){.ropts{grid-template-columns:1fr}}
.rtiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:12px 0}
.rtile{border:2px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:4px;min-height:76px}.rtile b{font-size:16px}.rtile span{font:600 11px Inter,sans-serif;opacity:.6;text-transform:uppercase;letter-spacing:.5px}
.t-retro .rtile{border-radius:28px}
footer a{color:inherit}
@media(min-width:800px){.sec{scroll-margin-top:calc(var(--bh,150px) + 16px)}}
.rtile.rreal{text-decoration:none;color:inherit;border-color:var(--g);transition:transform .15s}.rtile.rreal:hover{transform:translateY(-2px)}.rtile.rreal em{font:700 12px Inter,sans-serif;font-style:normal;color:var(--g)}.t-neon .rtile.rreal em{color:#05d9e8}
