#sakotis-game{--cream:#FAEEDA;--gold:#bb9230;--ink:#1f1e1e;--soft:#8a8577;max-width:820px;margin:0 auto;font-size:16px;color:var(--ink)}
#sakotis-game *{box-sizing:border-box}
.sg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sg-stage{background:var(--cream);border-radius:18px;padding:26px 18px 30px;text-align:center;min-height:430px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.sg-in{animation:sgIn .35s ease}
@keyframes sgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#sakotis-game h2{font-size:26px;margin:0 0 10px}
#sakotis-game h3{font-size:21px;margin:0 0 6px}
#sakotis-game h4{font-size:18px;margin:0 0 6px}
#sakotis-game p{margin:0 0 14px;line-height:1.5}
.sg-step{display:inline-block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
.sg-note{font-size:13px;color:var(--soft)}
.sg-note a{color:var(--gold);text-decoration:underline}
.sg-btn{display:inline-block;background:var(--ink);color:#fff;border:0;border-radius:10px;padding:14px 26px;font-size:13px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;margin:6px;min-height:48px;text-decoration:none;transition:background .18s,transform .12s}
.sg-btn:hover{background:var(--gold);color:#fff}
.sg-btn:active{transform:scale(.97)}
.sg-btn:disabled{opacity:.35;cursor:not-allowed}
.sg-btn.sg-alt{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.sg-btn.sg-alt:hover{background:var(--ink);color:#fff}
.sg-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.sg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
@media(max-width:680px){.sg-grid{grid-template-columns:repeat(3,1fr)}#sakotis-game h2{font-size:22px}.sg-stage{padding:20px 12px 24px}}
@media(max-width:380px){.sg-grid{grid-template-columns:repeat(2,1fr)}}
.sg-ing{background:#fff;border:1px solid #efe3cf;border-radius:12px;padding:12px 6px;font-size:12px;line-height:1.25;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:86px;transition:transform .15s,border-color .15s,background .15s}
.sg-ing:hover{transform:translateY(-2px)}
.sg-ing-ico{color:var(--gold)}
.sg-ing.sg-on{background:var(--gold);color:#fff;border-color:var(--gold)}
.sg-ing.sg-on .sg-ing-ico{color:#fff}
.sg-fly{animation:sgFly .45s ease}
@keyframes sgFly{50%{transform:translateY(26px) scale(.85) rotate(6deg)}}
.sg-granny{position:absolute;top:10px;right:14px;font-size:30px;opacity:.35;transition:opacity .2s}
.sg-gasp{opacity:1;animation:sgGasp .6s ease}
@keyframes sgGasp{0%,100%{transform:none}30%{transform:scale(1.35) rotate(-8deg)}}
.sg-bowl{display:flex;justify-content:center;margin:6px 0 12px}
.sg-bowl-shape{width:120px;height:44px;background:#fff;border:1px solid #e6d9c2;border-radius:0 0 70px 70px}
.sg-modal{position:absolute;inset:0;background:rgba(31,30,30,.55);display:flex;align-items:center;justify-content:center;padding:16px;z-index:5}
.sg-modal-in{background:#fff;border-radius:14px;padding:22px 18px;max-width:420px;width:100%}
.sg-eggs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sg-egg{background:var(--cream);border:1px solid #e6d9c2;border-radius:10px;min-width:56px;min-height:48px;font-size:16px;cursor:pointer}
.sg-egg:hover{background:var(--gold);color:#fff}
.sg-crack{font-size:19px;line-height:1.5;word-break:break-all;margin-top:12px;min-height:28px}
.sg-tilt-wrap{display:flex;justify-content:center;margin:16px 0 20px;min-height:130px}
.sg-tiltbowl{width:150px;height:70px;background:#fff;border:1px solid #e6d9c2;border-radius:0 0 90px 90px;position:relative;transition:transform .5s ease}
.sg-tilted{transform:rotate(38deg)}
.sg-drip{position:absolute;right:6px;bottom:-4px;width:8px;height:0;background:#f3d68f;border-radius:0 0 6px 6px}
.sg-runs{animation:sgRun 1s ease forwards}
.sg-plops{animation:sgPlop .7s ease forwards}
@keyframes sgRun{to{height:70px}}
@keyframes sgPlop{60%{height:16px;width:20px}to{height:18px;width:26px;border-radius:50%}}
.sg-methods .sg-method{background:#fff;border:1px solid #e6d9c2;border-radius:12px;padding:16px 14px;min-width:150px;min-height:96px;cursor:pointer;display:flex;flex-direction:column;gap:8px;align-items:center;font-size:13px}
.sg-methods .sg-method span{font-size:26px}
.sg-methods .sg-method:hover{border-color:var(--gold);transform:translateY(-2px)}
.sg-fire-wrap{position:relative;height:210px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.sg-cake{position:relative;width:min(420px,92%);height:150px;display:flex;align-items:center;justify-content:center}
.sg-spit-rod{position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:linear-gradient(#c8c8c8,#8f8f8f);border-radius:3px}
.sg-spit-rod:before,.sg-spit-rod:after{content:"";position:absolute;top:-9px;width:10px;height:24px;background:#7a7a7a;border-radius:2px}
.sg-spit-rod:before{left:-2px}
.sg-spit-rod:after{right:-2px}
.sg-barrel{position:relative;width:78%;height:78px;border-radius:40px;background:repeating-linear-gradient(90deg,#f2d69c 0 12px,#e6bf74 12px 24px);box-shadow:inset 0 -8px 14px rgba(150,110,40,.35),inset 0 6px 10px rgba(255,255,255,.45);animation:sgRoll 1.1s linear infinite;overflow:visible}
.sg-rings{position:absolute;inset:0}
.sg-ring{position:absolute;top:50%;width:20px;height:104px;margin-top:-52px;background:radial-gradient(ellipse at 50% 50%,#f5d79a,#dfae5d);border-radius:50%;box-shadow:0 0 0 1px rgba(190,140,60,.35);animation:sgPop .4s ease}
.sg-ring:before,.sg-ring:after{content:"";position:absolute;left:50%;width:0;height:0;margin-left:-7px;border-left:7px solid transparent;border-right:7px solid transparent}
.sg-ring:before{top:-9px;border-bottom:10px solid #e8c274}
.sg-ring:after{bottom:-9px;border-top:10px solid #e8c274}
@keyframes sgRoll{from{background-position:0 0}to{background-position:24px 0}}
@keyframes sgPop{from{transform:scaleY(.2);opacity:0}to{transform:scaleY(1);opacity:1}}
.sg-flames{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:center;gap:26px;font-size:26px}
.sg-flames span{animation:sgFlick .8s ease-in-out infinite alternate}
.sg-flames span:nth-child(2){animation-delay:.2s}
.sg-flames span:nth-child(3){animation-delay:.4s}
@keyframes sgFlick{to{transform:translateY(-5px) scale(1.12)}}
.sg-mount-ico{display:block;width:54px;height:34px;position:relative}
.sg-mh:before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;margin-top:-3px;background:#bb9230;border-radius:3px}
.sg-mh:after{content:"";position:absolute;left:50%;top:50%;width:30px;height:20px;margin:-10px 0 0 -15px;background:#e8c274;border-radius:12px}
.sg-mv:before{content:"";position:absolute;top:0;bottom:0;left:50%;width:6px;margin-left:-3px;background:#bb9230;border-radius:3px}
.sg-mv:after{content:"";position:absolute;left:50%;top:50%;width:20px;height:30px;margin:-15px 0 0 -10px;background:#e8c274;border-radius:12px}
.sg-flash{background:#fff;border-radius:12px;padding:14px 16px;margin:14px auto 0;max-width:460px;font-size:14px;line-height:1.5;animation:sgIn .3s ease}
.sg-reward{background:#fff;border:1px dashed var(--gold);border-radius:12px;padding:16px;margin:14px auto 4px;max-width:460px}
.sg-reward-title{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.sg-reward code{background:var(--cream);padding:4px 10px;border-radius:6px;font-size:17px;letter-spacing:2px}
.sg-gauge{position:relative;height:16px;background:#efe3cf;border-radius:10px;margin:12px 8px}
.sg-zone{position:absolute;left:42%;width:30%;top:0;bottom:0;background:var(--gold);opacity:.55;border-radius:6px}
.sg-needle{position:absolute;top:-5px;width:6px;height:26px;background:var(--ink);border-radius:3px;transition:left .06s linear}
.sg-needle.sg-hot{background:#e0452b}
.sg-hold{width:min(320px,90%);touch-action:none;user-select:none}
.sg-hold.sg-pressed{background:var(--gold)}
.sg-card{max-width:560px;margin:0 auto}
.sg-bigemoji{font-size:58px;line-height:1}
.sg-score{font-size:15px;color:var(--soft);margin:4px 0 2px}
.sg-score strong{font-family:"Cormorant Garamond",serif;font-size:52px;color:var(--gold);line-height:1;margin-right:4px}
.sg-notes{list-style:none;padding:0;margin:10px auto 14px;max-width:440px;text-align:left}
.sg-notes li{font-size:13px;color:var(--soft);padding:5px 0 5px 16px;position:relative}
.sg-notes li:before{content:"•";position:absolute;left:2px;color:var(--gold)}
.sg-taste{font-size:30px;margin-bottom:2px}
.sg-hand{display:inline-block;animation:sgGrab 1.4s ease infinite}
@keyframes sgGrab{0%,100%{transform:translateX(0)}40%{transform:translateX(14px) rotate(-12deg)}}
.sg-share{flex-direction:column;gap:6px;margin:10px 0 4px}
.sg-share-title{font-size:14px;font-weight:600;margin:0 0 6px}
.sg-share-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.sg-sh{background:#fff;border:1px solid #e6d9c2;border-radius:8px;padding:10px 14px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--ink);cursor:pointer;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.sg-sh:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.sg-fail .sg-bigemoji{animation:sgShake .6s ease}
@keyframes sgShake{0%,100%{transform:none}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@media(prefers-reduced-motion:reduce){#sakotis-game *{animation:none!important;transition:none!important}}