/* Game surface and game-specific controls only. */
:root{--cube-size:clamp(174px,56vw,280px);--cube-count:3;--cubie-size:calc(var(--cube-size)/var(--cube-count));--half-cubie:calc(var(--cubie-size)/2);}
[role=button]{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
.turn-arrow:focus-visible,.face-turn-button:focus-visible,.joystick-base:focus-visible{outline:3px solid #fff1b8;outline-offset:2px}
.premium-stage{position:relative;isolation:isolate;overflow:hidden;min-height:585px;border:0;border-radius:20px;padding:6px 10px 12px;background:radial-gradient(circle at 50% 32%,#26334e 0,#111827 38%,#080b12 72%,#040609 100%);box-shadow:none}
.stage-glow{position:absolute;z-index:-1;width:240px;height:240px;border-radius:50%;filter:blur(50px);opacity:.2}
.stage-glow-left{left:-130px;top:27%;background:#d7a73f}
.stage-glow-right{right:-130px;top:12%;background:#4d76cb}
.cube-viewport{--cube-center-y:34%;position:relative;height:clamp(440px,70vw,500px);margin-top:0;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain;perspective:950px}
.turn-canvas{position:absolute;z-index:2;inset:0;display:none;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 14px 15px #0009) drop-shadow(0 0 9px #ffe29a33)}
.turn-canvas.active{display:block}
.cube-scene{position:absolute;left:50%;top:var(--cube-center-y);width:0;height:0;transform-style:preserve-3d}
.cube{position:absolute;width:0;height:0;transform-style:preserve-3d;transform:rotateX(var(--view-x,-25deg)) rotateY(var(--view-y,-36deg));transition:filter .2s}
.cube.busy{filter:drop-shadow(0 0 13px #ffe29a66)}
.cubie-orbit{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d}
.cubie{position:absolute;left:calc(var(--cubie-size)/-2);top:calc(var(--cubie-size)/-2);width:var(--cubie-size);height:var(--cubie-size);pointer-events:none;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform}
.cubie-face{position:absolute;inset:1px;display:block;border:1px solid #020305;border-radius:clamp(5px,1.5vw,10px);background:linear-gradient(145deg,#20242d,#080a0e 72%);box-shadow:inset 0 0 0 2px #000,inset 0 1px 2px #ffffff20;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.cubie-face::after{content:"";position:absolute;inset:6%;border-radius:clamp(4px,1.2vw,8px);background:var(--sticker,#11151e);box-shadow:inset 0 1px 2px #fff8,inset 0 -5px 10px #0005,0 0 0 1px #0009;transition:filter .15s}
.face-front{transform:rotateY(0deg) translateZ(var(--half-cubie))}
.face-back{transform:rotateY(180deg) translateZ(var(--half-cubie))}
.face-right{transform:rotateY(90deg) translateZ(var(--half-cubie))}
.face-left{transform:rotateY(-90deg) translateZ(var(--half-cubie))}
.face-top{transform:rotateX(90deg) translateZ(var(--half-cubie))}
.face-bottom{transform:rotateX(-90deg) translateZ(var(--half-cubie))}
.sticker-white{--sticker:linear-gradient(145deg,#fff,#d9dbe0)}
.sticker-yellow{--sticker:linear-gradient(145deg,#ffe970,#e9af00)}
.sticker-orange{--sticker:linear-gradient(145deg,#ffad38,#e25a08)}
.sticker-red{--sticker:linear-gradient(145deg,#ff5b51,#b60918)}
.sticker-green{--sticker:linear-gradient(145deg,#50dd91,#078c52)}
.sticker-blue{--sticker:linear-gradient(145deg,#58bfff,#1457c7)}
.touch-controller{position:absolute;z-index:6;right:8px;bottom:5px;left:8px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none}
.layer-control,.joystick-control{pointer-events:auto}
.layer-control{display:grid;width:174px;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;border:1px solid #6f592b;border-radius:16px;padding:8px;background:#070a10e8;box-shadow:0 10px 28px #000b,inset 0 1px #fff1;backdrop-filter:blur(8px)}
.selected-face-label{color:#a99e89;font-size:8px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.selected-face-value{display:grid;width:27px;height:27px;grid-row:1;grid-column:2;place-items:center;border:1px solid #80662f;border-radius:50%;color:var(--gold-light);font:normal 17px Georgia,serif}
.arrow-pad{position:relative;display:grid;height:96px;grid-column:1/-1;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:3px}
.turn-arrow,.face-turn-button{display:grid;min-width:0;place-items:center;border:1px solid #77622f;border-radius:10px;background:linear-gradient(145deg,#1a2230,#080b11);box-shadow:inset 0 1px #fff1;color:#ffe5a0;font-size:18px;touch-action:none}
.turn-arrow:active,.face-turn-button:active{transform:scale(.92);background:linear-gradient(145deg,#a77c2c,#e4c878)}
.turn-arrow:disabled,.face-turn-button:disabled{opacity:.28}
.turn-arrow.hint-pulse,.face-turn-button.hint-pulse,.secondary-button.hint-pulse{animation:hint-pulse .7s ease-in-out 3}
.turn-up{grid-area:1/2}
.turn-left{grid-area:2/1}
.arrow-centre{display:grid;grid-area:2/2;place-items:center;color:#79642e}
.turn-right{grid-area:2/3}
.turn-down{grid-area:3/2}
.face-turn-row{display:grid;height:34px;grid-column:1/-1;grid-template-columns:42px 1fr 42px;align-items:center;gap:5px;margin-top:4px}
.face-turn-row span{text-align:center;color:#9e927c;font-size:7px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}
.face-turn-button{height:34px;font-size:20px}
.joystick-control{display:grid;justify-items:center;gap:5px;color:#b5aa94;font-size:8px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.joystick-base{position:relative;width:112px;height:112px;border:1px solid #9b7d3b;border-radius:50%;background:radial-gradient(circle,#202a3c 0 16%,#111722 17% 52%,#080b11 53%);box-shadow:inset 0 0 22px #000,0 10px 28px #000b;touch-action:none}
.joystick-base::before,.joystick-base::after{content:"";position:absolute;background:#8b743c55}
.joystick-base::before{left:15%;right:15%;top:50%;height:1px}
.joystick-base::after{top:15%;bottom:15%;left:50%;width:1px}
.joystick-knob{position:absolute;z-index:2;left:50%;top:50%;width:46px;height:46px;border:1px solid #f3d98f;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff1b1,#c69a3f 45%,#5c3d14 100%);box-shadow:inset 0 2px #fff9,0 6px 13px #000b;transform:translate(-50%,-50%);will-change:transform}
.move-console{position:relative;z-index:3;width:min(100%,600px);margin:4px auto 0}
.assist-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.assist-row .secondary-button{min-height:38px;padding:8px;font-size:11px}
@keyframes hint-pulse{50%{border-color:#fff0b0;background:#b88a32;color:#090806;box-shadow:0 0 18px #ffd96d}}
.play-secondary-ad{display:grid;min-height:90px;place-items:center;margin-top:16px;border:1px dashed #615332;border-radius:14px;background:#080b11aa;color:#837a69;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.result-cube{margin:10px auto;color:#f0c75c;font-size:54px;text-shadow:0 0 22px #f0c75c}
@media(max-width:520px){:root{--cube-size:clamp(172px,56vw,228px);}
.premium-stage{min-height:550px;padding-inline:6px}
.cube-viewport{--cube-center-y:35%;height:525px}
.layer-control{width:152px}
.joystick-base{width:96px;height:96px}
.joystick-knob{width:42px;height:42px}}
@media(min-width:700px){.premium-stage{min-height:700px}
.cube-viewport{height:530px}
:root{--cube-size:300px;}}
@media(min-width:650px) and (max-width:1100px) and (min-height:850px) and (orientation:portrait){:root{--cube-size:clamp(370px,52vw,430px);}
.premium-stage{min-height:max(790px,calc(100svh - 234px));padding-inline:12px}
.cube-viewport{--cube-center-y:34%;height:max(765px,calc(100svh - 259px))}
.touch-controller{bottom:12px;width:min(calc(100% - 34px),700px);grid-template-columns:minmax(205px,230px) minmax(140px,1fr) 140px;gap:14px}
.layer-control{padding:10px}
.arrow-pad{height:112px;gap:5px}
.face-turn-row{height:40px;grid-template-columns:50px 1fr 50px}
.face-turn-button{height:40px}
.joystick-base{width:132px;height:132px}
.joystick-knob{width:52px;height:52px}
.controller-action{min-height:48px;font-size:14px}}
@media(orientation:landscape) and (max-height:700px){.premium-stage{min-height:505px}
.cube-viewport{--cube-center-y:39%;height:395px}
.touch-controller{right:5px;left:auto;width:330px}
.layer-control{width:150px}
.joystick-base{width:96px;height:96px}
.move-console{width:420px}}
.touch-controller{right:auto;bottom:5px;left:50%;display:grid;width:min(calc(100% - 16px),520px);grid-template-columns:minmax(166px,174px) minmax(90px,1fr) 112px;align-items:end;justify-content:normal;gap:10px;transform:translateX(-50%)}
.layer-control{width:100%}
.view-control-stack{display:grid;align-self:end;gap:8px;pointer-events:none}
.controller-action{width:100%;min-height:40px;padding:7px 6px;text-align:center;font-size:12px;line-height:1.15;pointer-events:auto;touch-action:manipulation}
.controller-undo{align-self:end}
.view-control-stack .joystick-control,.view-control-stack .controller-action{pointer-events:auto}
@media(max-width:520px){.touch-controller{width:calc(100% - 8px);grid-template-columns:152px minmax(82px,1fr) 96px;gap:6px}
.layer-control{width:100%}
.controller-action{min-height:40px;padding-inline:4px;font-size:11px}}
@media(orientation:landscape) and (max-height:700px){.touch-controller{right:auto;left:50%;width:min(calc(100% - 10px),430px);grid-template-columns:150px minmax(90px,1fr) 96px;transform:translateX(-50%)}}
.preview-capture .play-secondary-ad{display:none}
@media(min-width:650px) and (max-width:1100px) and (min-height:850px) and (orientation:portrait){.touch-controller{bottom:12px;width:min(calc(100% - 34px),700px);grid-template-columns:minmax(205px,230px) minmax(140px,1fr) 140px;gap:14px}
.controller-action{min-height:48px;font-size:14px}}
.start-game-button{position:absolute;z-index:8;top:12px;left:50%;min-width:160px;transform:translateX(-50%)}
.turn-canvas{filter:drop-shadow(0 12px 12px #0008)}
.demo-tap-target{position:absolute;z-index:5;width:30px;height:30px;border:0;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%)}
.demo-control-focus{border-color:#fff0b0!important;background:linear-gradient(145deg,#a77c2c,#e4c878)!important;box-shadow:0 0 18px #ffd96d!important;color:#090806!important}
body.demo-running .premium-stage{pointer-events:none}
body.demo-running .turn-canvas{filter:drop-shadow(0 14px 15px #0009) drop-shadow(0 0 9px #ffe29a33)}