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

:root {
  --bg:            #0d0d0d;
  --panel-idle:    #131313;
  --panel-active:  #2a1a3d;
  --panel-critical:#1d0909;
  --panel-flagged: #1e0000;
  --text:          #ddd8cc;
  --text-dim:      #4a4a4a;
  --accent:        #c8a84b;
  --accent-glow:   rgba(200,168,75,0.12);
  --red:           #c0392b;
  --strip:         #090909;
  --border:        #1e1e1e;
  --btn:           #1a1a1a;
  --btn-hover:     #222;
  --ctrl-pill-bg:  #47455c;
  --ctrl-btn-bg:   #3b394b;
  --controls-h:    240px; /* middle zone height = visual height of rotated controls */
  --ring-size:     200px; /* updated by JS at runtime */
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
}

body {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  height: 100vh; /* fallback */
  position: relative;
}

/* ── Orientation lock ──────────────────────────────────────
   Counter-rotate the app when device goes landscape so the
   layout always appears in portrait.                        */
@media screen and (orientation: landscape) {
  #app {
    position: fixed;
    width: 100vh;
    height: 100vw;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
  }
}

/* ════════════════════════════════════════════════════════════
   START SCREEN
   ════════════════════════════════════════════════════════════ */

#start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Top and bottom color zones */
.start-zone {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-idle);
}

#start-zone-top {
  transform: rotate(180deg);
}

.color-label {
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Middle zone — sized by --controls-h, not by its rotated child */
#start-middle {
  height: var(--controls-h);
}

/* Absolutely positioned so it doesn't affect parent layout.
   width = --controls-h so after 90/270° rotation, visual height = zone height.
   flex-direction: column so stacked blocks become a visual row after rotation. */
#start-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--controls-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3vw;
  background: var(--ctrl-pill-bg);
  padding: 16px;
  border-radius: 12px;

}

#start-controls.board-left  { transform: translate(-50%, -50%) rotate(90deg);  }
#start-controls.board-right { transform: translate(-50%, -50%) rotate(270deg); }

#start-controls .control-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

  #start-controls .section-heading {
    margin-bottom: 12px;
    width: 100%;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    text-align: center;
  }

  #start-controls .button-container {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1vw, 8px);
    flex-flow: row wrap;
    justify-content: center;
  }



/* ════════════════════════════════════════════════════════════
   CLOCK VIEW
   ════════════════════════════════════════════════════════════ */

#clock-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

/* ── Clock panels ─────────────────────────────────────── */

.panel {
  flex: 1 1 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--panel-idle);
  overflow: hidden;
  transition: background 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Active border inset */
.panel::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  pointer-events: none;
  transition: border-color 0.2s ease;
  z-index: 3;
}
.panel.active::after   { border-color: var(--accent); }
.panel.critical::after { border-color: var(--red); }

.panel.active   { background: var(--panel-active); }
.panel.critical { background: var(--panel-critical); }
.panel.flagged  { background: var(--panel-flagged); }

/* Black's panel — rotated so they can read from the other side */
#p2 { transform: rotate(180deg); }

/* ── Arc ring ─────────────────────────────────────────── */

