:root{
  --ui-scale: 1;
  --bg:#0b1020;
  --ink:#e7ecf2;
  --muted:#8b94a7;
  --rail:#30384a;
  --thumb:#38bdf8;
  --thumb2:#a78bfa;
  --glass:rgba(10,14,25,0.54);
  --glass-strong:rgba(10,14,25,0.72);
  --border:rgba(255,255,255,0.12);

  --overlap-pad: 8px;
  --panel-w: clamp(18rem, 38vw, 26rem);
  --right-gutter: max(0.625rem, env(safe-area-inset-right, 0.625rem));
  --controls-offset: 0px;
  --portrait-offset: 0px;
}

/* rem base */
html{ font-size: calc(16px * var(--ui-scale)); }

*{ box-sizing:border-box }
html,body{
  margin:0; padding:0;
  width:100vw; height:100dvh;
  overflow:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
#stage{ position:relative; width:100vw; height:100dvh; }

/* Title */
#titlebar{
  position:absolute;
  top: max(0.625rem, env(safe-area-inset-top, 0.625rem));
  left: 50%;
  transform: translateX(-50%);
  z-index:12;
  padding:0.375rem 0.625rem;
  border-radius:0.625rem;
  background: var(--bg);
  border:none;
  text-align:center;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
#titlebar h1{ margin:0; font-weight:600; letter-spacing:.02em; line-height:1.15;
  font-size: clamp(1rem, 1.5vw + 0.75rem, 1.4rem); }
#titlebar .t1,#titlebar .t2{ display:block; white-space:nowrap; }
#titlebar .t1{ margin-bottom:.1em; }

