/* Dragon's Ember skin on the shared game shell: a volcanic lair, a riveted bronze cabinet, the Ember Egg.
   One light model everywhere (art-direction §5.1): torchlight from the top left, and the lava pool below throwing a
   hot rim on the lower-right edges — symbols (js/art.js), cabinet, spin egg and the dragon in the background.
   Animations are transform / opacity only; no filter on the cells. */
:root{
  --bronze:#B9773A; --bronze-hi:#FFDDAE; --bronze-lo:#5A3214; --ember:#FF8A1F; --ember-hi:#FFE9A0; --ember-lo:#E0600E; --ember-deep:#5A1206; --ash:#E9DCCF; --smoke:#B4A294;
  --ink:var(--ash); --muted:var(--smoke);
  --display:"Grenze Gotisch","Times New Roman",serif; --ui:"Barlow Semi Condensed","Arial Narrow",system-ui,sans-serif;
  --line:rgba(201,138,62,.42); --radius:14px; --radius-sm:10px;
  --panel-bg:linear-gradient(180deg,#2A1A16,#140A08); --panel-border:var(--bronze-lo);
  --hud-bg:linear-gradient(180deg,#2B1C17,#170D0A 60%,#1B0E0A); --corner-bg:rgba(20,10,8,.8);
  --ibtn-bg:linear-gradient(180deg,#33211C,#180D0A); --ibtn-ink:var(--bronze-hi);
  --btn-bg:linear-gradient(180deg,var(--ember-hi),var(--primary) 50%,var(--ember-lo)); --btn-ink:#2A0806;
  --window-bg:linear-gradient(180deg,#120907,#1C100D 50%,#140A08); --window-radius:8px; --reel-sep:rgba(255,200,140,.07);
  --win-glow:var(--ember); --win-radius:10px; --focus:#FFE27A;
  --peg-bg:#2A1910; --peg-ink:#E6D2B8;
  --spin-ring:color-mix(in srgb,var(--ember-hi) 85%,transparent);
  --veil-light:color-mix(in srgb,var(--ember) 22%,transparent);
  --ov-plate:rgba(34,17,12,.9); --ov-plate-line:rgba(201,138,62,.5);
}
body{background:var(--bg)}

/* ---- the lair: far cave (an arch of darkness overhead, the lava light rising from below) → the dragon (dragon.svg,
   lit from beneath) → the lava pool's breath → light behind the board + vignette → one static grain layer ---------- */
.scene .cave{background:radial-gradient(ellipse 78% 96% at 50% 100%,transparent 56%,rgba(5,1,1,.82) 94%),
  radial-gradient(90% 58% at 50% 108%,#6A1E0A 0%,#2E0D07 38%,#160806 66%,#080302 100%)}
.scene .dragon{background:url(/packages/dragons-ember/dragon.svg) no-repeat center 6%/min(1300px,150vw) auto}
/* wide screens: the head stays hidden behind the cabinet and the wings spread out on either side of it */
@media (min-width:861px) and (min-aspect-ratio:4/5){.scene .dragon{background-position:center 92px;background-size:max(1300px,104vw) auto}}
.scene .lava{top:auto;height:26vh;background:radial-gradient(120% 100% at 50% 100%,rgba(255,96,24,.5),rgba(255,60,10,.12) 55%,transparent 75%);animation:de-breathe 6s ease-in-out infinite alternate}
.scene .heat{background:radial-gradient(44% 34% at 50% 46%,rgba(255,138,31,.1),transparent 70%),radial-gradient(150% 110% at 50% 45%,transparent 52%,rgba(0,0,0,.5) 100%)}
.scene .grain{opacity:.06;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}
@keyframes de-breathe{from{opacity:.72}to{opacity:1}}
body.fs .scene .cave{background:radial-gradient(ellipse 78% 96% at 50% 100%,transparent 56%,rgba(5,1,1,.78) 94%),
  radial-gradient(90% 70% at 50% 100%,#A0260A 0%,#561206 35%,#260604 70%,#0A0201 100%)}
body.fs .scene .lava{height:40vh}

/* ---- title: cast-bronze letters, molten at the top, a tight heat haze (not a halo); the h1's padding keeps the
   blackletter's ascenders inside the painted box. Centred by the shell (title.js), symmetric here. ---------------- */
.logo{position:relative}
.logo h1{font-weight:800;font-size:clamp(28px,3.5vw,44px);line-height:1;letter-spacing:0;padding:.1em .06em .12em;
  background:linear-gradient(180deg,#FFF3D2 8%,var(--ember-hi) 26%,var(--primary) 50%,var(--ember) 72%,var(--ember-lo) 96%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #2A0806) drop-shadow(0 2px 1px rgba(8,2,1,.7)) drop-shadow(0 0 9px color-mix(in srgb,var(--accent) 30%,transparent))}
.logo::after{content:"";position:absolute;left:50%;bottom:-3px;width:min(72%,240px);height:1px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--bronze) 80%,transparent) 28%,var(--ember-hi) 50%,color-mix(in srgb,var(--bronze) 80%,transparent) 72%,transparent)}
.ibtn{border-color:rgba(201,138,62,.55)}

/* ---- the cabinet: a bronze-faced frame bevelled to the torch (light top/left edge, dark bottom/right), a recessed
   groove, four rivets, the lava's rim along its foot and one big shadow ----------------------------------------- */
#board.reels-board{padding:14px 12px;border-radius:16px;border:2px solid;border-color:#B88250 #4A2A12 #3A1E0C #8A5A2E;
  background:linear-gradient(180deg,#3A2620 0%,#24160F 22%,#1A0F0B 62%,#2C170D 100%);
  box-shadow:0 0 0 1px #0A0504,inset 0 1px 0 rgba(255,221,174,.26),inset 0 -2px 0 color-mix(in srgb,var(--accent) 38%,transparent),0 28px 64px rgba(0,0,0,.62),0 22px 50px -24px color-mix(in srgb,var(--accent) 45%,transparent)}
#board.reels-board::before{content:"";position:absolute;inset:6px;border-radius:11px;pointer-events:none;border:1px solid;border-color:rgba(0,0,0,.55) rgba(255,200,150,.14) rgba(255,200,150,.2) rgba(0,0,0,.45)}
#board.reels-board::after{content:"";position:absolute;inset:4px;pointer-events:none;--rv:radial-gradient(circle at 38% 34%,#FFE6C0 0,#C08548 34%,#4A2810 68%,transparent 74%);
  background:var(--rv) left top/8px 8px no-repeat,var(--rv) right top/8px 8px no-repeat,var(--rv) left bottom/8px 8px no-repeat,var(--rv) right bottom/8px 8px no-repeat}
/* the window is a niche: the torch above throws a shadow down into it, a light lip catches its bottom edge */
.reels-board .window::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px #050202,inset 0 16px 16px -9px rgba(0,0,0,.82),inset 0 -1px 0 rgba(255,200,150,.2)}
.reels-board svg.lines{z-index:2}
.reels-board .reel.tease{box-shadow:inset 0 0 26px color-mix(in srgb,var(--ember) 80%,transparent)}
/* a win lights the cell's frame (shell); the rest step back by opacity (no filter on the cells) */
.reels-board .cell.dim .sym{filter:none;opacity:.42}
/* royals: inlaid enamel letters in the plaque's recessed field — a dark edge above, a light lip below; the enamel is
   greyed a little (same mix as art.js plate()) so the low symbols stay quieter than the high ones */
.sym .ltr{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:calc(var(--cell)*.47);line-height:1;color:color-mix(in srgb,var(--rc) 78%,#B4A496);padding-bottom:calc(var(--cell)*.02);
  -webkit-text-stroke:calc(var(--cell)*.008) color-mix(in srgb,var(--rc) 22%,#000);paint-order:stroke fill;
  text-shadow:0 calc(var(--cell)*-.012) 0 rgba(0,0,0,.6),0 calc(var(--cell)*.014) 0 rgba(255,214,160,.3)}
.sym .ltr.small{font-size:calc(var(--cell)*.37)}
/* the Ember Egg's name plate: a cast bronze plaque on its cradle, the word engraved */
.sym.wild .tag{position:absolute;left:50%;bottom:3%;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:calc(var(--cell)*.19);letter-spacing:.04em;text-indent:.04em;line-height:1.15;color:#2A0C04;
  background:linear-gradient(180deg,#FFE6BC 0%,#E6AE6C 30%,#DCA060 62%,#B0703A 86%,#7A421A 100%);border-radius:4px;padding:0 .4em .02em;
  box-shadow:0 0 0 1px #3A1C08,inset 0 1px 0 rgba(255,240,210,.6),0 2px 4px rgba(0,0,0,.5);text-shadow:0 1px 0 rgba(255,232,196,.45)}
.ptc .sym{width:100%;height:100%}

/* ---- message and the free games bar ---------------------------------------------------------------------------- */
.message b{color:var(--primary)}
.fsbar{background:rgba(30,10,6,.86);border-color:var(--bronze)}.fsbar .fsx{color:var(--ember-hi);font-size:22px}

/* ---- console ----------------------------------------------------------------------------------------------------- */
.hud{border:1px solid var(--bronze-lo);box-shadow:inset 0 1px 0 rgba(255,221,174,.18),inset 0 -1px 0 color-mix(in srgb,var(--accent) 24%,transparent),0 12px 30px rgba(0,0,0,.5)}
.meter b{color:#FFF1DE}.meter.win b{color:var(--primary)}
.demo{background:var(--ember);color:#1A0A04}
.pm{border-color:var(--bronze)}.auto{border-color:var(--bronze);background:radial-gradient(circle at 40% 30%,#4A302A,#1A0E0B)}
.auto[aria-pressed="true"]{box-shadow:0 0 16px color-mix(in srgb,var(--ember) 70%,transparent)}
.auto span{background:var(--ember);color:#1A0A04}

/* ---- the Ember Egg spin key: molten egg in a bronze cup, lit from the top left, its core shadow bottom right; it
   smoulders through a glow ring on its own layer (opacity only) -------------------------------------------------- */
.spin{color:#2A0A04;border-radius:50% 50% 50% 50%/56% 56% 44% 44%;
  background:radial-gradient(circle at 36% 28%,#FFF7DC 0%,var(--ember-hi) 13%,var(--primary) 33%,var(--ember) 55%,var(--ember-lo) 76%,var(--ember-deep) 100%);
  box-shadow:inset -6px -9px 16px rgba(80,14,4,.55),inset 3px 4px 8px rgba(255,248,220,.4),0 0 0 3px #8A5424,0 0 0 4.5px #2A1408,0 10px 22px rgba(0,0,0,.6)}
.spin::after{content:"";position:absolute;inset:-16px;border-radius:50%;pointer-events:none;opacity:.5;
  background:radial-gradient(closest-side,transparent 74%,color-mix(in srgb,var(--accent) 55%,transparent) 80%,transparent 100%);animation:de-smoulder 2.6s ease-in-out infinite alternate}
.spin:disabled::after{animation:none;opacity:.2}
.spin svg{transform:translate(-50%,-55%);filter:drop-shadow(0 1px 0 rgba(255,240,200,.55))}
@keyframes de-smoulder{to{opacity:.95}}
/* reduced motion: the shell's global stop (`*{animation-duration:.001ms}`) does not reach pseudo-elements, so the egg's
   glow ring is stopped here and keeps its resting opacity; the lava pool holds still too */
@media (prefers-reduced-motion:reduce){.spin::after,.scene .lava{animation:none}}

/* ---- overlays: the veil keeps the card readable over the brightest symbols (≥ .86 at the centre) ----------------- */
.flash{background:radial-gradient(circle at 50% 45%,#FFF3D0,color-mix(in srgb,var(--primary) 50%,transparent) 38%,transparent 72%)}
.overlay{background:radial-gradient(46% 34% at 50% 44%,var(--veil-light),transparent),radial-gradient(circle at 50% 45%,rgba(36,9,4,.87),rgba(5,1,0,.95) 75%)}
.ovcard h2{padding:.06em .08em .12em;background:linear-gradient(180deg,#FFF3D2 6%,var(--ember-hi) 24%,var(--primary) 48%,var(--ember) 72%,var(--ember-lo) 98%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 #2A0806) drop-shadow(0 0 20px color-mix(in srgb,var(--ember) 50%,transparent))}
.overlay.bigwin.t2 h2{filter:drop-shadow(0 4px 0 #2A0806) drop-shadow(0 0 30px color-mix(in srgb,var(--ember) 70%,transparent))}
.ovamt{color:#FFF1DE;text-shadow:0 2px 0 #2A0806}
.ovcard p{color:#F3D9C0}
.btn{box-shadow:0 0 0 1px #2A0806,inset 0 1px 0 rgba(255,250,230,.5),0 8px 20px rgba(0,0,0,.5)}
.panel{box-shadow:0 30px 80px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,217,160,.2)}
.panel h3{color:var(--ember-hi)}
.screen{background:radial-gradient(circle at 50% 40%,#3A0E06,#0A0302 75%)}
.chips button[aria-pressed="true"]{background:var(--ember);color:#1A0A04;border-color:var(--ember)}
.tog[aria-checked="true"]{background:#5A2006}

/* ---- phones: the title on one line at a size the header can hold (title.js still fits it) -------------------------- */
@media (max-width:860px),(max-aspect-ratio:4/5){.logo h1{font-size:clamp(22px,7.4vw,34px)}}

/* admin skin variant "clean": a plain dark frame instead of the riveted bronze cabinet */
body[data-variant="clean"] #board.reels-board{background:#140C0A;border-color:#2A1A16;box-shadow:0 20px 50px rgba(0,0,0,.55)}
body[data-variant="clean"] #board.reels-board::before,body[data-variant="clean"] #board.reels-board::after{display:none}