/* Stage composition. Reel and symbol geometry remains owned by game.css. */
body{background-image:linear-gradient(90deg,#02091433,transparent 28%,transparent 72%,#02091433),url('../../assets/bruxas-do-eclipse/cenario.png');background-position:center;background-color:#050c15}
.brandbar{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;font:9px Arial,sans-serif;letter-spacing:2px;color:#d7d8d8;background:linear-gradient(#020710b3,transparent)}
.brandbar a{color:#eee4ce;text-decoration:none;font-weight:bold}.brandbar a span{font-size:8px;color:#c6a271;margin-left:6px}
.stage{width:min(1040px,calc((100svh - 225px)*1.75));max-width:1040px;min-width:680px;padding:0 22px 14px;margin:0 auto}
.title{height:118px;margin:0 0 -9px;z-index:2;filter:drop-shadow(0 8px 8px #000b)}
.machine{position:relative;padding:10px 17px 0;border:2px solid #b89561;border-radius:30px 30px 13px 13px;background:linear-gradient(110deg,#335563 0%,#14252c 7%,#0a111a 35%,#211d18 75%,#715033 100%);box-shadow:0 0 0 3px #100d0b,0 0 0 5px #8d714c,0 0 0 9px #161b21,0 0 0 10px #64513b,0 20px 45px #000b,inset 0 2px 2px #ffe1a677}
.machine:before{content:'';position:absolute;inset:6px;border:1px solid #d2b37744;border-radius:23px 23px 7px 7px;pointer-events:none}
.ornament{height:30px;padding:0 8px 8px;font-size:23px;color:#c9ab76}.ornament span{font-size:8px;letter-spacing:3px;color:#dac6a2}
.frame-corners{position:absolute;inset:0;pointer-events:none;z-index:5}.frame-corners i{position:absolute;width:27px;height:27px;transform:rotate(45deg);background:linear-gradient(135deg,#f5db97,#695139 45%,#181b20 48%,#a58149 70%,#e3c180);border:2px solid #b4945d;box-shadow:0 0 0 3px #16191b,inset 0 0 0 4px #473c2c}.frame-corners i:after{content:'';position:absolute;inset:7px;background:#80d6df;box-shadow:0 0 12px #5ed5ed88}.frame-corners i:nth-child(1){left:-10px;top:35px}.frame-corners i:nth-child(2){right:-10px;top:35px}.frame-corners i:nth-child(3){left:-10px;bottom:110px}.frame-corners i:nth-child(4){right:-10px;bottom:110px}.frame-corners i:nth-child(even):after{background:#efb56c;box-shadow:0 0 12px #ed9a5e88}
.reel-stage{border:3px solid #16191a;outline:1px solid #bc9c67;border-radius:5px;box-shadow:0 0 0 4px #544331,0 0 0 5px #bda47755,0 10px 20px #0008;overflow:hidden}
.reels{border:0;border-radius:2px;background:#071522;aspect-ratio:2.12}
.reel,.spin-strip{background-color:#081821;background-image:linear-gradient(90deg,#0005,transparent 24%,transparent 76%,#0005),repeating-linear-gradient(45deg,transparent 0 18px,#b2cccb05 19px 20px,transparent 21px 39px),repeating-linear-gradient(-45deg,transparent 0 18px,#b2cccb05 19px 20px,transparent 21px 39px)}
.reel{border-right:2px solid #aa8b565c;box-shadow:inset 1px 0 #d5b88122}
.reel .cell{border-bottom:1px solid #adbcb60b}
#line-caption{position:absolute;left:20px;right:20px;margin-top:5px;z-index:2;font-size:8px;letter-spacing:1.5px;color:#d8c39d}
.message{margin:8px 0 0;min-height:52px;padding:19px 10px 7px;background:linear-gradient(90deg,#08151e,#162931 50%,#1d1a16);border:1px solid #806a45;border-radius:5px 5px 0 0;font:12px/1.4 Arial,sans-serif;color:#f2d69d;box-shadow:inset 0 1px #ddbf7c22}
.console{position:relative;grid-template-columns:1fr 1.7fr 1fr 87px;gap:10px;padding:12px 10px 10px;margin:0 -8px;background:linear-gradient(#7d6240 0,#d6b77c 2px,#302d29 3px,#121920 22%,#0a1119 80%,#58452d);border:1px solid #aa8954;border-radius:0 0 12px 12px;box-shadow:0 6px 10px #0007}
.meter{min-width:0;padding:13px 6px;background:linear-gradient(#07121c,#101e25);border:1px solid #796443;border-radius:20px 5px;box-shadow:inset 0 2px 5px #0009,0 1px #f4c77833}
.meter>span,.bet>span{font:8px Arial,sans-serif;letter-spacing:1.6px;color:#beae8e;margin-bottom:5px}
.meter strong,.bet strong{font:600 clamp(17px,2vw,24px) Arial,sans-serif;font-variant-numeric:tabular-nums;color:#fff0cc;text-shadow:0 2px 2px #000}
.bet>div{gap:12px}.bet button{width:32px;height:30px;padding:0;border-radius:50%;background:radial-gradient(circle at 35% 25%,#337487,#092c40 70%);border-color:#bf9c61;box-shadow:inset 0 0 0 2px #091e29;font:22px Arial}
.bet .bet-presets{display:flex;gap:3px;margin-top:7px}.bet-presets button{width:auto;flex:1;height:25px;border-radius:3px;font:10px Arial;padding:0 4px;background:linear-gradient(#20343b,#0c1b25);box-shadow:inset 0 1px #fff1}
.bet-presets button[aria-pressed=true]{background:linear-gradient(#e3bb72,#a16c2d);border-color:#ffdf9b;color:#17100a;box-shadow:0 0 10px #efb55033;font-weight:bold}
.spin{width:78px;height:78px;justify-self:center;border:3px solid #e1c183;background:radial-gradient(circle at 38% 28%,#47d1d8,#127281 45%,#063642 73%);box-shadow:0 0 0 2px #513b23,0 0 0 5px #b08a51,0 0 0 7px #1b1712,inset 0 0 0 3px #16363d,inset 0 4px 6px #edffff66,0 5px 15px #0009}
.spin span{font-size:44px;text-shadow:0 2px 3px #0009}.spin b{font-size:8px;letter-spacing:1px;margin-top:5px}.spin:hover:not(:disabled){background:radial-gradient(circle at 38% 28%,#7debf1,#198d98 45%,#07414b 73%)}.spin:active:not(:disabled){transform:translateY(2px)}
.bottom{margin:0 -6px;padding:6px 9px;min-height:30px;color:#c5b68f;font-size:8px;letter-spacing:1px}.bottom button{font-size:9px;padding:6px}
.utility-bar{padding:10px 3px 0;background:none;border:0;justify-content:center}.utility-bar>div{display:flex;justify-content:center;gap:7px}.utility-bar button{border-color:#c4b48c44;background:#040b13c9;color:#d7d1c0;font-size:10px;border-radius:4px;padding:8px 12px;min-height:32px}.disclaimer{font-size:9px;color:#b4b9bf;margin:8px 0 0;text-shadow:0 1px 3px #000}
.bonus-mode .machine{outline:1px solid #8fdae2}.golden-mode .machine{outline:1px solid #ffe0a3}
@media(min-width:701px) and (max-height:850px){.brandbar{padding:7px 20px}.title{height:80px}.stage{width:760px;min-width:0}.console{padding:7px;grid-template-columns:1fr 1.7fr 1fr 70px}.spin{width:60px;height:60px}.spin span{font-size:33px}.meter{padding:10px 5px}.message{min-height:43px}.utility-bar{padding-top:7px}}
@media(max-width:700px){.brandbar{padding:12px;font-size:7px;letter-spacing:1px}.brandbar a span{display:none}.stage{width:100%;min-width:0;padding:0 13px 14px}.title{height:122px;margin-bottom:-5px}.machine{padding:7px 7px 0;border-radius:20px 20px 10px 10px;box-shadow:0 0 0 3px #11151a,0 0 0 5px #806342,0 15px 35px #000a}.ornament{height:26px;font-size:20px;padding:0 5px 5px}.ornament span{font-size:6px;letter-spacing:1.8px}.frame-corners i{width:18px;height:18px}.frame-corners i:after{inset:4px}.frame-corners i:nth-child(1),.frame-corners i:nth-child(3){left:-8px}.frame-corners i:nth-child(2),.frame-corners i:nth-child(4){right:-8px}.frame-corners i:nth-child(n+3){bottom:177px}.reels{aspect-ratio:1.48}.reel-stage{border-width:2px}.message{font-size:11px;min-height:52px;margin-top:7px;padding-left:6px;padding-right:6px}#line-caption{font-size:7px;letter-spacing:.6px;left:9px;right:9px}.console{grid-template-columns:1fr 1fr 70px;gap:7px;margin:0 -3px;padding:10px 7px}.meter{padding:8px 5px;border-radius:12px 4px}.meter strong{font-size:18px}.meter>span{font-size:7px;letter-spacing:1px}.console>.meter:nth-child(3){grid-column:2;grid-row:1}.bet{grid-column:1/3;grid-row:2;display:grid;grid-template-columns:1fr;gap:4px}.bet>span{display:none}.bet>div{gap:13px}.bet strong{font-size:17px;min-width:62px}.bet button{width:44px;height:36px}.bet .bet-presets{margin:0;gap:4px}.bet-presets button{height:32px;width:auto;font-size:11px}.spin{grid-column:3;grid-row:1/3;width:59px;height:59px}.spin span{font-size:33px}.spin b{font-size:7px}.bottom{font-size:7px;padding:4px 5px;gap:4px}.bottom button{min-height:36px;font-size:8px}.utility-bar>div{margin:0;width:100%;gap:5px}.utility-bar button{min-height:44px;padding:8px;font-size:9px}.utility-bar{padding-top:12px}.disclaimer{font-size:8px;line-height:1.5;max-width:300px;margin:8px auto 0}}
@media(min-width:701px) and (max-height:850px){.stage{width:clamp(480px,calc((100svh - 365px)*2.12),760px)}.meter strong{font-size:17px}.bet-presets button{font-size:9px}}

@media(max-width:700px){.bet button,.bet-presets button{min-height:44px}.bet>span{display:block;font-size:7px;margin:0}.frame-corners i:nth-child(n+3){bottom:210px}}

/* Reel controls: stable geometry across running and settled states. */
.spin:disabled{opacity:.82;cursor:wait}
.spin.is-rolling span{animation:spin-control 1.1s linear infinite;transform-origin:50% 50%}
.spin{padding:0}
.spin b{letter-spacing:.3px;white-space:nowrap}
.reel.landed:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;pointer-events:none;background:#ffe0a5;box-shadow:0 -2px 9px #f1bf6977;animation:reel-land .38s ease-out forwards}
.console button:not(.spin):active:not(:disabled),.utility-bar button:active:not(:disabled){transform:translateY(1px)}
@keyframes spin-control{to{transform:rotate(360deg)}}
@keyframes reel-land{from{opacity:.85}to{opacity:0}}
@media(prefers-reduced-motion:reduce){.spin.is-rolling span{animation:none}.reel.landed:after{display:none}}