:root{color-scheme:dark;--ink:#f9eddd;--muted:#d8c0d7;--copper:#e3b389;--plum:#28152d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:#1e1023 url('./assets/salon-v1-display.webp') center top/cover fixed;color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif}body:before{content:'';position:fixed;inset:0;background:#190e2280;pointer-events:none;z-index:-1}a{color:inherit;text-underline-offset:5px}button,select,input{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #f6d59c;outline-offset:4px}button{cursor:pointer;min-height:46px;border:1px solid #b68caa;background:#3e2545;color:var(--ink);border-radius:2px;padding:10px 14px}button:hover{background:#583260}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{background:#e6bf9f;color:#2d172a;border-color:#f3dbc3}button[hidden]{display:none}.skip{position:fixed;top:-100px;left:16px;padding:12px;background:#f7e5cb;color:#27172b;z-index:30}.skip:focus{top:12px}header{display:flex;justify-content:space-between;align-items:center;gap:18px;max-width:1300px;margin:auto;padding:18px 28px;border-bottom:1px solid #c79eb980;background:#211326e8}header nav{display:flex;gap:22px;font-size:13px}.brand{font-weight:bold;letter-spacing:.18em;font-size:14px;text-decoration:none}main{max-width:1240px;margin:auto;padding:0 28px}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.05}h1{font-size:clamp(38px,5.3vw,66px);margin:4px 0 12px;letter-spacing:-.04em}h1 em{font-weight:400;color:#e6b58d}h2{font-size:36px;margin:0 0 24px}.eyebrow{font-size:10px;letter-spacing:.19em;color:#e4c6df;font-weight:bold;margin:0 0 10px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0 18px}.balance{text-align:right;white-space:nowrap}.balance span,.balance small{display:block;color:#e3ccdf;font-size:12px}.balance strong{display:block;color:#fff3d7;font-size:30px;line-height:1.3}.table{display:grid;grid-template-columns:1.18fr 1fr;gap:22px;background:#25142ce8;border:1px solid #bc8b9366;padding:22px}.showcase{min-width:0;text-align:center;align-self:center}.machine{position:relative;max-width:530px;margin:auto;aspect-ratio:1}.cabinet{position:relative;z-index:2;display:block;width:100%;height:auto;pointer-events:none}.reels{position:absolute;z-index:1;left:16.8%;right:16.8%;top:39.7%;height:27.5%;display:flex;align-items:center;justify-content:center;gap:2%;background:#f0e1ce;overflow:hidden;box-shadow:inset 0 10px 12px #482e4c55,inset 0 -8px 10px #482e4c33}.reel-window{width:30.6%;aspect-ratio:1;overflow:hidden;border-right:1px solid #ad8f9a55}.symbol,.mini-symbol{background-image:url('./assets/symbols-v2-display.webp');background-size:300% 200%;background-repeat:no-repeat}.symbol{width:100%;height:100%;transform:translateY(0)}.s0{background-position:0 0}.s1{background-position:50% 0}.s2{background-position:100% 0}.s3{background-position:0 100%}.s4{background-position:50% 100%}.s5{background-position:100% 100%}.mini-symbol{display:inline-block;vertical-align:middle;width:40px;height:40px;margin-right:10px}.spinning .symbol{animation:reel-turn .22s linear infinite;filter:blur(2px)}.spinning .reel-window:nth-child(2) .symbol{animation-delay:-.07s}.spinning .reel-window:nth-child(3) .symbol{animation-delay:-.14s}@keyframes reel-turn{0%{transform:translateY(-85%)}100%{transform:translateY(85%)}}.less-motion .symbol{animation:none!important;filter:none!important}.result{font-family:Georgia,serif;font-size:26px;line-height:1.2;margin:8px 0 10px;color:#f6d6af}.symbol-names{font-size:14px;color:#f1deed;margin:0 0 8px}.arithmetic{font-size:13px;line-height:1.5;color:var(--muted);margin:0 auto;max-width:500px}.controls{min-width:0;align-self:center;padding:8px 8px 8px 0}.controls h2{font-size:32px}.controls fieldset{padding:0;border:0;margin:18px 0 10px}.controls legend{font-size:13px;font-weight:bold;margin-bottom:10px}.stakes{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.choice{font-size:13px;color:#efd7e4;line-height:1.5;min-height:40px;margin:16px 0 10px}.primary{width:100%;font-weight:bold;font-size:18px;min-height:54px;background:#dfb28b;color:#29162b;border-color:#edc8a5}.primary:hover{background:#f1cfae}.status{font-size:13px;line-height:1.5;color:#f5ded9;margin:12px 0;min-height:20px}.status:empty{display:none}.secondary{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.secondary button{font-size:12px;padding:9px}.secondary label{font-size:12px;display:flex;align-items:center;min-height:46px;gap:7px}.secondary input{width:18px;height:18px;accent-color:#e3b389}.stop{font-size:12px;margin-top:12px;width:100%;background:transparent;border-color:#9c7893}.point-note{font-size:11px;line-height:1.5;color:#dec5d8;margin:14px 0 0}.history,.rules{background:#25142cf2;border:1px solid #b48ba45c;margin:26px 0;padding:30px}.history h2{font-size:29px;margin-bottom:15px}.history ol{list-style:none;padding:0;margin:0}.history li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;padding:12px 0;border-bottom:1px solid #6b4c68;font-size:13px}.history li strong{font-size:12px;font-weight:normal;color:#e8c0b9}.history>p{font-size:12px;color:var(--muted);margin-bottom:0}.rules{padding:40px;scroll-margin-top:18px}.rules h2{font-size:42px}.rules p{font-size:14px;line-height:1.8;max-width:850px}.rules table{border-collapse:collapse;width:100%;max-width:850px;font-size:14px}.rules caption{text-align:left;color:#e6c5dc;font-size:13px;margin-bottom:12px}.rules th,.rules td{text-align:left;border-bottom:1px solid #805d7c;padding:12px 6px}.rules th{font-size:12px;color:#f3d4b9}footer{max-width:1240px;margin:25px auto;display:flex;gap:25px;flex-wrap:wrap;padding:10px 28px 25px;font-size:12px}.reading{max-width:820px;padding:36px;background:#25142cf2;border:1px solid #9e7a925c;margin:30px auto}.reading h1{font-size:44px}.reading h2{font-size:27px;margin-top:28px}.reading p,.reading li{font-size:15px}.reading li{margin:12px 0}.reading table{width:100%;border-collapse:collapse}.reading th,.reading td{border-bottom:1px solid #805d7c;padding:10px 4px;text-align:left}
@media(max-width:760px){header{padding:15px 18px}header nav{gap:13px;font-size:11px}.brand{font-size:12px;letter-spacing:.1em}main{padding:0 16px}.intro{padding:20px 0 12px;gap:10px}h1{font-size:38px;margin-bottom:4px}.intro .eyebrow{font-size:8px;letter-spacing:.11em;margin-bottom:5px}.balance strong{font-size:25px}.balance span,.balance small{font-size:10px}.table{display:block;padding:12px}.machine{max-width:335px}.showcase{margin-bottom:16px}.result{font-size:22px;margin:2px 0 7px}.symbol-names{font-size:12px;margin-bottom:5px}.arithmetic{font-size:11px}.controls{padding:0}.controls>.eyebrow,.controls>h2{display:none}.controls fieldset{margin:8px 0}.controls legend{font-size:12px;margin-bottom:8px}.stakes{gap:8px}.stakes button{padding:8px;min-height:44px}.choice{font-size:12px;min-height:0;margin:12px 0 10px}.primary{min-height:52px;font-size:17px}.status{font-size:12px;margin:10px 0}.secondary{gap:7px}.stop{margin-top:10px}.history{padding:22px}.rules{padding:24px 18px}.rules h2{font-size:34px}.rules table{font-size:12px}.rules td,.rules th{padding:10px 2px}.mini-symbol{width:28px;height:28px;margin-right:5px}.reading{margin:20px 0;padding:25px 18px}.reading h1{font-size:36px}footer{padding-left:18px;gap:22px}}@media(max-width:350px){header{padding:12px}header nav{gap:9px}main{padding:0 10px}.intro h1{font-size:32px}.table{padding:8px}.machine{max-width:290px}.balance strong{font-size:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.symbol{animation:none!important;filter:none!important}}

/* Keep a narrow inset inside each generated sprite cell; never show neighboring artwork. */
.symbol,.mini-symbol{clip-path:inset(2%)}
