/* Mac King's Backyard Croquet — shared styles */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  min-height: 100%;
  font-family: 'Palatino Linotype','Book Antiqua',Palatino,serif;
  color: #e8e0cc;
  overflow-x: hidden;
}

body {
  background-color: #3a2515;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(160,95,50,0.55) 0px, rgba(160,95,50,0.55) 24px,
      rgba(80,40,20,0.55)  24px, rgba(80,40,20,0.55)  48px,
      rgba(115,65,30,0.45) 48px, rgba(115,65,30,0.45) 72px,
      rgba(50,25,12,0.6)   72px, rgba(50,25,12,0.6)   96px),
    repeating-linear-gradient(0deg,
      rgba(160,95,50,0.45) 0px, rgba(160,95,50,0.45) 24px,
      rgba(80,40,20,0.45)  24px, rgba(80,40,20,0.45)  48px,
      rgba(115,65,30,0.4)  48px, rgba(115,65,30,0.4)  72px,
      rgba(50,25,12,0.5)   72px, rgba(50,25,12,0.5)   96px);
  background-attachment: fixed;
}

/* Panels */
.panel {
  background: rgba(10,20,10,0.82);
  border: 1px solid #2d4a2d;
  border-radius: 11px;
  padding: 16px;
}
.panel-dark {
  background: rgba(8,14,8,0.92);
  border: 1px solid #1d3a1d;
  border-radius: 9px;
  padding: 13px;
}

/* Header */
.app-header {
  background: linear-gradient(135deg,rgba(13,43,13,0.97),rgba(26,61,26,0.97));
  border-bottom: 2px solid #2d5a2d;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
}
.app-header h1 {
  font-size: 19px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #c8e6c8;
  flex: 1;
}
.app-header .sub {
  font-size: 10px;
  color: #5a8a5a;
  letter-spacing: 4px;
}

/* Buttons */
button { font-family: inherit; cursor: pointer; }

.btn {
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #3a5a3a;
  background: transparent;
  color: #6a9a6a;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn:hover { background: #1a3a1a; color: #8aee8a; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-primary {
  background: #1d5a1d;
  border-color: #4aaa4a;
  color: #8aee8a;
}
.btn-primary:hover { background: #2d7a2d; }

.btn-danger {
  background: #3a1a1a;
  border-color: #8a3a3a;
  color: #ff8888;
}
.btn-danger:hover { background: #5a2a2a; }

.btn-large {
  padding: 16px 28px;
  font-size: 16px;
  letter-spacing: 1px;
  border-radius: 10px;
}

/* Action buttons (scoring) */
.action-btn {
  width: 100%;
  padding: 18px 20px;
  border-radius: 12px;
  margin-bottom: 10px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.action-btn:active { transform: scale(0.97); }
.action-btn .label { font-size: 18px; font-weight: bold; }
.action-btn .sub   { font-size: 12px; opacity: 0.75; margin-top: 3px; }

/* Inputs */
input, select {
  font-family: inherit;
  background: #0d1a0d;
  border: 1px solid #2d4a2d;
  border-radius: 8px;
  padding: 9px 13px;
  color: #e8e0cc;
  font-size: 13px;
  outline: none;
  width: 100%;
}
input:focus, select:focus { border-color: #4aaa4a; }

/* Toggle */
.toggle {
  width: 46px; height: 24px;
  border-radius: 12px;
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
  border: 1px solid #3a3a3a;
}
.toggle.on  { background: #2d7a2d; border-color: #4aaa4a; }
.toggle.off { background: #252525; }
.toggle .knob {
  position: absolute;
  top: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  transition: left 0.3s;
}
.toggle.on  .knob { left: 24px; background: #8aee8a; }
.toggle.off .knob { left: 2px;  background: #555; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(10,20,10,0.5); }
::-webkit-scrollbar-thumb { background: #2d5a2d; border-radius: 3px; }

/* Status chips */
.chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
}
.chip-gold   { background: #ffd70022; border: 1px solid #ffd70066; color: #ffd700; }
.chip-green  { background: #2d7a2d33; border: 1px solid #4aaa4a88; color: #8aee8a; }
.chip-red    { background: #7a2d2d33; border: 1px solid #aa4a4a88; color: #ff8888; }
.chip-purple { background: #7a4aaa22; border: 1px solid #aa88ff66; color: #cc88ff; }

/* Ball dot */
.ball-dot {
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Utility */
.section-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: #3a6a3a;
  margin-bottom: 10px;
}
.divider {
  border: none;
  border-top: 1px solid #1d3a1d;
  margin: 14px 0;
}

/* Mobile-first layout */
.page-content {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 14px 80px;
}

/* Loading / waiting states */
.waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  gap: 16px;
  color: #4a7a4a;
  font-size: 16px;
  letter-spacing: 2px;
  text-align: center;
}

/* Pinned bottom bar (mobile action bar) */
.bottom-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(8,14,8,0.97);
  border-top: 1px solid #1d3a1d;
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  z-index: 50;
}