/* Sky Citadel skin on the shared game shell: a gem temple above the clouds, starlight instead of storms. */
:root{
  --gold:#F5C542;--gold2:#FFD86A;--navy:#08152F;--navy2:#102B55;--sky:#4FC3FF;--sky2:#8BE7FF;--elec:#00CFFF;
  --gold-l:color-mix(in srgb,var(--gold2) 55%,#fff);--gold-d:color-mix(in srgb,var(--gold) 60%,#000);--gold-dd:color-mix(in srgb,var(--gold) 22%,#000);
  --goldgrad:linear-gradient(135deg,var(--gold-l) 0%,var(--gold) 18%,var(--gold-d) 38%,var(--gold2) 55%,var(--gold-d) 74%,var(--gold-l) 100%);
  --glass:rgba(5,15,35,.75); --ink:#fff; --muted:#9DB8DA; --line:color-mix(in srgb,var(--gold2) 45%,transparent);
  --display:"Cormorant SC","Cormorant Garamond",Georgia,"Times New Roman",serif; --ui:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:22px; --radius-sm:12px; --panel-bg:linear-gradient(180deg,rgba(18,36,72,.97),rgba(6,14,32,.98)); --panel-border:color-mix(in srgb,var(--gold2) 45%,transparent);
  --hud-bg:var(--glass); --ibtn-bg:var(--glass); --ibtn-ink:var(--gold2);
  --btn-bg:linear-gradient(180deg,var(--gold-l),var(--gold2) 45%,var(--gold-d)); --btn-ink:var(--gold-dd);
  --window-bg:radial-gradient(90% 70% at 50% 40%,rgba(30,60,120,.55),rgba(4,9,24,.94) 70%),#040A1C; --reel-sep:color-mix(in srgb,var(--sky2) 7%,transparent);
  --fall-ease:cubic-bezier(.45,0,.3,1.12); --focus:var(--sky2);
}
body{background:#040A1A}
/* ---- scene ---- */
.scene .sky{background:radial-gradient(130% 75% at 50% 100%,color-mix(in srgb,var(--sky) 45%,var(--navy2)) 0%,color-mix(in srgb,var(--sky) 20%,var(--navy2)) 28%,var(--navy2) 48%,var(--navy) 76%,color-mix(in srgb,var(--navy) 45%,#000) 100%)}
/* free spins: twilight starfield (no storm) */
.scene .skyfs{opacity:0;transition:opacity 1.2s;background:radial-gradient(130% 80% at 50% 100%,#3A5FA8 0%,#1C2F6A 26%,#0E1840 52%,#060A22 78%,#02040E 100%)}
.scene .stars{opacity:.28;transition:opacity 1.2s;background-image:radial-gradient(1px 1px at 20px 30px,#fff 50%,transparent 51%),radial-gradient(1px 1px at 140px 90px,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 70px 160px,#cfefff 50%,transparent 51%),radial-gradient(1px 1px at 190px 200px,#fff 50%,transparent 51%);
  background-size:220px 230px;animation:sc-twinkle 6s ease-in-out infinite alternate;mask:linear-gradient(#000 0%,#000 45%,transparent 75%);-webkit-mask:linear-gradient(#000 0%,#000 45%,transparent 75%)}
@keyframes sc-twinkle{to{opacity:.45}}
.scene .rays{left:50%;top:-30%;right:auto;bottom:auto;width:170vmax;height:170vmax;transform:translateX(-50%);
  background:conic-gradient(from 150deg at 50% 50%,transparent 0deg,color-mix(in srgb,var(--sky2) 10%,transparent) 5deg,transparent 11deg,transparent 19deg,color-mix(in srgb,var(--gold2) 8%,transparent) 24deg,transparent 30deg,transparent 37deg,color-mix(in srgb,var(--sky2) 9%,transparent) 41deg,transparent 47deg,transparent 360deg);
  mask:radial-gradient(circle at 50% 50%,#000 0%,transparent 48%);-webkit-mask:radial-gradient(circle at 50% 50%,#000 0%,transparent 48%);animation:sc-rays 14s ease-in-out infinite alternate}
@keyframes sc-rays{from{transform:translateX(-50%) rotate(-3deg);opacity:.7}to{transform:translateX(-50%) rotate(3deg);opacity:1}}
.scene .far svg{width:100%;height:100%;display:block}
.scene .far,.scene .clouds{transition:filter 1.2s}
.scene .cloud{position:absolute;inset:auto;pointer-events:none;will-change:transform}
.scene .cloud img{width:100%;display:block}
.scene .drift{animation:sc-drift linear infinite}
@keyframes sc-drift{from{transform:translateX(-45vw)}to{transform:translateX(145vw)}}
.scene .bank{inset:auto -10% -6vh -10%;height:34vh;will-change:auto}
.scene .bank img{position:absolute;bottom:0}
.scene .constellation{opacity:0;transition:opacity 1.4s;width:100%;height:60%;fill:#fff;stroke:color-mix(in srgb,var(--gold2) 70%,#fff);stroke-width:.18;stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:60}
.scene .constellation polyline{fill:none}
body.drawing .scene .constellation,body.fs .scene .constellation{opacity:.85}
body.drawing .scene .constellation polyline,body.fs .scene .constellation polyline{animation:sc-draw 1.8s ease-out forwards}
@keyframes sc-draw{to{stroke-dashoffset:0}}
.scene .arena{left:50%;top:50%;right:auto;bottom:auto;width:120vmin;height:120vmin;transform:translate(-50%,-50%);opacity:0;transition:opacity 1.2s;
  background:conic-gradient(from 0deg,transparent,color-mix(in srgb,var(--gold2) 50%,transparent),transparent 20%,color-mix(in srgb,var(--sky2) 55%,transparent) 35%,transparent 50%,color-mix(in srgb,var(--gold2) 50%,transparent) 65%,transparent 80%,color-mix(in srgb,var(--sky2) 55%,transparent) 92%,transparent);
  mask:radial-gradient(circle,transparent 54%,#000 56%,#000 58%,transparent 60%,transparent 64%,#000 65%,transparent 67%);-webkit-mask:radial-gradient(circle,transparent 54%,#000 56%,#000 58%,transparent 60%,transparent 64%,#000 65%,transparent 67%);animation:sc-spinr 60s linear infinite}
@keyframes sc-spinr{to{transform:translate(-50%,-50%) rotate(360deg)}}
.scene .bonusglow{opacity:var(--bonus,0);transition:opacity .6s;background:radial-gradient(60% 55% at 50% 50%,color-mix(in srgb,var(--gold2) 35%,transparent),color-mix(in srgb,var(--sky) 18%,transparent) 45%,transparent 75%);mix-blend-mode:screen}
.scene .vignette{background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(2,5,15,.6) 100%)}
/* one static grain layer over the whole scene (art-direction 5.5), never on the cells */
.scene .grain{opacity:.06;mix-blend-mode:overlay;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}
body.fs .scene .skyfs{opacity:1} body.fs .scene .stars{opacity:1} body.fs .scene .arena{opacity:.7}
body.fs .scene .clouds{filter:brightness(.55) saturate(.8)} body.fs .scene .far{filter:brightness(.7) saturate(.9)}
.dim{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(2,4,14,.55),rgba(1,2,8,.95))}
.portal{position:fixed;left:50%;top:50%;width:70vmin;height:70vmin;z-index:21;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(0)}
.portal i{position:absolute;inset:0;border-radius:50%}
.portal i:nth-child(1){background:radial-gradient(circle,#fff 0%,#E8F6FF 12%,#8BE7FF 30%,#1C2F6A 52%,transparent 66%)}
.portal i:nth-child(2){background:conic-gradient(var(--gold2),transparent 15%,#fff 30%,transparent 45%,var(--gold2) 60%,transparent 75%,var(--sky2) 90%,var(--gold2));
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 55%,#000 60%,transparent 64%);mask:radial-gradient(circle,transparent 52%,#000 55%,#000 60%,transparent 64%);animation:cb-spin 1.6s linear infinite}
.portal i:nth-child(3){inset:-14%;background:conic-gradient(transparent,var(--sky2) 10%,transparent 25%,transparent 50%,var(--gold2) 60%,transparent 75%);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%,transparent 63%);mask:radial-gradient(circle,transparent 58%,#000 60%,transparent 63%);animation:cb-spin 2.4s linear infinite reverse}
/* the portal's rings turn only while the free-spins entrance plays (the portal is invisible the rest of the time) */
body:not(.drawing) .portal i{animation-play-state:paused}
/* ---- header ---- */
.logo h1{font-weight:700;font-size:clamp(24px,3.4vw,46px);line-height:1;letter-spacing:.04em;
  background:linear-gradient(180deg,var(--gold-l) 0%,var(--gold-l) 35%,var(--gold) 52%,var(--gold-d) 70%,var(--gold2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 var(--gold-dd)) drop-shadow(0 0 14px color-mix(in srgb,var(--gold2) 45%,transparent))}
.ibtn{border-radius:50%;width:44px;height:44px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ibtn:hover{border-color:var(--gold2);box-shadow:0 0 14px color-mix(in srgb,var(--gold2) 45%,transparent)}
/* ---- frame: a lapis panel in a bevelled cast-gold moulding lit from the top left (light outer slope top/left, dark
   bottom/right; the inner slope the other way round), the ornate arch over the board, lapis columns either side ---- */
.frame{--fp:calc(var(--cell)*.16);--crest:calc(var(--cell)*.28);--plinth:calc(var(--cell)*.42);
  padding:calc(var(--fp) + var(--crest)) var(--fp) calc(var(--fp) + var(--plinth));border-radius:22px;gap:0;
  background:radial-gradient(120% 60% at 50% 0%,color-mix(in srgb,var(--sky2) 12%,transparent),transparent 60%),linear-gradient(180deg,#22365C 0%,#121F3B 45%,#0B1428 100%);
  box-shadow:0 0 0 2px var(--gold-dd),0 40px 90px rgba(0,0,0,.65),0 0 80px color-mix(in srgb,var(--sky) 22%,transparent)}
.frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:5px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,color-mix(in srgb,var(--gold-l) 70%,transparent),transparent 16%,transparent 84%,color-mix(in srgb,var(--gold-dd) 75%,transparent)),
    linear-gradient(90deg,color-mix(in srgb,var(--gold-l) 40%,transparent),transparent 14%,transparent 86%,color-mix(in srgb,var(--gold-dd) 55%,transparent)),
    linear-gradient(180deg,var(--gold2),var(--gold) 50%,var(--gold-d));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.frame::after{content:"";position:absolute;inset:5px;border-radius:17px;pointer-events:none;z-index:3;
  box-shadow:inset 1.5px 1.5px 0 color-mix(in srgb,var(--gold-dd) 85%,transparent),inset -1px -1px 0 color-mix(in srgb,var(--gold-l) 45%,transparent)}
/* the arch: 6.32 cells wide like the frame, so the SVG keeps its proportions at every size; its feet stand on the
   window's top edge, the keystone rises above the frame */
.arch{position:absolute;left:0;right:0;top:calc(var(--fp) + var(--crest) - var(--cell)*.72);height:calc(var(--cell)*.96);z-index:4;pointer-events:none}
.arch svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 4px rgba(2,6,18,.55))}
.pillar{position:absolute;top:calc(var(--crest) + 6px);bottom:calc(var(--plinth) - 4px);width:calc(var(--cell)*.3);z-index:2;pointer-events:none;
  background:linear-gradient(90deg,#0B1530,#3E567F 30%,#2A4166 46%,#16264A 72%,#0B1530)}
.pillar::before,.pillar::after{content:"";position:absolute;left:-22%;right:-22%;height:calc(var(--cell)*.2);border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.6);
  background:linear-gradient(180deg,var(--gold-l),var(--gold2) 30%,var(--gold) 55%,var(--gold-d))}
.pillar::before{top:-4px}.pillar::after{bottom:-4px}
.pillar.l{left:calc(var(--cell)*-.46)}.pillar.r{right:calc(var(--cell)*-.46)}
/* the reel window sits in a niche: the key light from above throws a shadow 14 px into it, a 1 px lit lip below */
.cascade-board{box-shadow:inset 0 14px 16px -6px rgba(1,4,14,.8),inset 0 0 34px rgba(0,0,0,.6),inset 0 -1px 0 color-mix(in srgb,var(--gold-l) 22%,transparent),0 -1px 0 rgba(1,4,14,.55),0 1px 0 color-mix(in srgb,var(--gold-l) 28%,transparent)}
.cascade-board .cell.win::before{border-color:var(--gold-l);box-shadow:0 0 14px var(--gold),0 0 28px color-mix(in srgb,var(--gold2) 50%,transparent),inset 0 0 16px color-mix(in srgb,var(--gold2) 45%,transparent)}
.sym.bonus::before{content:"";position:absolute;inset:-4%;border-radius:50%;pointer-events:none;opacity:.3;
  background:radial-gradient(circle closest-side,color-mix(in srgb,var(--gold2) 55%,transparent) 55%,color-mix(in srgb,var(--sky2) 30%,transparent) 75%,transparent);animation:sc-bglow 2.2s ease-in-out infinite alternate}
@keyframes sc-bglow{to{opacity:.85}}
.cascade-board.sc3 .sym.bonus::before{animation-duration:.7s}
.floater{-webkit-text-stroke-color:#4A2E02} .floater.m{color:#fff;-webkit-text-stroke-color:#1A0C3A;text-shadow:0 0 14px #BFA8FF,0 0 4px #fff}
/* win plaque = the shell's message line */
#message{position:absolute;left:50%;bottom:calc(var(--fp)*.35);transform:translateX(-50%);z-index:5;height:calc(var(--plinth) + var(--fp)*.5);min-width:calc(var(--cell)*2.6);min-height:0;
  display:flex;align-items:center;justify-content:center;gap:.5em;padding:0 1.2em;border-radius:999px;background:linear-gradient(180deg,#0E2148,#050C20);
  border:1.5px solid var(--gold-d);box-shadow:0 0 0 1px var(--gold-dd),inset 0 1px color-mix(in srgb,var(--gold-l) 25%,transparent),0 0 16px color-mix(in srgb,var(--gold2) 25%,transparent);white-space:nowrap;font-size:calc(var(--cell)*.17)}
#message span{font-size:calc(var(--cell)*.15);color:var(--muted);font-weight:600}
#message b{font-size:calc(var(--cell)*.24);font-weight:800;color:var(--gold-l)}
#message.hot{box-shadow:0 0 0 1px var(--gold-dd),0 0 26px color-mix(in srgb,var(--gold2) 80%,transparent);border-color:var(--gold-l)}
#message .tag{font-family:var(--display);font-weight:700;font-size:calc(var(--cell)*.18);letter-spacing:.04em;color:var(--gold-l)}
/* side stone tablets */
.tablet{border:0;border-radius:16px;padding:14px 12px;background:linear-gradient(180deg,rgba(30,52,92,.92),rgba(9,20,44,.94));box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.08);position:relative}
.tablet::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:var(--goldgrad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.tablet .th{color:var(--gold-l);font-size:clamp(16px,1.5vw,21px)}
.tablet .switch{background:#0A1530;border-color:color-mix(in srgb,var(--gold2) 50%,transparent)}
.tablet[aria-pressed="true"] .switch{background:var(--gold-dd)}.tablet[aria-pressed="true"] .switch::after{background:var(--goldgrad);box-shadow:0 0 8px var(--gold2)}
.minisyms{display:flex;justify-content:center;gap:2px;margin-top:8px}.minisyms img{width:26px;height:26px}
body.fs .baseinfo{opacity:.5}
.fsbar{border-radius:999px;background:var(--glass);border-color:color-mix(in srgb,var(--gold2) 55%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fsbar .fsx{color:var(--gold-l)}
/* HUD and the star orb */
.hud{border-radius:22px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 14px 40px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.07)}
.meter.win b{background:linear-gradient(180deg,var(--gold-l),var(--gold2) 55%,var(--gold-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.pm{border-radius:50%;color:var(--gold2)}
.auto{border-color:var(--gold-d);background:radial-gradient(circle at 40% 30%,rgba(40,70,120,.85),rgba(5,15,35,.9));color:#E9FBFF}
/* the autoplay count: a light gold chip (no dark --gold-d band under the 12 px digits, which read only 3.2:1 there) */
.auto span{background:linear-gradient(135deg,var(--gold-l),var(--gold) 50%,var(--gold2));color:var(--gold-dd)}
.spin{--s:clamp(84px,8.4vw,112px);color:#fff;
  background:radial-gradient(circle,#F2FCFF 0%,var(--sky2) 20%,var(--elec) 38%,#0A4C9A 58%,#061A3E 62%,#0C0E16 63.5%,#3A3B48 67%,#121319 70.5%,transparent 71.5%),
    conic-gradient(from 210deg,var(--gold-l),var(--gold),var(--gold-d),var(--gold2),var(--gold-d),var(--gold-l),var(--gold-d),var(--gold-l),var(--gold-l));
  box-shadow:0 0 0 2px var(--gold-dd),0 10px 26px rgba(0,0,0,.6),0 0 18px color-mix(in srgb,var(--sky2) 30%,transparent)}
.spin::before{content:"";position:absolute;inset:-16%;border-radius:50%;pointer-events:none;opacity:.25;
  background:radial-gradient(circle closest-side,transparent 72%,color-mix(in srgb,var(--sky2) 60%,transparent) 80%,transparent);animation:sc-idle 2.8s ease-in-out infinite alternate}
.spin svg{width:38%;height:38%;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 10px var(--sky2))}
.spin.kick::after{content:"";position:absolute;inset:-12%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.95),color-mix(in srgb,var(--sky2) 40%,transparent) 40%,transparent 70%);animation:sc-glint .35s ease-out forwards}
@keyframes sc-glint{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(1.3)}}
.spin.busy svg{animation:sc-pulse .6s ease-in-out infinite alternate}
@keyframes sc-pulse{to{opacity:.55;transform:translate(-50%,-50%) rotate(22deg)}}
@keyframes sc-idle{to{opacity:.9}}
/* overlays */
.flash{background:radial-gradient(circle at 50% 45%,#fff,rgba(220,245,255,.8) 40%,color-mix(in srgb,var(--sky2) 35%,transparent) 80%)}
.overlay{background:radial-gradient(circle at 50% 45%,rgba(12,26,64,.55),rgba(1,3,12,.88) 75%)}
.ovcard h2{font-weight:700;letter-spacing:.05em;background:linear-gradient(180deg,#FFFFFF 0%,var(--gold-l) 22%,var(--gold2) 45%,var(--gold-d) 62%,var(--gold-l) 80%,var(--gold-d) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 var(--gold-dd)) drop-shadow(0 0 22px color-mix(in srgb,var(--gold2) 70%,transparent));animation:sc-in .7s cubic-bezier(.2,1.6,.4,1)}
.overlay.bigwin.t1 h2{filter:drop-shadow(0 4px 0 #1A0C3A) drop-shadow(0 0 26px rgba(191,168,255,.95)) drop-shadow(0 0 50px color-mix(in srgb,var(--gold2) 50%,transparent))}
.overlay.bigwin.t2 h2{filter:drop-shadow(0 5px 0 #052A4A) drop-shadow(0 0 30px color-mix(in srgb,var(--sky2) 100%,transparent)) drop-shadow(0 0 70px rgba(255,255,255,.6))}
@keyframes sc-in{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.ovamt{color:#fff;text-shadow:0 0 18px color-mix(in srgb,var(--gold2) 90%,transparent),0 3px 0 var(--gold-dd)}
.ovcard p{color:#CFE2FF}
.btn{border-radius:999px;box-shadow:0 0 0 2px var(--gold-dd),0 8px 20px rgba(0,0,0,.5),0 0 24px color-mix(in srgb,var(--gold2) 50%,transparent)}
.btn.ghost{color:var(--gold-l)}
.panel{border-radius:22px;backdrop-filter:blur(6px)}
.panel h3{color:var(--gold-l)}
.screen{background:radial-gradient(circle at 50% 40%,#102B55,#040A1A 75%)}
@media (max-width:860px),(max-aspect-ratio:4/5){
  .pillar{display:none}
  .frame{--crest:calc(var(--cell)*.08)}
}
/* admin skin variant "clean": the board without the temple ornaments (arch, pillars) */
body[data-variant="clean"] .arch,body[data-variant="clean"] .pillar{display:none}
body[data-variant="clean"] .frame{--crest:calc(var(--cell)*.06)}
/* the shell's reduced-motion rule (`*`) does not reach pseudo-elements: stop the two idle glows here */
@media (prefers-reduced-motion:reduce){.spin::before,.sym.bonus::before{animation:none}}