/* A visual instrument panel: direction, three lights, the piece and its queue. */
.side-panel{position:relative;align-self:start;gap:19px;padding:21px 15px 18px;background:radial-gradient(ellipse at 50% 0,#76556a22,transparent 65%),linear-gradient(140deg,#30232f,#211a28);box-shadow:inset 0 2px 8px #100b16a6,0 2px 2px #26141288}
.side-panel .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap;border:0!important}
.gravity-panel{position:relative;display:grid;place-items:center;width:82px;height:82px;align-self:center;margin:0 auto;padding:0;border:1px solid #c89e6370;border-radius:50%;background:radial-gradient(circle at 50% 30%,#72513b28,#1b1522 72%);box-shadow:inset 0 2px 5px #0006,0 0 0 5px #d4a76d08}
.gravity-panel:before{content:"";position:absolute;inset:7px;border:1px solid #d3b78920;border-radius:50%;pointer-events:none}
.gravity-arrow{font-size:57px;line-height:1;margin:0 0 5px;color:#f7d897;text-shadow:0 2px 1px #120d18,0 0 15px #f7d89726}
.progress-panel{padding:0 0 18px;border-bottom:1px solid #b88b5b38}
.dots{position:relative;gap:16px;justify-content:center;margin:0;padding:10px 0}
.dots:before{content:"";position:absolute;height:2px;width:76px;top:50%;left:calc(50% - 38px);background:#84624a40}
.dots i{position:relative;width:18px;height:18px;border:2px solid #98735588;background:#1b1521;box-shadow:inset 0 2px 3px #0009,0 1px 0 #e2c29611}
.dots i.filled{border-color:#ffe19c;background:radial-gradient(circle at 35% 25%,#fff2c9,#edbd5d 70%);box-shadow:inset 0 1px 1px #fff8,0 0 13px #f4cf7755}
.side-panel.turn-ready .dots i.filled{border-color:#c1ffe3;background:radial-gradient(circle at 35% 25%,#e7fff1,#8bd7b3 75%);box-shadow:0 0 13px #83dcc166}
.side-panel.turn-ready .gravity-panel{border-color:#9de7bd99;box-shadow:inset 0 2px 5px #0006,0 0 0 5px #83dcc109,0 0 20px #83dcc115}
.side-panel h2{font-size:9px;letter-spacing:2.4px;color:#ccb5a2;font-weight:700}
.piece-panel h2{margin-bottom:11px}.piece-tray{height:130px;border-radius:15px;border-color:#af8ac765;background:radial-gradient(ellipse at 50% 30%,#ba9aed13,#1c1624 80%);box-shadow:inset 0 2px 9px #100d1ca6,0 0 0 3px #ba9aed05}
.piece-tray .shape{--unit:35px}.piece-tray .shape-cell{border-radius:6px;box-shadow:inset 1px 2px 1px #fff8,inset -1px -3px 1px #0003,0 4px 8px #0005}
.piece-tray:disabled{opacity:.45}.piece-tray.selected{outline:2px solid #f3d58b99;outline-offset:2px}
.next-panel{margin-top:-7px}.next-panel h2{position:relative;margin:0 0 11px}.queue-chevron{display:block;font-size:25px;line-height:15px;letter-spacing:0;font-weight:normal;margin-bottom:9px;color:#ac8b73}
.next-trays{gap:8px}.mini-tray{height:74px;border-radius:10px;background:linear-gradient(145deg,#211925,#2d202d);border-color:#9e7fa12b;box-shadow:inset 0 2px 4px #0003}.mini-tray .shape{--unit:18px;opacity:.88}
.combo-meter{flex-direction:row;justify-content:center;align-items:center;gap:7px;padding:10px 6px;margin-top:0}.combo-meter .combo-symbol{font-size:23px;line-height:1;color:#edcd84;text-shadow:0 0 14px #f5d58838}.combo-meter #combo-multiplier{font-size:15px;letter-spacing:0;color:#bcebd3}.combo-meter strong{font-size:22px}.combo-meter.chain .combo-symbol{color:#b8ffe0}
.preview-legend{height:23px;justify-content:center;gap:20px;margin:0;padding:8px 0 0;font-size:9px;opacity:0;pointer-events:none}.preview-legend i{width:12px;height:12px}.board-column.show-preview .preview-legend{opacity:1}
@media(max-width:760px){.side-panel{align-self:stretch;grid-template-columns:.85fr 1.2fr 1fr;gap:8px 12px;padding:15px 12px}.gravity-panel{width:51px;height:51px;align-self:start;justify-self:center;grid-column:1;grid-row:1;margin:4px 0 0}.gravity-panel:before{inset:4px}.gravity-arrow{font-size:36px;margin-bottom:4px}.progress-panel{grid-column:1;grid-row:2;border:0;padding:0;align-self:end}.dots{gap:8px;padding:6px 0;margin:0}.dots i{width:11px;height:11px;border-width:1px}.dots:before{width:40px;left:calc(50% - 20px);height:1px}.piece-panel{grid-column:2;grid-row:1/3}.side-panel h2{font-size:8px;letter-spacing:1.8px}.piece-panel h2{margin:0 0 8px}.piece-tray{height:88px;border-radius:11px}.piece-tray .shape{--unit:25px}.piece-tray .shape-cell{border-radius:4px}.next-panel{grid-column:3;grid-row:1/3;margin:0}.next-panel h2{margin-bottom:8px}.queue-chevron{display:none}.next-trays{flex-direction:column;gap:6px}.mini-tray{height:40px;min-height:40px;border-radius:7px}.mini-tray .shape{--unit:12px}.combo-meter{display:flex;grid-column:1/4;gap:8px;padding:7px}.combo-meter strong{font-size:21px}.combo-meter .combo-symbol{font-size:21px}.combo-meter #combo-multiplier{font-size:14px}.preview-legend{height:20px;padding-top:6px;font-size:8px}}
@media(max-width:350px){.side-panel{gap:7px 9px;padding:13px 9px}.piece-tray .shape{--unit:22px}.mini-tray .shape{--unit:11px}.piece-tray{height:81px}.mini-tray{height:36px;min-height:36px}.gravity-panel{width:45px;height:45px}.gravity-arrow{font-size:33px}}

/* Rotation is communicated primarily by a clear, directional arrow. */
.turn-button{justify-content:center;gap:12px;min-height:74px;padding:8px 16px;background-image:linear-gradient(#543b3e,#30232d);border:1px solid #c89c69;box-shadow:inset 0 1px 0 #ffe2b830,0 3px 0 #3b211d}
.turn-button .turn-icon{display:block;width:50px;height:50px;flex-shrink:0;color:#ffe0a1;filter:drop-shadow(0 2px 1px #160f1b);font-size:initial}
#turn-right .turn-icon{transform:scaleX(-1)}
.turn-button strong{font-size:14px;letter-spacing:.8px}.turn-button:disabled{opacity:1;border-color:#907053;background-image:linear-gradient(#423038,#30232d);box-shadow:inset 0 1px 0 #ffe2b815}.turn-button:disabled .turn-icon,.turn-button:disabled strong{opacity:.5}.turn-button:not(:disabled):hover,.turn-button.previewing{background-image:linear-gradient(#735341,#403039)}
@media(max-width:760px){.turn-button{min-height:68px;padding:7px 12px;gap:0}.turn-button .turn-icon{width:50px;height:50px}.turn-button strong{display:none}}