:root {
  --bg:         #F5F0E8;
  --hint-text:  #7A6A55;
  --hint-sub:   #A99880;
  --btn-bg:     #EDE7DA;
  --btn-border: #C8B89A;
  --btn-icon:   #7A6A55;
  --btn-hover:  #E0D6C5;
  --btn-active: #D4622A;
  --btn-size:   50px;
  --btn-gap:    12px;
  --btn-margin: 22px;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  touch-action: none;
}

#disk {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  cursor: crosshair;
}

/* ── Hint ── */
.hint {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center;
  pointer-events: none; z-index: 10;
  transition: opacity 0.6s ease;
}
.hint.hidden { opacity: 0; }

.hint-main {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 17px; font-weight: 400;
  color: var(--hint-text); letter-spacing: 0.01em; line-height: 1.6;
}
.hint-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px; font-weight: 300;
  color: var(--hint-sub); letter-spacing: 0.13em; text-transform: uppercase;
}

/* ── Button group ── */
.btn-group {
  position: fixed;
  right: var(--btn-margin); bottom: var(--btn-margin);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--btn-gap);
  z-index: 20;
}

/* ── Shared button ── */
.btn-circle {
  width: var(--btn-size); height: var(--btn-size);
  border-radius: 50%;
  border: 1.5px solid var(--btn-border);
  background: var(--btn-bg);
  cursor: pointer; outline: none;
  -webkit-tap-highlight-color: transparent;
  display: flex; align-items: center; justify-content: center;
  color: var(--btn-icon);
  box-shadow: 0 2px 8px rgba(120,90,60,0.10), 0 1px 2px rgba(120,90,60,0.08);
  transition: background 0.14s ease, transform 0.1s ease;
}
.btn-circle svg { width: 20px; height: 20px; pointer-events: none; }
.btn-circle:hover  { background: var(--btn-hover); }
.btn-circle:active { transform: scale(0.92); }

.btn-primary {
  width: calc(var(--btn-size) + 4px); height: calc(var(--btn-size) + 4px);
  border-width: 2px;
  box-shadow: 0 3px 12px rgba(120,90,60,0.15), 0 1px 3px rgba(120,90,60,0.10);
}
.btn-primary.mode2 { background:#E8D0C0; border-color:var(--btn-active); color:var(--btn-active); }

.mode-icon {
  position: absolute; width: 22px; height: 22px;
  opacity: 0; transform: scale(0.8) rotate(-10deg);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.mode-icon.active { opacity: 1; transform: scale(1) rotate(0deg); }

/* ── Mobile ── */
@media (max-width: 480px) {
  .hint-main { font-size: 15px; padding: 0 28px; }
  :root { --btn-size: 46px; --btn-margin: 18px; --btn-gap: 10px; }
}