/* Pixel Bean: arcade cafe. Neon on night blue, CRT scanlines, pixel buttons, HUD, game-menu layout.
   Change the colours in :root. Logical properties keep Arabic (right to left) working. */
@font-face{font-family:"Press Start 2P";src:url(../fonts/press-start-2p-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"VT323";src:url(../fonts/vt323-latin-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Reem Kufi";src:url(../fonts/reem-kufi-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Reem Kufi";src:url(../fonts/reem-kufi-latin-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-arabic-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-arabic-700.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC,U+200C-200E}
@font-face{font-family:"Tajawal";src:url(../fonts/tajawal-latin-500.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F}

:root{
  --bg:#0B0720; --panel:#150D3A; --panel2:#1F1456; --mag:#FF2BD6; --cy:#19F0FF; --yel:#FFE600; --lime:#7CFF4F; --tx:#F4F0FF; --dim:#BDB4E8;
  --dir:1; --f-px:"Press Start 2P","Reem Kufi",monospace; --f-body:"VT323","Tajawal",ui-monospace,monospace;
  --sh:calc(var(--dir) * 6px) 6px 0 #000; --gut:max(18px,calc((100vw - 1180px) / 2));
}
[dir=rtl]{--dir:-1}
[data-lang=ar]{--f-px:"Reem Kufi","Press Start 2P",sans-serif;--f-body:"Tajawal","VT323",sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--f-body);font-size:1.4rem;line-height:1.25;padding-bottom:70px;overflow-x:hidden;
  background-image:linear-gradient(rgba(25,240,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(25,240,255,.06) 1px,transparent 1px);background-size:36px 36px}
[data-lang=ar] body,body[data-x]{}
[data-lang=ar]{font-size:1.05rem}
[data-lang=ar] body{font-size:1.12rem;line-height:1.6;font-weight:500}
img,svg,canvas{display:block;max-width:100%}
img.noimg{visibility:hidden}
a{color:var(--cy)}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,select{font:inherit;color:inherit}
[data-lang=ar] *{letter-spacing:0!important}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0}
:focus-visible{outline:4px solid var(--yel);outline-offset:3px}
.skip{position:absolute;inset-inline-start:10px;top:-80px;background:var(--yel);color:#000;padding:10px 14px;font-family:var(--f-px);font-size:.7rem;z-index:200}
.skip:focus{top:8px}
.wrap{width:min(1180px,100% - 36px);margin-inline:auto}
.small{font-size:1.1rem;color:var(--dim);margin-top:10px}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}

/* CRT overlay: scanlines + a slow bright band */
.crt{position:fixed;inset:0;z-index:90;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.2) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45) 100%)}
.crt::after{content:"";position:absolute;inset-inline:0;height:22vh;top:-22vh;background:linear-gradient(to bottom,transparent,rgba(25,240,255,.05),transparent);animation:roll 9s linear infinite}
@keyframes roll{to{transform:translateY(145vh)}}

/* HUD */
.hud{position:sticky;top:0;z-index:70;background:var(--bg);border-bottom:4px solid var(--mag)}
.hud-in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px var(--gut);min-height:56px}
.score{font-family:var(--f-px);font-size:.6rem;line-height:1.5;color:var(--dim)}
.score b{display:block;font-size:.85rem;color:var(--yel);font-weight:400}
[data-lang=ar] .score{font-size:.85rem}[data-lang=ar] .score b{font-size:1.1rem}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--tx);font-family:var(--f-px);font-size:.75rem;text-shadow:2px 2px 0 var(--mag)}
[data-lang=ar] .logo{font-size:1.2rem}
.lives{display:none;gap:4px}
.px-btn{display:inline-block;background:var(--yel);color:#0B0720;border:0;padding:12px 16px;font-family:var(--f-px);font-size:.65rem;line-height:1.4;text-decoration:none;cursor:pointer;text-align:center;
  box-shadow:inset calc(var(--dir) * -4px) -4px 0 rgba(0,0,0,.28),inset calc(var(--dir) * 4px) 4px 0 rgba(255,255,255,.55),var(--sh);transition:transform .08s steps(2)}