/* Icons */
.icon-bar{
  position:absolute;
  top: max(0.625rem, env(safe-area-inset-top, 0.625rem));
  right:max(0.75rem, env(safe-area-inset-right, 0.75rem));
  z-index:12; display:flex; gap:0.625rem;
}
.icon-btn{
  width:2.5rem; height:2.5rem; border:1px solid rgba(255,255,255,0.15);
  background: rgba(0,0,0,0.25); color:var(--ink); border-radius:0.625rem;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition: background .2s, transform .1s, border-color .2s;
}
.icon-btn:hover{ background:rgba(0,0,0,0.38); border-color:rgba(255,255,255,0.25); }
.icon-btn:active{ transform:scale(0.96); }
.icon-btn svg, .icon-btn svg use { fill: currentColor; }
@media (prefers-color-scheme: dark){ .icon-btn{ color:#fff; } }
@media (prefers-color-scheme: light){ .icon-btn{ color:#000; } }

/* Canvas */
#arena{ position:absolute; inset:0; }
#pendulumCanvas{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:block; background:var(--bg); border:none; box-shadow:none; border-radius:0.75rem;
  touch-action:none;
}

/* Controls panel */
#controls{
  position:absolute;
  left: max(0.625rem, env(safe-area-inset-left, 0.625rem));
  right:max(0.625rem, env(safe-area-inset-right, 0.625rem));
  bottom:max(0.625rem, calc(env(safe-area-inset-bottom, 0.625rem) + 0.25rem));
  z-index:10;

  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap:0.625rem 0.875rem;

  padding:0.625rem; border:1px solid var(--border); border-radius:0.875rem;
  background:linear-gradient(to top, var(--glass-strong), var(--glass) 55%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#controls .actions{ grid-column:1 / -1; display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-bottom:.25rem; }
#controls .btn{
  padding:.5em .75em; font-weight:600; font-size:.8125rem; border-radius:.625rem;
  border:1px solid rgba(255,255,255,0.18); background: rgba(0,0,0,0.28); color:var(--ink);
  cursor:pointer; transition: background .2s, transform .08s, border-color .2s;
}
#controls .btn:hover{ background: rgba(0,0,0,0.38); border-color: rgba(255,255,255,0.28); }
#controls .btn:active{ transform: scale(0.98); }

/* Shared primary button style (used in modal too) */
.btn.primary{
  background: linear-gradient(90deg, var(--thumb), var(--thumb2));
  color:#0b1020; border:none; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.btn.primary:hover{ filter: brightness(1.08); }
.btn.primary:active{ transform: translateY(1px); }

#controls .col{ display:grid; grid-template-columns:1fr; gap:.375rem; min-width:0; }
.lbl{ font-size:.75rem; letter-spacing:.02em; color:var(--muted); }

/* Ranges */
input[type="range"]{ -webkit-appearance:none; appearance:none; width:100%; height:.375rem; border-radius:999px; background:var(--rail); outline:none; cursor:pointer; }
input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:1.375rem; height:1.375rem; border-radius:50%; border:.1875rem solid #0b1020; background:var(--thumb); box-shadow:0 0 0 1px rgba(0,0,0,0.25); }
#m2::-webkit-slider-thumb, #l2::-webkit-slider-thumb{ background:var(--thumb2); }
input[type="range"]::-moz-range-thumb{ width:1.375rem; height:1.375rem; border-radius:50%; border:.1875rem solid #0b1020; background:var(--thumb); }
#m2::-moz-range-thumb, #l2::-moz-range-thumb{ background:var(--thumb2); }

/* Tight */
@media (max-width: 26.25rem){
  input[type="range"]{ height:.3125rem; }
  input[type="range"]::-webkit-slider-thumb{ width:1.125rem; height:1.125rem; }
  input[type="range"]::-moz-range-thumb{ width:1.125rem; height:1.125rem; }
  .lbl{ font-size:.6875rem; }
}
@media (orientation: landscape) and (max-height: 26.25rem){
  #controls{ padding:.5rem; gap:.5rem .75rem; }
  .lbl{ font-size:.6875rem; }
}

/* Donate popover (keeps your previous refreshed look) */
.donate-popover{
  position:absolute; top: calc(3.125rem + max(0.625rem, env(safe-area-inset-top, 0.625rem)));
  right:max(0.75rem, env(safe-area-inset-right, 0.75rem)); z-index: 20;
  width: 18.5rem; max-width: min(22rem, calc(100vw - 1.5rem));
  background: linear-gradient(180deg, rgba(17,24,39,0.96), rgba(17,24,39,0.90) 60%, rgba(17,24,39,0.88));
  color: var(--ink); border: 1px solid rgba(255,255,255,0.12); border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04) inset;
  padding: 14px; opacity:0; transform: translateY(-6px) scale(calc(var(--donate-scale, 1) * 0.985));
  transform-origin: top right; visibility:hidden; pointer-events:none;
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s, box-shadow .2s ease;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.donate-popover::after{
  content:""; position:absolute; top:-8px; right:22px; width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid rgba(17,24,39,0.96);
  filter: drop-shadow(0 -1px 0 rgba(255,255,255,0.12));
}
.donate-popover[data-open="true"]{ opacity:1; transform: translateY(0) scale(var(--donate-scale, 1));
  visibility:visible; pointer-events:auto; transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s, box-shadow .2s ease; }
.donate-popover::before{ content:"Support this project"; display:block; font-weight:700; letter-spacing:.02em; font-size:.95rem; margin:2px 2px 10px; opacity:.95; }
.donate-row{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:10px; margin-bottom:10px; }
.donate-row:last-child{ margin-bottom:0; }
.donate-row label{ font-size:.9rem; color:#cfd6de; }
#donate-currency{ justify-self:end; min-width:9rem; background: rgba(255,255,255,0.06); color: var(--ink);
  border:1px solid rgba(255,255,255,0.16); border-radius:10px; padding:8px 10px; font-size:.95rem; appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%), linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
#donate-currency:focus-visible{ outline:2px solid var(--thumb); outline-offset:2px; }
.donate-amounts{ grid-template-columns:repeat(3,1fr); display:grid; gap:8px; }
.donate-amounts .amt{ background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)); color: var(--ink);
  border:1px solid rgba(255,255,255,0.16); border-radius:12px; padding:12px 0; font-weight:700; letter-spacing:.01em; cursor:pointer;
  transition: transform .06s, box-shadow .15s, border-color .15s, background .15s; box-shadow:0 4px 14px rgba(0,0,0,0.25); text-align:center; }
.donate-amounts .amt:hover{ background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05)); border-color: rgba(255,255,255,0.28); box-shadow:0 6px 18px rgba(0,0,0,0.35); }
.donate-amounts .amt:active{ transform: translateY(1px) scale(0.995); }
.donate-amounts .amt:focus-visible{ outline:2px solid var(--thumb); outline-offset:2px; }
.donate-custom{ grid-template-columns:1fr; }
.donate-input{ width:100%; display:flex; align-items:center; gap:8px; background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16); border-radius:12px; padding:8px 10px; }
.donate-input .sym{ min-width:1.25rem; text-align:center; opacity:.9; font-weight:700; }
#donate-custom{ flex:1; background:transparent; color:var(--ink); border:none; outline:none; font-size:1rem; line-height:1.2; }
#donate-custom::placeholder{ color:#9aa0a6; }
#donate-go{ width:100%; margin-top:8px; background: linear-gradient(90deg, var(--thumb), var(--thumb2));
  color:#0b1020; border:none; border-radius:12px; padding:12px 14px; font-weight:800; letter-spacing:.02em; cursor:pointer;
  transition: filter .18s ease, transform .06s ease, box-shadow .18s ease; box-shadow:0 8px 24px rgba(0,0,0,0.35); }
