:root{
  --bg:#0a0a14; --panel:#11111c; --ink:#f4f4f5; --muted:#9aa0a6; --line:#23232f;
  --gold:#c9a84c; --hi:#1f6feb;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,'Noto Sans',sans-serif;-webkit-font-smoothing:antialiased}
body{
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  min-height: 100dvh;
}
a{color:var(--gold)}
header{padding:18px 16px 10px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(10,10,20,.92);backdrop-filter:blur(8px);z-index:5}
h1{font-size:20px;margin:0 0 2px}
h2{font-size:13px;font-weight:400;color:var(--muted);margin:0}
.lang-row{margin-top:10px;display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px}
.lang-row button{flex:0 0 auto;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:6px 10px;border-radius:14px;font-size:13px;cursor:pointer}
.lang-row button.active{background:var(--gold);color:#1a1a1a;border-color:var(--gold);font-weight:600}
.controls{padding:12px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.controls button{background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:8px 12px;border-radius:10px;font-size:14px;cursor:pointer}
.controls button.primary{background:var(--gold);color:#1a1a1a;border-color:var(--gold);font-weight:600}
.intro,.disclaimer,.source{padding:0 16px;margin:8px 0;font-size:14px;line-height:1.45}
.disclaimer{color:var(--muted);font-size:13px}
.source{font-size:12px;color:var(--muted)}
.legend{padding:10px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.legend .item{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px}
.legend .swatch{width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 22px}

/* Chart: horizontal scroll on phone, sticky first row + col */
.chart-wrap{overflow:auto;border-top:1px solid var(--line);border-bottom:1px solid var(--line);max-height:74vh;-webkit-overflow-scrolling:touch}
table.combo{border-collapse:separate;border-spacing:0;font-size:11px}
table.combo th, table.combo td{padding:0;text-align:center;vertical-align:middle;width:36px;height:36px;min-width:36px;border-right:1px solid #000;border-bottom:1px solid #000}
table.combo thead th{background:#1a1a26;color:var(--ink);font-weight:600;writing-mode:vertical-rl;transform:rotate(180deg);padding:6px 2px;height:90px;position:sticky;top:0;z-index:3}
table.combo thead th.corner{writing-mode:horizontal-tb;transform:none;left:0;z-index:4;background:#0e0e18}
table.combo tbody th{background:#1a1a26;color:var(--ink);font-weight:600;text-align:right;padding:0 8px;position:sticky;left:0;z-index:2;white-space:nowrap;width:auto;min-width:88px}
table.combo td{cursor:pointer;font-weight:700;font-size:14px}
table.combo td.diag{background:#0e0e18;color:#444}
table.combo td:focus, table.combo td.speaking{outline:3px solid var(--gold);outline-offset:-3px}

/* Mobile narrower cells */
@media (max-width:480px){
  table.combo th, table.combo td{width:30px;height:30px;min-width:30px;font-size:13px}
  table.combo thead th{height:78px}
  table.combo tbody th{min-width:78px;font-size:11px}
}

/* Embed mode: hide chrome when shown inside view.html */
body.embed header, body.embed .intro{display:none}
body.embed .controls{padding:8px 12px}
body.embed .chart-wrap{max-height:none;border-top:0}

/* RTL */
html[dir=rtl] table.combo tbody th{text-align:left}
html[dir=rtl] .lang-row{direction:ltr}

/* Print: full chart, A3 landscape */
@media print{
  @page{size:A3 landscape;margin:8mm}
  html,body{background:#fff;color:#111}
  header,.controls,.lang-row,.intro{display:none}
  .legend{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;border:none}
  .chart-wrap{max-height:none;overflow:visible;border:none}
  table.combo{font-size:9pt;width:100%}
  table.combo th, table.combo td{width:28px;height:28px;min-width:28px;border-color:#999}
  table.combo thead th{position:static;background:#222;color:#fff}
  table.combo tbody th{position:static;background:#222;color:#fff}
  .disclaimer,.source{font-size:9pt;color:#333}
}

/* ── Ambient Volume Control ────────────────────────────── */
.vol-ctrl {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top));
  right: calc(16px + env(safe-area-inset-right));
  z-index: 150;
  display: flex; align-items: center; gap: 8px;
  background: rgba(12, 12, 28, 0.88);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: 22px;
  padding: 8px 13px 8px 10px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  transition: border-color .2s;
}
.vol-ctrl:hover { border-color: rgba(201, 168, 76, 0.55); }
.vol-icon {
  font-size: 15px; cursor: pointer; flex-shrink: 0;
  transition: transform .2s; line-height: 1; user-select: none;
}
.vol-icon:hover { transform: scale(1.15); }
.vol-slider {
  -webkit-appearance: none; appearance: none;
  width: 72px; height: 3px; border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(to right, #C9A84C 8%, #2e2e3a 8%);
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: #C9A84C; cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.5);
  transition: transform .15s;
}
.vol-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.vol-slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: #C9A84C; cursor: pointer; border: none;
}

/* ── Bird idle pulse (before audio starts) ─────────────── */
@keyframes birdPulse {
  0%, 100% { opacity:.4; transform:scale(1); }
  50%       { opacity:1;  transform:scale(1.12); }
}
.vol-icon.bird-idle { animation: birdPulse 2.4s ease-in-out infinite; cursor:pointer; }

/* ── App Update Banner ─────────────────────────────────── */
.update-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  background: rgba(10,10,20,0.97);
  border-top: 2px solid var(--gold);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -4px 24px rgba(0,0,0,.65);
  animation: slideUp .3s ease;
}
.update-banner .ub-icon { font-size: 20px; flex-shrink: 0; }
.update-banner .ub-text { flex: 1; font-size: 13px; color: #e8e8ec; line-height: 1.4; }
.update-banner .ub-text strong { display: block; font-size: 14px; margin-bottom: 1px; }
.update-banner .ub-btn {
  background: var(--gold); color: #1a1a1a;
  border: none; border-radius: 20px; padding: 9px 18px;
  font-size: 13px; font-weight: 700; cursor: pointer;
  flex-shrink: 0; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(201,168,76,.3);
  transition: transform .15s;
}
.update-banner .ub-btn:active { transform: scale(.96); }
.update-banner .ub-close {
  background: none; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 4px 6px; flex-shrink: 0; line-height: 1;
}

/* ── Footer pill links (shared) ────────────────────────── */
.footer-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px;
  background: rgba(201,168,76,0.07);
  border: 1.5px solid rgba(201,168,76,0.28);
  border-radius: 18px; color: var(--gold);
  text-decoration: none; font-size: 12px; font-weight: 600;
  transition: all .2s;
}
.footer-pill:hover { background: rgba(201,168,76,0.16); border-color: var(--gold); }