.clock-face {
  position: relative;
  width:  var(--ring-size);
  height: var(--ring-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.arc-wrap {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
  z-index: 1;
}

#p2 .arc-wrap {
  transform: rotate(-90deg) scaleX(-1);
}

.arc-track {
  fill: none;
  stroke: #1e1e1e;
  stroke-width: 3;
}

.arc-fill {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray:  326.73;
  stroke-dashoffset: 0;
  transition: stroke 0.3s ease;
}

.panel.active   .arc-fill { stroke: #ff2d8f; }
.panel.critical .arc-fill { stroke: var(--red); }
.panel.flagged  .arc-fill { stroke: #3a0000; }

/* ── Clock content ────────────────────────────────────── */

.clock-inner {
  position: relative;
  z-index: 2;
  width:  calc(var(--ring-size) * 0.72);
  height: calc(var(--ring-size) * 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.clock-label {
  font-size: calc(var(--ring-size) * 0.06);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: calc(var(--ring-size) * 0.03);
}

.clock-time {
  font-family: 'Roboto Mono', 'Courier New', monospace;
  font-weight: 600;
  font-size: calc(var(--ring-size) * 0.19);
  line-height: 1;
  color: var(--text);
  transition: color 0.2s ease;
  white-space: nowrap;
}

.panel.critical .clock-time { color: #ff6b5b; }
.panel.flagged  .clock-time { color: #ff3322; }

.tap-prompt {
  margin-top: calc(var(--ring-size) * 0.05);
  font-size: calc(var(--ring-size) * 0.07);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Control strip ────────────────────────────────────── */
/* Zero-height seam; the pill floats above/below via absolute positioning */

#strip {
  position: relative;
  height: 0;
  flex-shrink: 0;
  z-index: 20;
}

/* Board-side toggle — always centered at the seam */
#btn-board-side-clock, #btn-board-side-start {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  padding: 0;
  background: var(--ctrl-btn-bg);
  color: var(--text);
  border: 1px solid #555;
  border-radius: 50%;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 21;
}
#btn-board-side-start {
  position: absolute;
  top: 50%;
  left: auto;
  right: 8px;
  transform: translateY(-50%);
  z-index: 1;
}

/* Control pill wrapper — positioned to board side */
#control-pill-wrap {
  position: absolute;
  top: 0;
}

#control-pill-wrap.board-right { 
  right: 16px; 
  transform: translateX(-50%) translateY(-50%) rotate(270deg);

}
#control-pill-wrap.board-left  { 
  left: 16px; 
  transform: translateX(50%) translateY(-50%) rotate(90deg);}

/* The pill itself — matches Figma design */
#control-pill {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  background: var(--ctrl-pill-bg);
  border-radius: 12px;
}

/* Control buttons — Figma: 64px wide, icon + label, rounded */
.ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 64px;
  padding: 4px;
  background: var(--ctrl-btn-bg);
  color: var(--text);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, opacity 0.15s, transform 0.08s;
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

.ctrl-btn:hover  { background: #4a4860; }
.ctrl-btn:active { transform: scale(0.94); }
.ctrl-btn.muted  { opacity: 0.45; }

.ctrl-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ctrl-btn .btn-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* ── Shared action buttons (start screen) ─────────────── */

button {
  font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--btn);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, opacity 0.15s, transform 0.08s;
}

button:hover   { background: var(--btn-hover); }
button:active  { transform: scale(0.94); }
button:disabled { opacity: 0.25; pointer-events: none; }

.btn-action {
  font-size: clamp(0.78rem, 2.1vw, 1rem);
  padding: clamp(8px, 1.8vh, 12px) clamp(14px, 3.5vw, 26px);
  min-height: clamp(36px, 7.5vw, 48px);
}

.btn-action.primary {
  background: var(--accent);
  color: #111;
  border-color: var(--accent);
}
.btn-action.primary:hover { background: #d4b454; }

#btn-start-game {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
}
#btn-start-game:hover { background: #388e3c; border-color: #388e3c; }

.btn-preset {
  font-size: clamp(0.72rem, 1.9vw, 0.95rem);
  padding: clamp(6px, 1.5vh, 10px) clamp(8px, 2vw, 14px);
  min-height: clamp(30px, 6.5vw, 44px);
  white-space: nowrap;
}

.btn-preset.selected {
  background: var(--accent-glow);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── Tablet scaling ───────────────────────────────────── */

@media (min-width: 768px) {
  .btn-action { font-size: 1.05rem; padding: 13px 30px; min-height: 52px; }
  .btn-preset { font-size: 0.95rem; padding: 10px 18px; min-height: 48px; }
  #start-middle { padding: 20px 56px; min-height: 160px; }
}