.arcade-lab { padding: 24px 0 40px; max-width: 1100px; margin: auto; }
.arcade-lab[hidden] { display: none !important; }
.arcade-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 18px; }
.arcade-heading h3 { font-size: 30px; margin: 0 0 8px; }
.arcade-heading p { color: #a8bcb3; max-width: 600px; font-size: 14px; margin: 0; }
.arcade-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 14px; }
.arcade-toolbar label { display: grid; gap: 6px; font-size: 12px; color: #b4c6bf; }
.arcade-toolbar select { background: #1c2925; color: #f0eee4; border: 1px solid #45544d; border-radius: 4px; padding: 10px; min-height: 44px; max-width: 100%; }
.arcade-lab button { border: 1px solid #53695d; border-radius: 4px; background: #233c33; color: #f0eee4; min-height: 44px; padding: 9px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.arcade-lab button:disabled { opacity: .45; cursor: default; }
.arcade-lab button:focus-visible,.arcade-lab canvas:focus-visible { outline: 2px solid #efc36a; outline-offset: 3px; }
.arcade-lab button svg { width: 18px; height: 18px; }
.arcade-score { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #3e5147; border-bottom: 1px solid #3e5147; padding: 12px 0; margin-bottom: 12px; gap: 8px; }
.arcade-score span { display: grid; gap: 4px; color: #b3c3ba; font-size: 11px; }
.arcade-score output { font-size: 18px; font-variant-numeric: tabular-nums; color: #f3eee3; }
.arcade-canvas-wrap { position: relative; background: #163b37; overflow: hidden; border-radius: 4px; }
.arcade-canvas-wrap canvas { width: 100%; display: block; aspect-ratio: 16 / 10; touch-action: none; }
#bottles-canvas { cursor: crosshair; }
.stone-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) auto; gap: 14px; align-items: end; margin: 18px 0; }
.stone-controls label { display: grid; gap: 10px; color: #b9cbc3; font-size: 12px; min-width: 0; }
.stone-controls input { width: 100%; min-width: 0; accent-color: #d5bd80; }
#stone-charge { grid-column: 1/-1; font-size: 10px; color: #c6cead; min-height: 16px; }
.drive-telemetry { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid #3e5147; color: #b7d1c8; font-size: 11px; }
#driving-map { position: absolute; width: 118px; height: 93px; aspect-ratio: auto; top: 12px; right: 12px; pointer-events: none; border: 1px solid #a7b99a66; border-radius: 4px; }
.arcade-state { margin: 12px 0; min-height: 42px; color: #e1ce9e; font-size: 14px; }
.arcade-touch { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.arcade-dpad { display: grid; grid-template-columns: repeat(3,48px); grid-template-rows: repeat(2,44px); gap: 4px; }
.arcade-dpad button { padding: 0; touch-action: none; user-select: none; }
.arcade-dpad [data-drive-control="up"],.arcade-dpad [data-blueprint-control="up"] { grid-column: 2; }
.arcade-dpad [data-drive-control="left"],.arcade-dpad [data-blueprint-control="left"] { grid-column: 1; grid-row: 2; }
.arcade-dpad [data-drive-control="down"],.arcade-dpad [data-blueprint-control="down"] { grid-column: 2; grid-row: 2; }
.arcade-dpad [data-drive-control="right"],.arcade-dpad [data-blueprint-control="right"] { grid-column: 3; grid-row: 2; }
.arcade-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: end; }
.arcade-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: #a8bcb3; margin-top: 16px; }
.arcade-legend span:before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; background: #e3b552; border-radius: 50%; }
.arcade-legend span:nth-child(2):before { background: #5edcc1; }
.blueprint-reticle { position: absolute; pointer-events: none; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%); border: 1px solid #ffffffaa; border-radius: 50%; box-shadow: 0 0 0 1px #2a3e4b; }
.blueprint-reticle:after { content: ''; position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ce659b; left: 7px; top: 7px; }
.blueprint-damage { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 50px #e5797980; opacity: 0; }
.blueprint-hit .blueprint-damage { opacity: 1; }
.blueprint-landmark { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid #3e5147; padding-top: 18px; margin-top: 20px; }
.blueprint-landmark strong { font-size: 16px; }
.blueprint-landmark p { font-size: 12px; color: #b3c3ba; }
.blueprint-landmark a { font-size: 12px; }
.blueprint-disclosure { margin-top: 14px; color: #9caea6; font-size: 10px; }
@media(max-width:600px) {
 .arcade-lab { padding-top: 16px; }
 .arcade-heading h3 { font-size: 25px; }
 .arcade-heading p { font-size: 12px; }
 .arcade-toolbar { gap: 8px; }
 .arcade-toolbar label { flex: 1 1 130px; min-width: 0; }
 .arcade-toolbar select { width: 100%; font-size: 12px; }
 .arcade-lab button { padding: 8px 10px; font-size: 12px; }
 .arcade-score output { font-size: 16px; }
 .arcade-canvas-wrap canvas { aspect-ratio: 1 / 1; }
 .arcade-actions { max-width: 142px; }
 .arcade-state { font-size: 12px; }
 .stone-controls { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
 .stone-controls label { font-size: 11px; }
 .blueprint-landmark { display: block; }
}