html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background: #0b0d12; }
body { font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #e8eaf0; }
#unity-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; background: #000; outline: none; }

.cl-screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10;
  background: radial-gradient(ellipse at 50% 35%, #2a2416 0%, #12141b 55%, #07080b 100%);
  padding: 16px; box-sizing: border-box;
}
.cl-screen[hidden], [hidden] { display: none !important; }
#cl-start { background: rgba(5, 6, 10, 0.72); cursor: pointer; }
.cl-box { width: 100%; max-width: 560px; text-align: center; }
.cl-title {
  margin: 0 0 6px; font-size: clamp(40px, 9vw, 76px); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #f2b233; text-shadow: 0 4px 0 #6b4a0e, 0 10px 30px rgba(0, 0, 0, 0.6);
}
.cl-sub { margin: 0 0 32px; color: #aab0bd; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.cl-bar { height: 14px; border-radius: 7px; background: #1e2230; border: 1px solid #343a4d; overflow: hidden; }
#cl-bar-fill { width: 0; height: 100%; background: linear-gradient(90deg, #d68a1a, #f2c14e); transition: width 0.2s ease-out; }
#cl-progress-text { margin: 10px 0 0; font-size: 15px; color: #cfd3dc; font-variant-numeric: tabular-nums; }
.cl-tip { margin-top: 26px; font-size: 13px; color: #7d8496; }
.cl-keys { margin: 26px 0 0; font-size: 14px; line-height: 1.7; color: #c3c8d3; }
.cl-keys b { color: #f2c14e; }
.cl-error { margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: #4a1414; border: 1px solid #a33; color: #ffd9d9; font-size: 14px; text-align: left; }
.cl-notice { margin: 0 0 18px; padding: 16px; border-radius: 10px; background: #2b2412; border: 1px solid #8a6a1e; color: #f5e3b8; font-size: 15px; line-height: 1.5; }
.cl-btn {
  font: inherit; font-size: 24px; font-weight: 700; padding: 16px 40px; border-radius: 10px; border: 0; cursor: pointer;
  color: #15120a; background: linear-gradient(180deg, #f6c75a, #e09a22); box-shadow: 0 6px 0 #7a520f, 0 12px 30px rgba(0, 0, 0, 0.5);
}
.cl-btn:hover { filter: brightness(1.08); }
.cl-btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #7a520f; }
.cl-btn-small { margin-top: 12px; font-size: 15px; padding: 8px 18px; box-shadow: 0 3px 0 #7a520f; }

#cl-lock-hint {
  display: none; position: fixed; left: 50%; bottom: 9%; transform: translateX(-50%); z-index: 5; pointer-events: none;
  padding: 10px 18px; border-radius: 8px; background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 16px; white-space: nowrap;
}
#cl-fullscreen {
  position: fixed; top: 10px; left: 10px; z-index: 20; width: 38px; height: 38px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.45); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0;
}
#cl-fullscreen:hover { background: rgba(0, 0, 0, 0.7); }