#donate-go:hover{ filter:brightness(1.08); box-shadow:0 10px 28px rgba(0,0,0,0.42); }
#donate-go:active{ transform: translateY(1px); }
#donate-go:focus-visible{ outline:2px solid var(--thumb); outline-offset:3px; }
.donate-hint{ margin-top:8px; font-size:.78rem; color:#9aa0a6; text-align:center; }
@media (prefers-color-scheme: light){
  .donate-popover{ background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.97)); color:#111827; border-color:rgba(17,24,39,0.12); }
  .donate-popover::after{ border-bottom-color: rgba(255,255,255,0.98); filter:none; }
  .donate-row label{ color:#374151; }
  #donate-currency{ background: rgba(0,0,0,0.04); color:#111827; border-color:rgba(17,24,39,0.12); }
  .donate-amounts .amt{ background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02)); color:#111827; border-color:rgba(17,24,39,0.12); box-shadow:0 4px 10px rgba(0,0,0,0.10); }
  .donate-input{ background: rgba(0,0,0,0.04); border-color: rgba(17,24,39,0.12); }
  #donate-custom::placeholder{ color:#6b7280; }
}

/* Portrait: title left-justified + canvas capped to viewport width with safe offset */
@media (orientation: portrait){
  #titlebar{
    left:  max(0.75rem, env(safe-area-inset-left, 0.75rem)); right:auto;
    top:   max(0.625rem, env(safe-area-inset-top, 0.625rem)); transform:none; text-align:left;
    width:auto; max-width: calc(100vw - 1.5rem - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
  }
  #pendulumCanvas{
    width: 100vw; width: 100dvw; max-width: 100dvw; height:auto; aspect-ratio:1/1;
    transform: translate(-50%, calc(-50% + var(--portrait-offset)));
  }
}

/* Landscape: left panel + right canvas */
@media (orientation: landscape){
  #titlebar{
    left:  max(0.75rem, env(safe-area-inset-left, 0.75rem)); right:auto;
    top:   max(0.625rem, env(safe-area-inset-top, 0.625rem));
    transform:none; width: var(--panel-w); text-align:center;
  }
  #controls{
    left:  max(0.625rem, env(safe-area-inset-left, 0.625rem)); right:auto; bottom:auto;
    top:50%; transform: translateY(calc(-50% + var(--controls-offset)));
    width: var(--panel-w);
    background: linear-gradient(to right, var(--glass-strong), var(--glass) 55%, transparent);
  }
  #pendulumCanvas{
    left:auto; right: var(--right-gutter); top:50%; transform: translate(0,-50%);
    width: min(90vh,  calc(100vw - var(--panel-w) - var(--right-gutter) - 0.75rem));
    width: min(90dvh, calc(100vw - var(--panel-w) - var(--right-gutter) - 0.75rem));
    aspect-ratio:1/1; height:auto;
  }
}

