*{ box-sizing:border-box; }
:root{
	--bg:#0b0f19;
	--ink:#e8eefc;
	--muted:rgba(232,238,252,0.72);
}
html,body{
	height:100%;
	margin:0;
	background:var(--bg);
	color:var(--ink);
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	overflow:hidden;
	touch-action:manipulation;
}

.frame{
	width:100vw;
	height:100vh;
	display:grid;
	place-items:center;
	padding:10px;
}
.stageAnchor{
	position:absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);
	transform-origin: center center;
}
.stageWrap{
	width:100%;
	height:100%;
	position: relative;
}
.stage{
	position:relative;
	width:670px;
	height:970px;
	transform: scale(var(--scale, 1));
	transform-origin: center center;
	user-select:none;
	-webkit-user-select:none;
}


.topbar{
	position:absolute;
	left:0;
	top:0;
	width:500px;
	height:70px;
	border:2px solid rgba(255,255,255,0.35);
	background:rgba(255,255,255,0.04);
	display:grid;
	grid-template-columns: 140px 1fr;
	align-items:center;
	padding:8px 10px;
	gap:10px;
}
.topLeft{
	display:flex;
	gap:8px;
	align-items:center;
	justify-content:flex-start;
}
.iconBtn{
	width:44px;
	height:44px;
	border-radius:10px;
	border:1px solid rgba(255,255,255,0.22);
	background:rgba(255,255,255,0.08);
	color:var(--ink);
	font-size:20px;
	font-weight:900;
	display:grid;
	place-items:center;
	cursor:pointer;
	touch-action:none;
}
.iconBtn:active{
	transform: translateY(1px);
	background:rgba(255,255,255,0.14);
}
.scoreWrap{
	display:flex;
	align-items:center;
	justify-content:left;
	gap:10px;
	font-variant-numeric: tabular-nums;
}
.scoreLabel{
	font-weight:900;
	font-size:20px;
	letter-spacing:0.4px;
	margin-right: 50px;
}
.scoreValue{
	font-weight:900;
	font-size:22px;
}


.boardWrap{
	position:absolute;
	left:0;
	top:70px;
	width:500px;
	height:900px;
	border:2px solid rgba(255,255,255,0.35);
	background:#050713;
	overflow:hidden;
	touch-action:none;
}
canvas{
	display:block;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	touch-action:none;
}


.side{
	position:absolute;
	left:520px; /* 500 + 20 gap */
	top:0;
	width:150px;
	height:970px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	gap:10px;
}
.panelTitle{
	margin:0 0 6px 0;
	font-weight:900;
	font-size:16px;
	letter-spacing:0.3px;
	color:var(--ink);
	text-align:left;
}


.nextPanel{ width:150px; }
.nextStack{
	display:flex;
	flex-direction:column;
	gap:10px;
	align-items:flex-start;
}
.miniBox{
	width:150px;
	height:120px;
	border:2px solid rgba(255,255,255,0.35);
	background:rgba(255,255,255,0.04);
	display:grid;
	place-items:center;
}


.hintBlock{
	width:150px;
	display:flex;
	flex-direction:column;
	gap:5px;
}
.hintTabs{
	width:150px;
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:5px;
}
.hintTab{
	height:30px;
	border:2px solid rgba(255,255,255,0.25);
	background:rgba(255,255,255,0.04);
	border-radius:10px;
	display:grid;
	place-items:center;
	cursor:pointer;
	padding:0;
}
.hintTab[aria-pressed="true"]{
	border-color: rgba(255,255,255,0.55);
	background: rgba(255,255,255,0.10);
}
.hintTabIcon{
	width:22px;
	height:22px;
	object-fit:contain;
}
.hint{
	width:150px;
	height:170px;
	border:2px solid rgba(255,255,255,0.20);
	background:rgba(255,255,255,0.05);
	border-radius:12px;
	padding:8px 8px;
	font-size:10px;
	color:var(--muted);
	line-height:1.35;
}
.hintRow{
	display:flex;
	align-items:center;
	gap:6px;
	margin:4px 0;
}
.hintIcons{
	display:flex;
	align-items:center;
	gap:4px;
	min-width:52px; /* keeps text aligned */
}
.hintIcon{
	aspect-ratio: 1/1;
	width:25px;
	display:inline-block;
	vertical-align:middle;
}


.holdPanel{ width:150px; }
.holdBtn{
	width:150px;
	height:120px;
	border:2px solid rgba(255,255,255,0.35);
	background:rgba(255,255,255,0.04);
	display:grid;
	place-items:center;
	cursor:pointer;
	touch-action:none;
}
.holdBtn:active{
	background:rgba(255,255,255,0.10);
	transform: translateY(1px);
}


/* Mobile keypad overlay (semi-transparent) */
.pads{
	position:absolute;
	left:0;
	right:0;
	bottom:10px;
	height:130px;
	display:flex;
	justify-content:center;
	padding:0 14px;
	pointer-events:auto; 
	z-index:30;
}
.padBtn{
	pointer-events:auto;
	width:120px;
	height:120px;
	border-radius:14px;
	border:2px solid rgba(255,255,255,0.28);
	background:rgba(255,255,255,0.12);
	color:var(--ink);
	font-weight:900;
	font-size:26px;
	display:grid;
	place-items:center;
	cursor:pointer;
	touch-action:none;
	opacity:0.2;
}
.padBtn:active{
	opacity:0.82;
	transform: translateY(1px);
	background:rgba(255,255,255,0.18);
}
.padMid{ width:300px; }

.boardWrap, .pads, .padBtn, .holdBtn, .iconBtn, canvas {
  touch-action: none; /* game should capture gestures */
}