/* Pharaoh's Vault skin on the shared game shell: gilded relief on lapis, a pylon gate, stone niches, scarab spin. */
:root{
  --lapis:#3466C2; --lapis-hi:#7A9EE0; --lapis-lo:#172D58; --stone:#1A120A; --stone-hi:#3A2A1C; --gold:#E8B04A; --gold-hi:#F4D8A4; --gold-lo:#7F6028;
  --ink:#F6E7C4; --muted:#C8B48E;
  --display:"Limelight",Georgia,serif; --ui:"Mulish",system-ui,sans-serif;
  --line:color-mix(in srgb,var(--gold) 45%,transparent); --radius:10px; --radius-sm:8px;
  --panel-bg:linear-gradient(180deg,#2A1E12,#140D07); --panel-border:var(--gold-lo);
  --hud-bg:linear-gradient(180deg,rgba(58,42,28,.96),rgba(26,18,10,.97));
  --ibtn-bg:linear-gradient(180deg,#3A2A1C,#1A120A); --ibtn-ink:var(--gold-hi);
  --btn-bg:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo)); --btn-ink:#1A1004;
  --window-bg:linear-gradient(180deg,#120C06,#22180E 50%,#120C06); --window-radius:4px; --reel-sep:transparent; --win-glow:var(--gold); --focus:#FFE8A0;
  --expand-ease:cubic-bezier(.25,1.4,.45,1); --fall-ease:cubic-bezier(.3,0,.2,1.04);
}
body{background:var(--bg)}
/* scene, one key light: a torch high on the left. The far wall of the vault hall (warm, low contrast) with the glow of
   the light behind the board; four sandstone columns in the middle distance, lit on their left (the right pair stands
   further from the torch, so it is darker); a cool shaft from the upper right for the rim; gold dust; the vignette and
   one static grain layer. "nile-dusk" = the river at sunset; Vault Spins = the inner vault */
.scene .hall{background:radial-gradient(44% 38% at 50% 46%,rgba(255,196,112,.2),transparent 72%),
  radial-gradient(90% 75% at 26% 18%,color-mix(in srgb,var(--stone-hi) 76%,#7A5628) 0%,color-mix(in srgb,var(--stone) 60%,#3E2C16) 42%,var(--stone) 74%,#080503 100%)}
.scene .cols{opacity:.85;
  background:linear-gradient(90deg,#4A3622,#6A4F32 20%,#3A2A19 58%,#1A120A) 2vw 0/7vw 100% no-repeat,
    linear-gradient(90deg,#3E2D1C,#5A432A 20%,#302316 58%,#160F08) 11vw 0/4.6vw 100% no-repeat,
    linear-gradient(90deg,#33251A,#4A3722 20%,#271C11 58%,#110B06) right 11vw top 0/4.6vw 100% no-repeat,
    linear-gradient(90deg,#3A2A1A,#523C26 20%,#2C2014 58%,#140D07) right 2vw top 0/7vw 100% no-repeat;
  -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent);mask:linear-gradient(180deg,transparent,#000 14%,#000 78%,transparent)}
.scene .torch{left:-14vw;top:-16vh;right:auto;bottom:auto;width:62vw;height:72vh;background:radial-gradient(closest-side,rgba(255,178,86,.36),rgba(255,128,40,.12) 55%,transparent);animation:pv-flicker 3.2s ease-in-out infinite alternate}
@keyframes pv-flicker{0%{opacity:.78}35%{opacity:1}60%{opacity:.86}100%{opacity:.95}}
.scene .shaft{background:linear-gradient(236deg,rgba(159,192,255,.1) 0%,rgba(159,192,255,.04) 24%,transparent 40%),
  linear-gradient(236deg,transparent 12%,rgba(159,192,255,.07) 17%,rgba(159,192,255,.03) 27%,transparent 33%);mix-blend-mode:screen}
.scene .vig{background:radial-gradient(125% 100% at 50% 45%,transparent 46%,rgba(5,3,1,.5) 100%)}
.scene .grain{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px;opacity:.06;mix-blend-mode:overlay}
body.bg-nile-dusk .scene .shaft{opacity:0}
.scene .dusk,.scene .vaultfs{opacity:0;transition:opacity 1s}
.scene .dusk{background:linear-gradient(180deg,#2A1640 0%,#9A4A3A 46%,#E39A4C 60%,#3A2416 61%,#1A120A 100%),url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400V300L260 120 520 300 640 220 820 300 1080 60 1380 300 1600 240V400Z' fill='%23170E08'/%3E%3C/svg%3E") bottom/100% 45% no-repeat}
body.bg-nile-dusk .scene .dusk{opacity:1;background-blend-mode:normal}
body.bg-nile-dusk .scene .hall,body.bg-nile-dusk .scene .torch{opacity:0}
.scene .vaultfs{background:radial-gradient(60% 50% at 50% 60%,rgba(255,210,120,.35),transparent 70%),radial-gradient(90% 60% at 50% 100%,#6A4A14,var(--stone) 70%)}
body.fs .scene .vaultfs{opacity:1}
/* the dust drifts up by two tiles (600 px) by transform, so the layer is never repainted */
.scene .dust{bottom:-600px;background-image:radial-gradient(1.5px 1.5px at 20% 30%,#FFE8A0,transparent),radial-gradient(1px 1px at 70% 60%,#FFE8A0,transparent),radial-gradient(1.2px 1.2px at 40% 80%,#F2C35A,transparent),radial-gradient(1px 1px at 85% 20%,#FFF2C2,transparent);background-size:340px 300px;opacity:.5;animation:pv-dust 40s linear infinite}
@keyframes pv-dust{to{transform:translateY(-600px)}}
/* title */
.logo h1{font-weight:400;letter-spacing:.04em;color:var(--gold-hi);text-shadow:0 2px 0 #3A2304,0 0 18px color-mix(in srgb,var(--gold) 55%,transparent)}
.ibtn{border-color:var(--gold-lo)}.ibtn:hover{border-color:var(--gold);box-shadow:0 0 12px color-mix(in srgb,var(--gold) 45%,transparent)}
/* pylon gate: two battered sandstone towers (drawn in skin.js, lit from the upper left) under a cavetto cornice with
   the winged sun. They sit outside the board's box (absolutely), so the board keeps the size the shared layout gave it */
.frame{padding-top:calc(var(--cell)*.4);position:relative}
.pylon{position:absolute;top:calc(var(--cell)*.3);bottom:calc(var(--cell)*.5);width:calc(var(--cell)*.4);z-index:0;pointer-events:none}
.pylon svg{display:block;width:100%;height:100%}
.pylon.l{left:calc(var(--cell)*-.36)}.pylon.r{right:calc(var(--cell)*-.36)}
/* the cornice: a sandstone cavetto (lit lip, shaded throat, fluting) on a gilded torus roll, the key light from the left */
.lintel{position:absolute;left:calc(var(--cell)*-.42);right:calc(var(--cell)*-.42);top:0;height:calc(var(--cell)*.34);z-index:3;pointer-events:none;border-radius:2px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 5px 12px rgba(0,0,0,.55);
  background:linear-gradient(90deg,rgba(255,236,190,.16),transparent 38%,transparent 66%,rgba(10,6,2,.26)),
    linear-gradient(180deg,#F2DEB2 0 1px,transparent 1px),
    linear-gradient(180deg,transparent 80%,#FFF0C0 80%,var(--gold) 86%,var(--gold-lo) 95%,#3A2304),
    repeating-linear-gradient(90deg,rgba(255,240,210,.14) 0 1px,transparent 1px 7px,rgba(34,22,10,.3) 7px 9px,transparent 9px 10px),
    linear-gradient(180deg,#C9B089,#A88B66 18%,#6A5238 56%,#8A7052 80%)}
/* the winged sun keeps its 5:1 drawing inside the cornice at every width */
.lintel .sun{display:block;height:100%;aspect-ratio:5/1;max-width:100%}
.lintel .sun svg{display:block;width:100%;height:100%}
#board.reels-board{position:relative;z-index:1;padding:6px;border-radius:6px;background:linear-gradient(180deg,#2A1E12,#140D07);border:2px solid var(--gold-lo);box-shadow:0 24px 60px rgba(0,0,0,.6)}
body[data-variant="clean"] .pylon,body[data-variant="clean"] .lintel{display:none}
body[data-variant="clean"] .frame{padding-top:0}
/* stone niches: every reel is a recessed slab of stone (separated by its own dark rim, no gap) */
.reels-board .reel{border:0;border-radius:3px;background:linear-gradient(180deg,#0C0804,#1E150C 18%,#1E150C 82%,#0C0804);box-shadow:inset 0 0 0 1px rgba(232,176,74,.25),inset 0 8px 16px rgba(0,0,0,.75),inset 0 -8px 16px rgba(0,0,0,.75)}
.reels-board .reel.tease{box-shadow:inset 0 0 26px var(--gold)}
.reels-board .cell.win::after{border-color:var(--gold-hi);border-radius:6px;box-shadow:0 0 14px var(--gold),inset 0 0 10px color-mix(in srgb,var(--gold) 40%,transparent)}
.sym.wild .tag,.xcol .tag{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);font-family:var(--display);font-size:calc(var(--cell)*.17);letter-spacing:.08em;color:#1A1004;background:linear-gradient(180deg,var(--gold-hi),var(--gold));border:1px solid #3A2304;border-radius:3px;padding:0 .4em;line-height:1.35}
.xcol img{position:absolute;inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
.xcol{box-shadow:0 0 22px color-mix(in srgb,var(--gold) 70%,transparent)}
.xcol .tag{bottom:3%;font-size:calc(var(--cell)*.2)}
.ptc .sym{width:100%;height:100%}
/* message and free-spin bar */
.message b{color:var(--gold-hi)}
.fsbar{background:rgba(20,13,7,.85);border-color:var(--gold)}.fsbar .fsx{color:var(--gold-hi);font-size:20px}.fsbar b{color:var(--gold-hi)}
/* HUD: a stepped altar plinth */
.hud{border:0;border-radius:6px 6px 0 0;box-shadow:inset 0 2px 0 color-mix(in srgb,var(--gold) 55%,transparent),0 -6px 24px rgba(0,0,0,.45);
  clip-path:polygon(2% 0,98% 0,100% 100%,0 100%)}
.meter b{color:#FFF6E0}.meter.win b{color:var(--gold-hi);text-shadow:0 0 12px color-mix(in srgb,var(--gold) 50%,transparent)}
.demo{background:var(--gold);color:#1A1004}
.pm{border-color:var(--gold-lo)}.auto{border-color:var(--gold-lo)}
.auto span{background:var(--gold);color:#1A1004}
.tablet{border-color:var(--gold-lo);background:linear-gradient(180deg,#2A1E12,#140D07)}.tablet .th{color:var(--gold-hi);font-weight:400}
/* scarab-oval spin button: a polished lapis dome (its gloss at the upper left) in a gold ring, the gold scarab on it */
.spin{color:var(--gold-hi);border-radius:50%/58%;background:radial-gradient(30% 20% at 34% 24%,rgba(255,255,255,.3),transparent),radial-gradient(ellipse at 50% 35%,var(--lapis-hi),var(--lapis) 45%,var(--lapis-lo) 72%,#0A1430 78%,var(--gold-lo) 80%,var(--gold) 86%,var(--gold-hi) 90%,var(--gold-lo) 96%);
  box-shadow:0 0 0 2px #3A2304,0 10px 24px rgba(0,0,0,.6),0 0 22px color-mix(in srgb,var(--gold) 45%,transparent)}
.spin svg{width:56%;height:56%;filter:drop-shadow(0 1px 0 #0A1430)}
.spin:active:not(:disabled) svg{transform:translate(-50%,-50%) scaleX(1.12)}
/* stone doors into the Vault Spins */
.doors{position:fixed;inset:0;z-index:40;display:none;pointer-events:none}
.doors.show{display:block}
.door{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#2A1E12,#3E2C1A 50%,#2A1E12),repeating-linear-gradient(0deg,transparent 0 60px,rgba(0,0,0,.35) 60px 63px);
  background-blend-mode:multiply;box-shadow:inset 0 0 40px rgba(0,0,0,.6)}
.door.l{left:0;border-right:3px solid var(--gold-lo)}.door.r{right:0;border-left:3px solid var(--gold-lo)}
.door::after{content:"";position:absolute;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;background:radial-gradient(circle,var(--gold-hi),var(--gold) 55%,var(--gold-lo));box-shadow:0 0 18px rgba(0,0,0,.6)}
.door.l::after{right:18px}.door.r::after{left:18px}
/* overlays and panels */
.overlay{background:radial-gradient(circle at 50% 45%,rgba(40,26,10,.8),rgba(5,3,1,.92) 75%)}
.ovcard h2{font-weight:400;color:var(--gold-hi);text-shadow:0 4px 0 #3A2304,0 0 30px color-mix(in srgb,var(--gold) 70%,transparent);animation:pv-rise .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes pv-rise{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.ovamt{color:#FFF6E0;text-shadow:0 0 18px color-mix(in srgb,var(--gold) 80%,transparent),0 3px 0 #3A2304}
.panel{box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 color-mix(in srgb,var(--gold) 30%,transparent)}
.panel h2,.panel h3{font-weight:400}
/* lapis reads only 3:1 on the night stone, so the panel titles and the won amounts are gold, as every other text */
.panel h2,table.hist .won{color:var(--gold-hi)}
.chips button[aria-pressed="true"]{background:var(--gold);color:#1A1004;border-color:var(--gold)}
.tog[aria-checked="true"]{background:var(--lapis-lo)}
/* phones: no room beside the board for the pylon towers; a smaller title */
@media (max-width:860px),(max-aspect-ratio:4/5){
  .pylon{display:none}
  .lintel{left:0;right:0}
  .logo h1{font-size:clamp(17px,5.4vw,30px);letter-spacing:0}
}
/* small phones: the "N lines · $X per line" sub-label was making the bet meter wide enough to squeeze the −/+ keys to
   ~24px; a smaller, tighter sub-label lets the keys keep the shell's size (the big bet value is unchanged) */
@media (max-width:400px){
  #mBetSub{font-size:10.5px;line-height:1.1;display:block}
  .pm{flex-shrink:0}
}