#castleGameRoot {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}
#cgCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

.cg-top {
  position: absolute; top: 10px; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; padding: 0 14px; pointer-events: none;
}
.cg-turn {
  background: rgba(255, 255, 255, 0.88); border-radius: 12px; padding: 7px 14px;
  font-weight: 700; font-size: 0.9rem; color: #2b3a4a; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.cg-turn .cg-p1 { color: #327fbd; font-weight: 800; }
.cg-turn .cg-p2 { color: #c0435a; font-weight: 800; }
.cg-exit {
  pointer-events: auto; border: none; cursor: pointer; background: rgba(255, 255, 255, 0.92);
  color: #327fbd; font-weight: 800; border-radius: 12px; padding: 8px 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12); white-space: nowrap;
}
.cg-exit:hover { background: #fff; }

.cg-hint {
  position: absolute; top: 52px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: #3d5468; font-size: 0.78rem; background: rgba(255, 255, 255, 0.72);
  padding: 5px 12px; border-radius: 10px; pointer-events: none; text-align: center; max-width: 92vw;
}

.cg-panel {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 2;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: rgba(255, 255, 255, 0.92); padding: 10px 18px; border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16); max-width: 94vw;
}
.cg-field { display: flex; flex-direction: column; align-items: center; font-size: 0.7rem; color: #7089a0; font-weight: 700; gap: 2px; }
.cg-field b { font-size: 1rem; color: #2b3a4a; }
.cg-panel input[type="range"] { width: 130px; accent-color: #327fbd; }
.cg-launch {
  border: none; cursor: pointer; color: #fff; font-weight: 800; font-size: 1rem;
  padding: 12px 24px; border-radius: 14px;
  background: linear-gradient(180deg, #4bbf8a 0%, #2c8c63 100%);
  box-shadow: 0 6px 14px rgba(44, 140, 99, 0.4);
}
.cg-launch:active { transform: translateY(1px); }

@media (max-width: 560px) {
  .cg-turn { font-size: 0.74rem; padding: 6px 10px; }
  .cg-hint { top: 46px; font-size: 0.7rem; }
  .cg-panel input[type="range"] { width: 100px; }
}