/* Base styles */
:root{
--cell: 32px;   /* base tile size before scaling */
--gap: 1px;     /* grid gap between tiles */
--bg: #ffffff;
--ink: #0b0d10;
--panel-bg: rgba(247, 249, 252, 0.92);
--panel-border: #d8e0ec;
/* orientation variables */
--wrap-rot: -45deg;   /* default: horizontal unison */
--label-rot: 45deg;   /* keep labels upright */
}
html, body{ height:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; }

/* Fullscreen viewport */
#viewport{ position: fixed; inset: 0; overflow: hidden; background: var(--bg); touch-action: none; -webkit-tap-highlight-color: transparent; }
.panel {
  background: var(--panel-bg);
  backdrop-filter: blur(6px);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 12px;
  max-width: 300px; 
  box-shadow: 0 6px 24px rgba(0,0,0,.08);
  touch-action: auto;
  transition: width .18s ease, height .18s ease, padding .18s ease, opacity .18s ease, transform .18s ease;
}

/* Panel header and collapse/expand controls */
.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.panel-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.btn-collapse {
  background: transparent;
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  width: 24px;
  height: 24px;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
}

.btn-collapse:hover {
  background: #f0f4f9;
}

/* Collapsed panel state */
.panel.collapsed #menuContent,
.panel.collapsed #instructionsContent {
  display: none;
}

.btn{ background:#124ae4; color:#fff; border:0; padding:8px 12px; border-radius:10px; font-weight:600; cursor:pointer; box-shadow: 0 2px 0 rgba(0,0,0,.06); }
.btn.small{ padding:6px 10px; font-size:12px; }
.btn.secondary{ background:#eff3f9; color:#0b0d10; }
.btn.ghost{ color: #0b0d10; background:#fff; border:1px solid var(--panel-border); }
.danger{ background:#e2123c; }
.inline{ display:flex; gap:6px; align-items:center; }
.controls{ display:flex; flex-wrap:wrap; gap:8px; }
.muted{ color:#75839a; font-size:12px; }
#menu {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 50;
}
#instructions { 
    position: absolute; 
    top: 14px; 
    right: 14px; 
    z-index: 50; 
}

/* Diamond wrapper is centered and scaled/rotated by JS */
#diamondWrap{ position:absolute; top:50%; left:50%; transform-origin:center center; will-change: transform; }

/* Grid stage (unrotated in CSS; rotated via parent) */
.stage{ position: relative; width: max-content; height: max-content; display: grid; grid-gap: var(--gap); }

/* Tiles and visuals */
.tile{ width: var(--cell); height: var(--cell); position: relative; border: 1px solid #ffffff; background: transparent; touch-action: none; overflow: hidden; }
.tile .cell{ position:absolute; inset:0; transform: rotate(var(--label-rot)); transform-origin:center center; }

.tile:not(.axis) .cell::before{ content: ""; position:absolute; inset:-25%; background: linear-gradient(to bottom, var(--numColor, #cbd5e1) 0 50%, var(--denColor, #cbd5e1) 50% 100%); transform: scale(1.45); transform-origin: 50% 50%; z-index:0; }

.tile.axis{ background:#fff; cursor:pointer; }
.tile.axis .label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--cell) * 0.38); /* was 12px, now scales with zoom */
}
.tile:focus, .tile.axis:focus{ outline: none !important; }
.tile.axis.armed{ outline: none !important; }

.tip{ position:absolute; bottom:100%; left:50%; transform: translate(-50%,-6px); background: rgba(0,0,0,.85); color:#fff; font-size: 11px; border-radius: 6px; padding: 6px 7px; white-space: nowrap; pointer-events:none; opacity:0; transition: opacity .12s ease; z-index:2; }
.hidden{ display:none; }

/* Audio banner */
#audioBanner{ position:absolute; z-index:55; top:14px; left:50%; transform:translateX(-50%); background: rgba(255,255,255,.95); border:1px solid var(--panel-border); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.08); padding: 8px 10px; display:flex; gap:10px; align-items:center; transition: opacity .18s ease; opacity:1; }
#audioBanner.hidden{ opacity:0; pointer-events:none; }
#audioBanner .msg{ font-size: 12px; color:#0b0d10; }

/* Grid styling */
:root{ --grid-color:#0b0d10; --grid-width:2px; }
.tile{ border: var(--grid-width) solid var(--grid-color) !important; }
.tile:not(.axis) .cell::after{ content:""; position:absolute; left:-35%; right:-35%; top:48%; height:0; border-top: var(--grid-width) solid var(--grid-color); z-index:2; }
.tile .label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:3; pointer-events:none; }
.tile .frac{ position:absolute; inset:0; line-height:1; color: var(--grid-color); }
.tile .frac .n, .tile .frac .d{ position:absolute; left:50%; transform: translate(-50%, -50%); font-weight:700; font-size: calc(var(--cell) * 0.46); text-shadow: 0 1px 2px rgba(255,255,255,.55); }
.tile .frac .n{ top:25%; }
.tile .frac .d{ top:75%; }
.tile .frac .bar{ display:none !important; width:0; height:0; border:0; margin:0; }
.tile.axis .label{ z-index:3; }

/* Prevent text selection/highlight inside the diamond grid */
#stage, #stage *{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#diamondWrap, #stage, .tile, .cell {
  will-change: transform;
  backface-visibility: hidden;
  /* For smoother scaling of text and borders */
  transform-style: preserve-3d;
}

.tile, .cell, .label, .frac {
  /* Prevent pixelation of text and borders */
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}