/* Perya Color Game — reuses the Swerte 6 layout (pick6/page.css); dice tray + colour board here */
.cg .tray{position:relative;height:170px;margin:0 0 16px;border-radius:18px;background:radial-gradient(90% 120% at 50% 0%,#1d5a3a 0%,#0f3322 55%,#0a2216 100%);border:2px solid rgba(233,196,106,.55);box-shadow:inset 0 10px 30px rgba(0,0,0,.55),0 0 0 4px rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;gap:clamp(18px,6vw,60px);perspective:700px;overflow:hidden}
.cg .tray:before{content:"";position:absolute;inset:8px;border-radius:12px;border:1px dashed rgba(255,255,255,.12);pointer-events:none}
.tray-msg{position:absolute;left:0;right:0;bottom:8px;text-align:center;font:600 11px Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.die{--s:76px;position:relative;width:var(--s);height:var(--s);transform-style:preserve-3d}
.cube{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(22deg)}
.f{position:absolute;inset:0;border-radius:16%;background:var(--fimg) center/100% 100% no-repeat,var(--fd);box-shadow:inset 0 0 0 1px rgba(255,215,120,.55);backface-visibility:hidden}
.f0{transform:translateZ(calc(var(--s)/2))}.f1{transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.f2{transform:rotateY(90deg) translateZ(calc(var(--s)/2))}.f3{transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.f4{transform:rotateX(90deg) translateZ(calc(var(--s)/2))}.f5{transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.shadow{position:absolute;left:8%;right:8%;bottom:-16px;height:12px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(5px);transform:translateZ(-40px)}
.die.roll{animation:drop var(--dur,2.8s) cubic-bezier(.2,.75,.3,1) both}
.die.roll .shadow{animation:shd var(--dur,2.8s) cubic-bezier(.2,.75,.3,1) both}
@keyframes drop{0%{transform:translate(var(--x0,0),-170px)}18%{transform:translate(calc(var(--x0,0)*.5),0)}30%{transform:translate(calc(var(--x0,0)*.3),-46px)}42%{transform:translate(calc(var(--x0,0)*.15),0)}52%{transform:translate(calc(var(--x0,0)*.06),-14px)}62%,100%{transform:translate(0,0)}}
@keyframes shd{0%{opacity:0;transform:scale(.4)}18%{opacity:1;transform:scale(1)}30%{opacity:.5;transform:scale(.75)}42%,100%{opacity:1;transform:scale(1)}}
.die.idle{opacity:.8}
.die.hit{filter:drop-shadow(0 0 14px rgba(255,226,140,.95))}
.cboard{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cell{position:relative;min-height:116px;border-radius:18px;border:2px solid rgba(0,0,0,.25);background:linear-gradient(160deg,var(--c),var(--d));color:#111;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:12px 6px;transition:transform .12s,box-shadow .2s,opacity .3s;box-shadow:inset 0 2px 0 rgba(255,255,255,.45),inset 0 -6px 16px rgba(0,0,0,.25),0 8px 22px -10px rgba(0,0,0,.8);-webkit-tap-highlight-color:transparent}
.cell:active{transform:scale(.97)}
.cell .sw{display:none}
.cell b{font:800 18px/1.1 Inter,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(0,0,0,.78);text-shadow:0 1px 0 rgba(255,255,255,.4)}
.cell small{font:600 11px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.55)}
.c-blue b,.c-red b,.c-green b{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4)}.c-blue small,.c-red small,.c-green small{color:rgba(255,255,255,.75)}
.cell .stk{position:absolute;top:8px;right:8px;min-width:30px;padding:3px 9px;border-radius:99px;font:700 12px Inter,sans-serif;color:#1a1204;background:var(--grad);box-shadow:0 4px 12px rgba(0,0,0,.45);font-variant-numeric:tabular-nums}
.cell .hits{position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:99px;font:800 12px Inter,sans-serif;background:#111;color:#ffe9a8;box-shadow:0 0 0 2px #ffe9a8}
.cell.has{box-shadow:0 0 0 3px var(--gold),0 0 26px -4px rgba(233,196,106,.7),inset 0 2px 0 rgba(255,255,255,.45)}
.cboard.locked .cell{cursor:default}
.cboard.done .cell{opacity:.35}
.cboard.done .cell.win{opacity:1;transform:scale(1.03);box-shadow:0 0 0 3px #fff,0 0 34px 4px rgba(255,236,170,.7)}
.cg-strip .hi{gap:3px}.cdots{display:inline-flex;gap:3px;vertical-align:middle}.cdots i{width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.mc{display:inline-flex;align-items:center;gap:4px;margin:2px 8px 2px 0;white-space:nowrap}.mc i{width:14px;height:14px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}.mc.hit{color:#6fe3a0;font-weight:700}
.paytbl{margin-top:14px;max-width:560px}.paytbl table{min-width:0}
@media (max-width:760px){.cg .tray{height:136px}.die{--s:58px}.cell{min-height:92px}.cell b{font-size:15px}.cboard{gap:9px}}
/* ---- win celebration (owner 10-26: the win was too quiet) ---- */
.cg-board{position:relative}
.winfx{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;pointer-events:none;overflow:hidden}
.winfx[hidden]{display:none}
.winfx:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(20,14,2,.45),rgba(0,0,0,.78) 75%);animation:wfbg .35s ease-out both}
@keyframes wfbg{from{opacity:0}}
.wf-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,240,190,.9),rgba(255,200,80,0) 60%);opacity:0}
.winfx.big .wf-flash{animation:wfflash .9s ease-out both}
@keyframes wfflash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.wf-rays{position:absolute;left:50%;top:45%;width:900px;height:900px;margin:-450px 0 0 -450px;background:repeating-conic-gradient(from 0deg,rgba(255,215,120,.16) 0 8deg,rgba(255,215,120,0) 8deg 20deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 0,#000 30%,transparent 62%);mask:radial-gradient(circle,#000 0,#000 30%,transparent 62%);animation:wfspin 8s linear infinite,wfin .5s ease-out both}
@keyframes wfspin{to{transform:rotate(360deg)}}
.wf-in{position:relative;display:flex;flex-direction:column;align-items:center;animation:wfpop .6s cubic-bezier(.2,1.6,.4,1) both}
@keyframes wfpop{0%{transform:scale(.2);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes wfin{from{opacity:0}}
.wf-in img{width:min(440px,82vw);height:auto;filter:drop-shadow(0 8px 30px rgba(255,170,40,.35))}
.wf-in img[hidden]+.wf-txt,.wf-in img:not([src])+.wf-txt{display:block}
.wf-txt{display:none;font:900 clamp(44px,7vw,78px)/1 "Playfair Display",Georgia,serif;letter-spacing:.02em;background:linear-gradient(180deg,#fff6d0 0%,#ffd76a 40%,#c8871c 75%,#ffe39a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 0 #6b3d05) drop-shadow(0 10px 24px rgba(0,0,0,.7))}
.wf-amt{display:flex;align-items:baseline;gap:6px;margin-top:-6px;font-variant-numeric:tabular-nums}
.wf-amt span,.wf-amt b{font:800 clamp(40px,6vw,64px)/1 "PHDigits","Playfair Display",Georgia,serif;color:#fff3c4;text-shadow:0 0 18px rgba(255,200,80,.9),0 3px 0 #7a4a08,0 8px 22px rgba(0,0,0,.8)}
.wf-amt small{font:700 13px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#ffe39a}
.winfx.out{animation:wfout .45s ease-in forwards}
@keyframes wfout{to{opacity:0;transform:scale(1.04)}}
.wf-coins{position:absolute;inset:0}
.coin{position:absolute;left:50%;top:45%;width:var(--sz);height:var(--sz);margin:calc(var(--sz)/-2) 0 0 calc(var(--sz)/-2);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7d0 0%,#ffd75a 28%,#d99a1e 60%,#8a5a0a 100%);box-shadow:inset 0 0 0 2px rgba(255,240,180,.7),inset 0 -3px 4px rgba(90,50,0,.5),0 4px 10px rgba(0,0,0,.5);
  animation:coin var(--t) cubic-bezier(.15,.6,.35,1) var(--dl) both}
.coin:after{content:"★";position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--sz)*.5);color:rgba(140,85,5,.75)}
@keyframes coin{0%{transform:translate(0,0) scale(.3) rotateY(0);opacity:0}10%{opacity:1}60%{transform:translate(var(--dx),var(--dy)) scale(1) rotateY(540deg);opacity:1}100%{transform:translate(calc(var(--dx)*1.1),calc(var(--dy) + 260px)) scale(.9) rotateY(900deg);opacity:0}}
.cell .gain{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:900 26px "PHDigits",Georgia,serif;color:#fff;text-shadow:0 0 14px rgba(255,210,90,1),0 2px 0 #7a4a08;animation:gain 1.8s ease-out both;pointer-events:none;white-space:nowrap}
@keyframes gain{0%{opacity:0;transform:translate(-50%,-20%) scale(.6)}20%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-160%) scale(1)}}
.wf-in img{display:block}
.winfx:not(.big) .wf-amt{position:absolute;left:0;right:0;top:66%;justify-content:center;margin:0}
.winfx:not(.big) .wf-amt span,.winfx:not(.big) .wf-amt b{font-size:clamp(30px,4.6vw,48px);color:#5a3200;text-shadow:0 1px 0 rgba(255,240,190,.8)}
.winfx:not(.big) .wf-amt small{color:#6b3d05}
.winfx.big .wf-amt{margin-top:-4px}
.winfx.big .wf-in img{width:min(340px,70vw)}
.winfx.big .wf-amt{margin-top:-18px}
/* 3D dice (dice3d.js) replace the CSS cubes when WebGL works */
.cg .tray.gl .die{display:none}
.dice3d{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .3s}
.cg .tray.gl{height:200px}
@media (max-width:760px){.cg .tray.gl{height:170px}}