
body{margin:0;background:#FFFBF0}
html{scroll-behavior:smooth}
a{color:#7A561C}a:hover{color:#4F3812}
a:focus-visible,button:focus-visible{outline:3px solid #44729A;outline-offset:3px;border-radius:12px}
.btn{transition:background-color .2s ease,transform .2s ease}
.btn:hover{background-color:#6F4E1B !important;color:#FFFCF7 !important;transform:translateY(-2px)}
.card,.tile{transition:transform .28s cubic-bezier(.3,1.3,.5,1),box-shadow .28s ease}
.card:hover,.tile:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 16px 30px -20px rgba(92,64,24,.55)}
.chap-img{transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.chap:hover .chap-img{transform:rotate(-2deg) scale(1.03)}
.tray-btn{transition:transform .2s cubic-bezier(.3,1.4,.5,1),background-color .2s ease}
.tray-btn:hover{transform:translateY(-4px);background-color:rgba(173,129,58,.12) !important}
.ctl{transition:background-color .6s ease,color .6s ease,border-color .6s ease,transform .2s ease}
.ctl:hover{transform:translateY(-2px)}
.pc{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.pc:active{cursor:grabbing}
.pc-drop{animation:pcDrop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes pcDrop{0%{transform:translateY(-80px) rotate(-10deg)}60%{transform:translateY(6px) rotate(2deg)}100%{transform:translateY(0) rotate(0)}}
.float-a{animation:floatA 7s ease-in-out infinite}
.float-b{animation:floatB 9s ease-in-out infinite}
@keyframes floatA{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-8px) rotate(-3deg)}}
.tw{animation:tw 3.2s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.float-a,.float-b,.tw,.pc-drop{animation:none}.card:hover,.tile:hover,.btn:hover,.tray-btn:hover,.ctl:hover,.chap:hover .chap-img{transform:none}}
:root{color-scheme:light}
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%}
.play{--band-bg:#F7EFD9;--band-ink:#AD813A;--band-text:#57534E;--band-muted:#8A6322;--band-line:#E3D3AE;--tray-bg:#FFFCF7;--tray-ink:#3B3733;--rug:#EFDDB9;--stitch:rgba(140,101,36,.4);--ctl-bg:#1E2843;--ctl-ink:#FFF6E0;--ghost:#7A561C;--sign-bg:#FFFCF7;--sign-ink:#7A561C;--win:#6B4636;--halo:0;position:relative;overflow:hidden;background-color:var(--band-bg);transition:background-color .8s ease;padding-block:clamp(56px,8vw,104px)}
.play.is-night{--band-bg:#1E2843;--band-ink:#F3D79A;--band-text:#DCD3C2;--band-muted:#C9B48A;--band-line:#3A4766;--tray-bg:#26314F;--tray-ink:#F1E6CF;--rug:#2C3A5C;--stitch:rgba(243,215,154,.35);--ctl-bg:#F3D79A;--ctl-ink:#1E2843;--ghost:#F3D79A;--sign-bg:#3A4766;--sign-ink:#F3D79A;--win:#FFD36E;--halo:.5}
.play-inner{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,48px);display:flex;flex-direction:column;gap:clamp(20px,3vw,28px)}
.play-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px}
.play-copy{flex:1 1 440px;min-width:0;display:flex;flex-direction:column;gap:12px}
.play-eyebrow{margin:0;font:600 13px/1.3 'Sofia Sans','Helvetica Neue',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--band-muted);transition:color .8s ease}
.play-h2{margin:0;font:400 clamp(48px,6.2vw,86px)/.95 'Sofia Sans Condensed','Arial Narrow',sans-serif;text-transform:uppercase;color:var(--band-ink);transition:color .8s ease}
.play-text{margin:0;font:400 clamp(19px,1.55vw,21px)/1.55 'Crimson Pro',Georgia,serif;color:var(--band-text);max-width:34em;transition:color .8s ease}
.play-ctls{display:flex;flex-wrap:wrap;gap:10px}
.ctl{min-height:48px;padding:12px 20px;border-radius:999px;cursor:pointer;font:600 18px/1 'Sofia Sans Condensed','Arial Narrow',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.ctl-solid{border:0;padding-inline:22px;background-color:var(--ctl-bg);color:var(--ctl-ink)}
.ctl-ghost{border:1.5px solid var(--ghost);background-color:transparent;color:var(--ghost)}
.tray{display:flex;gap:6px;overflow-x:auto;padding:10px;background-color:var(--tray-bg);border:1px solid var(--band-line);border-radius:22px;transition:background-color .8s ease,border-color .8s ease}
.tray-btn{flex:0 0 auto;width:96px;min-height:96px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px;padding:10px 6px;background-color:transparent;border:0;border-radius:16px;cursor:pointer;color:var(--tray-ink)}
.tray-ico{display:flex;align-items:flex-end;justify-content:center;height:58px;width:58px}
.tray-ico>span{display:block}
.tray-lbl{font:600 15px/1.1 'Sofia Sans Condensed','Arial Narrow',sans-serif;letter-spacing:.05em;text-transform:uppercase}
.mat-scroll{overflow-x:auto;border-radius:28px}
.mat{position:relative;min-width:640px;aspect-ratio:16/10;background-color:var(--rug);border-radius:28px;overflow:hidden;transition:background-color .8s ease}
.stitch{position:absolute;inset:14px;border:2px dashed var(--stitch);border-radius:18px;pointer-events:none}
.sun{position:absolute;top:7%;right:6%;width:8%;height:auto;opacity:.9;pointer-events:none}
.sky{position:absolute;inset:0;display:none;pointer-events:none}
.is-night .sky{display:block}
.is-night .sun{display:none}
.moon{position:absolute;top:8%;right:7%;width:54px;height:54px;border-radius:50%;background:#2C3A5C;box-shadow:-13px 9px 0 0 #FFE7A3}
.star{position:absolute;border-radius:50%;background:#FFE9A8}
#pieces{position:absolute;inset:0}
.pc{position:absolute;padding:0;margin:0;border:0;background:transparent;line-height:0;filter:drop-shadow(0 4px 3px rgba(80,55,25,.2));transition:transform .18s ease,filter .6s ease}
.is-night .pc{filter:brightness(.82) saturate(.85) drop-shadow(0 4px 3px rgba(0,0,0,.35))}
.pc.lifted{transform:translateY(-6px) scale(1.06);filter:drop-shadow(0 16px 12px rgba(80,55,25,.3))}
.is-night .pc.lifted{filter:brightness(.9) drop-shadow(0 16px 12px rgba(0,0,0,.45))}
.pc svg,.tray-ico svg{display:block;width:100%;height:auto}
.win{fill:var(--win);transition:fill .6s ease}
.halo{opacity:var(--halo);transition:opacity .6s ease}
.sign{position:absolute;right:3%;bottom:4%;z-index:2600;padding:9px 14px;border-radius:10px;background-color:var(--sign-bg);color:var(--sign-ink);font:600 15px/1 'Sofia Sans Condensed','Arial Narrow',sans-serif;letter-spacing:.08em;text-transform:uppercase;pointer-events:none;transition:background-color .8s ease,color .8s ease;font-variant-numeric:tabular-nums}
.play-foot{margin:0;font:400 17px/1.5 'Crimson Pro',Georgia,serif;color:var(--band-text);transition:color .8s ease}
.play-foot a{color:var(--ghost)}
@media (max-width:760px){.hero-sun{display:none}}

.sabo-stock{font:600 12px/1.3 "Sofia Sans",sans-serif;color:#7A561C;max-width:60px}.tile{flex-wrap:wrap}.sabo-bag{font:600 16px/1 "Sofia Sans",sans-serif}body{overflow-x:clip}