.px-btn:hover{background:#fff176}
.px-btn:active{transform:translate(calc(var(--dir) * 4px),4px);box-shadow:inset calc(var(--dir) * -4px) -4px 0 rgba(0,0,0,.28),inset calc(var(--dir) * 4px) 4px 0 rgba(255,255,255,.55)}
.px-btn.sm{padding:8px 12px;font-size:.6rem}
.px-btn.big{padding:16px 22px;font-size:.8rem}
.px-btn.full{width:100%}
.px-btn.ghost{background:transparent;color:var(--cy);box-shadow:inset 0 0 0 4px var(--cy)}
[data-lang=ar] .px-btn{font-size:.95rem}[data-lang=ar] .px-btn.big{font-size:1.1rem}[data-lang=ar] .px-btn.sm{font-size:.9rem}
.blink{animation:blink 1s steps(2) infinite}
@keyframes blink{50%{background:var(--mag);color:#fff}}
.dock{position:fixed;inset:auto 0 0 0;background:var(--panel);border-top:4px solid var(--cy);display:grid;grid-template-columns:repeat(4,1fr);z-index:75}
.dock a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px;text-decoration:none;color:var(--tx);font-family:var(--f-px);font-size:.5rem}
[data-lang=ar] .dock a{font-size:.85rem}
.dock a:hover,.dock a:focus-visible{background:var(--mag);color:#fff}
@media(min-width:900px){
  body{padding-bottom:0}
  .lives{display:flex}
  .hud-in{display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center}
  .logo{justify-self:center;font-size:1rem}.lives{justify-self:end}
  .dock{position:static;border:0;background:var(--bg);display:flex;justify-content:center;gap:10px;padding:0 var(--gut) 8px}
  .dock a{flex-direction:row;gap:8px;padding:8px 16px;font-size:.6rem;border:3px solid var(--panel2)}
  [data-lang=ar] .dock a{font-size:.9rem}
}

/* TITLE SCREEN */
.title{padding:36px 0 0;position:relative}
.title-grid{width:min(1180px,100% - 36px);margin-inline:auto;display:grid;gap:34px;align-items:center}
.tag{font-family:var(--f-px);font-size:.6rem;color:var(--cy);line-height:1.6}
[data-lang=ar] .tag{font-size:1rem}
.glitch{font-family:var(--f-px);font-weight:400;font-size:clamp(2.3rem,11vw,5.6rem);line-height:1.15;color:var(--yel);margin:18px 0;text-shadow:4px 0 var(--mag),-4px 0 var(--cy);animation:glitch 6s steps(1) infinite}
[data-lang=ar] .glitch{font-size:clamp(3rem,15vw,7rem);line-height:1.1}
@keyframes glitch{0%,92%,100%{transform:none;clip-path:none}93%{transform:translateX(6px);clip-path:inset(10% 0 55% 0)}94%{transform:translateX(-6px);clip-path:inset(55% 0 10% 0)}95%{transform:none;clip-path:none}96%{transform:translateX(4px)}}
.lead{max-width:34em;font-size:1.5rem;color:var(--tx)}
[data-lang=ar] .lead{font-size:1.2rem}
.press{margin:24px 0 18px}
.coin{display:flex;align-items:center;gap:10px;color:var(--lime);font-size:1.25rem}
.screen{position:relative;justify-self:center;width:100%}
.screen-in{position:relative;border:12px solid #2A2160;border-radius:22px;overflow:hidden;aspect-ratio:3/2;background:#000;box-shadow:0 0 0 4px #000,0 0 44px rgba(255,43,214,.45),var(--sh)}
.screen-in img{width:100%;height:100%;object-fit:cover;filter:saturate(1.3) contrast(1.15)}
.screen-in::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.28) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 70px rgba(0,0,0,.75);pointer-events:none}
#pix{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:2}
.screen-tag{position:absolute;z-index:3;inset-block-start:10px;inset-inline-start:10px;background:var(--mag);color:#fff;font-family:var(--f-px);font-size:.55rem;padding:6px 10px}
[data-lang=ar] .screen-tag{font-size:.9rem}
.stand{width:30%;height:16px;margin:0 auto;background:#2A2160;box-shadow:0 8px 0 #1a1440}
.stats{width:min(1180px,100% - 36px);margin:34px auto 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stats li{background:var(--panel);border:4px solid var(--mag);padding:12px 8px;text-align:center;box-shadow:var(--sh)}
.stats b{display:block;font-family:var(--f-px);font-weight:400;font-size:1.3rem;color:var(--yel)}
.stats span{font-family:var(--f-px);font-size:.45rem;color:var(--dim);line-height:1.6;display:block;margin-top:6px}
[data-lang=ar] .stats span{font-size:.85rem}
.ticker{background:var(--mag);color:#0B0720;overflow:hidden;white-space:nowrap;font-family:var(--f-px);font-size:.6rem;padding:10px 0;border-block:4px solid #000}
.ticker-track{display:inline-flex;width:max-content;animation:mq 40s linear infinite}
[dir=rtl] .ticker-track{animation-name:mq-r}
.ticker-track span{padding-inline:28px;display:inline-block}
.ticker-track span::after{content:"\25C6";margin-inline-start:56px}
[data-lang=ar] .ticker{font-size:1rem}
@keyframes mq{to{transform:translateX(-50%)}}@keyframes mq-r{to{transform:translateX(50%)}}
@media(min-width:900px){.title-grid{grid-template-columns:1fr 1.05fr;gap:60px}.title{padding-top:56px}}

/* LEVELS */
.lvl{padding:70px 0 80px;position:relative}
.alt{background:rgba(31,20,86,.55);border-block:4px dashed var(--panel2)}
.lvl-head{display:grid;gap:12px;margin-bottom:30px;max-width:760px}
.lvl-no{font-family:var(--f-px);font-size:.65rem;color:var(--cy);display:flex;align-items:center;gap:12px}
.lvl-no::before{content:"\25B6";color:var(--mag);animation:blink2 1s steps(2) infinite}
@keyframes blink2{50%{opacity:0}}
[data-lang=ar] .lvl-no{font-size:1.05rem}
.lvl h2{font-family:var(--f-px);font-weight:400;font-size:clamp(1.15rem,4.6vw,2.2rem);line-height:1.5;text-shadow:3px 3px 0 var(--mag)}
[data-lang=ar] .lvl h2{font-size:clamp(1.8rem,6vw,2.8rem);line-height:1.3}
.rv-on .rv:not(.in){opacity:0;transform:translateY(18px)}
.rv{transition:opacity .4s steps(4),transform .4s steps(4)}
.pnl{background:var(--panel);border:4px solid var(--cy);box-shadow:var(--sh);padding:20px}

/* leaderboard */
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.tabs button{background:var(--panel2);color:var(--tx);border:4px solid var(--panel2);padding:10px 14px;font-family:var(--f-px);font-size:.6rem;cursor:pointer}
[data-lang=ar] .tabs button{font-size:.95rem}
.tabs button[aria-pressed=true]{background:var(--cy);color:#0B0720;border-color:var(--cy)}
.menu-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:30px;align-items:start}
.board{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;counter-reset:rk}
.row{position:relative;display:flex;gap:12px;align-items:center;width:100%;text-align:start;background:var(--panel);border:4px solid var(--panel2);padding:12px;cursor:pointer;color:var(--tx)}
.row:hover,.row:focus-visible{background:var(--panel2);border-color:var(--yel)}
.row:hover .nm::before,.row:focus-visible .nm::before{content:"\25B6\00a0";color:var(--mag)}
.rank{font-family:var(--f-px);font-size:.6rem;width:52px;height:52px;display:grid;place-content:center;background:#000;color:var(--dim);border:3px solid var(--dim)}
[data-lang=ar] .rank{font-size:.95rem}
.board li:nth-child(1) .rank{color:#FFE600;border-color:#FFE600;box-shadow:0 0 12px #FFE600}
.board li:nth-child(2) .rank{color:#E6E6F5;border-color:#E6E6F5}
.board li:nth-child(3) .rank{color:#FF9F4A;border-color:#FF9F4A}
.thumb{width:56px;height:56px;flex:none;object-fit:cover;image-rendering:pixelated;border:3px solid var(--cy)}
.info-c{min-width:0;flex:1}
.nm{font-family:var(--f-px);font-size:.62rem;line-height:1.6;color:var(--yel)}
[data-lang=ar] .nm{font-size:1.05rem;line-height:1.4}
.ds{font-size:1.2rem;color:var(--dim);line-height:1.15}
[data-lang=ar] .ds{font-size:1rem}
.meter{display:flex;align-items:center;gap:8px;margin-top:6px;font-family:var(--f-px);font-size:.45rem;color:var(--lime)}
[data-lang=ar] .meter{font-size:.8rem}
.meter i{display:block;height:10px;width:var(--p);max-width:120px;background:repeating-linear-gradient(90deg,var(--lime) 0 6px,transparent 6px 8px)}
.pr{text-align:end;font-family:var(--f-px);font-size:.65rem;color:var(--tx);white-space:nowrap}
[data-lang=ar] .pr{font-size:1rem}
.pr b{display:block;font-weight:400;margin-top:6px;color:#0B0720;background:var(--lime);padding:5px 8px;font-size:.5rem;text-align:center}
[data-lang=ar] .pr b{font-size:.85rem}
.row .qty{position:absolute;inset-block-start:-10px;inset-inline-end:-6px;background:var(--mag);color:#fff;font-family:var(--f-px);font-size:.55rem;padding:5px 7px;min-width:26px;text-align:center}
.tray h3{font-family:var(--f-px);font-weight:400;font-size:.75rem;color:var(--mag);margin-bottom:12px}
[data-lang=ar] .tray h3{font-size:1.2rem}
.tray-list{display:grid;gap:8px;margin-bottom:10px}
.tray-list li{display:flex;align-items:center;gap:8px;border-bottom:2px dotted var(--panel2);padding-bottom:6px}
.tray-list li span{flex:1}
.tray-list button{background:var(--mag);color:#fff;border:0;width:30px;height:30px;font-family:var(--f-px);font-size:.7rem;cursor:pointer}
.tray-empty{color:var(--dim)}
.tray-total{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--f-px);font-size:.65rem;margin:12px 0}
[data-lang=ar] .tray-total{font-size:1rem}
.tray-total b{font-weight:400;color:var(--yel);font-size:.85rem}
[data-lang=ar] .tray-total b{font-size:1.2rem}
form label,.lab{display:grid;gap:6px;margin-bottom:12px;font-size:1.2rem;color:var(--dim)}
[data-lang=ar] form label,[data-lang=ar] .lab{font-size:1rem}
input,select{background:#05030F;border:4px solid var(--cy);padding:10px 12px;width:100%;min-height:46px;font-size:1.3rem;border-radius:0;color:var(--tx)}
[data-lang=ar] input,[data-lang=ar] select{font-size:1.05rem}
input:focus,select:focus{outline:4px solid var(--yel);outline-offset:2px}
::placeholder{color:#7F76B8}
.err{background:#3B0A1F;border:3px solid #FF5C8A;color:#FFB3CB;padding:8px 10px;margin-top:10px}
.done{background:#0C3B22;border:3px solid var(--lime);color:var(--lime);padding:8px 10px;margin-top:10px}
.done a{color:#fff}
.tray-pill{position:fixed;inset-inline:14px;bottom:78px;z-index:72;background:var(--mag);color:#fff;border:4px solid #000;padding:10px 14px;font-family:var(--f-px);font-size:.6rem;display:none;justify-content:space-between;text-decoration:none;box-shadow:var(--sh)}
[data-lang=ar] .tray-pill{font-size:.95rem}
.tray-pill.on{display:flex}
@media(min-width:1000px){.menu-grid{grid-template-columns:1fr 360px}.tray{position:sticky;top:130px}.tray-pill{display:none!important}}

/* game nights */
.next{text-align:center;margin-bottom:26px;border-color:var(--yel)}
.next-label{font-family:var(--f-px);font-size:.6rem;color:var(--mag)}
[data-lang=ar] .next-label{font-size:1rem}
.next-name{font-family:var(--f-px);font-size:.8rem;color:var(--yel);margin:10px 0 16px;line-height:1.5}
[data-lang=ar] .next-name{font-size:1.4rem}
.clock{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.clock div{background:#000;border:4px solid var(--cy);padding:10px 8px;min-width:74px}
.clock b{display:block;font-family:var(--f-px);font-weight:400;font-size:1.4rem;color:var(--lime)}
.clock span{font-family:var(--f-px);font-size:.45rem;color:var(--dim)}
[data-lang=ar] .clock span{font-size:.85rem}
.stages{display:grid;gap:18px}
.stage{background:var(--panel);border:4px solid var(--panel2);display:grid;box-shadow:var(--sh)}
.stage.next-up{border-color:var(--mag);animation:edge 1s steps(2) infinite}
@keyframes edge{50%{border-color:var(--yel)}}
.stage header{background:var(--cy);color:#0B0720;font-family:var(--f-px);font-size:.6rem;padding:10px 14px;display:flex;justify-content:space-between}
[data-lang=ar] .stage header{font-size:.95rem}
.stage .body{padding:16px;display:grid;gap:8px}
.stage h3{font-family:var(--f-px);font-weight:400;font-size:.8rem;line-height:1.6;color:var(--yel)}
[data-lang=ar] .stage h3{font-size:1.3rem;line-height:1.4}
.stage .when{color:var(--mag);font-family:var(--f-px);font-size:.6rem}
[data-lang=ar] .stage .when{font-size:1rem}
.stage dl{margin:6px 0 0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.stage dt{color:var(--dim)}.stage dd{margin:0}
@media(min-width:800px){.stages{grid-template-columns:repeat(3,1fr)}}

/* cabinet wall */
.wall{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:10px;margin-bottom:34px}
.tile{position:relative;overflow:hidden;border:4px solid var(--panel2);background:var(--panel);grid-column:span 1}
.tile.wide{grid-column:span 2}
.tile img{width:100%;height:100%;object-fit:cover;filter:saturate(1.35) contrast(1.12);transition:transform .5s steps(6)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,43,214,.38),rgba(25,240,255,.22));mix-blend-mode:screen;transition:opacity .3s;pointer-events:none}
.tile:hover::after,.tile:focus-visible::after{opacity:0}
.tile:hover img{transform:scale(1.08)}
.tile figcaption{position:absolute;inset-inline:0;bottom:0;z-index:2;background:rgba(5,3,15,.88);padding:8px 10px;transform:translateY(calc(100% - 30px));transition:transform .25s steps(4)}
.tile:hover figcaption,.tile:focus-visible figcaption,.tile:focus-within figcaption{transform:none}
.tile figcaption b{display:block;font-family:var(--f-px);font-weight:400;font-size:.5rem;color:var(--cy);line-height:1.9}
[data-lang=ar] .tile figcaption b{font-size:.9rem}
.tile figcaption span{font-size:1.15rem;line-height:1.1;display:block}
.hi{max-width:560px;margin-inline:auto;border-color:var(--yel)}
.hi h3{font-family:var(--f-px);font-weight:400;font-size:.75rem;color:var(--yel);margin-bottom:16px;line-height:1.6}
[data-lang=ar] .hi h3{font-size:1.2rem}
.hi li{display:flex;gap:10px;align-items:baseline;font-family:var(--f-px);font-size:.7rem;padding:7px 0}
.hi li i{flex:1;border-bottom:3px dotted var(--panel2)}
.hi li b{font-weight:400;color:var(--lime)}.hi li span:first-child{color:var(--dim)}
.hi li:first-child{color:var(--yel)}
@media(min-width:800px){.wall{grid-template-columns:repeat(4,1fr);grid-auto-rows:210px}}

/* booking */
.book-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.zones{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-content:start}
.zone{position:relative;display:block;min-height:150px;border:4px solid var(--panel2);overflow:hidden;cursor:pointer;background:var(--panel)}
.zone input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;min-height:0;cursor:pointer}
.zone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(1.3)}
.zone .zt{position:relative;display:grid;gap:4px;padding:12px;background:linear-gradient(to top,rgba(5,3,15,.95),rgba(5,3,15,.1));height:100%;align-content:end;min-height:150px}
.zone b{font-family:var(--f-px);font-weight:400;font-size:.62rem;color:var(--yel);line-height:1.5}
[data-lang=ar] .zone b{font-size:1.05rem}
.zone span{font-size:1.1rem;line-height:1.1}
.zone em{font-style:normal;font-family:var(--f-px);font-size:.5rem;color:var(--lime)}
[data-lang=ar] .zone em{font-size:.85rem}
.zone:has(input:checked){border-color:var(--cy);box-shadow:0 0 0 3px #000,0 0 24px rgba(25,240,255,.55)}
.zone:has(input:checked)::after{content:"P1";position:absolute;inset-block-start:8px;inset-inline-end:8px;background:var(--cy);color:#000;font-family:var(--f-px);font-size:.55rem;padding:5px 7px;animation:blink2 1s steps(2) infinite}
.zone:has(input:focus-visible){outline:4px solid var(--yel);outline-offset:3px}
.stepper{display:flex;align-items:center;gap:0}
.stepper button{width:46px;height:46px;background:var(--cy);color:#000;border:0;font-family:var(--f-px);cursor:pointer;font-size:1rem}
.stepper output{min-width:64px;text-align:center;border-block:4px solid var(--cy);height:46px;line-height:38px;font-family:var(--f-px);color:var(--yel);background:#05030F}
.slots{display:flex;flex-wrap:wrap;gap:8px}
.slot{position:relative}
.slot input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;min-height:0;cursor:pointer}
.slot span{display:block;border:4px solid var(--panel2);padding:8px 12px;font-family:var(--f-px);font-size:.6rem;background:#05030F}
[data-lang=ar] .slot span{font-size:.95rem}
.slot input:checked + span{background:var(--yel);color:#000;border-color:var(--yel)}
.slot input:focus-visible + span{outline:4px solid var(--cy);outline-offset:2px}
.lab{margin-bottom:12px}
@media(min-width:900px){.book-grid{grid-template-columns:1.1fr .9fr;gap:34px}.zones{grid-template-columns:repeat(2,1fr)}.zone,.zone .zt{min-height:200px}}

/* coin card */
.card-coins{max-width:760px;text-align:center;border-color:var(--lime)}
.coins{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.coins li{display:grid;place-content:center;aspect-ratio:1;background:#05030F;border:4px dashed var(--panel2)}
.coins li.on{border:4px solid var(--yel);animation:pop .35s steps(3)}
.coins li svg{width:44px;height:44px;opacity:.2}
.coins li.on svg{opacity:1}
@keyframes pop{50%{transform:scale(1.15)}}
.coin-msg{font-family:var(--f-px);font-size:.65rem;color:var(--lime);margin-bottom:16px;min-height:1.5em;line-height:1.6}
[data-lang=ar] .coin-msg{font-size:1.05rem}
.card-coins .px-btn{margin:4px}
@media(min-width:700px){.coins{grid-template-columns:repeat(8,1fr)}}

/* footer */
.foot{background:#05030F;border-top:4px solid var(--mag);padding:60px 0 50px}
.foot-grid{display:grid;gap:34px;margin-bottom:24px}
.over{font-family:var(--f-px);font-size:clamp(1.3rem,6vw,2.4rem);color:var(--mag);text-shadow:3px 3px 0 var(--cy);line-height:1.4}
[data-lang=ar] .over{font-size:clamp(2rem,8vw,3.4rem)}
.cont{font-family:var(--f-px);font-size:.8rem;margin:18px 0 22px;display:flex;gap:14px;align-items:center}
[data-lang=ar] .cont{font-size:1.2rem}
.cont b{font-weight:400;font-size:1.6rem;color:var(--yel)}
.info h3{font-family:var(--f-px);font-weight:400;font-size:.75rem;color:var(--cy);margin-bottom:12px}
[data-lang=ar] .info h3{font-size:1.2rem}
.info li{display:flex;justify-content:space-between;gap:12px;border-bottom:2px dotted var(--panel2);padding:5px 0}
.info p{margin-bottom:10px}
#tel{font-family:var(--f-px);font-size:.9rem;color:var(--yel);text-decoration:none}
@media(min-width:800px){.foot-grid{grid-template-columns:1fr 1fr}}
.rain{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:95}
.rain svg{position:absolute;top:-40px;width:32px;height:32px;animation:fall 2.8s steps(14) forwards}
@keyframes fall{to{transform:translateY(112vh)}}
.toast{position:fixed;inset-inline:16px;top:90px;z-index:100;max-width:480px;margin-inline:auto;background:var(--yel);color:#000;font-family:var(--f-px);font-size:.65rem;line-height:1.6;padding:14px;text-align:center;border:4px solid #000;box-shadow:var(--sh)}
[data-lang=ar] .toast{font-size:1.05rem}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv-on .rv:not(.in){opacity:1;transform:none}
  .crt::after{display:none}
}

[dir=rtl] input[inputmode=tel]{text-align:right}