* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  background: white;
  color: #e0e0e0;
  font-family: 'Segoe UI', system-ui, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center; }

.game-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px; }

.game-title {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #e2b96f; }

.game-hint {
  font-size: 0.85rem;
  color: #8395a7;
  text-align: center;
  max-width: 460px; }

.toolbar {
  display: flex;
  gap: 8px;
  background: #16213e;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #0f3460; }
  .toolbar .pipe-btn {
    width: 48px;
    height: 48px;
    border: 2px solid #0f3460;
    border-radius: 8px;
    background: #0f3460;
    color: #c8d6e5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    padding: 6px; }
    .toolbar .pipe-btn svg {
      width: 100%;
      height: 100%; }
    .toolbar .pipe-btn:hover {
      background: #1a4a8a;
      border-color: #1d64b8; }
    .toolbar .pipe-btn.active {
      border-color: #e2b96f;
      color: #e2b96f;
      background: #845e1b; }
    .toolbar .pipe-btn--erase {
      color: #ff6b6b; }
      .toolbar .pipe-btn--erase.active {
        border-color: #ff6b6b;
        background: #d10000;
        color: #ff6b6b; }

.canvas-area {
  border: 2px solid #0f3460;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); }
  .canvas-area canvas {
    display: block; }

.controls {
  display: flex;
  align-items: center;
  gap: 12px; }
  .controls button {
    padding: 10px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s; }
    .controls button#launchBtn {
      background: #1dd1a1;
      color: #0d1b2a; }
      .controls button#launchBtn:hover {
        background: #34e3b4; }
      .controls button#launchBtn:active {
        transform: scale(0.97); }
      .controls button#launchBtn:disabled {
        background: #11775c;
        color: #8395a7;
        cursor: default; }
    .controls button#resetBtn {
      background: #0f3460;
      color: #e0e0e0;
      border: 1px solid #0f3460; }
      .controls button#resetBtn:hover {
        background: #1a4a8a; }
      .controls button#resetBtn:active {
        transform: scale(0.97); }

.status {
  font-size: 1rem;
  font-weight: 600;
  min-width: 120px; }
  .status.won {
    color: #1dd1a1; }
  .status.lost {
    color: #ff6b6b; }

/*# sourceMappingURL=style.css.map */