body {
    background: linear-gradient(135deg, #7eb3d4 0%, #5a8fb9 100%);
    font-family: Tahoma, "Microsoft YaHei", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    font-size: 12px;
    color: #000;
    overflow-y: auto;
    padding: 12px;
  }

  /* === GAME LAYER === */
  #gameLayer {
    position: fixed; top:0; left:0; width:100%; height:100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 100;
    transition: opacity .5s, transform .5s;
    padding: 12px;
    overflow-y: auto;
  }
  #gameLayer.hidden { opacity:0; transform:scale(.95); pointer-events:none; }

  .game-window {
    background: #ece9d8;
    border: 2px solid; border-color: #dfcedb #8f8680 #8f8680 #dfcedb;
    box-shadow: 2px 2px 0 #ffffff inset, 2px 2px 0 #838383;
    width: 340px;
    max-width: 100%;
    flex-shrink: 0;
    margin: auto;
  }
  .game-titlebar {
    background: linear-gradient(90deg, #000080 0%, #1084d7 100%);
    color: #fff; padding: 4px 6px; font-size: 12px; font-weight: bold;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid; border-color: #dfcedb #8f8680 #8f8680 #dfcedb;
  }
  .game-body { padding: 8px; text-align: center; }
  #shooterCanvas { background: #000; display: block; max-width: 100%; height: auto; margin: 0 auto; image-rendering: pixelated; }
  .game-info { display:flex; justify-content:space-between; padding:6px 0; font-size:11px; font-weight:bold; }
  .game-hint { font-size:10px; color:#666; margin-top:6px; }
  .game-controls { display:flex; gap:4px; margin-top:6px; justify-content:center; }
  .game-controls button {
    padding:4px 10px; background:linear-gradient(180deg,#f0f0f0 0%,#dfdfdf 100%);
    border:2px solid; border-color:#dfcedb #8f8680 #8f8680 #dfcedb;
    font-family:Tahoma,sans-serif; font-size:11px; cursor:pointer; font-weight:bold;
  }
  .game-controls button:active { border-color:#505050 #dfcedb #dfcedb #505050; }

  /* === LOGIN LAYER === */
  #loginLayer {
    display: none;
    width: 380px;
    max-width: 100%;
    margin: auto;
    transition: opacity .5s, transform .5s;
    opacity: 0; transform: scale(.95);
  }
  #loginLayer.show { display:flex; opacity:1; transform:scale(1); }

  .xp-login-window {
    background: #ece9d8; border: 2px solid;
    border-color: #dfcedb #8f8680 #8f8680 #dfcedb;
    width: 100%; max-width: 380px;
    box-shadow: 2px 2px 0 #ffffff inset, 2px 2px 0 #838383;
  }
  .xp-login-titlebar {
    background: linear-gradient(90deg, #000080 0%, #1084d7 100%);
    color: #fff; padding: 4px 6px; font-size: 12px; font-weight: bold;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid; border-color: #dfcedb #8f8680 #8f8680 #dfcedb;
  }
  .xp-login-content { padding: 16px; }
  .xp-login-tabs { display:flex; margin-bottom:12px; gap:4px; }
  .xp-login-tab {
    flex:1; padding:6px 10px;
    background:linear-gradient(180deg,#e8e4d9 0%,#d4cfc1 100%);
    border:2px solid; border-color:#dfcedb #8f8680 #8f8680 #dfcedb; border-bottom:none;
    font-size:12px; font-family:Tahoma,sans-serif; font-weight:bold; cursor:pointer; text-align:center;
  }
  .xp-login-tab.active {
    background:linear-gradient(180deg,#ece9d8 0%,#e8e4d9 100%);
    border-color:#dfcedb #8f8680 #dfcedb #8f8680; padding-bottom:8px;
  }
  .xp-form-group { margin-bottom:12px; }
  .xp-form-group label { display:block; font-size:12px; font-weight:bold; margin-bottom:4px; }
  .xp-form-group input {
    width:100%; padding:6px 8px; background:#fff;
    border:2px solid; border-color:#8f8680 #dfcedb #dfcedb #8f8680;
    font-family:Tahoma,sans-serif; font-size:12px; box-sizing:border-box;
  }
  .xp-form-group input:focus { outline:none; border-color:#000080 #000080 #dfcedb #000080; }
  .xp-captcha-container { margin-bottom:12px; }
  .xp-button-group { display:flex; gap:8px; margin-bottom:12px; }
  .xp-button-group button {
    flex:1; padding:8px 14px;
    background:linear-gradient(180deg,#f0f0f0 0%,#dfdfdf 100%);
    border:2px solid; border-color:#dfcedb #8f8680 #8f8680 #dfcedb;
    font-family:Tahoma,sans-serif; font-size:12px; font-weight:bold; cursor:pointer; text-align:center;
  }
  .xp-button-group button:hover { background:linear-gradient(180deg,#fff 0%,#dfdfdf 100%); }
  .xp-button-group button:active { background:linear-gradient(180deg,#dfdfdf 0%,#f0f0f0 100%); border-color:#505050 #dfcedb #dfcedb #505050; }
  .xp-button-group button.primary { background:linear-gradient(180deg,#0066cc 0%,#0052a3 100%); color:#fff; }
  .xp-button-group button.primary:hover { background:linear-gradient(180deg,#0077dd 0%,#0052a3 100%); }
  .xp-register-link { text-align:center; font-size:12px; margin-bottom:12px; }
  .xp-register-link a { color:#0066cc; text-decoration:none; }
  .xp-register-link a:hover { text-decoration:underline; }
  .xp-quick-login { border-top:1px solid #8f8680; border-bottom:1px solid #dfcedb; padding:12px 0; font-size:12px; font-weight:bold; margin-bottom:12px; text-align:center; }
  .xp-quick-login-buttons { display:flex; gap:8px; margin-top:8px; justify-content:center; }
  .xp-quick-login-btn {
    width:40px; height:40px; border:2px solid; border-color:#dfcedb #8f8680 #8f8680 #dfcedb;
    background:linear-gradient(180deg,#f0f0f0 0%,#dfdfdf 100%); cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:20px;
  }
  .xp-quick-login-btn:hover { background:linear-gradient(180deg,#fff 0%,#dfdfdf 100%); }
  .xp-copyright { text-align:center; font-size:11px; color:#666; margin-top:16px; }
  .xp-error { background:#fcc; color:#c00; border:2px solid; border-color:#dfcedb #8f8680 #8f8680 #dfcedb; padding:8px; margin-bottom:12px; font-size:12px; display:none; }
  .xp-error.show { display:block; }
  .xp-unlock-panel {
    margin-top: 12px;
    padding: 10px;
    background: #f7f3e7;
    border: 2px solid;
    border-color: #dfcedb #8f8680 #8f8680 #dfcedb;
    text-align: left;
  }
  .xp-unlock-label { display:block; margin-bottom:6px; font-size:12px; font-weight:bold; }
  .xp-unlock-row { display:flex; gap:8px; align-items:center; }
  .xp-unlock-row input {
    flex:1; padding:6px 8px; background:#fff;
    min-width:0;
    border:2px solid; border-color:#8f8680 #dfcedb #dfcedb #8f8680;
    font-family:Tahoma,sans-serif; font-size:12px; box-sizing:border-box; height:32px;
  }
  .xp-unlock-row input:focus { outline:none; border-color:#000080 #000080 #dfcedb #000080; }
  .xp-unlock-row button.unlock { min-width:84px; padding:6px 12px; }
  .xp-unlock-error { margin-top:8px; color:#900; font-size:12px; display:none; }
  .xp-unlock-error.show { display:block; }