/* Surface Studio — styles modules may use: a game viewport (.ss-game), the capture layer (.ss-capture), the click-to-play card (.ss-play), touch-display test pads (.sd-pads) and readout grids (.md-grid). */
/* game viewport + click-to-play card */
.ss-game { position: absolute; inset: 0; overflow: hidden; background: #000; }
.ss-game canvas { position: absolute; inset: 0; display: block; }
.ss-msg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); padding: 30px; text-align: center; }
.ss-play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: auto; cursor: pointer; background: rgba(5,6,9,.35); }
.ss-play.hide { display: none; }
.ss-play > div { background: rgba(10,11,14,.86); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 20px; max-width: 520px; text-align: center; }
.ss-play b { display: block; font-size: 18px; margin-bottom: 6px; }
.ss-play span { font-size: 12.5px; color: #c4c9d2; line-height: 1.5; }
/* capture layer: while a game plays it covers the main view so no click leaks to the UI */
.ss-capture { position: fixed; inset: 0; z-index: 9999; cursor: none; background: transparent; }
.ss-capture .cap-msg { position: absolute; left: 50%; top: 14px; transform: translate(-50%, -6px); opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  background: rgba(10,11,14,.88); border: 1px solid rgba(255,255,255,.12); color: #e8eaef; font: 500 12.5px var(--ui); padding: 7px 14px; border-radius: 999px; white-space: nowrap; }
.ss-capture .cap-msg.show { opacity: 1; transform: translate(-50%, 0); }
.ss-capture.edge::before, .ss-capture.edge::after { content: ''; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; }
.ss-capture.edge::before { left: 0; background: linear-gradient(90deg, rgba(255,255,255,.07), transparent); }
.ss-capture.edge::after { right: 0; background: linear-gradient(-90deg, rgba(255,255,255,.07), transparent); }
.ss-play .mmb { display: block; margin-top: 8px; color: #fff; }
.ss-capture:focus { outline: none; }
.sd-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: none; }
.sd-pad { height: 64px; border-radius: 10px; border: 1px solid var(--line2); background: radial-gradient(circle at 50% 40%, #252932, #181a20); color: var(--tx); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; touch-action: none; user-select: none; -webkit-user-select: none; }
.sd-pad b { font: 700 14px var(--mono); }
.sd-pad small { color: var(--dim2); font-size: 9px; }
.sd-pad.down { background: radial-gradient(circle at 50% 40%, #2d3d45, #1a2228); border-color: color-mix(in oklab, var(--A) 55%, transparent); }
.sd-res { font-size: 10px; color: var(--dim); flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-res b { color: var(--tx); }
.md-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.md { background: #1b1e24; border-radius: 6px; padding: 3px 6px; display: flex; flex-direction: column; min-width: 0; }
.md b { font: 600 8.5px var(--mono); color: var(--dim); text-transform: uppercase; }
.md span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md small { font-size: 9px; color: var(--dim2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }