*{margin:0;padding:0;box-sizing:border-box;user-select:none}
body{background:radial-gradient(circle at center,#001428 0%,#000 100%);font-family:system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column;align-items:center;color:#fff}

/* 默认桌面布局 */
header{width:100%;max-width:900px;padding:.8rem 1rem;display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.05);backdrop-filter:blur(10px)saturate(160%);border-radius:18px;margin-top:1rem}
h1{font-size:1.3rem}
#timer{font-size:1.1rem}
#webcam,#gameCanvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scaleX(-1);max-width:90vmin;max-height:70vh;width:auto;height:auto;border-radius:28px;object-fit:contain;box-shadow:0 12px 36px rgba(0,0,0,.7);aspect-ratio:auto}

/* 移动设备布局 (手机和平板) */
@media screen and (max-width: 1024px) {
  body{position:relative;overflow:hidden;height:100vh}
  header{width:100%;max-width:none;padding:.6rem 1rem;background:rgba(255,255,255,.1);border-radius:0;margin-top:0;position:fixed;top:0;left:0;right:0;z-index:100;height:60px}
  h1{font-size:1.1rem}
  button{padding:.4rem 1rem !important;font-size:.9rem !important;border-radius:1rem !important;touch-action:manipulation}
  #timer{font-size:1rem}
  #webcam,#gameCanvas{position:fixed;top:70px;left:50%;transform:translateX(-50%) scaleX(-1);width:80vw;height:auto;max-height:calc(100vh - 120px);border-radius:20px;object-fit:contain;box-shadow:0 8px 24px rgba(0,0,0,.6);aspect-ratio:auto}
  #gameCanvas{pointer-events:none}
  #scoreBoard{font-size:.9rem}
  #loadingBox{padding:1.5rem 2rem;max-width:350px}
  #loadingBox h2{font-size:1.2rem;margin-bottom:1.2rem}
  #loadingText{font-size:.9rem}
}

h1{font-weight:600;letter-spacing:.05em}
button{background:linear-gradient(145deg,#ff8233,#ff5522);border:none;padding:.55rem 1.6rem;border-radius:1.2rem;font-size:1rem;color:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.5);transition:transform .15s,filter .15s}
button:hover{filter:brightness(1.15)}
button:active{transform:scale(.95)}
#timer{font-weight:600}
#loadingContainer{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;justify-content:center;align-items:center;z-index:998;transition:opacity .3s ease}
#loadingBox{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border-radius:20px;padding:2rem 3rem;text-align:center;max-width:400px;width:90%}
#loadingBox h2{font-size:1.3rem;margin-bottom:1.5rem;color:#fff}
#progressBar{width:100%;height:8px;background:rgba(255,255,255,.2);border-radius:4px;overflow:hidden;margin-bottom:1rem}
#progressFill{height:100%;background:linear-gradient(90deg,#ff8233,#ff5522);width:0%;transition:width .3s ease;border-radius:4px}
#loadingText{font-size:1rem;color:#ccc;margin:0}
#overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;z-index:999}
.hidden{display:none}
#resultBox{background:rgba(255,255,255,.08);backdrop-filter:blur(12px);border-radius:20px;padding:2rem 3rem;text-align:center;max-width:320px}
#resultBox h2{font-size:1.5rem;margin-bottom:.6rem}
#resultBox p{margin:.4rem 0 1.2rem;font-size:1.2rem}
#overlay.hidden{display:none}