.xs-wrap { max-width: 660px; margin: 0 auto; padding: 12px; font-family: sans-serif; color: #1f2937; }
.xs-topbar { text-align: center; }
.xs-title { margin: 4px 0; font-size: 22px; }
.xs-tagline { margin: 0 0 8px; color: #4b5563; font-size: 14px; }
.xs-hud { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; }
.xs-stat { background: #eef2f7; border-radius: 8px; padding: 6px 12px; text-align: center; }
.xs-stat-label { display: block; font-size: 12px; color: #6b7280; }
.xs-stat-value { font-size: 18px; font-weight: bold; }
.xs-stage { text-align: center; }
#xs-canvas { border: 2px solid #1e3a8a; border-radius: 8px; touch-action: manipulation; max-width: 100%; cursor: pointer; background: #fff; }
.xs-message { min-height: 20px; margin: 8px 0 4px; font-size: 14px; color: #1e3a8a; }
.xs-numpad { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin: 8px 0; }
.xs-key { background: #eef2f7; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 18px; font-weight: bold; min-width: 44px; min-height: 44px; cursor: pointer; touch-action: manipulation; }
.xs-key-wide { min-width: 80px; }
.xs-controls { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.xs-btn { background: #1e3a8a; color: #fff; border: 0; border-radius: 8px; font-size: 14px; padding: 10px 14px; cursor: pointer; min-height: 44px; }
.xs-btn-ghost { background: #eef2f7; color: #1f2937; }
.xs-select { border: 2px solid #cbd5e1; border-radius: 8px; padding: 8px; font-size: 14px; background: #fff; min-height: 44px; }