/* ===== Pause Tip Modal ===== */
.pause-tip-modal{ position:fixed; inset:0; z-index:1000; display:none; }
.pause-tip-modal[data-open="true"]{ display:block; }
.pause-tip-modal .modal-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.pause-tip-modal .modal-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 2rem)); max-width: 92vw;
  background: linear-gradient(180deg, rgba(17,24,39,0.96), rgba(17,24,39,0.92));
  color:var(--ink); border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5); padding: 16px 16px 14px;
}
@media (prefers-color-scheme: light){
  .pause-tip-modal .modal-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
    color:#111827; border-color: rgba(17,24,39,0.12);
  }
}
.pause-tip-modal .illustration{ width:100%; max-width:520px; margin: -4px auto 10px; }
.pause-tip-modal h2{ margin: 0 0 6px; font-size:1.05rem; font-weight:800; letter-spacing:.01em; }
.pause-tip-modal .modal-copy{ margin:0 0 10px; color:var(--muted); font-size:.95rem; }
.pause-tip-modal .checkline{ display:flex; align-items:center; gap:.5rem; margin: 2px 0 10px; font-size:.9rem; }
.pause-tip-modal .checkline input{ transform: translateY(1px); }
.pause-tip-modal .modal-actions{ display:flex; justify-content:flex-end; gap:.5rem; }
.pause-tip-modal .modal-actions .btn{ padding:.55em .9em; }

/* ===== Share Tip Modal (same look as pause tip) ===== */
.share-tip-modal{ position:fixed; inset:0; z-index:1000; display:none; }
.share-tip-modal[data-open="true"]{ display:block; }
.share-tip-modal .modal-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.share-tip-modal .modal-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 2rem)); max-width: 92vw;
  background: linear-gradient(180deg, rgba(17,24,39,0.96), rgba(17,24,39,0.92));
  color:var(--ink); border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5); padding: 16px 16px 14px;
}
@media (prefers-color-scheme: light){
  .share-tip-modal .modal-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
    color:#111827; border-color: rgba(17,24,39,0.12);
  }
}
.share-tip-modal .illustration{ width:100%; max-width:520px; margin: -4px auto 10px; }
.share-tip-modal h2{ margin: 0 0 6px; font-size:1.05rem; font-weight:800; letter-spacing:.01em; }
.share-tip-modal .modal-copy{ margin:0 0 10px; color:var(--muted); font-size:.95rem; }
.share-tip-modal .checkline{ display:flex; align-items:center; gap:.5rem; margin: 2px 0 10px; font-size:.9rem; }
.share-tip-modal .checkline input{ transform: translateY(1px); }
.share-tip-modal .modal-actions{ display:flex; justify-content:flex-end; gap:.5rem; }
.share-tip-modal .modal-actions .btn{ padding:.55em .9em; }

/* Remove the notch/arrow on the donate popover */
.donate-popover::after{
  content: none !important;
  display: none !important;
  border: 0 !important;
  filter: none !important;
}

/* Hidden by default */
#rotate-overlay { display: none; }

/* Show overlay only when: portrait + touch device + tablet-ish width */
@media (orientation: portrait) and (hover: none) and (pointer: coarse) and (min-width: 700px) {
  #rotate-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  }
  #rotate-overlay .ro-card {
    padding: 1.25rem 1.5rem; border-radius: 1rem;
    background: var(--glass, rgba(255,255,255,.12));
    color: var(--text, #fff); text-align: center; max-width: 24rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
  }
  #rotate-overlay .ro-title { font-size: 1.25rem; font-weight: 700; margin-bottom: .25rem; }
  #rotate-overlay .ro-sub { opacity: .9; }
}

/* If someone rotates to landscape, overlay disappears automatically */

