/* 屏幕测试：页面上半部分是操作区，全屏时是一层铺满屏幕的纯色 / 图案 */
body.st-lock{overflow:hidden}

.st-hero{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;padding:1rem 1.125rem;border:1px solid #eef1f5;border-radius:.6rem;background:#fafbfd}
.st-hero-title{margin-bottom:.25rem;font-size:1.0625rem;font-weight:600;color:#3f4650}
.st-hero .btn{flex:none;margin-left:auto}
.st-hint{margin-top:.75rem;line-height:2}
.st-hint kbd{vertical-align:.0625rem}

.st-grid{display:grid;gap:.625rem;grid-template-columns:repeat(auto-fill,minmax(7.25rem,1fr))}
.st-item{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem;border:1px solid #e2e6ed;border-radius:.5rem;background:#fff;color:#4d5259;font-size:.8125rem;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.st-item:hover{border-color:var(--site-primary);box-shadow:0 0 0 2px rgba(var(--site-primary-rgb),.12)}
.st-item-c{flex:none;width:1.75rem;height:1.75rem;border-radius:.375rem;background:#eee;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14)}
.st-item-pattern{background-size:cover;background-position:center}
.st-notes li+li{margin-top:.375rem}

.st-stage{position:fixed;inset:0;z-index:2147483000;background:#000;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.st-fill{position:absolute;inset:0;background:#000;background-position:center;background-repeat:no-repeat;background-size:cover}
.st-hud{position:absolute;left:50%;bottom:1.5rem;display:flex;align-items:center;gap:.75rem;max-width:calc(100% - 2rem);padding:.5rem .875rem;border-radius:999px;background:rgba(17,20,24,.72);color:#fff;font-size:.8125rem;white-space:nowrap;pointer-events:none;transform:translateX(-50%);opacity:1;transition:opacity .35s}
.st-hud.is-idle{opacity:0}
.st-hud-name{font-weight:600}
.st-hud-tip,.st-hud-count{color:rgba(255,255,255,.75)}
.st-hud-count{font-variant-numeric:tabular-nums}

@media (max-width:575.98px){
  .st-hero .btn{width:100%;margin-left:0}
  .st-hud{flex-direction:column;gap:.125rem;bottom:.875rem}
  .st-hud-tip{font-size:.75rem}
}