/* ROOTBET ARCADE — original game library / October 2026 */
body[data-page="arcade"]{background:#080c0c;color:#ecf7f2;--green:#c4ff3d;--gold:#c4ff3d;--ink:#f3fff0;--muted:#9eb0aa;--bg:#080c0c;--panel:#101b19;--border:#31443e}
.arcade-main{background:radial-gradient(ellipse 70% 400px at 70% 0,#472e7650,transparent),#080c0c;min-height:100vh}
.arcade-intro{position:relative;overflow:hidden;border-bottom:1px solid #344a3c;padding:75px 0 58px;background:radial-gradient(ellipse 550px 340px at 82% 35%,#a972ff25,transparent),linear-gradient(140deg,#131920,#091111)}
.arcade-intro:before{content:"";position:absolute;width:550px;height:550px;right:5%;top:-175px;border:1px solid #c4ff3d25;border-radius:50%;box-shadow:0 0 0 48px #c4ff3d08,0 0 0 105px #a985ff0b;pointer-events:none}
.arcade-intro .wrap{position:relative;z-index:1}
.arcade-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:850;letter-spacing:.16em;color:#c4ff3d;margin-bottom:23px}
.arcade-eyebrow:before{content:"";width:7px;height:7px;background:#c4ff3d;box-shadow:0 0 16px #c4ff3d;border-radius:50%}
.arcade-intro h1{font:italic 800 clamp(70px,10vw,148px)/.77 Barlow,sans-serif;letter-spacing:-.05em;margin:8px 0 32px;color:#f7fff0}
.arcade-intro h1 em{color:#c4ff3d;font-style:inherit}
.arcade-intro p{max-width:740px;color:#acbeb4;font-size:16px;line-height:1.8}
.arcade-intro .arcade-facts{display:flex;flex-wrap:wrap;gap:11px;margin:25px 0 0}
.arcade-facts span{font-size:10px;color:#b7d2ac;border:1px solid #456445;background:#c4ff3d0b;padding:8px 12px;border-radius:5px;font-weight:800;letter-spacing:.055em}
.arcade-shell{padding:43px 0 90px}
.arcade-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 22px}
.arcade-nav button{display:flex;align-items:center;gap:14px;text-align:left;min-width:0;padding:19px 17px;border:1px solid #31493d;border-radius:12px;background:linear-gradient(145deg,#13231b,#0d1614);color:#dce9dd;cursor:pointer;transition:transform .18s,border-color .18s,background .18s}
.arcade-nav button:hover{transform:translateY(-3px);border-color:#a8ea67}
.arcade-nav button.active{background:linear-gradient(135deg,#2b4030,#17251c);border-color:#c4ff3d;box-shadow:inset 0 0 0 1px #c4ff3d31,0 12px 40px #c4ff3d13}
.arcade-nav .nav-art{width:48px;height:48px;flex:none;display:grid;place-items:center;font-size:26px;color:#c4ff3d;background:#c4ff3d10;border:1px solid #577d48;border-radius:10px}
.arcade-nav button:nth-child(2) .nav-art{color:#b99bff;background:#ad8fff18;border-color:#8d73c1}
.arcade-nav button:nth-child(3) .nav-art{color:#6fdce6;background:#6fdce618;border-color:#467780}
.arcade-nav button:nth-child(4) .nav-art{color:#ffb872;background:#ffb87218;border-color:#8a7057}
.arcade-nav .nav-text strong{display:block;font-size:13px;line-height:1.3}
.arcade-nav .nav-text small{display:block;color:#90a69c;font-size:10px;margin-top:4px;line-height:1.4}
.arcade-layout{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(270px,.55fr);gap:18px;align-items:start}
.arcade-game{min-width:0;position:relative;background:radial-gradient(ellipse at top right,#2d493333,transparent 55%),linear-gradient(155deg,#15221c,#0b1110);border:1px solid #3b5543;border-radius:17px;padding:29px;box-shadow:0 22px 65px #0007;overflow:hidden}
.arcade-game[hidden]{display:none!important}
.arcade-game:before{content:"";position:absolute;left:50%;top:-170px;transform:translateX(-50%);width:550px;height:340px;border-radius:50%;background:radial-gradient(ellipse,#b7ff3d18,transparent 70%);pointer-events:none}
.arcade-game-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:19px;margin-bottom:23px}
.arcade-game-head span.micro{color:#c4ff3d}
.arcade-game h2{font:italic 800 clamp(41px,5vw,65px)/.9 Barlow,sans-serif;margin:12px 0 10px;letter-spacing:-.026em}
.arcade-game-head p{font-size:13px;line-height:1.65;margin:0;color:#9bb0a0;max-width:610px}
.arcade-badge{white-space:nowrap;font-size:10px;font-weight:850;color:#c4ff3d;border:1px solid #658953;border-radius:4px;padding:7px 11px}
.arcade-stats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:19px}
.arcade-stat{border:1px solid #3a5840;background:#101c13;border-radius:8px;padding:12px 14px}
.arcade-stat small{font-size:9px;letter-spacing:.12em;font-weight:850;color:#91a58f;display:block}
.arcade-stat strong{font:italic 800 36px Barlow,sans-serif;color:#c4ff3d;display:block;line-height:1.1;margin-top:4px}
.arcade-controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:17px 0}
.arcade-controls button,.arcade-mobile button,.arcade-start{border:1px solid #80ae53;border-radius:7px;background:#c4ff3d;color:#13220b;padding:11px 17px;font-size:12px;font-weight:850;cursor:pointer;transition:transform .15s,filter .15s}
.arcade-controls button:hover,.arcade-mobile button:hover{transform:translateY(-2px);filter:brightness(1.09)}
.arcade-controls .secondary,.arcade-mobile button{background:#1c2c21;border-color:#567150;color:#e5f8dc}
.arcade-controls button:disabled{opacity:.45;cursor:not-allowed}
.arcade-help{font-size:11px;color:#93a994;margin:10px 0 0;line-height:1.6}
.arcade-status{font-size:13px;min-height:24px;color:#c5edb0;font-weight:700;margin:13px 0}
.arcade-side{display:flex;flex-direction:column;gap:15px}
.arcade-info{border:1px solid #35523b;border-radius:14px;background:linear-gradient(145deg,#18291c,#0b1511);padding:24px}
.arcade-info h3{font:italic 800 29px Barlow,sans-serif;margin:10px 0}
.arcade-info p{font-size:12px;color:#a9bbab;line-height:1.8}
.arcade-info a{display:block;color:#c4ff3d;font-size:12px;font-weight:850;margin:13px 0}
.arcade-info .arcade-caution{border-top:1px solid #344c36;margin-top:20px;padding-top:16px;font-size:11px;color:#9eb09d}
.arcade-visual{background:#070d0a;border:1px solid #385840;border-radius:11px;position:relative;overflow:hidden;min-height:380px}
#rb-block-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;max-width:min(100%,495px);aspect-ratio:1;margin:17px auto}
.rb-grid-cell{background:#16251b;border:1px solid #2e4730;border-radius:5px;cursor:pointer;transition:background .1s,border-color .1s;min-width:0;min-height:0;outline-offset:2px}
.rb-grid-cell.filled{background:var(--tile,#b4ff55);border-color:#ffffff65;box-shadow:inset 0 3px 6px #ffffff50,0 0 9px #aaff3830}
.rb-grid-cell.preview{background:#b8ff495d;border:1px solid #c4ff3d}
.rb-grid-cell.invalid{background:#f05b6555}
.rb-grid-cell:focus-visible{outline:2px solid #ffffff}
.rb-block-pieces{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.rb-piece{background:#0c1910;border:1px solid #476344;border-radius:10px;min-height:85px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:12px}
.rb-piece:hover,.rb-piece.selected{border-color:#c4ff3d;background:#203420}
.rb-piece.used{opacity:.28;cursor:not-allowed}
.rb-piece-inner{display:grid;gap:4px}
.rb-piece-square{width:16px;height:16px;border-radius:3px;background:#b5ff50;box-shadow:inset 0 3px #ffffff44}
.rb-piece-square.empty{visibility:hidden}
.rb-falling-board{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;aspect-ratio:10/18;max-width:355px;margin:auto;padding:8px;background:#080c13;border:2px solid #6e6483;border-radius:8px}
.rb-fall-cell{border-radius:2px;background:#162022;border:1px solid #223032}
.rb-fall-cell.on{background:var(--tile,#c4ff3d);box-shadow:inset 0 2px #ffffff55,0 0 4px #ffffff24;border-color:#ffffff28}
.arcade-mobile{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:19px 0 0}
.arcade-mobile button{min-width:52px;font-size:19px;padding:9px 15px;touch-action:manipulation}
.rb-memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:560px;margin:10px auto 15px}
.rb-memory-tile{aspect-ratio:1;background:linear-gradient(135deg,#1b2c30,#10191b);border:1px solid #567574;border-radius:10px;color:#6eebdc;font-size:clamp(27px,5vw,55px);cursor:pointer;transition:transform .2s,background .2s}
.rb-memory-tile:hover{transform:translateY(-3px);border-color:#6ee7e2}
.rb-memory-tile.open{background:#243e3e;border-color:#7bdcce}
.rb-memory-tile.matched{background:#16402e;border-color:#b6ff56;color:#c4ff3d;cursor:default}
.rb-gems-board{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;max-width:560px;margin:12px auto}
.rb-gem{aspect-ratio:1;display:grid;place-items:center;border:1px solid #4e5b4a;border-radius:9px;background:linear-gradient(135deg,#29382a,#152017);font-size:clamp(20px,4vw,43px);cursor:pointer;transition:transform .12s,border-color .12s,background .12s}
.rb-gem:hover{transform:scale(1.06);border-color:#c4ff3d}
.rb-gem.selected{border:2px solid #d9ff8e;background:#3c4e2e;box-shadow:0 0 18px #b8ff6040}
.rb-gem.clear{opacity:.25}
.arcade-bottom{font-size:11px;color:#91a994;border-top:1px solid #365039;padding-top:22px;margin-top:30px}
body[data-page="arcade"] .siteheader .brand strong span{color:#c4ff3d}
@media(max-width:1130px){.arcade-nav{grid-template-columns:repeat(2,1fr)}.arcade-layout{grid-template-columns:minmax(0,1.5fr) minmax(235px,.65fr)}.arcade-game{padding:20px}}
@media(max-width:850px){.arcade-layout{grid-template-columns:1fr}.arcade-side{display:grid;grid-template-columns:repeat(2,1fr)}.arcade-intro{padding-top:50px}.arcade-intro h1{font-size:90px}}
@media(max-width:575px){.arcade-intro h1{font-size:clamp(67px,15vw,95px)}.arcade-intro p{font-size:14px}.arcade-shell{padding:25px 0 60px}.arcade-nav{gap:8px}.arcade-nav button{padding:10px;gap:8px}.arcade-nav .nav-art{width:34px;height:38px;font-size:19px}.arcade-nav .nav-text strong{font-size:11px}.arcade-nav .nav-text small{font-size:9px}.arcade-game{padding:15px}.arcade-game-head{display:block}.arcade-game h2{font-size:43px}.arcade-badge{display:inline-block;margin-top:12px}.arcade-stat{padding:10px 7px}.arcade-stat strong{font-size:30px}.rb-block-pieces{gap:6px}.rb-piece-square{width:12px;height:12px}.rb-piece{min-height:66px}.rb-memory-board,.rb-gems-board{gap:5px}.arcade-side{grid-template-columns:1fr}.arcade-mobile button{min-width:42px}}
@media(prefers-reduced-motion:reduce){.rb-grid-cell,.arcade-nav button,.rb-memory-tile,.rb-gem{transition:none!important}}

/* Keep game-selector controls clear of the sticky navigation when returning from a lower game. */
.arcade-nav button{scroll-margin-top:150px}
.arcade-nav{scroll-margin-top:140px}