/* ===== Infinite Trail Tip Modal ===== */
.infinite-tip-modal{ position:fixed; inset:0; z-index:1000; }
.infinite-tip-modal .modal-backdrop{
  position:absolute; inset:0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.infinite-tip-modal .modal-card{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 2rem)); max-width: 92vw;
  background: linear-gradient(180deg, rgba(17,24,39,0.96), rgba(17,24,39,0.92));
  color:var(--ink); border:1px solid rgba(255,255,255,0.12); border-radius:16px;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5); padding: 16px 16px 14px;
}
@media (prefers-color-scheme: light){
  .infinite-tip-modal .modal-card{
    background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,255,255,0.96));
    color:#111827; border-color: rgba(17,24,39,0.12);
  }
}
.infinite-tip-modal .illustration{ width:100%; max-width:520px; margin: -4px auto 10px; }
.infinite-tip-modal h2{ margin: 0 0 6px; font-size:1.05rem; font-weight:800; letter-spacing:.01em; }
.infinite-tip-modal .modal-copy{ margin:0 0 10px; color:var(--muted); font-size:.95rem; }
.infinite-tip-modal .checkline{ display:flex; align-items:center; gap:.5rem; margin: 2px 0 10px; font-size:.9rem; }
.infinite-tip-modal .checkline input{ transform: translateY(1px); }
.infinite-tip-modal .modal-actions{ display:flex; justify-content:flex-end; gap:.5rem; }
.infinite-tip-modal .modal-actions .btn{
  padding:.55em .75em; display:inline-flex; align-items:center; gap:.5rem; border:none;
  background: rgba(0,0,0,0.28); color:var(--ink); border-radius:.625rem; cursor:pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.infinite-tip-modal #infinite-tip-yes.btn{
  background: linear-gradient(90deg, #22c55e, #16a34a); color:#0b1020;
}
.infinite-tip-modal #infinite-tip-no.btn{
  background: linear-gradient(90deg, #ef4444, #dc2626); color:#fff;
}
.infinite-tip-modal .modal-actions .btn:hover{ filter: brightness(1.08); }
.infinite-tip-modal .modal-actions .btn:active{ transform: translateY(1px); }
.infinite-tip-modal .modal-actions .btn svg{ display:block; }

/* Hide by default; only show when JS opens it */
#infinite-tip { display: none; }
#infinite-tip[hidden],
#infinite-tip[aria-hidden="true"] { display: none !important; }
#infinite-tip[data-open="true"] { display: block; }

/* ===== Zen Mode ===== */
body.zen-active #titlebar,
body.zen-active #controls {
  display: none !important;
}

body.zen-active .icon-bar {
  opacity: 1;
  transition: opacity .35s ease;
}

body.zen-active .icon-bar.icons-faded {
  opacity: 0;
  pointer-events: none;
}

/* Force canvas centered in zen, overriding orientation-specific rules */
body.zen-active #pendulumCanvas{
  left: 50% !important;
  right: auto !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(96vmin, 96dvw, 96dvh) !important;
  height: auto !important;
  aspect-ratio: 1 / 1 !important;
}
/* Toolbar base */
.icon-bar{
  position: fixed;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 8px;
  z-index: 1000;
}

/* Icon buttons (nice big tap targets) */
.icon-btn{
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(0,0,0,0.55);
  color: #fff;
  backdrop-filter: blur(4px);
}

/* Keep your fade behavior if you use .icons-faded */
.icon-bar.icons-faded .icon-btn{ opacity: 0.25; }

/* Stack vertically on phones in portrait */
@media (orientation: portrait) and (max-width: 768px){
  .icon-bar{
    flex-direction: column;
    gap: 10px;
    /* Respect notches/safe areas on iOS */
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
  }
  .icon-btn{
    width: 48px;
    height: 48px;
  }
}
/* Portrait: stack + custom order (top → bottom: Fullscreen, Zen, Donate) */
@media (orientation: portrait) and (max-width: 768px){
  .icon-bar{
    display: flex;
    flex-direction: column;
    gap: 10px;
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
  }
  /* order within the column */
  #fsBtn     { order: 0; }  /* top */
  #zenBtn    { order: 1; }  /* middle */
  #donateBtn { order: 2; }  /* bottom */

  /* (optional) slightly bigger tap targets on phones */
  .icon-btn{ width: 48px; height: 48px; }
}