/* ===== games-ext1: tumble (.tb-), cluster (.cl-), ways (.wy-), hold & win (.hw-), scratch (.sc-), shared helpers (.x1-) ===== */

/* ---------- shared ---------- */
.x1-title{text-align:center;color:#fff;font-family:var(--display);font-weight:900;font-size:clamp(18px,2.6vw,28px);text-shadow:0 3px 0 rgba(0,0,0,.2),0 0 20px rgba(255,255,255,.35);letter-spacing:.02em;line-height:1.15}
.x1-hud{display:flex;gap:8px;width:100%}
.x1-hud>div{flex:1;background:rgba(0,0,0,.26);color:#fff;border-radius:13px;padding:6px 10px;text-align:center;min-width:0;border:1px solid rgba(255,255,255,.12)}
.x1-hud small{display:block;font-size:10.5px;opacity:.85;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.x1-hud b{font-family:var(--display);font-size:17px;white-space:nowrap;display:block;overflow:hidden;text-overflow:ellipsis}
.x1-hud .w{flex:1.5;transition:background .3s,box-shadow .3s}
.x1-hud .w.on{background:linear-gradient(135deg,rgba(0,0,0,.35),rgba(0,0,0,.18));box-shadow:0 0 0 2px var(--ta),0 0 22px color-mix(in srgb,var(--ta) 55%,transparent)}
.x1-hud .w.on b{color:var(--ta);text-shadow:0 0 12px color-mix(in srgb,var(--ta) 60%,transparent)}
.x1-floats{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
.x1-float{position:absolute;transform:translate(-50%,-50%);font-family:var(--display);font-weight:900;color:#fff;font-size:clamp(16px,2.8vw,26px);white-space:nowrap;text-shadow:0 3px 0 rgba(0,0,0,.45),0 0 16px rgba(0,0,0,.35);animation:x1float 1.5s ease-out forwards;padding:2px 12px;border-radius:14px;background:rgba(0,0,0,.35);border:2px solid var(--ta)}
.x1-float.big{font-size:clamp(22px,4vw,38px);color:#fde047;background:rgba(46,16,101,.7);border-color:#fde047}
@keyframes x1float{0%{transform:translate(-50%,-30%) scale(.5);opacity:0}15%{transform:translate(-50%,-50%) scale(1.12);opacity:1}25%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{transform:translate(-50%,-110%);opacity:0}}
.x1-ov{cursor:pointer}
.x1-ov div{padding:0 14px}
.x1-fsbar{display:flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,#7c3aed,#db2777);color:#fff;border-radius:30px;padding:6px 16px;font-family:var(--display);font-weight:900;box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 2px rgba(255,255,255,.35);animation:x1in .35s cubic-bezier(.2,1.5,.4,1);flex-wrap:wrap;line-height:1.2}
.x1-fsbar span{letter-spacing:.06em;font-size:14px}
.x1-fsbar b{font-size:20px;color:#fde047}
.x1-fsbar small{font-size:11px;opacity:.85;text-transform:uppercase;font-weight:800}
.x1-fsbar i{width:1px;height:18px;background:rgba(255,255,255,.35)}
.x1-fsbar em{font-style:normal;background:#fde047;color:#7c2d12;border-radius:10px;padding:1px 9px;font-size:15px}
@keyframes x1in{from{transform:scale(.6);opacity:0}}

/* ---------- TUMBLE ---------- */
.tb-wrap{width:100%;max-width:clamp(380px,calc((100vh - 230px) * 1.2),600px);display:flex;flex-direction:column;align-items:center;gap:10px}
.tb-top{min-height:34px;display:flex;align-items:center;justify-content:center}
.tb-frame{position:relative;width:100%;padding:9px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.12));box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 24px 60px rgba(0,0,0,.28);transition:box-shadow .4s}
.tb-frame.fs{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 3px #fde047,0 0 40px rgba(253,224,71,.55),0 24px 60px rgba(0,0,0,.3);animation:x1fsglow 1.6s ease-in-out infinite alternate}
@keyframes x1fsglow{to{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 3px #f472b6,0 0 50px rgba(244,114,182,.6),0 24px 60px rgba(0,0,0,.3)}}
.tb-board{display:grid;gap:5px;width:100%;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(15,6,40,.42),rgba(15,6,40,.28));padding:5px}
.tb-col{position:relative;container-type:size;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
.tb-cell{position:absolute;left:0;top:0;width:100%;display:grid;place-items:center;will-change:transform}
.tb-sym,.cl-sym,.wy-sym{position:relative;width:92%;height:92%;display:grid;place-items:center;line-height:1;border-radius:30%;transition:transform .2s}
.tb-sym{font-size:min(62cqw,calc(100cqh / var(--h) * .62));background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sc) 60%,transparent) 0 30%,transparent 68%)}
.tb-sym span,.cl-sym span,.wy-sym span{filter:drop-shadow(0 3px 3px rgba(0,0,0,.35));display:block}
.tb-sym.hi{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sc) 80%,#fff) 0 22%,color-mix(in srgb,var(--sc) 55%,transparent) 42%,transparent 70%)}
.tb-sym.sc{background:radial-gradient(circle,#fff 0 18%,rgba(240,171,252,.85) 34%,transparent 70%);animation:x1scat 1.6s ease-in-out infinite}
.tb-sym.sc::after,.wy-sym.sc::after,.cl-sym.wd::after,.wy-sym.wd::after{content:"SCATTER";position:absolute;bottom:3%;left:50%;transform:translateX(-50%);font-size:max(7px,min(10px,.17em));font-weight:900;font-family:var(--display);color:#fff;background:#db2777;padding:1px 5px;border-radius:5px;letter-spacing:.05em;line-height:1.3}
.cl-sym.wd::after,.wy-sym.wd::after{content:"WILD";background:#7c3aed}
@keyframes x1scat{50%{transform:scale(1.07) rotate(-4deg)}}
.tb-sym.bomb{background:radial-gradient(circle,#fecaca 0 20%,rgba(239,68,68,.7) 40%,transparent 70%)}
.tb-sym.bomb b{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);font-size:max(10px,.3em);background:linear-gradient(135deg,#e11d48,#f97316);color:#fff;border-radius:7px;padding:1px 6px;font-family:var(--display);font-weight:900;box-shadow:0 2px 6px rgba(0,0,0,.35);border:1.5px solid #fff}
.tb-cell.win .tb-sym,.cl-cell.win .cl-sym,.wy-cell.win .wy-sym{animation:x1win .45s ease-in-out infinite alternate;background:radial-gradient(circle,rgba(255,255,255,.75) 0 28%,color-mix(in srgb,var(--ta) 55%,transparent) 55%,color-mix(in srgb,var(--ta) 25%,transparent) 100%);box-shadow:inset 0 0 0 2px var(--ta),0 0 22px color-mix(in srgb,var(--ta) 80%,transparent);z-index:2}
@keyframes x1win{from{transform:scale(1)}to{transform:scale(1.13)}}
.tb-cell.boom .tb-sym,.cl-cell.boom .cl-sym,.wy-cell.boom .wy-sym{animation:x1boom .34s ease-in forwards}
.tb-cell.boom::after,.cl-cell.boom::after,.wy-cell.boom::after{content:"";position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border-radius:50%;border:4px solid #fff;transform:translate(-50%,-50%) scale(.3);animation:x1ring .34s ease-out forwards;box-shadow:0 0 18px var(--ta)}
@keyframes x1boom{40%{transform:scale(1.45) rotate(8deg);filter:brightness(1.8)}100%{transform:scale(.1) rotate(-20deg);opacity:0;filter:brightness(3) blur(2px)}}
@keyframes x1ring{to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.tb-cell.dud .tb-sym{opacity:.45;filter:grayscale(.8)}

@media (max-width:760px){
  .tb-wrap{gap:7px}
  .tb-frame{padding:6px;border-radius:18px}
  .tb-board{gap:3px;padding:3px;border-radius:13px}
  .tb-col{border-radius:9px}
  .x1-hud{gap:5px}.x1-hud>div{padding:5px 6px;border-radius:11px}.x1-hud b{font-size:14px}.x1-hud small{font-size:9.5px}
  .x1-fsbar{padding:5px 12px;gap:5px}.x1-fsbar b{font-size:17px}.x1-fsbar span{font-size:12px}
}

/* ---------- CLUSTER ---------- */
.cl-wrap{width:100%;max-width:clamp(360px,calc(100vh - 250px),580px);display:flex;flex-direction:column;align-items:center;gap:9px}
.cl-ladder{display:flex;gap:5px;justify-content:center;flex-wrap:nowrap;width:100%}
.cl-ladder span{flex:1;max-width:66px;text-align:center;font-family:var(--display);font-weight:900;font-size:15px;color:rgba(255,255,255,.75);background:rgba(0,0,0,.24);border-radius:11px;padding:5px 0;border:1.5px solid rgba(255,255,255,.14);transition:all .25s}
.cl-ladder span.past{color:#fff;background:color-mix(in srgb,var(--ta) 30%,rgba(0,0,0,.25))}
.cl-ladder span.cur{color:#fff;border-color:var(--ta);background:rgba(0,0,0,.32)}
.cl-ladder span.on{color:#1f1033;background:linear-gradient(180deg,#fff7ae,#facc15);border-color:#fff;transform:scale(1.15);box-shadow:0 0 0 2px #f59e0b,0 0 22px rgba(250,204,21,.8)}
.cl-frame{position:relative;width:100%;padding:9px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12));box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 24px 60px rgba(0,0,0,.28)}
.cl-board{display:grid;gap:3px;width:100%;aspect-ratio:1;border-radius:16px;overflow:hidden;background:rgba(15,6,40,.38);padding:4px}
.cl-col{position:relative;container-type:size}
.cl-cell{position:absolute;left:0;top:0;width:100%;display:grid;place-items:center;will-change:transform}
.cl-sym{width:94%;height:94%;border-radius:24%;font-size:min(60cqw,calc(100cqh / var(--h) * .6));background:linear-gradient(150deg,color-mix(in srgb,var(--sc) 55%,#fff) 0%,var(--sc) 55%,color-mix(in srgb,var(--sc) 70%,#000) 100%);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -3px 0 rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.25)}
.cl-sym::before{content:"";position:absolute;left:12%;top:8%;width:45%;height:22%;border-radius:50%;background:rgba(255,255,255,.35);filter:blur(1px)}
.cl-sym.wd{background:conic-gradient(from 0deg,#f472b6,#facc15,#4ade80,#22d3ee,#a78bfa,#f472b6);animation:x1scat 1.8s ease-in-out infinite}
.cl-cell.win .cl-sym{background:linear-gradient(150deg,#fff,color-mix(in srgb,var(--sc,#facc15) 45%,#fff));box-shadow:0 0 0 3px var(--ta),0 0 20px var(--ta),inset 0 2px 0 #fff}
.cl-cell.win .cl-sym.wd{background:conic-gradient(from 0deg,#f472b6,#facc15,#4ade80,#22d3ee,#a78bfa,#f472b6)}
.cl-xm{display:inline-block;background:#facc15;color:#1f1033;border-radius:8px;padding:0 7px;text-shadow:none}
.cl-pt td,.cl-pt th{text-align:center}
@media (max-width:760px){
  .cl-wrap{gap:6px}
  .cl-name{font-size:17px}
  .cl-ladder{gap:3px}.cl-ladder span{font-size:12.5px;padding:4px 0;border-radius:9px}
  .cl-frame{padding:6px;border-radius:18px}
  .cl-board{gap:2px;padding:3px;border-radius:12px}
}

/* ---------- WAYS ---------- */
.wy-wrap{width:100%;max-width:clamp(380px,calc((100vh - 280px) * 1.2),620px);display:flex;flex-direction:column;align-items:center;gap:8px}
.wy-top{min-height:34px;display:flex;align-items:center;justify-content:center}
.wy-ways{display:flex;align-items:baseline;gap:7px;background:rgba(0,0,0,.3);border-radius:30px;padding:3px 18px;color:#fff;border:1.5px solid rgba(255,255,255,.2)}
.wy-ways b{font-family:var(--display);font-size:22px;font-weight:900;color:var(--ta);font-variant-numeric:tabular-nums;min-width:4.5ch;text-align:right}
.wy-ways span{font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.14em}
.wy-ways.max{box-shadow:0 0 0 2px #fde047,0 0 22px rgba(253,224,71,.6)}
.wy-frame{position:relative;width:100%;padding:9px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12));box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 24px 60px rgba(0,0,0,.28);transition:box-shadow .4s}
.wy-frame.fs{box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 0 0 3px #fde047,0 0 40px rgba(253,224,71,.55),0 24px 60px rgba(0,0,0,.3);animation:x1fsglow 1.6s ease-in-out infinite alternate}
.wy-heads{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;padding:0 5px 5px}
.wy-heads span{text-align:center;font-family:var(--display);font-weight:900;font-size:12px;color:#fff;background:rgba(0,0,0,.28);border-radius:8px;padding:1px 0;transition:background .3s}
.wy-heads span.h7{background:linear-gradient(135deg,#f59e0b,#ef4444)}.wy-heads span.h6{background:rgba(245,158,11,.75)}
.wy-board{display:grid;gap:5px;width:100%;aspect-ratio:6/5;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(15,6,40,.45),rgba(15,6,40,.3));padding:5px}
.wy-col{position:relative;container-type:size;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04))}
.wy-cell{position:absolute;left:0;top:0;width:100%;display:grid;place-items:center;will-change:transform}
.wy-cell+.wy-cell::before{content:"";position:absolute;left:12%;right:12%;top:0;height:1px;background:rgba(255,255,255,.08)}
.wy-sym{width:min(94cqw,calc(100cqh / var(--h) * .94));height:auto;aspect-ratio:1;font-size:min(60cqw,calc(100cqh / var(--h) * .64));border-radius:22%;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sc) 55%,transparent) 0 28%,transparent 68%)}
.wy-sym.ro span{font-family:var(--display);font-weight:900;font-size:.95em;color:var(--sc);-webkit-text-stroke:1.5px rgba(255,255,255,.9);text-shadow:0 3px 0 rgba(0,0,0,.35),0 0 14px color-mix(in srgb,var(--sc) 70%,transparent);filter:none;letter-spacing:-.04em}
.wy-sym.ro{background:none}
.wy-sym.hi{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--sc) 80%,#fff) 0 20%,color-mix(in srgb,var(--sc) 55%,transparent) 42%,transparent 70%)}
.wy-sym.wd{background:radial-gradient(circle,#fff 0 18%,rgba(167,139,250,.9) 38%,transparent 72%)}
.wy-sym.sc{background:radial-gradient(circle,#fff 0 18%,rgba(240,171,252,.85) 36%,transparent 70%);animation:x1scat 1.6s ease-in-out infinite}
.wy-rt{font-family:var(--display);font-weight:900;-webkit-text-stroke:1px #fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}
#wyMult.bump{animation:x1bump .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes x1bump{from{transform:scale(1.8)}}
@media (max-width:760px){
  .wy-wrap{gap:6px}
  .wy-ways{padding:2px 14px}.wy-ways b{font-size:18px}.wy-ways span{font-size:11px}
  .wy-frame{padding:6px;border-radius:18px}
  .wy-heads{gap:3px;padding:0 3px 4px}.wy-heads span{font-size:10.5px}
  .wy-board{gap:3px;padding:3px;border-radius:13px;aspect-ratio:6/5.6}
  .wy-col{border-radius:9px}
}

/* ---------- HOLD & WIN ---------- */
.hw-wrap{width:100%;max-width:620px;display:flex;flex-direction:column;align-items:center;gap:9px}
.hw-jps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:100%}
.hw-jp{border-radius:13px;padding:4px 6px;text-align:center;color:#fff;border:2px solid rgba(255,255,255,.55);box-shadow:0 6px 16px rgba(0,0,0,.2),inset 0 2px 0 rgba(255,255,255,.35);min-width:0}
.hw-jp small{display:block;font-family:var(--display);font-weight:900;font-size:11px;letter-spacing:.12em;opacity:.95}
.hw-jp b{display:block;font-family:var(--display);font-weight:900;font-size:17px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-jp.mini{background:linear-gradient(180deg,#38bdf8,#0369a1)}
.hw-jp.minor{background:linear-gradient(180deg,#4ade80,#15803d)}
.hw-jp.major{background:linear-gradient(180deg,#f472b6,#9d174d)}
.hw-jp.grand{background:linear-gradient(180deg,#fde047,#ea580c);color:#451a03;border-color:#fff7ae}
.hw-top{min-height:34px;display:flex;align-items:center;justify-content:center}
.hw-frame{position:relative;width:100%;padding:9px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.12));box-shadow:inset 0 2px 0 rgba(255,255,255,.6),0 24px 60px rgba(0,0,0,.28);transition:background .5s,box-shadow .5s}
.hw-frame.feat{background:linear-gradient(180deg,#fde68a,#b45309);box-shadow:inset 0 2px 0 #fff7ae,0 0 0 3px #fde047,0 0 44px rgba(250,204,21,.6),0 24px 60px rgba(0,0,0,.3)}
.hw-board{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;width:100%;aspect-ratio:5/3}
.hw-reel{position:relative;overflow:hidden;border-radius:14px;background:linear-gradient(180deg,#fff,#f5f0ff);box-shadow:inset 0 6px 12px rgba(0,0,0,.12),inset 0 -6px 12px rgba(0,0,0,.12);container-type:size}
.hw-frame.feat .hw-reel{background:linear-gradient(180deg,#2e1065,#1e0b45)}
.hw-reel.blur .hw-strip{filter:blur(1.5px)}
.hw-strip{will-change:transform}
.hw-cell{height:33.3333cqh;display:grid;place-items:center;position:relative}
.hw-sym{position:relative;width:88%;height:88%;display:grid;place-items:center;border-radius:22%;font-size:min(56cqw,19cqh);line-height:1}
.hw-sym span{filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.hw-sym.hi{background:radial-gradient(circle,color-mix(in srgb,var(--t1) 45%,transparent) 0 35%,transparent 70%)}
.hw-sym.wd{background:radial-gradient(circle,#ede9fe 0 30%,rgba(167,139,250,.65) 55%,transparent 72%)}
.hw-sym.wd small{position:absolute;bottom:2%;left:50%;transform:translateX(-50%);font-size:max(8px,min(10px,.18em));font-weight:900;font-family:var(--display);color:#fff;background:#7c3aed;padding:1px 6px;border-radius:5px;letter-spacing:.06em}
.hw-coin{position:relative;width:min(84cqw,30cqh);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7ae 0,#fde047 28%,#f59e0b 62%,#b45309 100%);box-shadow:inset 0 0 0 3px #fbbf24,inset 0 0 0 6px rgba(146,64,14,.45),0 4px 10px rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--display);color:#451a03;overflow:hidden}
.hw-coin i{position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 45%,transparent 60%);transform:translateX(-120%)}
.hw-coin b{font-weight:900;font-size:min(18cqw,7.5cqh);line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.6);position:relative;max-width:90%;overflow:hidden}
.hw-coin em{font-style:normal;font-weight:900;font-size:min(11cqw,4.6cqh);letter-spacing:.06em;color:#fff;background:#7c2d12;border-radius:5px;padding:0 4px;margin-bottom:2px;position:relative}
.hw-coin.jp.mini{background:radial-gradient(circle at 35% 30%,#e0f2fe 0,#38bdf8 35%,#0369a1 100%);box-shadow:inset 0 0 0 3px #7dd3fc,0 4px 10px rgba(0,0,0,.3)}
.hw-coin.jp.minor{background:radial-gradient(circle at 35% 30%,#dcfce7 0,#4ade80 35%,#15803d 100%);box-shadow:inset 0 0 0 3px #86efac,0 4px 10px rgba(0,0,0,.3)}
.hw-coin.jp.major{background:radial-gradient(circle at 35% 30%,#fce7f3 0,#f472b6 35%,#9d174d 100%);box-shadow:inset 0 0 0 3px #f9a8d4,0 4px 10px rgba(0,0,0,.3)}
.hw-coin.jp b{color:#fff;text-shadow:0 2px 2px rgba(0,0,0,.4)}
.hw-sym.land .hw-coin i,.hw-sym.lock .hw-coin i{animation:hwglint 1.4s ease-in-out .1s}
@keyframes hwglint{to{transform:translateX(120%)}}
.hw-sym.glow .hw-coin{animation:x1win .4s ease-in-out infinite alternate;box-shadow:inset 0 0 0 3px #fbbf24,0 0 0 3px #fff,0 0 24px #fde047}
.hw-sym.win{animation:x1win .45s ease-in-out infinite alternate;background:radial-gradient(circle,rgba(255,255,255,.9) 0 30%,color-mix(in srgb,var(--ta) 60%,transparent) 60%,transparent 75%);box-shadow:0 0 0 3px var(--ta),0 0 20px var(--ta)}
.hw-sym.lock{background:radial-gradient(circle,rgba(253,224,71,.45) 0 40%,transparent 70%)}
.hw-sym.slam .hw-coin{animation:hwslam .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes hwslam{0%{transform:scale(2.4) rotate(-25deg);opacity:0}60%{opacity:1}}
.hw-sym.collect .hw-coin{animation:hwcollect .5s ease-out forwards}
@keyframes hwcollect{40%{transform:scale(1.25);filter:brightness(1.5)}100%{transform:scale(.92);filter:brightness(.75) saturate(.6)}}
.hw-slot{width:84%;height:84%;border-radius:22%;background:rgba(255,255,255,.06);border:2px dashed rgba(253,224,71,.3)}
.hw-slot.roll{animation:hwroll .22s linear infinite;background:linear-gradient(180deg,rgba(253,224,71,.08),rgba(253,224,71,.3),rgba(253,224,71,.08));background-size:100% 200%}
@keyframes hwroll{to{background-position:0 200%}}
.hw-lines{position:absolute;left:9px;top:9px;width:calc(100% - 18px);height:calc(100% - 18px);pointer-events:none;z-index:5}
.hw-lines polyline{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(255,255,255,.9));animation:dash 1s ease-out both;opacity:.9}
.hw-lives{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#b45309,#f59e0b);color:#fff;border-radius:30px;padding:5px 16px;font-family:var(--display);font-weight:900;box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 2px #fde68a}
.hw-lives span{letter-spacing:.1em;font-size:14px}
.hw-lives i{width:16px;height:16px;border-radius:50%;background:rgba(0,0,0,.3);box-shadow:inset 0 2px 3px rgba(0,0,0,.3);transition:all .25s}
.hw-lives i.on{background:radial-gradient(circle at 35% 30%,#fff,#fde047 45%,#f97316);box-shadow:0 0 10px #fde047}
.hw-lives b{font-size:20px;min-width:14px;text-align:center}
.hw-lives.reset{animation:x1in .4s cubic-bezier(.2,1.6,.4,1)}
.hw-lives.reset i.on{animation:x1bump .4s}
.hw-lives.done{background:linear-gradient(135deg,#16a34a,#4ade80);box-shadow:0 8px 24px rgba(0,0,0,.25),0 0 0 2px #bbf7d0}
.hw-grand div{color:#fff7ae}
@media (max-width:760px){
  .hw-wrap{gap:6px}
  .hw-jps{gap:4px}.hw-jp{padding:3px 2px;border-radius:10px}.hw-jp small{font-size:9px;letter-spacing:.06em}.hw-jp b{font-size:13px}
  .hw-frame{padding:6px;border-radius:18px}
  .hw-lines{left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
  .hw-board{gap:4px}.hw-reel{border-radius:10px}
  .hw-lives{padding:4px 12px;gap:6px}.hw-lives span{font-size:12px}
}

/* ---------- SCRATCH ---------- */
.sc-wrap{display:flex;gap:18px;align-items:stretch;justify-content:center;width:100%;max-width:700px;flex-wrap:wrap}
.sc-ticket{user-select:none;-webkit-user-select:none;position:relative;flex:1 1 330px;max-width:420px;background:linear-gradient(180deg,#fffdf7,#fff7ed);border-radius:22px;padding:12px;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ta),0 26px 60px rgba(0,0,0,.32);transform:rotate(-1deg);transition:transform .3s}
.sc-ticket::before,.sc-ticket::after{content:"";position:absolute;top:50%;width:22px;height:22px;border-radius:50%;background:var(--t2);transform:translateY(-50%);box-shadow:inset 0 0 0 3px var(--ta)}
.sc-ticket::before{left:-11px;clip-path:inset(0 0 0 50%)}.sc-ticket::after{right:-11px;clip-path:inset(0 50% 0 0)}
.sc-ticket.fresh{animation:scin .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes scin{from{transform:translateY(-40px) rotate(-6deg) scale(.9);opacity:.3}}
.sc-ticket.won{transform:rotate(0) scale(1.02);box-shadow:0 0 0 4px #fff,0 0 0 7px #facc15,0 0 50px rgba(250,204,21,.7),0 26px 60px rgba(0,0,0,.32)}
.sc-head{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--t1),var(--t2));border-radius:14px;padding:8px 12px;color:#fff;margin-bottom:10px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.15)}
.sc-head div{flex:1;text-align:center;min-width:0}
.sc-head b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(17px,2.4vw,22px);line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-head small{display:block;font-weight:800;font-size:10.5px;letter-spacing:.14em;opacity:.95}
.sc-hero{font-size:28px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.25))}
.sc-play{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;background:repeating-linear-gradient(45deg,#fef3c7 0 10px,#fde68a 10px 20px)}
.sc-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:6px;padding:6px;container-type:size}
.sc-cell{background:#fff;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:inset 0 0 0 2px #fde68a;transition:transform .25s,box-shadow .25s,background .25s;min-height:0}
.sc-cell span{font-size:12cqw;line-height:1.05;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.sc-cell small{font-family:var(--display);font-weight:900;font-size:max(10px,3.6cqw);color:#7c2d12;margin-top:2px}
.sc-cell.rev span{animation:x1in .35s cubic-bezier(.2,1.6,.4,1)}
.sc-cell.win{background:radial-gradient(circle,#fff 0 40%,#fef08a 100%);box-shadow:inset 0 0 0 3px #f59e0b,0 0 22px rgba(250,204,21,.9);transform:scale(1.04);animation:x1win .45s ease-in-out infinite alternate;z-index:1}
.sc-ticket.lost .sc-cell{filter:saturate(.75)}
.sc-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;z-index:2;border-radius:14px}
.sc-canvas:active{cursor:grabbing}
.sc-canvas.gone{pointer-events:none}
.sc-foot{display:flex;justify-content:space-between;gap:8px;margin-top:9px;font-size:12px;font-weight:800;color:#7c2d12;padding:0 4px}
.sc-foot b{font-family:var(--display)}
.sc-prizes{flex:0 1 220px;min-width:200px;background:rgba(0,0,0,.28);border-radius:18px;padding:10px;display:flex;flex-direction:column;gap:5px;border:1px solid rgba(255,255,255,.15);align-self:center}
.sc-ph{text-align:center;color:#fff;font-family:var(--display);font-weight:900;letter-spacing:.2em;font-size:13px;margin-bottom:2px}
.sc-pr{display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.12);border-radius:11px;padding:4px 10px;color:#fff;transition:all .3s}
.sc-pr span{font-size:18px;letter-spacing:-2px;white-space:nowrap}
.sc-pr b{font-family:var(--display);font-size:15px;white-space:nowrap}
.sc-pr:first-of-type{background:linear-gradient(90deg,rgba(250,204,21,.35),rgba(255,255,255,.12))}
.sc-pr.on{background:linear-gradient(135deg,#fde047,#f59e0b);color:#451a03;transform:scale(1.05);box-shadow:0 0 0 2px #fff,0 0 22px rgba(250,204,21,.8)}
@media (max-width:760px){
  .sc-wrap{gap:12px}
  .sc-ticket{flex-basis:100%;max-width:360px;padding:9px}
  .sc-head{padding:6px 10px;margin-bottom:8px}.sc-hero{font-size:22px}
  .sc-prizes{flex:1 1 100%;max-width:360px;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px}
  .sc-ph{grid-column:1/-1}
  .sc-pr{padding:3px 8px}.sc-pr span{font-size:15px}.sc-pr b{font-size:13px}
}