.twisty-stage{display:grid;gap:12px;padding:10px 0 18px;justify-items:center;direction:ltr;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.twisty-viewport{width:100%;height:clamp(280px,82cqw,400px);border-radius:20px;overflow:hidden;touch-action:none;position:relative;border:1px solid #685535;box-shadow:inset 0 1px #fff1,0 14px 24px #0005}.twisty-viewport canvas{display:block;width:100%;height:100%;touch-action:none}.twisty-controller{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:16px;width:100%;align-items:center}.twisty-turns{display:grid;gap:8px}.twisty-group-row{display:flex;gap:8px;align-items:center;min-width:0}.twisty-group-row label{flex:1;min-width:0}.twisty-group-row select{flex:1;width:100%;min-width:0;min-height:42px;background:#0b1520;border:1px solid #8b7340;border-radius:10px;padding:8px;color:#f7e8bd;font-size:15px;touch-action:manipulation}.twisty-group-row #tip-toggle{min-width:64px;min-height:42px;margin:0;padding:5px;font-size:13px}.twisty-turn-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.twisty-turn-buttons button{min-width:0;min-height:48px;margin:0;padding:2px;font-size:20px;touch-action:manipulation}.twisty-joystick{position:relative;width:96px;height:96px;min-width:0;padding:0;margin:0;border:1px solid #8b7340;border-radius:50%;background:radial-gradient(circle,#243b48 0,#0d1a26 57%,#615034 60%,#111c29 63%);touch-action:none;box-shadow:inset 0 3px 12px #0008}.twisty-joystick::after{content:'✥';position:absolute;inset:0;display:grid;place-items:center;font-size:72px;color:#baa57488;pointer-events:none}.twisty-joystick-knob{position:absolute;z-index:1;left:50%;top:50%;transform:translate(-50%,-50%);width:37px;height:37px;border:1px solid #e0c78b;border-radius:50%;background:radial-gradient(circle at 35% 25%,#dfc58b,#8d6b2e 55%,#3e301b);box-shadow:0 4px 8px #0009;pointer-events:none}.twisty-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}.twisty-secondary button{min-width:0;min-height:44px;padding:8px;margin:0;font-size:15px;touch-action:manipulation}.twisty-stage>.primary-button{width:100%;margin:0;min-height:48px}.twisty-stage button:disabled{opacity:.4}.twisty-viewport:focus-visible{outline:3px solid #fff1b8;outline-offset:2px}@container gf-page (min-width:600px){.twisty-viewport,.twisty-controller,.twisty-secondary,.twisty-stage>.primary-button{width:min(88%,760px)}.twisty-viewport{height:560px}.twisty-controller{grid-template-columns:minmax(0,1fr) 122px;gap:22px}.twisty-joystick{width:122px;height:122px}.twisty-joystick-knob{width:48px;height:48px}.twisty-group-row select,.twisty-group-row #tip-toggle{min-height:48px;font-size:19px}.twisty-turn-buttons button{min-height:62px}.twisty-secondary button{min-height:54px;font-size:19px}.twisty-stage{gap:16px}}

/* Magic Cube directional pad, adapted to polyhedral turn groups. */
.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}

.touch-controller{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 96px;align-items:end;gap:6px;width:100%}.layer-control{width:100%;min-width:0;padding:6px;grid-template-columns:1fr;gap:5px}.layer-control .twisty-group-row{grid-column:1/-1}.layer-control #tip-toggle{grid-column:1/-1;min-height:30px;padding:4px;margin:0;font-size:12px}.arrow-pad{height:132px;gap:3px}.turn-arrow,.face-turn-button{margin:0;padding:0;min-height:42px;touch-action:manipulation}.face-turn-row{height:42px;grid-template-columns:42px minmax(0,1fr) 42px}.face-turn-button{height:42px}.face-turn-row span{font-size:9px}.controller-action{width:100%;min-width:0;min-height:44px;margin:0;padding:7px 4px;font-size:12px;line-height:1.15}.view-control-stack{display:grid;gap:8px;justify-items:center;min-width:0}.joystick-control{display:grid;justify-items:center;gap:6px;color:#b5aa94;font-size:10px}.turn-arrow:focus-visible,.face-turn-button:focus-visible{outline:3px solid #fff1b8;outline-offset:2px}
@container gf-page (min-width:600px){.touch-controller{width:min(88%,760px);grid-template-columns:220px minmax(0,1fr) 132px;gap:18px}.arrow-pad{height:150px}.turn-arrow{min-height:48px}.view-control-stack .twisty-joystick{width:132px;height:132px}.controller-action{min-height:48px;font-size:15px}}

.selected-field{display:flex;grid-column:1/-1;align-items:center;justify-content:space-between;gap:5px;min-height:30px;color:#b5aa94;font-size:10px}.selected-field strong{display:grid;place-items:center;min-width:27px;height:27px;border:1px solid #80662f;border-radius:50%;color:#ffe5a0;font-size:13px;font-weight:500}.face-turn-row span{overflow-wrap:anywhere;line-height:1.15}

/* Pyraminx: a dedicated, consistently labelled tip pair. */
.face-turn-row{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.face-turn-row #axis-label{grid-column:1/-1;grid-row:1;font-size:12px;letter-spacing:0;text-transform:none;color:#e4cf99;padding:2px}.face-turn-row #turn-left{grid-column:1;grid-row:2}.face-turn-row #turn-right{grid-column:2;grid-row:2}.arrow-centre{font-size:9px;line-height:1.1}.face-turn-button{min-height:44px}