/* Import Godo Maum Font */
@font-face {
  font-family: "GodoMaum";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/godoMaum.woff")
    format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   Theme / Reset
========================================================= */

:root {
  --bg-app: #111;
  --bg-map: #000;
  --bg-panel: #121212;
  --bg-panel-alt: #181818;
  --bg-control: #202020;
  --bg-control-hover: #303030;

  --border: #444;
  --border-strong: #505050;
  --border-panel: #303030;

  --text: #eee;
  --text-muted: #888;
  --text-dim: #777;

  --green-bg: #365d3a;
  --green-border: #69b66e;

  --nav-height: clamp(36px, 6vw, 62px);
  --nav-bottom: calc(7px + env(safe-area-inset-bottom));
  --editor-nav-space: 44px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  background: var(--bg-app);

  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

button {
  font: inherit;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

/* =========================================================
   App / Map
========================================================= */

#editor {
  position: relative;

  width: 100vw;

  height: 100vh;
  height: 100dvh;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: var(--bg-app);

  /* 기본 상태 */
  --editor-panel-height: calc(50px + env(safe-area-inset-bottom));

  --event-palette-height: calc(30px + env(safe-area-inset-bottom));
}

#map-viewport {
  position: relative;

  flex: 1 1 auto;
  min-height: 0;

  overflow: hidden;
  background: var(--bg-map);
}

#canvas {
  display: block;

  width: 100%;
  height: 100%;

  background: var(--bg-map);
  touch-action: none;
}

/* =========================================================
   Level Loading
========================================================= */

#level-loading {
  position: absolute;
  inset: 0;
  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
  color: #aaa;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;

  pointer-events: none;

  opacity: 1;
  transition: opacity 0.15s ease;
}

#level-loading.hidden {
  opacity: 0;
}

/* =========================================================
   Editor Panel / UI Modes
========================================================= */

#editor-panel {
  position: relative;

  flex: 0 0 var(--editor-panel-height);

  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  background: var(--bg-panel);

  border-top: 1px solid var(--border-panel);

  transition: none;
  /*flex-basis 0.18s ease;*/
}

#editor.ui-single,
#editor.ui-advanced {
  --editor-panel-height: clamp(255px, 36dvh, 285px);
}

#editor.ui-multi {
  --editor-panel-height: clamp(100px, 15dvh, 135px);
}

/* 선택 없음 / 재생 */
#editor.ui-empty #editor-panel,
#editor.ui-play #editor-panel {
  flex-basis: calc(50px + env(safe-area-inset-bottom));
}

/* =========================================================
   Main Panel Visibility
========================================================= */

#angle-panel {
  display: none;

  position: relative;

  flex: 1 1 auto;
  min-height: 0;
}

#editor.ui-single #angle-panel,
#editor.ui-advanced #angle-panel,
#editor.ui-multi #angle-panel {
  display: block;
}

#single-angle-editor,
#advanced-angle-editor,
#multi-editor {
  display: none;
}

#editor.ui-single #single-angle-editor {
  display: grid;
}

#editor.ui-advanced #advanced-angle-editor {
  display: grid;
}

#editor.ui-multi #multi-editor {
  display: flex;
}

/* =========================================================
   Editor Tabs
========================================================= */

#editor-tabs {
  display: none;
  align-items: flex-end;

  flex: 0 0 34px;

  width: 100%;

  gap: 3px;
  padding: 4px 8px 0;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  background: var(--bg-panel-alt);
  border-bottom: 1px solid var(--border-panel);
}

#editor-tabs::-webkit-scrollbar {
  display: none;
}

#editor.ui-single #editor-tabs,
#editor.ui-advanced #editor-tabs {
  display: flex;
}

.editor-tab {
  position: relative;

  flex: 0 0 42px;

  height: 29px;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;

  background: #242424;
  color: #999;

  font-size: 13px;

  touch-action: manipulation;
}

.editor-tab:active {
  background: #333;
}

.editor-tab.active {
  z-index: 2;

  height: 31px;

  background: var(--bg-panel);
  color: #fff;

  border-color: #555;
}

.editor-tab-icon {
  line-height: 1;
  pointer-events: none;
}

img.editor-tab-icon {
  display: block;

  width: 21px;
  height: 21px;

  object-fit: contain;

  user-select: none;
  -webkit-user-select: none;
}

.editor-tab-count {
  position: absolute;
  top: 2px;
  right: 2px;

  min-width: 11px;
  height: 11px;
  padding: 0 2px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 6px;

  background: #555;
  color: #fff;

  font-size: 7px;
  font-weight: 700;

  pointer-events: none;
}

/* =========================================================
   Single Tile Editor
========================================================= */

#single-angle-editor {
  width: 100%;
  height: 100%;

  grid-template-columns: 72px 1fr 72px;
  align-items: stretch;

  padding-bottom: var(--editor-nav-space);
}

/* ---------- Left special controls ---------- */

#special-angle-column {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  gap: 7px;
  padding: 9px 0 7px 8px;
}

.editor-control-button {
  width: 100%;
  min-height: 33px;

  padding: 0 4px;

  overflow: hidden;
  white-space: nowrap;

  border: 1px solid var(--border-strong);
  border-radius: 8px;

  background: #222;
  color: var(--text);

  font-size: 10px;
  font-weight: 650;
}

.editor-control-button:active {
  transform: scale(0.95);
  background: var(--bg-control-hover);
}

.editor-control-button.active {
  background: var(--green-bg);
  border-color: var(--green-border);
}

.editor-control-button:disabled {
  opacity: 0.3;
}

/* 360 / MID / Advanced를 같은 간격으로 배치 */
.advanced-button {
  margin-top: 0;
}

/* ---------- Center angle area ---------- */

#quick-angle-area {
  min-width: 0;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding-top: 8px;
}

.angle-panel-title {
  flex: 0 0 19px;

  margin-bottom: 2px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--text-muted);

  font-size: 10px;
  font-weight: 500;
}

/* =========================================================
   Quick Angle Ring
========================================================= */

#quick-angle-ring {
  position: relative;

  width: min(142px, 38vw);
  aspect-ratio: 1;

  flex-shrink: 0;

  margin: 0 auto;

  overflow: visible;
}

.angle-button {
  position: absolute;

  width: 34px;
  height: 34px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translate(-50%, -50%);

  border: 1px solid #515151;
  border-radius: 9px;

  background: var(--bg-control);
  color: var(--text);

  font-size: 18px;
  font-weight: 400;
}

.angle-button:active {
  background: #373737;
}

.angle-button.active {
  background: var(--green-bg);
  border-color: var(--green-border);
}

.angle-button:disabled {
  opacity: 0.25;
}

/* ---------- Main 45° directions ---------- */

.angle-0 {
  left: 88%;
  top: 50%;
}
.angle-45 {
  left: 77%;
  top: 23%;
}
.angle-90 {
  left: 50%;
  top: 12%;
}
.angle-135 {
  left: 23%;
  top: 23%;
}
.angle-180 {
  left: 12%;
  top: 50%;
}
.angle-225 {
  left: 23%;
  top: 77%;
}
.angle-270 {
  left: 50%;
  top: 88%;
}
.angle-315 {
  left: 77%;
  top: 77%;
}

/* ---------- Additional 30° directions ---------- */

.angle-sub-button {
  z-index: 3;

  width: 21px;
  height: 21px;
  min-width: 21px;
  min-height: 21px;

  padding: 0;

  border-radius: 50%;
  border-color: #454545;

  background: #1b1b1b;
  color: #a9a9a9;

  font-size: 7px;
  font-weight: 700;
  line-height: 1;
}

.angle-sub-button:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.9);
  background: #3a3a3a;
}

.angle-sub-button:disabled {
  opacity: 0.22;
}

.angle-30 {
  left: 97%;
  top: 28%;
}
.angle-60 {
  left: 72%;
  top: 3%;
}
.angle-120 {
  left: 28%;
  top: 3%;
}
.angle-150 {
  left: 3%;
  top: 28%;
}
.angle-210 {
  left: 3%;
  top: 72%;
}
.angle-240 {
  left: 28%;
  top: 97%;
}
.angle-300 {
  left: 72%;
  top: 97%;
}
.angle-330 {
  left: 97%;
  top: 72%;
}

/* ---------- Selected tile label ---------- */

#angle-current {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 45px;
  height: 45px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translate(-50%, -50%);

  border: 1px solid #606060;
  border-radius: 50%;

  background: #181818;
  color: #f2f2f2;

  font-size: 12px;
  font-weight: 700;

  white-space: nowrap;
  pointer-events: none;
}

/* ---------- Right delete control ---------- */

#delete-angle-column {
  min-width: 0;

  display: flex;
  flex-direction: column;
  align-items: stretch;

  padding: 9px 8px 7px 0;
}

#delete-floor-button {
  width: 100%;
  min-height: 33px;

  padding: 0 4px;

  border: 1px solid #694949;
  border-radius: 8px;

  background: #292020;
  color: #e2bcbc;

  font-size: 10px;
  font-weight: 650;

  white-space: nowrap;
  touch-action: manipulation;
}

#delete-floor-button:active:not(:disabled) {
  transform: scale(0.95);
  background: #3a2929;
}

#delete-floor-button:disabled {
  opacity: 0.25;
}

/* =========================================================
   Advanced Angle Editor
========================================================= */

#advanced-angle-editor {
  position: relative;

  width: 100%;
  height: 100%;

  grid-template-columns: 1fr;
  grid-template-rows: 38px 45px auto;

  justify-items: center;

  padding-bottom: 0px;

  overflow: hidden;
}

/* ---------- Header ---------- */

#advanced-header {
  width: 100%;

  display: grid;
  grid-template-columns: 46px 1fr 46px;
  align-items: center;

  padding: 4px 8px 0;

  color: #fff;

  font-size: 13px;
  font-weight: 700;
}

#advanced-header > span:nth-child(2) {
  text-align: center;
}

#advanced-back-button {
  width: 34px;
  height: 30px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid var(--border-strong);
  border-radius: 8px;

  background: #222;
  color: #fff;

  font-size: 22px;
}

#advanced-back-button:active {
  transform: scale(0.94);
  background: #333;
}

/* ---------- Angle info ---------- */

#advanced-angle-info {
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 3px;
}

#advanced-angle-value {
  color: #f0f0f0;

  font-size: 17px;
  font-weight: 700;
  line-height: 19px;

  text-align: center;
}

#snap-toggle-button {
  height: 19px;

  padding: 0 8px;

  border: 1px solid var(--border);
  border-radius: 10px;

  background: var(--bg-control);
  color: var(--text-dim);

  font-size: 8px;
  font-weight: 700;
}

#snap-toggle-button.active {
  background: #292929;
  color: #aaa;
  border-color: #555;
}

#snap-toggle-button:active {
  transform: scale(0.95);
}

/* ---------- Dial ---------- */

#angle-dial-wrap {
  position: relative;

  grid-column: 1;
  grid-row: 3;

  justify-self: center;
  align-self: start;

  width: min(118px, 31vw);
  aspect-ratio: 1;

  margin-top: 3px;
}

#angle-dial {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  margin: 0;

  border: 2px solid #555;
  border-radius: 50%;

  background: #181818;

  touch-action: none;

  user-select: none;
  -webkit-user-select: none;
}

#angle-dial::before {
  content: "";

  position: absolute;
  inset: 13%;

  border: 1px dashed #343434;
  border-radius: 50%;

  pointer-events: none;
}

.dial-label {
  position: absolute;
  z-index: 1;

  color: #777;

  font-size: 9px;

  pointer-events: none;
}

.dial-0 {
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

.dial-90 {
  left: 50%;
  top: 3px;
  transform: translateX(-50%);
}

.dial-180 {
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
}

.dial-270 {
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
}

#angle-dial-needle {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;

  width: 37%;
  height: 3px;

  transform-origin: 0 50%;

  border-radius: 3px;

  background: #ddd;

  pointer-events: none;
}

#angle-dial-needle::after {
  content: "";

  position: absolute;
  right: -6px;
  top: 50%;

  width: 12px;
  height: 12px;

  transform: translateY(-50%);

  border-radius: 50%;

  background: #fff;
}

/* 과거 DOM이 남아 있어도 숨김 */
#angle-dial-center,
#snap-label {
  display: none !important;
}

#advanced-add-button {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;

  width: 29px;
  height: 29px;
  min-width: 29px;
  min-height: 29px;

  padding: 0;
  margin: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: translate(-50%, -50%);

  border: 1px solid #606060;
  border-radius: 50%;

  background: #252525;
  color: #f5f5f5;

  font-size: 21px;
  font-weight: 300;
  line-height: 1;

  touch-action: manipulation;
}

#advanced-add-button:active {
  transform: translate(-50%, -50%) scale(0.91);
  background: #373737;
}

#advanced-add-button:disabled {
  opacity: 0.3;
}

/* =========================================================
   Multi Selection
========================================================= */

#multi-editor {
  width: 100%;
  height: 100%;

  padding: 10px 16px /* 46px */;

  align-items: center;
  justify-content: space-between;

  color: #ddd;
}

#multi-selection-count {
  font-size: 12px;
}

#delete-selected-button {
  min-width: 64px;
  height: 34px;

  padding: 0 10px;

  border: 1px solid #755;
  border-radius: 8px;

  background: #332222;
  color: var(--text);

  font-size: 11px;
}

#delete-selected-button:active {
  transform: scale(0.95);
}

/* =========================================================
   Event Editor
========================================================= */

#event-panel {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;

  width: 100%;
  min-height: 0;

  overflow: hidden;

  /*padding-bottom: var(--editor-nav-space);*/
  padding-bottom: 0;

  background: var(--bg-panel);
}

#editor.tab-event #angle-panel {
  display: none !important;
}

#editor.tab-event #event-panel {
  display: flex;
}

/* ---------- Event header ---------- */

#event-screen-header {
  flex: 0 0 48px;

  width: 100%;

  display: flex;
  align-items: center;

  gap: 10px;
  padding: 8px 12px;

  border-bottom: 1px solid #292929;
}

#event-screen-icon {
  flex: 0 0 30px;

  width: 30px;
  height: 30px;

  object-fit: contain;

  user-select: none;
  -webkit-user-select: none;

  pointer-events: none;
}

#event-screen-heading {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 1px;
}

#event-screen-title {
  color: var(--text);

  font-size: 13px;
  font-weight: 700;
}

#event-screen-subtitle {
  color: var(--text-dim);

  font-size: 9px;
}

/* ---------- Event body ---------- */

#event-screen-body {
  flex: 1 1 auto;
  min-height: 0;

  overflow-y: auto;

  padding: 8px 10px 12px;
}

/* ---------- Event cards ---------- */

.event-card {
  width: 100%;

  margin-bottom: 7px;
  padding: 8px 10px;

  border: 1px solid #383838;
  border-radius: 9px;

  background: #1b1b1b;
}

.event-card-header {
  width: 100%;

  min-height: 25px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 6px;
}

.event-card-title {
  min-width: 0;

  margin: 0;

  color: #ddd;

  font-size: 11px;
  font-weight: 700;
}

.event-card-delete {
  flex: 0 0 24px;

  width: 24px;
  height: 24px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #654444;

  border-radius: 7px;

  background: #2b2020;

  color: #d9aaaa;

  font-size: 17px;

  line-height: 1;
}

.event-card-delete:active {
  transform: scale(0.92);

  background: #422a2a;
}

.event-info-row {
  min-height: 23px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border-top: 1px solid #292929;
}

.event-info-label {
  color: var(--text-dim);

  font-size: 9px;
}

.event-info-value {
  color: #ddd;

  font-size: 10px;
  font-weight: 600;
}

/* ---------- Unsupported event list ---------- */

.unsupported-event-notice {
  margin-bottom: 9px;
  padding: 8px 10px;

  border-radius: 8px;

  background: #201c25;
  color: #9b8fa6;

  font-size: 9px;
  line-height: 1.5;
}

.unsupported-event-item {
  min-height: 30px;

  margin-bottom: 4px;
  padding: 0 10px;

  display: flex;
  align-items: center;

  border: 1px solid #37323d;
  border-radius: 7px;

  background: #19171c;
  color: #bbb;

  font-size: 10px;
}

/* =========================================================
   Reusable Event Form Controls
========================================================= */

.event-form-row {
  width: 100%;
  min-height: 42px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border-top: 1px solid #292929;
}

.event-form-label {
  flex: 1 1 auto;
  min-width: 0;

  color: #aaa;

  font-size: 10px;
  line-height: 1.25;
}

/* ---------- Number input ---------- */

.event-form-input {
  flex: 0 0 112px;

  width: 112px;
  height: 30px;

  padding: 0 8px;

  border: 1px solid #484848;
  border-radius: 7px;

  outline: none;

  background: #111;
  color: var(--text);

  /* 모바일 브라우저 자동 확대 방지 */
  font-size: 16px;

  text-align: right;
}

.event-form-input:focus {
  background: #181818;
  border-color: #777;
}

.event-form-input:disabled {
  opacity: 0.3;
}

/* ---------- Select ---------- */

.event-form-select {
  flex: 0 0 130px;

  width: 130px;
  height: 30px;

  padding: 0 7px;

  border: 1px solid #484848;
  border-radius: 7px;

  outline: none;

  background: #181818;
  color: var(--text);

  font-size: 16px;
}

/* ---------- Segmented switch ---------- */

.event-segmented {
  flex: 0 0 auto;

  height: clamp(40px, 6vw, 52px);

  display: flex;

  padding: 3px;

  border: 1px solid var(--border);

  border-radius: 11px;

  background: #111;
}

.event-segment-button {
  min-width: clamp(88px, 15vw, 130px);

  height: calc(100% - 2px);

  padding: 0 clamp(12px, 2vw, 18px);

  border: none;

  border-radius: 8px;

  background: transparent;

  color: var(--text-dim);

  font-size: clamp(13px, 2vw, 18px);

  font-weight: 700;

  white-space: nowrap;
}

.event-segment-button.active {
  background: #3b3b3b;
  color: #fff;
}

.event-segment-button:active {
  background: #4a4a4a;
}

/* =========================================================
   Floating Bottom Navigation
========================================================= */

#bottom-nav {
  position: absolute;

  left: 50%;
  bottom: var(--nav-bottom);

  z-index: 2000;

  /*
    390px급 휴대폰
      → 약 184px

    850px급 화면
      → 약 290px

    대형 화면
      → 최대 360px
  */
  width: clamp(184px, 34vw, 360px);

  height: var(--nav-height);

  padding: clamp(3px, 0.5vw, 6px) clamp(4px, 0.6vw, 8px);

  display: grid;

  /*
    px 고정 대신 비율 배치
  */
  grid-template-columns:
    0.72fr
    1fr
    1fr
    1fr
    0.72fr;

  align-items: center;

  justify-items: center;

  transform: translateX(-50%);

  border: 1px solid var(--border);

  border-radius: calc(var(--nav-height) / 2);

  background: rgba(28, 28, 28, 0.94);

  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.42);

  transition: bottom 0.18s ease;
}

/* ---------- Ctrl / Shift ---------- */

.modifier-button {
  width: 92%;

  height: calc(var(--nav-height) - 8px);

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  border-radius: clamp(11px, 1.7vw, 16px);

  background: transparent;

  color: #d0d0d0;

  font-size: clamp(9px, 1.4vw, 15px);

  font-weight: 700;
}

.modifier-button:active {
  background: #333;
}

.modifier-button.active {
  background: #384d3a;
  color: #b8e7bc;
}

.modifier-button:disabled {
  opacity: 0.28;
}

/* ---------- Play ---------- */

#play-button {
  width: calc(var(--nav-height) - 8px);

  height: calc(var(--nav-height) - 8px);

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #4e4e4e;

  border-radius: clamp(10px, 1.5vw, 16px);

  background: #272727;

  color: #fff;

  font-size: clamp(14px, 2.3vw, 24px);

  font-weight: 700;
}

#play-button:active {
  transform: scale(0.93);
  background: #353535;
}

/* ---------- Previous / Next ---------- */

.floor-nav-button {
  width: 92%;

  height: calc(var(--nav-height) - 8px);

  padding: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border: none;

  border-radius: clamp(10px, 1.5vw, 15px);

  background: transparent;

  color: #c8c8c8;

  font-size: clamp(22px, 3vw, 34px);

  font-weight: 400;

  line-height: 1;

  user-select: none;

  -webkit-user-select: none;

  touch-action: manipulation;
}

.floor-nav-button:active:not(:disabled) {
  transform: scale(0.9);
  background: #333;
}

.floor-nav-button:disabled {
  opacity: 0.2;
}

#editor.ui-play .modifier-button {
  opacity: 0.28;
}

#editor.ui-play .floor-nav-button {
  opacity: 0.2;
}

/* =========================================================
   Responsive: Short Screens
========================================================= */

@media (max-height: 650px) {
  #editor.ui-single #editor-panel,
  #editor.ui-advanced #editor-panel {
    flex-basis: clamp(185px, 32dvh, 215px);
  }

  #single-angle-editor {
    padding-bottom: 0px;
  }

  #quick-angle-area {
    padding-top: 5px;
  }

  #quick-angle-ring {
    width: min(126px, 35vw);
  }

  .angle-button {
    width: 31px;
    height: 31px;

    font-size: 16px;
  }

  .angle-sub-button {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;

    font-size: 6px;
  }

  #angle-current {
    width: 40px;
    height: 40px;

    font-size: 11px;
  }

  #angle-dial-wrap {
    width: min(106px, 29vw);
  }

  #quick-angle-area {
    padding-top: 5px;
  }

  #advanced-add-button {
    width: 27px;
    height: 27px;
    min-width: 27px;
    min-height: 27px;

    font-size: 19px;
  }
}

/* =========================================================
   Responsive: Narrow Screens
========================================================= */

@media (max-width: 360px) {
  #single-angle-editor {
    grid-template-columns: 64px 1fr 64px;
  }

  #special-angle-column {
    padding-left: 6px;
  }

  #quick-angle-ring {
    width: min(128px, 38vw);
  }

  .editor-control-button {
    font-size: 9px;
  }

  .angle-sub-button {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;

    font-size: 6px;
  }

  #bottom-nav {
    width: 176px;
    grid-template-columns: 26px 39px 40px 39px 26px;
  }
}

/* 단일 선택 / Advanced */

#editor.ui-single,
#editor.ui-advanced {
  --editor-panel-height: clamp(210px, 36dvh, 270px);
}

/* 다중 선택 */

#editor.ui-multi {
  --editor-panel-height: clamp(100px, 15dvh, 135px);
}

/* 선택 없음 / 재생 */

#editor.ui-empty,
#editor.ui-play {
  --editor-panel-height: calc(50px + env(safe-area-inset-bottom));
}

#editor.ui-single #bottom-nav,
#editor.ui-advanced #bottom-nav,
#editor.ui-multi #bottom-nav {
  bottom: calc(var(--editor-panel-height) + 7px);
}

/* =========================================================
   Event Palette
========================================================= */

#event-palette {
  display: none;

  flex: 0 0 var(--event-palette-height);

  width: 100%;

  min-width: 0;

  background: #161616;

  border-top: 1px solid var(--border-panel);
}

/*
  타일 하나를 선택하여
  편집 패널이 열린 경우에만 표시
*/

#editor.ui-single #event-palette,
#editor.ui-advanced #event-palette {
  display: flex;
}

/* 가로 스크롤 영역 */

#event-palette-list {
  flex: 1 1 auto;

  min-width: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 1px 8px calc(1px + env(safe-area-inset-bottom));

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-width: none;

  overscroll-behavior-x: contain;
}

#event-palette-list::-webkit-scrollbar {
  display: none;
}

/* 개별 이벤트 버튼 */

.event-palette-button {
  position: relative;

  flex: 0 0 28px;

  width: 28px;

  height: 28px;

  min-width: 28px;

  min-height: 28px;

  padding: 2px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #404040;

  border-radius: 7px;

  background: #222;

  touch-action: manipulation;
}

.event-palette-button:active:not(:disabled) {
  transform: scale(0.93);

  background: #333;
}

/*
  Twirl / Pause처럼
  이미 하나 존재하여
  더 추가할 수 없는 이벤트
*/

.event-palette-button:disabled {
  opacity: 0.25;
}

/* 아이콘 */

.event-palette-icon {
  width: 22px;

  height: 22px;

  display: block;

  object-fit: contain;

  pointer-events: none;

  user-select: none;

  -webkit-user-select: none;
}

/* =========================================================
   Advanced layout fix
   반드시 CSS 맨 마지막에 추가
========================================================= */

/*
  Advanced는 일반 타일 편집보다
  세로 공간을 조금 더 확보한다.
*/
#editor.ui-advanced {
  --editor-panel-height: calc(
    clamp(235px, 38dvh, 275px) + env(safe-area-inset-bottom)
  );
}

/*
  기존:
    38px
    45px
    auto

  수정:
    제목 영역과 0° 영역 사이를 압축.
*/
#advanced-angle-editor {
  grid-template-rows:
    30px
    36px
    minmax(0, 1fr);

  padding-bottom: 0;
}

/* =========================
   Advanced 제목
========================= */

#advanced-header {
  padding: 0 8px;

  min-height: 30px;
}

/*
  뒤로가기 버튼도
  세로 공간에 맞게 약간 축소.
*/
#advanced-back-button {
  width: 31px;

  height: 28px;

  font-size: 20px;
}

/* =========================
   0° + SNAP
========================= */

#advanced-angle-info {
  gap: 0;

  justify-content: flex-start;

  padding-top: 1px;
}

#advanced-angle-value {
  font-size: 15px;

  line-height: 17px;
}

#snap-toggle-button {
  height: 18px;

  margin-top: 0;
}

/* =========================
   Dial
========================= */

#angle-dial-wrap {
  width: min(102px, 28vw);

  margin-top: 0;

  align-self: start;
}

/* =========================
   짧은 화면
========================= */

@media (max-height: 650px) {
  /*
    기존 CSS에 있는

    #editor.ui-advanced #editor-panel {
      flex-basis: 185~215px;
    }

    를 무효화한다.
  */

  #editor.ui-advanced {
    --editor-panel-height: calc(
      clamp(235px, 40dvh, 255px) + env(safe-area-inset-bottom)
    );
  }

  #editor.ui-advanced #editor-panel {
    flex-basis: var(--editor-panel-height);
  }

  #angle-dial-wrap {
    width: min(98px, 27vw);
  }
}

/* =========================================================
   Level Toolbar
========================================================= */

#level-toolbar {
  position: absolute;

  top: calc(8px + env(safe-area-inset-top));

  left: 8px;
  right: 8px;

  z-index: 80;

  height: 36px;

  display: grid;

  grid-template-columns:
    36px
    minmax(0, 1fr)
    36px;

  align-items: center;

  gap: 8px;

  pointer-events: none;
}

/* 프로젝트 설정 버튼 */

#project-settings-button {
  width: 36px;
  height: 36px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #484848;

  border-radius: 10px;

  background: rgba(25, 25, 25, 0.92);

  color: #ddd;

  font-size: 18px;

  pointer-events: auto;
}

#project-settings-button:active {
  transform: scale(0.94);

  background: #303030;
}

/* 곡 제목 */

#level-title {
  min-width: 0;

  justify-self: center;

  max-width: min(72vw, 520px);

  padding: 6px 12px;

  overflow: hidden;

  white-space: nowrap;
  text-overflow: ellipsis;

  /*
  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-radius:
    10px;

    

  background:
    rgba(
      18,
      18,
      18,
      0.84
    );
    */

  color: #eee;

  font-family:
    "GodoMaum", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR",
    sans-serif;

  font-size: 40px;

  font-weight: 400;

  text-align: center;
}

@media (max-width: 768px) {
  #level-title {
    font-size: 20px !important;
  }
}

#level-title,
#level-title * {
  font-family:
    "GodoMaum", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR",
    sans-serif;
}

.level-toolbar-spacer {
  width: 36px;
  height: 36px;
}

/* =========================================================
   Project Settings Sheet
========================================================= */

.project-settings-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: calc(12px + env(safe-area-inset-top)) 12px
    calc(12px + env(safe-area-inset-bottom));

  background: rgba(0, 0, 0, 0.68);
}

.project-settings-overlay[hidden] {
  display: none !important;
}

.project-settings-sheet {
  width: min(430px, 100%);
  max-height: min(760px, 100%);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border: 1px solid #4a4a4a;
  border-radius: 16px;

  background: #151515;
  color: var(--text);

  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.project-settings-header {
  flex: 0 0 50px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 0 12px 0 16px;

  border-bottom: 1px solid #303030;
}

.project-settings-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
}

.project-settings-close {
  width: 34px;
  height: 34px;
  padding: 0;

  border: 1px solid #444;
  border-radius: 10px;

  background: #222;
  color: #ddd;

  font-size: 23px;
  line-height: 1;
}

.project-settings-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 10px 12px 18px;
}

.settings-section {
  margin-bottom: 12px;
  padding: 10px;

  border: 1px solid #343434;
  border-radius: 12px;

  background: #1a1a1a;
}

.settings-section h3 {
  margin: 0 0 9px;

  color: #eee;
  font-size: 12px;
  font-weight: 750;
}

.settings-field {
  width: 100%;
  min-height: 48px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  gap: 5px;

  border-top: 1px solid #292929;
}

.settings-section h3 + .settings-field,
.settings-section h3 + .settings-action-row {
  border-top: none;
}

.settings-field > span:first-child {
  color: #aaa;
  font-size: 10px;
  font-weight: 600;
}

.settings-field input,
.settings-file-control input {
  width: 100%;
  height: 32px;

  padding: 0 9px;

  border: 1px solid #4a4a4a;
  border-radius: 8px;
  outline: none;

  background: #101010;
  color: #eee;

  font-size: 16px;
}

.settings-select {
  width: 100%;
  height: 32px;

  padding: 0 9px;

  border: 1px solid #4a4a4a;
  border-radius: 8px;
  outline: none;

  background: #101010;
  color: #eee;

  font-size: 16px;
}

.settings-select:focus {
  border-color: #777;
  background: #171717;
}

.settings-field input:focus,
.settings-file-control input:focus {
  border-color: #777;
  background: #171717;
}

.settings-file-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 6px;
}

.settings-file-control button,
.settings-secondary-button {
  height: 32px;

  padding: 0 10px;

  border: 1px solid #4a4a4a;
  border-radius: 8px;

  background: #252525;
  color: #eee;

  font-size: 10px;
  font-weight: 650;
}

.settings-file-control button:active,
.settings-secondary-button:active {
  transform: scale(0.96);
  background: #333;
}

.settings-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;

  padding-bottom: 8px;
}

.settings-download-button {
  width: 100%;
  height: 34px;

  margin-bottom: 8px;
  padding: 0 12px;

  border: 1px solid #566c58;
  border-radius: 8px;

  background: #263329;
  color: #d9eadb;

  font-size: 10px;
  font-weight: 700;
}

.settings-download-button:active {
  transform: scale(0.98);
  background: #314336;
}

.settings-number-unit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 5px;
}

.settings-number-unit > span {
  color: #888;
  font-size: 10px;
  text-align: center;
}

.settings-file-status {
  min-height: 17px;
  margin-top: 4px;

  color: #777;
  font-size: 9px;
  line-height: 1.4;

  overflow-wrap: anywhere;
}

.settings-file-status.ok {
  color: #8dbd91;
}

.settings-file-status.warning {
  color: #c9a87a;
}

.settings-file-status.error {
  color: #d28e8e;
}

.settings-local-note {
  margin: 4px 3px 0;

  color: #6f6f6f;
  font-size: 9px;
  line-height: 1.5;
}

#level-load-help-overlay .project-settings-scroll {
  padding: 14px 16px 18px;
}

#level-load-help-overlay .settings-local-note {
  margin: 10px 2px 0;

  color: #d5d5d5;
  font-size: 14px;
  line-height: 1.75;
}

#level-load-help-overlay .editor-setting-toggle {
  margin-top: 18px;
  margin-bottom: 26px;
  padding: 12px 12px;

  border: 1px solid #3a3a3a;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.02);
  color: #ededed;

  font-size: 15px;
  font-weight: 650;

  cursor: pointer;
}

#level-load-help-overlay .level-load-help-action-row {
  margin-top: 4px;
}

#level-load-help-overlay .editor-setting-toggle input {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  margin: 0;

  appearance: none;
  -webkit-appearance: none;

  border: 2px solid #5d5d5d;
  border-radius: 6px;

  background: #101010 center / 12px 12px no-repeat;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);

  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

#level-load-help-overlay .editor-setting-toggle input:checked {
  border-color: #7ecb8d;
  background-color: #7ecb8d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4L4.7 9.1L10 3.8' fill='none' stroke='%23101010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

@media (max-width: 520px) {
  .project-settings-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .project-settings-sheet {
    width: 100%;
    max-height: min(86dvh, 760px);

    border-left: none;
    border-right: none;
    border-bottom: none;

    border-radius: 18px 18px 0 0;
  }
}

/* =========================================================
   Large Portrait UI
   Tablet / Large portrait screen
========================================================= */

@media (min-width: 600px) and (orientation: portrait) {
  /* =====================================================
     Panel
  ===================================================== */

  #editor.ui-single {
    --editor-panel-height: clamp(440px, 39dvh, 560px);
  }

  #editor.ui-advanced {
    --editor-panel-height: clamp(450px, 40dvh, 580px);
  }

  #editor {
    --event-palette-height: calc(68px + env(safe-area-inset-bottom));

    --nav-height: 54px;
  }

  /* =====================================================
     Floating Navigation
     ‹ Ctrl ▶ Shift ›
  ===================================================== */

  #bottom-nav {
    width: clamp(270px, 38vw, 360px);

    padding: 5px 7px;

    grid-template-columns:
      0.72fr
      1fr
      1fr
      1fr
      0.72fr;
  }

  .modifier-button {
    height: 44px;

    font-size: 14px;
  }

  #play-button {
    width: 44px;

    height: 44px;

    border-radius: 14px;

    font-size: 22px;
  }

  .floor-nav-button {
    height: 44px;

    font-size: 32px;
  }

  /* =====================================================
     Tabs
  ===================================================== */

  #editor-tabs {
    flex-basis: 68px;

    gap: 7px;

    padding: 7px 14px 0;
  }

  .editor-tab {
    flex: 0 0 84px;

    height: 59px;

    border-radius: 15px 15px 0 0;

    font-size: 18px;
  }

  .editor-tab.active {
    height: 62px;
  }

  img.editor-tab-icon {
    width: 43px;

    height: 43px;
  }

  .editor-tab-count {
    top: 4px;

    right: 4px;

    min-width: 18px;

    height: 18px;

    padding: 0 4px;

    border-radius: 10px;

    font-size: 10px;
  }

  /* =====================================================
     Single Angle Editor
  ===================================================== */

  #single-angle-editor {
    grid-template-columns:
      165px
      1fr
      165px;

    padding-bottom: 66px;
  }

  #special-angle-column {
    gap: 15px;

    padding: 18px 0 15px 18px;
  }

  #delete-angle-column {
    padding: 18px 18px 15px 0;
  }

  .editor-control-button,
  #delete-floor-button {
    min-height: 74px;

    border-radius: 16px;

    font-size: 20px;
  }

  /* =====================================================
     Quick Angle Ring
  ===================================================== */

  .angle-panel-title {
    flex-basis: 39px;

    margin-bottom: 3px;

    font-size: 18px;
  }

  #quick-angle-area {
    padding-top: 15px;
  }

  #quick-angle-ring {
    width: min(330px, 46vw);
  }

  /*
    0 / 45 / 90 ...
  */

  .angle-button {
    width: 74px;

    height: 74px;

    border-radius: 17px;

    font-size: 39px;
  }

  /*
    30 / 60 / 120 ...
  */

  .angle-sub-button {
    width: 43px;

    height: 43px;

    min-width: 43px;

    min-height: 43px;

    border-width: 1px;

    font-size: 14px;
  }

  /*
    중앙 #N
  */

  #angle-current {
    width: 100px;

    height: 100px;

    font-size: 23px;
  }

  /* =====================================================
     Event Palette
  ===================================================== */

  #event-palette-list {
    gap: 13px;

    padding: 4px 14px calc(4px + env(safe-area-inset-bottom));
  }

  .event-palette-button {
    flex: 0 0 60px;

    width: 60px;

    height: 60px;

    min-width: 60px;

    min-height: 60px;

    padding: 5px;

    border-radius: 15px;
  }

  .event-palette-icon {
    width: 47px;

    height: 47px;
  }

  /* =====================================================
     Advanced
  ===================================================== */

  #advanced-angle-editor {
    grid-template-rows:
      48px
      58px
      minmax(0, 1fr);
  }

  #advanced-header {
    min-height: 48px;

    grid-template-columns:
      70px
      1fr
      70px;

    padding: 0 14px;

    font-size: 20px;
  }

  #advanced-back-button {
    width: 48px;

    height: 45px;

    border-radius: 13px;

    font-size: 31px;
  }

  /* ---------- Angle value ---------- */

  #advanced-angle-info {
    gap: 3px;

    padding-top: 2px;
  }

  #advanced-angle-value {
    font-size: 24px;

    line-height: 27px;
  }

  #snap-toggle-button {
    height: 29px;

    padding: 0 13px;

    border-radius: 15px;

    font-size: 12px;
  }

  /* =====================================================
     Advanced Dial
  ===================================================== */

  #angle-dial-wrap {
    width: min(165px, 25vw);

    margin-top: 4px;
  }

  #angle-dial {
    border-width: 3px;
  }

  .dial-label {
    font-size: 14px;
  }

  #angle-dial-needle {
    height: 5px;

    border-radius: 5px;
  }

  #angle-dial-needle::after {
    right: -9px;

    width: 18px;

    height: 18px;
  }

  #advanced-add-button {
    width: 47px;

    height: 47px;

    min-width: 47px;

    min-height: 47px;

    border-radius: 50%;

    font-size: 33px;
  }

  /* =====================================================
     Event editor
  ===================================================== */

  #event-screen-header {
    flex-basis: 70px;

    gap: 15px;

    padding: 11px 18px;
  }

  #event-screen-icon {
    flex-basis: 45px;

    width: 45px;

    height: 45px;
  }

  #event-screen-title {
    font-size: 18px;
  }

  #event-screen-subtitle {
    font-size: 12px;
  }

  #event-screen-body {
    padding: 12px 15px 18px;
  }

  /* ---------- Event cards ---------- */

  .event-card {
    margin-bottom: 11px;

    padding: 12px 15px;

    border-radius: 13px;
  }

  .event-card-title {
    font-size: 16px;
  }

  .event-card-delete {
    width: 36px;

    height: 36px;

    flex-basis: 36px;

    border-radius: 10px;

    font-size: 25px;
  }

  /* =====================================================
     Event inputs
  ===================================================== */

  .event-form-row {
    min-height: 60px;

    gap: 18px;
  }

  .event-form-label {
    font-size: 14px;
  }

  .event-form-input {
    flex-basis: 165px;

    width: 165px;

    height: 44px;

    padding: 0 12px;

    border-radius: 10px;

    font-size: 18px;
  }

  .event-form-select {
    flex-basis: 190px;

    width: 190px;

    height: 44px;

    border-radius: 10px;

    font-size: 18px;
  }

  /* =====================================================
     Multi Selection
  ===================================================== */

  #multi-editor {
    padding: 15px 24px;
  }

  #multi-selection-count {
    font-size: 17px;
  }

  #delete-selected-button {
    min-width: 96px;

    height: 50px;

    border-radius: 12px;

    font-size: 16px;
  }
}
/* =========================================================
   Large Portrait - Global UI / Settings Scale Fix
   Add after the existing Large Portrait UI block.
========================================================= */

@media (min-width: 600px) and (orientation: portrait) {
  /* =====================================================
     Top toolbar
  ===================================================== */

  #level-toolbar {
    top: calc(12px + env(safe-area-inset-top));

    left: 14px;
    right: 14px;

    height: 58px;

    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px;

    gap: 12px;
  }

  #project-settings-button {
    width: 58px;
    height: 58px;

    border-radius: 16px;

    font-size: 28px;

    border-width: 1px;
  }

  #level-title {
    max-width: min(72vw, 700px);

    padding: 10px 18px;

    font-size: 18px;
    line-height: 1.25;
    font-weight: 700;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  }

  .level-toolbar-spacer {
    width: 58px;
    height: 58px;
  }

  /* =====================================================
     Floating navigation
     Existing large UI was still visually small compared
     with the enlarged editor controls.
  ===================================================== */

  #editor {
    --nav-height: 64px;
  }

  #bottom-nav {
    width: clamp(320px, 44vw, 430px);

    padding: 6px 9px;
  }

  .modifier-button {
    height: 52px;
    font-size: 16px;
  }

  #play-button {
    width: 52px;
    height: 52px;

    border-radius: 16px;

    font-size: 26px;
  }

  .floor-nav-button {
    height: 52px;
    font-size: 38px;
  }

  /* =====================================================
     Project settings overlay
  ===================================================== */

  .project-settings-overlay {
    padding: calc(26px + env(safe-area-inset-top)) 24px
      calc(26px + env(safe-area-inset-bottom));
  }

  .project-settings-sheet {
    width: min(680px, calc(100vw - 48px));

    max-height: min(86dvh, 980px);

    border-radius: 22px;

    border-width: 1px;

    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
  }

  /* =====================================================
     Settings header
  ===================================================== */

  .project-settings-header {
    flex-basis: 72px;

    padding: 0 18px 0 22px;
  }

  .project-settings-header h2 {
    font-size: 23px;
    font-weight: 780;
  }

  .project-settings-close {
    width: 48px;
    height: 48px;

    border-radius: 14px;

    font-size: 31px;
  }

  /* =====================================================
     Settings scroll / sections
  ===================================================== */

  .project-settings-scroll {
    padding: 16px 18px 26px;
  }

  .settings-section {
    margin-bottom: 18px;

    padding: 16px;

    border-radius: 16px;
  }

  .settings-section h3 {
    margin-bottom: 13px;

    font-size: 17px;
  }

  /* =====================================================
     Settings fields
  ===================================================== */

  .settings-field {
    min-height: 69px;

    gap: 8px;
  }

  .settings-field > span:first-child {
    font-size: 14px;
  }

  .settings-field input,
  .settings-file-control input,
  .settings-select {
    height: 46px;

    padding: 0 13px;

    border-radius: 11px;

    font-size: 18px;
  }

  .settings-file-control {
    grid-template-columns:
      minmax(0, 1fr)
      84px;

    gap: 9px;
  }

  .settings-file-control button,
  .settings-secondary-button {
    height: 46px;

    padding: 0 15px;

    border-radius: 11px;

    font-size: 14px;
  }

  /* =====================================================
     Level file actions / download
  ===================================================== */

  .settings-action-row {
    gap: 10px;

    padding-bottom: 12px;
  }

  .settings-download-button {
    height: 48px;

    margin-bottom: 12px;

    border-radius: 11px;

    font-size: 14px;
  }

  /* =====================================================
     Unit fields / statuses
  ===================================================== */

  .settings-number-unit {
    grid-template-columns:
      minmax(0, 1fr)
      50px;

    gap: 8px;
  }

  .settings-number-unit > span {
    font-size: 14px;
  }

  .settings-file-status {
    min-height: 24px;

    margin-top: 6px;

    font-size: 12px;
    line-height: 1.5;
  }

  .settings-local-note {
    margin: 8px 6px 0;

    font-size: 12px;
    line-height: 1.6;
  }
}

/* =========================================================
   Medium portrait screens
   Avoid a sudden jump from phone-size settings to tablet UI.
========================================================= */

@media (min-width: 521px) and (max-width: 599px) and (orientation: portrait) {
  #level-toolbar {
    height: 44px;

    grid-template-columns:
      44px
      minmax(0, 1fr)
      44px;
  }

  #project-settings-button {
    width: 44px;
    height: 44px;

    border-radius: 12px;

    font-size: 22px;
  }

  #level-title {
    font-size: 15px;
  }

  .level-toolbar-spacer {
    width: 44px;
    height: 44px;
  }

  .project-settings-sheet {
    width: min(560px, calc(100vw - 28px));
  }
}

/* =========================================================
   Responsive Typography
   Large Portrait
========================================================= */

@media (min-width: 600px) and (orientation: portrait) {
  /* =====================================================
     Responsive Font Scale

     약 780px 폭 기준:
     xs ≈ 17px
     sm ≈ 19.5px
     md ≈ 22px
     lg ≈ 25px
     xl ≈ 29.5px

     가장 큰 글자는 최대 30px.
  ===================================================== */

  #editor,
  .project-settings-overlay {
    --font-xs: clamp(14px, 2.2vw, 18px);

    --font-sm: clamp(16px, 2.5vw, 20px);

    --font-md: clamp(18px, 2.8vw, 23px);

    --font-lg: clamp(22px, 3.2vw, 27px);

    --font-xl: clamp(26px, 3.8vw, 30px);
  }

  /* =====================================================
     Top Toolbar
  ===================================================== */

  #level-toolbar {
    height: 68px;

    grid-template-columns:
      62px
      minmax(0, 1fr)
      62px;

    gap: 14px;
  }

  #project-settings-button {
    width: 62px;
    height: 62px;

    border-radius: 16px;

    font-size: clamp(27px, 3.8vw, 30px);
  }

  #level-title {
    max-width: min(76vw, 720px);

    padding: 10px 18px;

    font-size: var(--font-lg);

    font-weight: 750;
  }

  .level-toolbar-spacer {
    width: 62px;
    height: 62px;
  }

  /* =====================================================
     Settings Window
  ===================================================== */

  .project-settings-sheet {
    width: min(700px, calc(100% - 32px));

    border-radius: 22px;
  }

  /* ---------- Main title ---------- */

  .project-settings-header {
    flex-basis: 78px;

    padding: 0 20px 0 24px;
  }

  .project-settings-header h2 {
    font-size: var(--font-xl);

    font-weight: 800;
  }

  .project-settings-close {
    width: 52px;
    height: 52px;

    border-radius: 14px;

    font-size: 30px;
  }

  /* =====================================================
     Settings Layout
  ===================================================== */

  .project-settings-scroll {
    padding: 18px 20px 28px;
  }

  .settings-section {
    margin-bottom: 20px;

    padding: 18px;

    border-radius: 17px;
  }

  /*
    "레벨 파일"
    "곡 설정"
    "레벨 정보"
  */

  .settings-section h3 {
    margin: 0 0 15px;

    font-size: var(--font-lg);

    line-height: 1.25;

    font-weight: 800;
  }

  /* =====================================================
     Settings Labels
  ===================================================== */

  .settings-field {
    min-height: 78px;

    gap: 9px;
  }

  /*
    곡 파일
    BPM
    음량
    오프셋
    작곡가
    곡명
    만든이
  */

  .settings-field > span:first-child {
    font-size: var(--font-sm);

    line-height: 1.3;

    font-weight: 650;
  }

  /* =====================================================
     Inputs
  ===================================================== */

  .settings-field input,
  .settings-file-control input,
  .settings-select {
    height: 54px;

    padding: 0 15px;

    border-radius: 12px;

    font-size: var(--font-md);
  }

  /* =====================================================
     Song file picker
  ===================================================== */

  .settings-file-control {
    grid-template-columns:
      minmax(0, 1fr)
      100px;

    gap: 10px;
  }

  .settings-file-control button {
    height: 54px;

    padding: 0 14px;

    border-radius: 12px;

    font-size: var(--font-sm);

    font-weight: 750;
  }

  /* =====================================================
     Level buttons
  ===================================================== */

  .settings-action-row {
    gap: 12px;

    padding-bottom: 13px;
  }

  .settings-secondary-button {
    height: 54px;

    padding: 0 16px;

    border-radius: 12px;

    font-size: var(--font-sm);

    font-weight: 750;
  }

  .settings-download-button {
    height: 56px;

    margin-bottom: 13px;

    padding: 0 18px;

    border-radius: 12px;

    font-size: var(--font-sm);

    font-weight: 800;
  }

  /* =====================================================
     Units
  ===================================================== */

  .settings-number-unit {
    grid-template-columns:
      minmax(0, 1fr)
      58px;

    gap: 9px;
  }

  .settings-number-unit > span {
    font-size: var(--font-sm);

    font-weight: 600;
  }

  /* =====================================================
     File status / explanation
  ===================================================== */

  .settings-file-status {
    min-height: 26px;

    margin-top: 8px;

    font-size: var(--font-xs);

    line-height: 1.45;
  }

  .settings-local-note {
    margin: 10px 6px 0;

    font-size: var(--font-xs);

    line-height: 1.55;
  }

  /* =====================================================
     Floating Navigation
  ===================================================== */

  .modifier-button {
    font-size: var(--font-sm);
  }

  #play-button {
    font-size: var(--font-lg);
  }

  .floor-nav-button {
    font-size: 30px;
  }

  /* =====================================================
     Main Tile Editor
  ===================================================== */

  .editor-control-button,
  #delete-floor-button {
    font-size: var(--font-md);
  }

  .angle-panel-title {
    font-size: var(--font-sm);

    font-weight: 600;
  }

  #angle-current {
    font-size: var(--font-lg);
  }

  .angle-button {
    font-size: 30px;
  }

  .angle-sub-button {
    font-size: var(--font-xs);
  }

  /* =====================================================
     Tabs
  ===================================================== */

  .editor-tab {
    font-size: var(--font-md);
  }

  .editor-tab-count {
    font-size: var(--font-xs);
  }

  /* =====================================================
     Advanced
  ===================================================== */

  #advanced-header {
    font-size: var(--font-lg);
  }

  #advanced-angle-value {
    font-size: var(--font-xl);

    line-height: 1.1;
  }

  #snap-toggle-button {
    font-size: var(--font-sm);
  }

  .dial-label {
    font-size: var(--font-sm);
  }

  #advanced-back-button {
    font-size: 30px;
  }

  #advanced-add-button {
    font-size: 30px;
  }

  /* =====================================================
     Event Editor
  ===================================================== */

  #event-screen-title {
    font-size: var(--font-lg);
  }

  #event-screen-subtitle {
    font-size: var(--font-sm);
  }

  .event-card-title {
    font-size: var(--font-md);
  }

  .event-card-delete {
    font-size: 28px;
  }

  .event-form-label {
    font-size: var(--font-sm);
  }

  .event-form-input,
  .event-form-select {
    font-size: var(--font-md);
  }

  .event-info-label {
    font-size: var(--font-sm);
  }

  .event-info-value {
    font-size: var(--font-md);
  }

  .unsupported-event-notice,
  .unsupported-event-item {
    font-size: var(--font-sm);
  }

  /* =====================================================
     Multi Selection
  ===================================================== */

  #multi-selection-count {
    font-size: var(--font-md);
  }

  #delete-selected-button {
    font-size: var(--font-md);
  }
}

/* =========================================================
   FINAL: Responsive Advanced Editor + Delete Action
   Keep this block at the very end of the stylesheet.
========================================================= */

/*
  Advanced needs more vertical space than the compact tile editor.
  The dial scales with both viewport width and panel height.
*/
#editor.ui-advanced {
  --editor-panel-height: clamp(300px, 42dvh, 380px);
}

#advanced-angle-editor {
  grid-template-rows:
    clamp(38px, 5.5dvh, 48px)
    clamp(48px, 6.5dvh, 60px)
    minmax(0, 1fr);

  padding: 0 10px 6px;

  overflow: hidden;
}

/* Back | Advanced | Delete */
#advanced-header {
  width: 100%;

  grid-template-columns:
    clamp(46px, 13vw, 60px)
    minmax(0, 1fr)
    clamp(74px, 21vw, 96px);

  gap: 8px;

  min-height: 0;

  padding: 4px 0 0;
}

#advanced-back-button {
  justify-self: start;
}

#advanced-delete-floor-button {
  justify-self: end;

  width: clamp(70px, 19vw, 92px);

  height: clamp(30px, 5dvh, 38px);

  padding: 0 8px;

  border: 1px solid #694949;

  border-radius: 9px;

  background: #292020;

  color: #e2bcbc;

  font-size: clamp(10px, 2.8vw, 14px);

  font-weight: 700;

  white-space: nowrap;
}

#advanced-delete-floor-button:active:not(:disabled) {
  transform: scale(0.95);

  background: #3a2929;
}

#advanced-delete-floor-button:disabled {
  opacity: 0.25;
}

/* Give the angle readout enough room without wasting dial space. */
#advanced-angle-info {
  min-height: 0;

  gap: clamp(2px, 0.5dvh, 5px);

  justify-content: center;

  padding-top: 0;
}

/*
  Phone portrait:
  ~150-200 px dial.

  Larger portrait:
  overridden below to ~240-300 px.
*/
#angle-dial-wrap {
  width: clamp(150px, 42vw, 210px);

  max-height: 100%;

  margin-top: clamp(2px, 0.8dvh, 8px);

  align-self: start;
}

/* Dial details scale with the dial itself. */
.dial-label {
  font-size: clamp(10px, 2.6vw, 15px);
}

#angle-dial-needle {
  height: clamp(3px, 0.6vw, 5px);
}

#angle-dial-needle::after {
  right: clamp(-9px, -1.5vw, -6px);

  width: clamp(12px, 3.5vw, 18px);

  height: clamp(12px, 3.5vw, 18px);
}

#advanced-add-button {
  width: clamp(36px, 10vw, 50px);

  height: clamp(36px, 10vw, 50px);

  min-width: clamp(36px, 10vw, 50px);

  min-height: clamp(36px, 10vw, 50px);

  font-size: clamp(24px, 7vw, 32px);
}

/* Very short screens: preserve a usable dial without clipping. */
@media (max-height: 650px) {
  #editor.ui-advanced {
    --editor-panel-height: clamp(255px, 46dvh, 310px);
  }

  #angle-dial-wrap {
    width: clamp(130px, 34vw, 170px);
  }
}

/* Large portrait / tablet-sized UI. */
@media (min-width: 600px) and (orientation: portrait) {
  #editor.ui-advanced {
    --editor-panel-height: clamp(520px, 42dvh, 680px);
  }

  #advanced-angle-editor {
    grid-template-rows:
      clamp(58px, 5dvh, 72px)
      clamp(72px, 6dvh, 88px)
      minmax(0, 1fr);

    padding: 0 20px 14px;
  }

  #advanced-header {
    grid-template-columns:
      clamp(72px, 10vw, 94px)
      minmax(0, 1fr)
      clamp(120px, 17vw, 150px);

    gap: 14px;

    padding-top: 8px;
  }

  #advanced-back-button {
    width: clamp(54px, 7vw, 66px);

    height: clamp(50px, 6vw, 60px);

    font-size: clamp(26px, 3.5vw, 30px);
  }

  #advanced-delete-floor-button {
    width: clamp(112px, 15vw, 142px);

    height: clamp(50px, 6vw, 60px);

    border-radius: 14px;

    font-size: clamp(18px, 2.6vw, 22px);
  }

  #advanced-angle-value {
    font-size: clamp(24px, 3.3vw, 30px);

    line-height: 1.05;
  }

  #snap-toggle-button {
    height: clamp(34px, 4.5vw, 42px);

    padding: 0 16px;

    border-radius: 18px;

    font-size: clamp(16px, 2.3vw, 20px);
  }

  #angle-dial-wrap {
    width: clamp(240px, 34vw, 300px);

    margin-top: clamp(6px, 1dvh, 12px);
  }

  .dial-label {
    font-size: clamp(16px, 2.4vw, 20px);
  }

  #angle-dial {
    border-width: 3px;
  }

  #angle-dial-needle {
    height: clamp(5px, 0.7vw, 7px);
  }

  #angle-dial-needle::after {
    right: -11px;

    width: clamp(20px, 3vw, 24px);

    height: clamp(20px, 3vw, 24px);
  }

  #advanced-add-button {
    width: clamp(58px, 8vw, 70px);

    height: clamp(58px, 8vw, 70px);

    min-width: clamp(58px, 8vw, 70px);

    min-height: clamp(58px, 8vw, 70px);

    font-size: 30px;
  }
}

/* =========================================================
   Advanced Header - Exact Position Fix
========================================================= */

#advanced-header {
  position: relative;
}

/* =========================
   Back
   항상 왼쪽 첫 번째 칸
========================= */

#advanced-back-button {
  grid-column: 1;
  grid-row: 1;

  justify-self: start;
  align-self: center;
}

/* =========================
   Title
   Grid와 무관하게 화면 정중앙
========================= */

#advanced-header > span:nth-child(2) {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  width: max-content;
  max-width: 45%;

  text-align: center;
  white-space: nowrap;

  pointer-events: none;

  z-index: 1;
}

/* =========================
   Delete
   항상 오른쪽 세 번째 칸
========================= */

#advanced-delete-floor-button {
  grid-column: 3;
  grid-row: 1;

  justify-self: end;
  align-self: center;

  z-index: 2;
}

/* =========================================================
   Advanced Dial - Keep Perfect Circle
========================================================= */

#angle-dial-wrap {
  /*
    가로폭뿐 아니라 세로 공간도 고려해서
    다이얼 크기 자체를 결정한다.
  */
  --advanced-dial-size: min(42vw, 20dvh, 210px);

  width: var(--advanced-dial-size) !important;

  height: var(--advanced-dial-size) !important;

  min-width: var(--advanced-dial-size);

  min-height: var(--advanced-dial-size);

  /*
    이전 max-height: 100%가
    다이얼을 세로로 찌그러뜨린 원인.
  */
  max-width: none;

  max-height: none;

  aspect-ratio: 1 / 1;

  flex-shrink: 0;

  justify-self: center;

  align-self: start;
}

/*
  실제 원형 다이얼도
  wrapper와 정확히 같은 정사각형을 사용.
*/
#angle-dial {
  width: 100% !important;

  height: 100% !important;

  aspect-ratio: 1 / 1;

  border-radius: 50%;
}

/* =========================================================
   Short Screens
========================================================= */

@media (max-height: 650px) {
  #angle-dial-wrap {
    --advanced-dial-size: min(38vw, 18dvh, 170px);
  }
}

/* =========================================================
   Large Portrait
========================================================= */

@media (min-width: 600px) and (orientation: portrait) {
  #angle-dial-wrap {
    --advanced-dial-size: min(34vw, 26dvh, 300px);
  }
}
/* =========================================================
   FINAL: Level / Editor toolbar actions
   Level settings and editor settings are intentionally split.
========================================================= */

#level-toolbar-actions {
  grid-column: 1;
  grid-row: 1;

  justify-self: start;
  align-self: start;

  display: flex;
  flex-direction: column;

  gap: 6px;

  pointer-events: auto;
}

#level-title {
  grid-column: 2;
  grid-row: 1;
}

.level-toolbar-spacer {
  grid-column: 3;
  grid-row: 1;
}

#project-settings-button,
#editor-settings-button {
  width: 36px;
  height: 36px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #484848;
  border-radius: 10px;

  background: rgba(25, 25, 25, 0.92);

  color: #ddd;

  font-size: 18px;
  line-height: 1;

  pointer-events: auto;
}

#project-settings-button:active,
#editor-settings-button:active {
  transform: scale(0.94);
  background: #303030;
}

/* =========================================================
   FINAL: Editor Settings controls
========================================================= */

.editor-setting-toggle {
  width: 100%;
  min-height: 48px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  gap: 12px;

  color: #ddd;

  font-size: 16px;
  font-weight: 650;
}

.editor-setting-toggle span {
  flex: 1 1 auto;
}

.editor-setting-toggle input {
  flex: 0 0 auto;

  width: 22px;
  height: 22px;

  margin: 0;

  accent-color: #6fa875;
}

.editor-about-content {
  color: #aaa;

  font-size: 14px;
  line-height: 1.6;
}

.editor-about-content strong {
  color: #eee;

  font-size: 17px;
  font-weight: 750;
}

.editor-about-content p {
  margin: 10px 0 0;
}

/* =========================================================
   Medium portrait toolbar actions
========================================================= */

@media (min-width: 521px) and (max-width: 599px) and (orientation: portrait) {
  #level-toolbar-actions {
    gap: 8px;
  }

  #project-settings-button,
  #editor-settings-button {
    width: 44px;
    height: 44px;

    border-radius: 12px;

    font-size: 22px;
  }
}

/* =========================================================
   Large portrait toolbar / editor settings
========================================================= */

@media (min-width: 600px) and (orientation: portrait) {
  #level-toolbar-actions {
    gap: 10px;
  }

  #project-settings-button,
  #editor-settings-button {
    width: 62px;
    height: 62px;

    border-radius: 16px;

    font-size: 30px;
  }

  .editor-setting-toggle {
    min-height: 64px;

    font-size: var(--font-md, 22px);
  }

  .editor-setting-toggle input {
    width: 30px;
    height: 30px;
  }

  .editor-about-content {
    font-size: var(--font-sm, 19px);
  }

  .editor-about-content strong {
    font-size: var(--font-lg, 25px);
  }
}

/* =========================================================
   FINAL: Editor Settings About Footer
   Keep About visually separate from actual settings.
========================================================= */

.editor-about-footer {
  margin: 18px 4px 2px;

  padding: 16px 4px 2px;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  color: #777;

  font-size: 12px;

  line-height: 1.6;
}

.editor-about-footer strong {
  display: block;

  margin-bottom: 5px;

  color: #aaa;

  font-size: 13px;

  font-weight: 700;
}

.editor-about-footer p {
  margin: 4px 0 0;
}

/* Large portrait: keep About readable but intentionally
   quieter than the actual settings controls. */
@media (min-width: 600px) and (orientation: portrait) {
  .editor-about-footer {
    margin: 26px 6px 4px;

    padding: 20px 6px 4px;

    font-size: var(--font-xs, 17px);
  }

  .editor-about-footer strong {
    font-size: var(--font-sm, 19px);
  }
}

/* =========================================================
   FINAL: Rich level title + editor info overlay
========================================================= */

/*
  ADOFAI title <size=...> uses 85 as its neutral/default size.
  The JS parser applies relative percentages to nested spans, so
  the existing responsive title size remains the visual baseline.
*/
#level-title {
  font-style: normal;
}

#level-title .level-title-rich-node {
  white-space: inherit;
}

/*
  Plain diagnostic text only: no card, border, or background.
*/
#editor-info {
  position: absolute;

  top: calc(52px + env(safe-area-inset-top));

  right: 10px;

  z-index: 70;

  max-width: 46vw;

  color: rgba(225, 225, 225, 0.62);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  font-size: 9px;
  font-weight: 500;
  line-height: 1.45;

  text-align: right;
  white-space: pre;

  font-variant-numeric: tabular-nums;

  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

#editor-info[hidden] {
  display: none !important;
}

/* Keep multiple View toggles visually separated. */
.settings-section .editor-setting-toggle + .editor-setting-toggle {
  border-top: 1px solid #292929;
}

@media (min-width: 521px) and (max-width: 599px) and (orientation: portrait) {
  #editor-info {
    top: calc(64px + env(safe-area-inset-top));

    right: 12px;
    font-size: 10px;
  }
}

@media (min-width: 600px) and (orientation: portrait) {
  #editor-info {
    top: calc(92px + env(safe-area-inset-top));

    right: 18px;

    max-width: 48vw;

    font-size: clamp(11px, 1.6vw, 14px);
  }
}

/* =========================================================
   TESTER FEEDBACK PATCH
========================================================= */

#advanced-angle-input-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

#advanced-angle-value {
  width: clamp(72px, 20vw, 108px);
  height: clamp(30px, 5dvh, 38px);
  padding: 0 7px;

  border: 1px solid #444;
  border-radius: 8px;
  outline: none;

  background: #111;
  color: #f0f0f0;

  font-size: clamp(16px, 4.5vw, 22px);
  font-weight: 700;
  line-height: 1;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#advanced-angle-value:focus {
  border-color: #777;
  background: #181818;
}

#advanced-angle-input-wrap > span {
  color: #f0f0f0;
  font-size: clamp(16px, 4.5vw, 22px);
  font-weight: 700;
}

#advanced-special-angle-column {
  grid-column: 1;
  grid-row: 3;

  justify-self: start;
  align-self: start;

  z-index: 15;
  width: 72px;

  display: flex;
  flex-direction: column;
  gap: 7px;

  margin-top: clamp(3px, 0.8dvh, 8px);
}

#advanced-special-angle-column .editor-control-button {
  min-height: 34px;
}

#advanced-delete-floor-button {
  width: clamp(82px, 23vw, 108px);
}

#delete-floor-button,
#advanced-delete-floor-button,
#delete-selected-button {
  white-space: nowrap;
}

@media (min-width: 600px) and (orientation: portrait) {
  #advanced-angle-value {
    width: clamp(118px, 16vw, 150px);
    height: clamp(46px, 6vw, 56px);
    padding: 0 12px;
    border-radius: 12px;
    font-size: var(--font-xl, 28px);
  }

  #advanced-angle-input-wrap > span {
    font-size: var(--font-xl, 28px);
  }

  #advanced-special-angle-column {
    width: 165px;
    gap: 15px;
    margin-top: clamp(6px, 1dvh, 12px);
  }

  #advanced-special-angle-column .editor-control-button {
    min-height: 74px;
    border-radius: 16px;
    font-size: var(--font-md, 22px);
  }

  #advanced-delete-floor-button {
    width: clamp(132px, 18vw, 168px);
  }
}

/* First-launch editor notice */
.editor-welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: calc(16px + env(safe-area-inset-top)) 14px
    calc(16px + env(safe-area-inset-bottom));

  background: rgba(0, 0, 0, 0.78);
}

.editor-welcome-overlay[hidden] {
  display: none !important;
}

.editor-welcome-sheet {
  width: min(620px, 100%);
  max-height: min(84dvh, 760px);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  border: 1px solid #484848;
  border-radius: 16px;
  background: #151515;
  color: #ddd;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.62);
}

.editor-welcome-scroll {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 20px 8px;
}

.editor-welcome-scroll h2 {
  margin: 0 0 16px;
  color: #f2f2f2;
  font-size: 18px;
  line-height: 1.35;
}

.editor-welcome-scroll p {
  margin: 0 0 14px;
  color: #aaa;
  font-size: 12px;
  line-height: 1.65;
}

.editor-welcome-scroll .editor-welcome-note {
  color: #c2c2c2;
}

.editor-welcome-toggle {
  margin: 12px 0 6px;
  padding: 12px 12px;

  border: 1px solid #3a3a3a;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.02);
  color: #ededed;

  font-size: 15px;
  font-weight: 650;
}

.editor-welcome-toggle input {
  flex: 0 0 auto;

  width: 18px;
  height: 18px;

  margin: 0;

  appearance: none;
  -webkit-appearance: none;

  border: 2px solid #5d5d5d;
  border-radius: 6px;

  background: #101010 center / 12px 12px no-repeat;

  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);

  transition:
    border-color 0.15s ease,
    background-color 0.15s ease,
    box-shadow 0.15s ease;
}

.editor-welcome-toggle input:checked {
  border-color: #7ecb8d;
  background-color: #7ecb8d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4L4.7 9.1L10 3.8' fill='none' stroke='%23101010' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.editor-welcome-continue {
  flex: 0 0 44px;
  margin: 10px 20px 18px;

  border: 1px solid #566c58;
  border-radius: 10px;
  background: #263329;
  color: #d9eadb;

  font-size: 13px;
  font-weight: 750;
}

.editor-welcome-continue:active {
  transform: scale(0.98);
  background: #314336;
}

@media (max-width: 520px) {
  .editor-welcome-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .editor-welcome-sheet {
    width: 100%;
    max-height: 88dvh;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
  }
}

@media (min-width: 600px) and (orientation: portrait) {
  .editor-welcome-sheet {
    width: min(700px, calc(100vw - 40px));
    border-radius: 22px;
  }

  .editor-welcome-scroll {
    padding: 28px 28px 12px;
  }

  .editor-welcome-scroll h2 {
    margin-bottom: 22px;
    font-size: var(--font-xl, 30px);
  }

  .editor-welcome-scroll p {
    margin-bottom: 20px;
    font-size: var(--font-sm, 19px);
    line-height: 1.6;
  }

  .editor-welcome-continue {
    flex-basis: 58px;
    margin: 14px 28px 24px;
    border-radius: 13px;
    font-size: var(--font-md, 22px);
  }
}

/* =========================================================
   PORTRAIT RESPONSIVE LAYOUT V3

   This is the final portrait override layer. It intentionally
   centralizes phone sizing here so the older incremental mobile
   rules above cannot make the editor controls collide.
========================================================= */

/* ---------- Undo / Redo: always available in edit mode ---------- */

#history-toolbar {
  position: absolute;

  top: calc(8px + env(safe-area-inset-top));

  right: 8px;

  z-index: 86;

  display: flex;
  align-items: center;
  gap: 5px;

  pointer-events: auto;
}

.history-button {
  width: 34px;
  height: 34px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #484848;
  border-radius: 10px;

  background: rgba(25, 25, 25, 0.92);
  color: #ddd;

  font-size: 21px;
  font-weight: 600;
  line-height: 1;
}

.history-button:active:not(:disabled) {
  transform: scale(0.93);
  background: #303030;
}

.history-button:disabled {
  opacity: 0.24;
}

#tile-transform-toolbar {
  position: absolute;

  top: calc(47px + env(safe-area-inset-top));

  right: 8px;

  z-index: 86;

  display: flex;
  align-items: center;
  gap: 5px;

  pointer-events: auto;
}

#tile-transform-toolbar .history-button {
  font-size: 20px;
}

/* =========================================================
   Phone portrait
========================================================= */

@media (orientation: portrait) and (max-width: 599px) {
  #editor {
    --phone-tabs-height: clamp(31px, 8.4vw, 36px);

    --phone-palette-height: clamp(31px, 8.6vw, 38px);

    --event-palette-height: calc(
      var(--phone-palette-height) + env(safe-area-inset-bottom)
    );

    --editor-nav-space: 0px;

    --nav-height: clamp(42px, 11.5vw, 49px);
  }

  /* -------------------------
     Panel height

     Use visible viewport height rather than only width.
     This leaves enough room for tabs + direction ring + palette
     even in Safari/Chrome with large browser chrome.
  ------------------------- */

  #editor.ui-single {
    --editor-panel-height: clamp(238px, 38dvh, 310px);
  }

  #editor.ui-advanced {
    --editor-panel-height: clamp(278px, 44dvh, 350px);
  }

  #editor.ui-multi {
    --editor-panel-height: clamp(94px, 15dvh, 122px);
  }

  #editor-panel,
  #angle-panel {
    min-height: 0;
  }

  #angle-panel {
    overflow: hidden;
  }

  /* -------------------------
     Top map controls
  ------------------------- */

  #level-toolbar {
    top: calc(7px + env(safe-area-inset-top));

    left: 7px;
    right: 7px;

    height: 36px;

    grid-template-columns:
      36px
      minmax(0, 1fr)
      78px;

    gap: 6px;
  }

  #level-toolbar-actions {
    gap: 5px;
  }

  #project-settings-button,
  #editor-settings-button {
    width: 36px;
    height: 36px;

    border-radius: 10px;
    font-size: 18px;
  }

  #level-title {
    max-width: 50vw;

    padding: 5px 5px;

    font-size: clamp(11px, 3.3vw, 15px);

    line-height: 1.15;
  }

  #history-toolbar {
    top: calc(7px + env(safe-area-inset-top));

    right: 7px;
  }

  .history-button {
    width: 34px;
    height: 34px;

    border-radius: 10px;
    font-size: 20px;
  }

  /* Put diagnostics below the top controls, not beside them. */
  #editor-info {
    top: calc(88px + env(safe-area-inset-top));

    right: 7px;

    max-width: min(64vw, 280px);

    overflow: hidden;

    color: rgba(225, 225, 225, 0.58);

    font-size: clamp(7px, 2.15vw, 9px);

    line-height: 1.42;

    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* -------------------------
     Floating playback/navigation
  ------------------------- */

  #bottom-nav {
    width: clamp(210px, 62vw, 300px);

    min-width: 0;

    padding: 4px 6px;

    grid-template-columns:
      0.72fr
      1fr
      1fr
      1fr
      0.72fr;
  }

  .modifier-button {
    height: calc(var(--nav-height) - 8px);

    font-size: clamp(10px, 3vw, 13px);
  }

  #play-button {
    width: calc(var(--nav-height) - 8px);

    height: calc(var(--nav-height) - 8px);

    font-size: clamp(17px, 5vw, 21px);
  }

  .floor-nav-button {
    height: calc(var(--nav-height) - 8px);

    font-size: clamp(22px, 6vw, 28px);
  }

  /* -------------------------
     Tabs
  ------------------------- */

  #editor-tabs {
    flex-basis: var(--phone-tabs-height);

    height: var(--phone-tabs-height);

    gap: 4px;

    padding: 3px 7px 0;
  }

  .editor-tab {
    flex: 0 0 clamp(39px, 11vw, 46px);

    height: calc(var(--phone-tabs-height) - 5px);

    border-radius: 8px 8px 0 0;
  }

  .editor-tab.active {
    height: calc(var(--phone-tabs-height) - 2px);
  }

  img.editor-tab-icon {
    width: clamp(20px, 5.7vw, 24px);

    height: clamp(20px, 5.7vw, 24px);
  }

  /* -------------------------
     Single tile editor
  ------------------------- */

  #single-angle-editor {
    grid-template-columns:
      clamp(62px, 20vw, 82px)
      minmax(0, 1fr)
      clamp(62px, 20vw, 82px);

    height: 100%;

    align-items: start;

    padding: 4px 6px 2px;
  }

  #special-angle-column,
  #delete-angle-column {
    min-width: 0;

    gap: clamp(5px, 1.5vw, 8px);

    padding: 4px 0 0;
  }

  #special-angle-column {
    padding-right: 4px;
  }

  #delete-angle-column {
    padding-left: 4px;
  }

  .editor-control-button,
  #delete-floor-button {
    min-height: clamp(34px, 9.5vw, 42px);

    height: clamp(34px, 9.5vw, 42px);

    padding: 0 3px;

    border-radius: clamp(7px, 2.2vw, 10px);

    font-size: clamp(8px, 2.7vw, 11px);

    line-height: 1;
  }

  #quick-angle-area {
    min-width: 0;
    min-height: 0;

    padding-top: 1px;

    overflow: visible;
  }

  .angle-panel-title {
    flex-basis: clamp(16px, 4.7vw, 20px);

    margin-bottom: 0;

    font-size: clamp(8px, 2.6vw, 10px);

    line-height: 1;
  }

  #quick-angle-ring {
    width: min(41vw, 20dvh, 158px);

    min-width: 108px;

    margin-top: 2px;
  }

  .angle-button {
    width: clamp(28px, 8.8vw, 36px);

    height: clamp(28px, 8.8vw, 36px);

    border-radius: clamp(7px, 2.2vw, 9px);

    font-size: clamp(15px, 5vw, 19px);
  }

  .angle-sub-button {
    width: clamp(17px, 5.1vw, 22px);

    height: clamp(17px, 5.1vw, 22px);

    min-width: clamp(17px, 5.1vw, 22px);

    min-height: clamp(17px, 5.1vw, 22px);

    font-size: clamp(6px, 1.9vw, 8px);
  }

  #angle-current {
    width: clamp(40px, 11.7vw, 48px);

    height: clamp(40px, 11.7vw, 48px);

    font-size: clamp(11px, 3.1vw, 13px);
  }

  /* -------------------------
     Event palette
  ------------------------- */

  #event-palette {
    flex-basis: var(--event-palette-height);

    min-height: var(--event-palette-height);
  }

  #event-palette-list {
    justify-content: center;

    gap: clamp(5px, 1.7vw, 8px);

    padding: 2px 8px calc(2px + env(safe-area-inset-bottom));
  }

  .event-palette-button {
    flex: 0 0 clamp(28px, 8vw, 34px);

    width: clamp(28px, 8vw, 34px);

    height: clamp(28px, 8vw, 34px);

    min-width: 0;
    min-height: 0;

    border-radius: 7px;
  }

  .event-palette-icon {
    width: 78%;
    height: 78%;
  }

  /* -------------------------
     Advanced editor

     Side controls get dedicated columns; the input, snap button and
     dial stay on the exact center column. This prevents the dial and
     360/MID buttons from competing for the same space.
  ------------------------- */

  #advanced-angle-editor {
    grid-template-columns:
      clamp(62px, 20vw, 82px)
      minmax(0, 1fr)
      clamp(62px, 20vw, 82px);

    grid-template-rows:
      clamp(38px, 10vw, 44px)
      clamp(58px, 15vw, 68px)
      minmax(0, 1fr);

    column-gap: 5px;

    padding: 2px 6px 4px;
  }

  #advanced-header {
    grid-column: 1 / -1;
    grid-row: 1;

    grid-template-columns:
      clamp(62px, 20vw, 82px)
      minmax(0, 1fr)
      clamp(62px, 20vw, 82px);

    gap: 5px;

    min-height: 0;
    padding: 0;

    font-size: clamp(13px, 4vw, 16px);
  }

  #advanced-header > span:nth-child(2) {
    position: static;

    grid-column: 2;
    grid-row: 1;

    align-self: center;
    justify-self: center;

    transform: none;

    max-width: 100%;
  }

  #advanced-back-button,
  #advanced-delete-floor-button {
    height: clamp(34px, 9.5vw, 42px);

    align-self: center;

    border-radius: clamp(7px, 2.2vw, 10px);
  }

  #advanced-back-button {
    width: clamp(40px, 12vw, 48px);

    font-size: clamp(21px, 6vw, 26px);
  }

  #advanced-delete-floor-button {
    width: 100%;

    padding: 0 2px;

    font-size: clamp(8px, 2.6vw, 11px);
  }

  #advanced-angle-info {
    grid-column: 2;
    grid-row: 2;

    width: 100%;

    gap: 4px;

    align-self: center;
    justify-self: stretch;
    justify-content: center;

    padding: 0;
  }

  #advanced-angle-input-wrap {
    width: 100%;
    justify-content: center;
  }

  #advanced-angle-value {
    width: clamp(72px, 25vw, 104px);

    height: clamp(32px, 8.8vw, 38px);

    padding: 0 7px;

    font-size: clamp(16px, 5vw, 21px);
  }

  #advanced-angle-input-wrap > span {
    font-size: clamp(16px, 5vw, 21px);
  }

  #snap-toggle-button {
    min-width: clamp(80px, 26vw, 108px);

    height: clamp(27px, 7.4vw, 32px);

    padding: 0 10px;

    border-radius: 10px;

    font-size: clamp(9px, 2.8vw, 12px);
  }

  #advanced-special-angle-column {
    grid-column: 1;
    grid-row: 2 / 4;

    align-self: start;
    justify-self: stretch;

    width: auto;

    gap: clamp(6px, 1.7vw, 9px);

    margin: 0;
    padding-top: 4px;
  }

  #advanced-special-angle-column .editor-control-button {
    min-height: clamp(36px, 10vw, 43px);

    height: clamp(36px, 10vw, 43px);
  }

  #angle-dial-wrap {
    grid-column: 2;
    grid-row: 3;

    --advanced-dial-size: min(40vw, 20dvh, 164px);

    align-self: start;
    justify-self: center;

    margin-top: 3px;
  }

  .dial-label {
    font-size: clamp(9px, 2.7vw, 12px);
  }

  #advanced-add-button {
    width: clamp(36px, 10.5vw, 44px);

    height: clamp(36px, 10.5vw, 44px);

    min-width: 0;
    min-height: 0;

    font-size: clamp(23px, 7vw, 29px);
  }

  /* -------------------------
     Event editor forms
     Prevent wide segmented buttons from forcing horizontal overflow.
  ------------------------- */

  #event-screen-header {
    flex-basis: clamp(45px, 12vw, 52px);

    gap: 8px;
    padding: 6px 9px;
  }

  #event-screen-icon {
    flex-basis: clamp(27px, 7.5vw, 32px);

    width: clamp(27px, 7.5vw, 32px);

    height: clamp(27px, 7.5vw, 32px);
  }

  #event-screen-body {
    padding: 6px 8px 9px;
  }

  .event-card {
    padding: 7px 8px;
  }

  .event-form-row {
    min-height: clamp(40px, 11vw, 46px);

    gap: 7px;
  }

  .event-form-label {
    font-size: clamp(9px, 2.8vw, 11px);
  }

  .event-form-input,
  .event-form-select {
    flex-basis: min(42vw, 142px);

    width: min(42vw, 142px);

    max-width: 46vw;

    height: clamp(31px, 8.5vw, 36px);
  }

  .event-segmented {
    flex: 0 1 min(58vw, 220px);

    width: min(58vw, 220px);

    max-width: 58vw;

    height: clamp(34px, 9.5vw, 40px);
  }

  .event-segment-button {
    flex: 1 1 50%;

    min-width: 0;

    padding: 0 6px;

    font-size: clamp(9px, 2.7vw, 12px);
  }
}

/* =========================================================
   Extra-small / short portrait phones
========================================================= */

@media (orientation: portrait) and (max-width: 380px) {
  #editor.ui-single {
    --editor-panel-height: clamp(230px, 39dvh, 286px);
  }

  #editor.ui-advanced {
    --editor-panel-height: clamp(265px, 45dvh, 326px);
  }

  #single-angle-editor,
  #advanced-angle-editor {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px;
  }

  #advanced-header {
    grid-template-columns:
      58px
      minmax(0, 1fr)
      58px;
  }

  .editor-control-button,
  #delete-floor-button,
  #advanced-delete-floor-button {
    font-size: 8px;
  }

  #quick-angle-ring {
    width: min(39vw, 18.5dvh, 142px);
  }

  #angle-dial-wrap {
    --advanced-dial-size: min(38vw, 18.5dvh, 148px);
  }

  #bottom-nav {
    width: min(70vw, 254px);
  }
}

@media (orientation: portrait) and (max-height: 620px) {
  #editor.ui-single {
    --editor-panel-height: clamp(220px, 42dvh, 260px);
  }

  #editor.ui-advanced {
    --editor-panel-height: clamp(250px, 48dvh, 300px);
  }

  #quick-angle-ring {
    width: min(37vw, 17dvh, 132px);
  }

  #angle-dial-wrap {
    --advanced-dial-size: min(36vw, 17dvh, 140px);
  }

  .angle-panel-title {
    font-size: 8px;
  }
}

/* =========================================================
   Tablet portrait history controls
========================================================= */

@media (orientation: portrait) and (min-width: 600px) {
  #history-toolbar {
    top: calc(12px + env(safe-area-inset-top));

    right: 14px;

    gap: 10px;
  }

  .history-button {
    width: 54px;
    height: 54px;

    border-radius: 15px;
    font-size: 31px;
  }

  /* Reserve visual space for the right-side history controls. */
  #level-title {
    max-width: 62vw;
  }

  #tile-transform-toolbar {
    top: calc(76px + env(safe-area-inset-top));

    right: 14px;

    gap: 10px;
  }

  #tile-transform-toolbar .history-button {
    font-size: 28px;
  }
}

/* =========================================================
   ALIGNMENT + ADVANCED CLEANUP V4

   Final override layer. Keep this block at the very end.
   The important rule here is that visual centers no longer depend
   on asymmetric left/right tool groups.
========================================================= */

/* =====================================================
   Map toolbar: title is tied to the viewport center, not to
   the remaining grid column between the left and right controls.
===================================================== */

#level-toolbar {
  position: absolute;
}

#level-title {
  position: absolute;
  left: 50%;
  top: 50%;

  grid-column: auto;
  grid-row: auto;

  justify-self: auto;

  width: max-content;
  max-width: min(54vw, 720px);

  transform: translate(-50%, -50%);

  text-align: center;
  transform-origin: center center;

  z-index: 2;
}

/* Left settings and right history controls stay independently
   anchored, so neither can push the title away from center. */
#level-toolbar-actions {
  position: absolute;
  left: 0;
  top: 0;

  grid-column: auto;
  grid-row: auto;
}

#history-toolbar {
  right: 8px;
}

/* =====================================================
   Single tile editor: enforce symmetric side columns.
===================================================== */

#single-angle-editor {
  --single-side-width: clamp(72px, 18vw, 165px);

  grid-template-columns:
    var(--single-side-width)
    minmax(0, 1fr)
    var(--single-side-width);
}

#quick-angle-area {
  justify-self: stretch;
  align-items: center;
}

#quick-angle-ring,
.angle-panel-title {
  align-self: center;
}

/* =====================================================
   Advanced: one real three-column layout on every screen.

   left controls | exact center | delete
===================================================== */

#advanced-angle-editor {
  --advanced-side-width: clamp(72px, 18vw, 165px);
  --advanced-input-width: clamp(82px, 20vw, 118px);

  grid-template-columns:
    var(--advanced-side-width)
    minmax(0, 1fr)
    var(--advanced-side-width);

  grid-template-rows:
    clamp(40px, 5dvh, 54px)
    auto
    minmax(0, 1fr);

  column-gap: clamp(6px, 1.2vw, 14px);
  row-gap: clamp(6px, 0.9dvh, 10px);

  justify-items: stretch;
  align-items: start;

  padding: 5px clamp(8px, 1.6vw, 20px) 10px;
}

/* Header uses the SAME side widths as the editor body. */
#advanced-header {
  position: static;

  grid-column: 1 / -1;
  grid-row: 1;

  display: grid;
  grid-template-columns:
    var(--advanced-side-width)
    minmax(0, 1fr)
    var(--advanced-side-width);

  gap: clamp(6px, 1.2vw, 14px);

  width: 100%;
  min-height: 0;
  padding: 0;

  align-items: center;
}

#advanced-header > span:nth-child(2) {
  position: static;

  grid-column: 2;
  grid-row: 1;

  width: auto;
  max-width: 100%;

  justify-self: center;
  align-self: center;

  transform: none;

  text-align: center;
  white-space: nowrap;

  font-size: clamp(14px, 3.6vw, 20px);
  line-height: 1.15;
}

#advanced-back-button {
  grid-column: 1;
  grid-row: 1;

  justify-self: start;
  align-self: center;
}

#advanced-delete-floor-button {
  grid-column: 3;
  grid-row: 1;

  justify-self: end;
  align-self: center;
}

/* ---------- Center angle controls ---------- */

#advanced-angle-info {
  grid-column: 2;
  grid-row: 2;

  width: 100%;

  align-self: start;
  justify-self: stretch;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  gap: clamp(7px, 1dvh, 11px);
  padding: 0;
}

/* The degree mark no longer participates in centering the input.
   The numeric field itself sits on the exact editor centerline. */
#advanced-angle-input-wrap {
  position: relative;

  width: 100%;
  min-height: clamp(34px, 5dvh, 44px);

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 0;
}

#advanced-angle-value {
  width: var(--advanced-input-width);
  height: clamp(34px, 5dvh, 42px);

  margin: 0;
  padding: 0 9px;

  text-align: center !important;
  text-indent: 0;

  font-size: clamp(16px, 4vw, 21px);
  line-height: 1;
}

#advanced-angle-input-wrap > span {
  position: absolute;

  left: calc(50% + var(--advanced-input-width) / 2 + 6px);

  top: 50%;
  transform: translateY(-50%);

  font-size: clamp(15px, 3.8vw, 20px);
  line-height: 1;
}

#snap-toggle-button {
  min-width: clamp(86px, 22vw, 116px);
  height: clamp(28px, 4.6dvh, 34px);

  margin: 0;
  padding: 0 12px;

  border-radius: 11px;

  font-size: clamp(9px, 2.5vw, 12px);
  line-height: 1;

  align-self: center;
}

/* ---------- Left 360 / MID ---------- */

#advanced-special-angle-column {
  grid-column: 1;
  grid-row: 2 / 4;

  width: 100%;

  justify-self: stretch;
  align-self: start;

  margin: 0;
  padding-top: 2px;

  gap: clamp(7px, 1dvh, 12px);
}

/* ---------- Dial: exact center column, slightly smaller ---------- */

#angle-dial-wrap {
  grid-column: 2;
  grid-row: 3;

  --advanced-dial-size: min(38vw, 18dvh, 190px);

  justify-self: center;
  align-self: start;

  margin-top: clamp(5px, 0.8dvh, 9px);
}

#angle-dial {
  left: 0;
  top: 0;
}

/* =====================================================
   Phone portrait
===================================================== */

@media (orientation: portrait) and (max-width: 599px) {
  #level-title {
    max-width: 48vw;
  }

  #history-toolbar {
    right: 7px;
  }

  #tile-transform-toolbar {
    top: calc(46px + env(safe-area-inset-top));

    right: 7px;
  }

  #tile-transform-toolbar .history-button {
    font-size: 20px;
  }

  #single-angle-editor {
    --single-side-width: clamp(60px, 19vw, 80px);
  }

  #advanced-angle-editor {
    --advanced-side-width: clamp(60px, 19vw, 80px);
    --advanced-input-width: clamp(80px, 25vw, 102px);

    grid-template-rows:
      clamp(38px, 10vw, 44px)
      auto
      minmax(0, 1fr);

    row-gap: 7px;

    padding: 4px 6px 7px;
  }

  #advanced-header > span:nth-child(2) {
    font-size: clamp(13px, 4vw, 16px);
  }

  #advanced-angle-info {
    gap: 7px;
  }

  #advanced-angle-value {
    height: clamp(32px, 8.5vw, 37px);
    font-size: clamp(16px, 5vw, 20px);
  }

  #advanced-angle-input-wrap {
    min-height: clamp(32px, 8.5vw, 37px);
  }

  #snap-toggle-button {
    min-width: clamp(82px, 26vw, 104px);
    height: clamp(27px, 7vw, 31px);
  }

  #angle-dial-wrap {
    --advanced-dial-size: min(36vw, 17.5dvh, 150px);

    margin-top: 6px;
  }

  #advanced-special-angle-column {
    padding-top: 1px;
  }
}

/* =====================================================
   Large portrait / tablet
===================================================== */

@media (orientation: portrait) and (min-width: 600px) {
  #level-title {
    max-width: 56vw;
  }

  #single-angle-editor {
    --single-side-width: clamp(140px, 19vw, 165px);
  }

  #editor.ui-advanced {
    --editor-panel-height: clamp(450px, 38dvh, 570px);
  }

  #advanced-angle-editor {
    --advanced-side-width: clamp(140px, 19vw, 165px);
    --advanced-input-width: clamp(116px, 16vw, 138px);

    grid-template-rows:
      clamp(54px, 5dvh, 64px)
      auto
      minmax(0, 1fr);

    column-gap: 14px;
    row-gap: clamp(9px, 0.9dvh, 13px);

    padding: 8px 18px 15px;
  }

  #advanced-header > span:nth-child(2) {
    font-size: clamp(20px, 2.8vw, 24px);
  }

  #advanced-angle-info {
    gap: clamp(10px, 1dvh, 14px);
  }

  #advanced-angle-input-wrap {
    min-height: clamp(46px, 5vw, 52px);
  }

  #advanced-angle-value {
    height: clamp(46px, 5vw, 52px);

    padding: 0 12px;

    border-radius: 11px;

    font-size: clamp(22px, 3vw, 26px);
  }

  #advanced-angle-input-wrap > span {
    left: calc(50% + var(--advanced-input-width) / 2 + 8px);

    font-size: clamp(21px, 2.9vw, 25px);
  }

  #snap-toggle-button {
    min-width: clamp(118px, 16vw, 138px);
    height: clamp(34px, 4.1vw, 40px);

    padding: 0 15px;

    border-radius: 14px;

    font-size: clamp(14px, 2vw, 18px);
  }

  #angle-dial-wrap {
    --advanced-dial-size: min(28vw, 20dvh, 250px);

    margin-top: clamp(8px, 1dvh, 12px);
  }

  #advanced-special-angle-column {
    gap: 13px;
    padding-top: 2px;
  }

  #advanced-special-angle-column .editor-control-button {
    min-height: clamp(62px, 8vw, 72px);
    height: clamp(62px, 8vw, 72px);
  }
}

/* =====================================================
   Very short portrait screens: preserve spacing first, then size.
===================================================== */

@media (orientation: portrait) and (max-height: 650px) {
  #advanced-angle-editor {
    row-gap: 5px;
  }

  #advanced-angle-info {
    gap: 5px;
  }

  #angle-dial-wrap {
    --advanced-dial-size: min(34vw, 16.5dvh, 138px);

    margin-top: 4px;
  }
}

/* Keep the Advanced numeric value visually centered on browsers that
   expose native number-input steppers. */
#advanced-angle-value {
  appearance: textfield;
  -moz-appearance: textfield;
}

#advanced-angle-value::-webkit-outer-spin-button,
#advanced-angle-value::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

/* =========================================================
   ROUND 5: Advanced vertical-fit / clipping fix
   The dial now consumes only the REAL remaining grid row height.
   Keep this block at the very end of the stylesheet.
========================================================= */

/*
  Previous Advanced rules gave the dial an explicit width AND height.
  On screens where tabs + event palette leave a shorter angle-panel,
  that fixed square could be taller than grid row 3 and was clipped.

  New layout:
    row 1 = compact header
    row 2 = compact input + snap controls
    row 3 = all remaining height

  The dial's HEIGHT is driven by row 3, and aspect-ratio derives its width.
  Therefore it cannot extend into the event palette below.
*/
#advanced-angle-editor {
  grid-template-rows:
    clamp(36px, 5dvh, 46px)
    max-content
    minmax(0, 1fr) !important;

  row-gap: clamp(6px, 0.75dvh, 9px);

  padding: 5px clamp(8px, 1.6vw, 18px) 10px;

  overflow: hidden;
}

#advanced-header {
  min-height: 0;
}

#advanced-angle-info {
  gap: clamp(6px, 0.7dvh, 9px);

  min-height: 0;
}

#advanced-angle-input-wrap {
  min-height: 0;
  height: clamp(32px, 4.6dvh, 40px);
}

#advanced-angle-value {
  height: 100%;
  min-height: 0;

  padding: 0 8px;

  text-align: center !important;

  font-size: clamp(15px, 3.7vw, 20px);
}

#advanced-angle-input-wrap > span {
  font-size: clamp(14px, 3.5vw, 19px);
}

#snap-toggle-button {
  height: clamp(26px, 3.8dvh, 32px);

  min-height: 0;
  min-width: clamp(82px, 21vw, 108px);

  padding: 0 11px;

  font-size: clamp(9px, 2.3vw, 12px);
}

/*
  Critical clipping fix.
  Do NOT give this element a fixed width and fixed height anymore.
  Grid row 3 owns the available vertical space.
*/
#angle-dial-wrap {
  --advanced-dial-max: min(34vw, 190px);

  width: auto !important;
  height: 100% !important;

  max-width: var(--advanced-dial-max) !important;

  max-height: var(--advanced-dial-max) !important;

  min-width: 0 !important;
  min-height: 0 !important;

  aspect-ratio: 1 / 1;

  justify-self: center;
  align-self: stretch;

  margin-top: 0 !important;
  margin-bottom: 0;
}

#angle-dial {
  width: 100% !important;
  height: 100% !important;

  aspect-ratio: 1 / 1;
}

/* Keep the center add button proportional after shrinking the dial. */
#advanced-add-button {
  width: clamp(34px, 8vw, 46px);

  height: clamp(34px, 8vw, 46px);

  min-width: clamp(34px, 8vw, 46px);

  min-height: clamp(34px, 8vw, 46px);

  font-size: clamp(22px, 5.8vw, 28px);
}

/* =====================================================
   Phone portrait
===================================================== */
@media (orientation: portrait) and (max-width: 599px) {
  #advanced-angle-editor {
    grid-template-rows:
      clamp(34px, 9vw, 40px)
      max-content
      minmax(0, 1fr) !important;

    row-gap: 5px;

    padding: 4px 6px 7px;
  }

  #advanced-angle-info {
    gap: 5px;
  }

  #advanced-angle-input-wrap {
    height: clamp(30px, 8vw, 34px);
  }

  #advanced-angle-value {
    font-size: clamp(15px, 4.7vw, 18px);
  }

  #snap-toggle-button {
    height: clamp(25px, 6.5vw, 29px);

    min-width: clamp(78px, 24vw, 98px);
  }

  #angle-dial-wrap {
    --advanced-dial-max: min(34vw, 145px);
  }

  #advanced-special-angle-column {
    gap: 6px;
  }
}

/* =====================================================
   Large portrait / tablet
===================================================== */
@media (orientation: portrait) and (min-width: 600px) {
  /*
    Keep enough map space; make controls fit by reducing the
    Advanced content rather than making the panel taller.
  */
  #editor.ui-advanced {
    --editor-panel-height: clamp(410px, 37dvh, 520px);
  }

  #advanced-angle-editor {
    grid-template-rows:
      clamp(46px, 4.6dvh, 54px)
      max-content
      minmax(0, 1fr) !important;

    row-gap: clamp(7px, 0.7dvh, 10px);

    padding: 7px 16px 12px;
  }

  #advanced-header > span:nth-child(2) {
    font-size: clamp(19px, 2.5vw, 22px);
  }

  #advanced-angle-info {
    gap: clamp(7px, 0.7dvh, 10px);
  }

  #advanced-angle-input-wrap {
    height: clamp(40px, 4.5vw, 46px);
  }

  #advanced-angle-value {
    width: clamp(108px, 14vw, 128px);

    padding: 0 10px;

    border-radius: 10px;

    font-size: clamp(20px, 2.7vw, 24px);
  }

  #advanced-angle-input-wrap > span {
    left: calc(50% + clamp(108px, 14vw, 128px) / 2 + 7px);

    font-size: clamp(19px, 2.6vw, 23px);
  }

  #snap-toggle-button {
    height: clamp(31px, 3.8vw, 36px);

    min-width: clamp(108px, 14vw, 128px);

    padding: 0 13px;

    border-radius: 13px;

    font-size: clamp(13px, 1.8vw, 16px);
  }

  #angle-dial-wrap {
    --advanced-dial-max: min(26vw, 210px);
  }

  #advanced-special-angle-column {
    gap: 10px;
  }

  #advanced-special-angle-column .editor-control-button {
    min-height: clamp(54px, 7vw, 64px);

    height: clamp(54px, 7vw, 64px);
  }

  #advanced-add-button {
    width: clamp(42px, 5.8vw, 52px);

    height: clamp(42px, 5.8vw, 52px);

    min-width: clamp(42px, 5.8vw, 52px);

    min-height: clamp(42px, 5.8vw, 52px);

    font-size: clamp(24px, 3.5vw, 28px);
  }
}

/* =====================================================
   Very short portrait screens
===================================================== */
@media (orientation: portrait) and (max-height: 650px) {
  #advanced-angle-editor {
    grid-template-rows:
      34px
      max-content
      minmax(0, 1fr) !important;

    row-gap: 4px;
    padding-bottom: 6px;
  }

  #advanced-angle-info {
    gap: 4px;
  }

  #advanced-angle-input-wrap {
    height: 29px;
  }

  #snap-toggle-button {
    height: 24px;
  }

  #angle-dial-wrap {
    --advanced-dial-max: min(31vw, 128px);
  }
}

/* =========================================================
   RELEASE CANDIDATE: Debug / storage / notification UI
========================================================= */

.editor-settings-wide-button {
  width: 100%;
  margin-top: 10px;
}

.settings-danger-button {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;

  border: 1px solid #754b4b;
  border-radius: 9px;

  background: #2c1f1f;
  color: #e7bcbc;

  font-size: 11px;
  font-weight: 750;
}

.settings-danger-button:active {
  transform: scale(0.98);
  background: #3d2929;
}

/* More detailed debug text can wrap on narrow phones instead of
   forcing a single very wide line over the map. */
#editor-info {
  max-width: min(68vw, 560px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Debug log viewer ---------- */
.editor-log-sheet {
  height: min(78dvh, 760px);
}

.editor-log-actions {
  flex: 0 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;

  padding: 10px 12px;
  border-bottom: 1px solid #303030;
}

.editor-log-output {
  flex: 1 1 auto;
  min-height: 0;

  margin: 0;
  padding: 12px;

  overflow: auto;
  overscroll-behavior: contain;

  background: #0d0d0d;
  color: #bcbcbc;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  font-size: 10px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- Toast notifications ---------- */
.editor-toast-container {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));

  z-index: 20000;

  width: min(88vw, 460px);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;

  transform: translateX(-50%);

  pointer-events: none;
}

.editor-toast {
  width: fit-content;
  max-width: 100%;

  padding: 9px 12px;

  border: 1px solid #4b4b4b;
  border-radius: 10px;

  background: rgba(28, 28, 28, 0.96);
  color: #eee;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);

  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
  text-align: center;

  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.editor-toast.success {
  border-color: #526d55;
  color: #d3ead6;
}

.editor-toast.warning {
  border-color: #766346;
  color: #ead8b8;
}

.editor-toast.error {
  border-color: #784f4f;
  color: #efc1c1;
}

.editor-toast.leaving {
  opacity: 0;
  transform: translateY(5px);
}

/* ---------- Bilingual welcome ---------- */
.editor-welcome-language h2 {
  margin-top: 0;
}

.editor-welcome-divider {
  height: 1px;
  margin: 20px 0;
  background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 520px) {
  .editor-log-sheet {
    height: min(86dvh, 760px);
  }

  .editor-log-output {
    font-size: 9px;
  }

  .editor-toast-container {
    bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

@media (min-width: 600px) and (orientation: portrait) {
  .settings-danger-button,
  .editor-settings-wide-button {
    min-height: 54px;
    border-radius: 12px;
    font-size: var(--font-sm, 19px);
  }

  .editor-log-actions {
    gap: 12px;
    padding: 14px 18px;
  }

  .editor-log-output {
    padding: 18px;
    font-size: clamp(12px, 1.8vw, 16px);
  }

  .editor-toast {
    padding: 13px 17px;
    border-radius: 13px;
    font-size: var(--font-sm, 19px);
  }
}

/* =========================================================
   COPY / PASTE
========================================================= */

#clipboard-toolbar {
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: 52px;
  z-index: 86;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  pointer-events: auto;
}

.clipboard-tool-button {
  width: 36px;
  height: 36px;
  padding: 7px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #484848;
  border-radius: 10px;
  background: rgba(25, 25, 25, 0.92);
  color: #ddd;

  touch-action: manipulation;
}

.clipboard-tool-button svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

#paste-tiles-button svg path:first-child {
  fill: currentColor;
  stroke: none;
}

.clipboard-tool-button:active:not(:disabled) {
  transform: scale(0.94);
  background: #303030;
}

.clipboard-tool-button:disabled {
  opacity: 0.24;
}

.event-card-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.event-card-copy {
  height: 24px;
  padding: 0 8px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #4b5360;
  border-radius: 7px;
  background: #20252b;
  color: #bcc7d4;

  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

.event-card-copy:active {
  transform: scale(0.94);
  background: #2d343c;
}

.event-paste-tab {
  margin-left: auto;
  flex-shrink: 0;
  color: #c9d4df;
}

.event-paste-tab:disabled {
  opacity: 0.24;
}

.event-paste-icon {
  font-size: 18px;
  line-height: 1;
}

@media (min-width: 521px) and (max-width: 599px) and (orientation: portrait) {
  #clipboard-toolbar {
    left: 60px;
    gap: 8px;
  }

  .clipboard-tool-button {
    width: 44px;
    height: 44px;
    padding: 9px;
    border-radius: 12px;
  }
}

@media (min-width: 600px) and (orientation: portrait) {
  #clipboard-toolbar {
    top: calc(12px + env(safe-area-inset-top));
    left: 86px;
    gap: 10px;
  }

  .clipboard-tool-button {
    width: 62px;
    height: 62px;
    padding: 13px;
    border-radius: 16px;
  }

  .event-card-actions {
    gap: 9px;
  }

  .event-card-copy {
    height: 36px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: var(--font-sm, 19px);
  }

  .event-paste-icon {
    font-size: var(--font-lg, 25px);
  }
}

/* =========================================================
   Advanced + button size
========================================================= */

#advanced-add-button {
  width: clamp(44px, 11vw, 56px);
  height: clamp(44px, 11vw, 56px);

  min-width: clamp(44px, 11vw, 56px);
  min-height: clamp(44px, 11vw, 56px);

  font-size: clamp(28px, 7vw, 34px);
}
/* =========================================================
   LANDSCAPE PHONE WORKSPACE V1

   Portrait keeps the existing bottom-sheet editor.
   On a short landscape viewport the same DOM reflows into a
   camera-style side workspace:

     map / canvas  |  editor controls

   Nothing is duplicated. The map ResizeObserver in main.js
   automatically updates Three.js when this CSS changes its size.
========================================================= */

@media (orientation: landscape) and (max-height: 650px) and (max-width: 1100px) {
  /* -----------------------------------------------------
     Workspace split
  ----------------------------------------------------- */

  #editor {
    --landscape-panel-width: clamp(310px, 41vw, 380px);

    --event-palette-height: 44px;
    --nav-height: 48px;

    flex-direction: row;
  }

  #editor.ui-multi {
    --landscape-panel-width: clamp(240px, 32vw, 310px);
  }

  #editor.ui-empty,
  #editor.ui-play {
    --landscape-panel-width: 0px;
  }

  #map-viewport {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: auto;
    height: 100%;
  }

  #editor-panel {
    flex: 0 0 var(--landscape-panel-width) !important;

    width: var(--landscape-panel-width);

    height: 100%;
    max-height: none;

    border-top: none;
    border-left: 1px solid var(--border-panel);
  }

  #editor.ui-empty #editor-panel,
  #editor.ui-play #editor-panel {
    display: none;
  }

  /* -----------------------------------------------------
     Map overlay controls
  ----------------------------------------------------- */

  #level-toolbar {
    top: calc(8px + env(safe-area-inset-top));

    left: calc(8px + env(safe-area-inset-left));

    right: calc(8px + env(safe-area-inset-right));

    height: 40px;
  }

  #level-toolbar-actions {
    gap: 6px;
  }

  #project-settings-button,
  #editor-settings-button,
  .clipboard-tool-button,
  .history-button {
    width: 40px;
    height: 40px;

    border-radius: 11px;
  }

  #project-settings-button,
  #editor-settings-button {
    font-size: 20px;
  }

  #clipboard-toolbar {
    top: calc(8px + env(safe-area-inset-top));

    left: calc(56px + env(safe-area-inset-left));

    gap: 6px;
  }

  .clipboard-tool-button {
    padding: 8px;
  }

  #history-toolbar {
    top: calc(8px + env(safe-area-inset-top));

    right: calc(8px + env(safe-area-inset-right));

    gap: 6px;
  }

  .history-button {
    font-size: 23px;
  }

  #level-title {
    max-width: 48vw;

    padding: 5px 9px;

    font-size: clamp(12px, 2.2vw, 16px);
  }

  #editor-info {
    top: calc(56px + env(safe-area-inset-top));

    right: calc(10px + env(safe-area-inset-right));

    max-width: min(52vw, 430px);

    font-size: clamp(7px, 1.3vw, 9px);

    line-height: 1.4;
  }

  /* -----------------------------------------------------
     Playback/navigation pill

     It remains horizontal, but is centered over the visible
     map area instead of over the whole screen + side editor.
  ----------------------------------------------------- */

  #bottom-nav,
  #editor.ui-single #bottom-nav,
  #editor.ui-advanced #bottom-nav,
  #editor.ui-multi #bottom-nav {
    left: calc((100% - var(--landscape-panel-width)) / 2);

    bottom: calc(10px + env(safe-area-inset-bottom));

    width: clamp(228px, 31vw, 292px);

    height: var(--nav-height);

    padding: 4px 6px;
  }

  .modifier-button,
  .floor-nav-button {
    height: 40px;
  }

  .modifier-button {
    font-size: clamp(10px, 1.5vw, 13px);
  }

  .floor-nav-button {
    font-size: clamp(24px, 3vw, 30px);
  }

  #play-button {
    width: 40px;
    height: 40px;

    border-radius: 12px;

    font-size: 19px;
  }

  /* -----------------------------------------------------
     Tabs + palette are now the top and bottom bars of the
     right-side editor rail.
  ----------------------------------------------------- */

  #editor-tabs {
    flex: 0 0 44px;

    height: 44px;

    gap: 5px;

    padding: 5px 8px 0;
  }

  .editor-tab {
    flex: 0 0 46px;

    height: 37px;

    border-radius: 10px 10px 0 0;
  }

  .editor-tab.active {
    height: 39px;
  }

  img.editor-tab-icon {
    width: 26px;
    height: 26px;
  }

  #event-palette {
    flex: 0 0 var(--event-palette-height);

    min-height: var(--event-palette-height);
  }

  #event-palette-list {
    justify-content: flex-start;

    gap: 7px;

    padding: 3px 8px;
  }

  .event-palette-button {
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    min-width: 36px;
    min-height: 36px;

    border-radius: 9px;
  }

  .event-palette-icon {
    width: 28px;
    height: 28px;
  }

  /* -----------------------------------------------------
     Single tile editor
  ----------------------------------------------------- */

  #angle-panel {
    min-width: 0;
    min-height: 0;
  }

  #single-angle-editor {
    --landscape-side-width: clamp(82px, 11vw, 96px);

    grid-template-columns:
      var(--landscape-side-width)
      minmax(0, 1fr)
      var(--landscape-side-width);

    width: 100%;
    height: 100%;

    align-items: start;

    padding: 10px 8px 8px;
  }

  #special-angle-column,
  #delete-angle-column {
    min-width: 0;

    gap: 8px;

    padding: 0;
  }

  #special-angle-column {
    padding-right: 6px;
  }

  #delete-angle-column {
    padding-left: 6px;
  }

  .editor-control-button,
  #delete-floor-button {
    min-height: 44px;
    height: 44px;

    padding: 0 5px;

    border-radius: 10px;

    font-size: clamp(10px, 1.55vw, 13px);
  }

  #quick-angle-area {
    min-width: 0;
    min-height: 0;

    padding-top: 1px;

    align-items: center;
    overflow: visible;
  }

  .angle-panel-title {
    flex-basis: 20px;

    margin-bottom: 4px;

    font-size: clamp(9px, 1.45vw, 12px);
  }

  #quick-angle-ring {
    width: min(18vw, 38dvh, 158px);

    min-width: 128px;

    margin-top: 2px;
  }

  .angle-button {
    width: 38px;
    height: 38px;

    border-radius: 10px;

    font-size: 20px;
  }

  .angle-sub-button {
    width: 23px;
    height: 23px;

    min-width: 23px;
    min-height: 23px;

    font-size: 8px;
  }

  #angle-current {
    width: 50px;
    height: 50px;

    font-size: 13px;
  }

  /* -----------------------------------------------------
     Advanced editor
  ----------------------------------------------------- */

  #advanced-angle-editor {
    --advanced-side-width: clamp(82px, 11vw, 96px);

    --advanced-input-width: 104px;

    grid-template-columns:
      var(--advanced-side-width)
      minmax(0, 1fr)
      var(--advanced-side-width);

    grid-template-rows:
      44px
      max-content
      minmax(0, 1fr) !important;

    column-gap: 7px;
    row-gap: 6px;

    width: 100%;
    height: 100%;

    padding: 6px 8px 8px;
  }

  #advanced-header {
    grid-template-columns:
      var(--advanced-side-width)
      minmax(0, 1fr)
      var(--advanced-side-width);

    gap: 7px;

    height: 44px;
    padding: 0;
  }

  #advanced-header > span:nth-child(2) {
    position: static;

    grid-column: 2;

    max-width: 100%;

    transform: none;

    font-size: clamp(14px, 2vw, 18px);
  }

  #advanced-back-button,
  #advanced-delete-floor-button {
    height: 40px;

    align-self: center;

    border-radius: 10px;
  }

  #advanced-back-button {
    width: 46px;

    font-size: 25px;
  }

  #advanced-delete-floor-button {
    width: 100%;

    padding: 0 4px;

    font-size: clamp(10px, 1.5vw, 12px);
  }

  #advanced-angle-info {
    grid-column: 2;
    grid-row: 2;

    gap: 6px;

    padding: 0;
  }

  #advanced-angle-input-wrap {
    height: 38px;
    min-height: 38px;
  }

  #advanced-angle-value {
    width: var(--advanced-input-width);
    height: 38px;

    padding: 0 8px;

    font-size: 20px;
  }

  #advanced-angle-input-wrap > span {
    left: calc(50% + var(--advanced-input-width) / 2 + 6px);

    font-size: 19px;
  }

  #snap-toggle-button {
    min-width: 104px;
    height: 32px;

    border-radius: 11px;

    font-size: 11px;
  }

  #advanced-special-angle-column {
    grid-column: 1;
    grid-row: 2 / 4;

    width: 100%;

    gap: 8px;

    margin: 0;
    padding: 2px 6px 0 0;
  }

  #advanced-special-angle-column .editor-control-button {
    min-height: 44px;
    height: 44px;
  }

  #angle-dial-wrap {
    grid-column: 2;
    grid-row: 3;

    --landscape-dial-size: min(18vw, 38dvh, 154px);

    width: var(--landscape-dial-size) !important;

    height: var(--landscape-dial-size) !important;

    min-width: var(--landscape-dial-size) !important;

    min-height: var(--landscape-dial-size) !important;

    max-width: none !important;
    max-height: none !important;

    align-self: start;
    justify-self: center;

    margin: 1px 0 0 !important;
  }

  .dial-label {
    font-size: 11px;
  }

  #advanced-add-button {
    width: 50px;
    height: 50px;

    min-width: 50px;
    min-height: 50px;

    font-size: 32px;
  }

  /* -----------------------------------------------------
     Multi selection
  ----------------------------------------------------- */

  #multi-editor {
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 16px;

    padding: 18px;

    text-align: center;
  }

  #multi-selection-count {
    font-size: 14px;
  }

  #delete-selected-button {
    min-width: 132px;
    height: 44px;

    border-radius: 10px;

    font-size: 13px;
  }

  /* -----------------------------------------------------
     Event editor
  ----------------------------------------------------- */

  #event-screen-header {
    flex-basis: 54px;

    gap: 9px;

    padding: 7px 10px;
  }

  #event-screen-icon {
    flex-basis: 34px;

    width: 34px;
    height: 34px;
  }

  #event-screen-title {
    font-size: 14px;
  }

  #event-screen-subtitle {
    font-size: 10px;
  }

  #event-screen-body {
    padding: 7px 9px 10px;
  }

  .event-card {
    margin-bottom: 8px;

    padding: 8px 9px;
  }

  .event-card-title {
    font-size: 12px;
  }

  .event-form-row {
    min-height: 46px;

    gap: 8px;
  }

  .event-form-label {
    font-size: 10px;
  }

  .event-form-input,
  .event-form-select {
    flex-basis: min(43%, 150px);

    width: min(43%, 150px);
    max-width: 150px;

    height: 34px;
  }

  .event-segmented {
    flex: 0 1 60%;

    width: min(60%, 210px);
    max-width: 210px;

    height: 38px;
  }

  .event-segment-button {
    flex: 1 1 50%;

    min-width: 0;

    padding: 0 6px;

    font-size: 10px;
  }

  /* -----------------------------------------------------
     Dialogs: use the scarce vertical space more efficiently.
  ----------------------------------------------------- */

  .project-settings-overlay,
  .editor-welcome-overlay {
    padding: calc(7px + env(safe-area-inset-top))
      calc(10px + env(safe-area-inset-right))
      calc(7px + env(safe-area-inset-bottom))
      calc(10px + env(safe-area-inset-left));
  }

  .project-settings-sheet {
    width: min(620px, 88vw);
    max-height: calc(100dvh - 14px);
  }

  .editor-welcome-sheet {
    width: min(720px, 92vw);
    max-height: calc(100dvh - 14px);
  }

  .editor-welcome-scroll {
    padding: 14px 18px 6px;
  }

  .editor-welcome-scroll h2 {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .editor-welcome-scroll p {
    margin-bottom: 9px;
    font-size: 11px;
    line-height: 1.5;
  }

  .editor-welcome-continue {
    flex-basis: 40px;
    margin: 7px 18px 10px;
  }
}

/* =========================================================
   EXTRA-SHORT LANDSCAPE PHONES
   Example: browser chrome leaves only ~320px CSS height.
========================================================= */

@media (orientation: landscape) and (max-height: 360px) and (max-width: 1100px) {
  #editor {
    --landscape-panel-width: clamp(300px, 42vw, 350px);

    --event-palette-height: 40px;
    --nav-height: 44px;
  }

  #editor-tabs {
    flex-basis: 40px;
    height: 40px;
  }

  .editor-tab {
    height: 34px;
  }

  .editor-tab.active {
    height: 36px;
  }

  #single-angle-editor {
    --landscape-side-width: 78px;

    padding: 6px 6px 5px;
  }

  .editor-control-button,
  #delete-floor-button {
    min-height: 39px;
    height: 39px;
  }

  #quick-angle-ring {
    width: min(17vw, 36dvh, 132px);
    min-width: 116px;
  }

  .angle-button {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .angle-sub-button {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    font-size: 7px;
  }

  #angle-current {
    width: 46px;
    height: 46px;
  }

  #advanced-angle-editor {
    --advanced-side-width: 78px;

    grid-template-rows:
      40px
      max-content
      minmax(0, 1fr) !important;

    row-gap: 4px;
    padding: 4px 6px 5px;
  }

  #advanced-angle-input-wrap,
  #advanced-angle-value {
    height: 34px;
    min-height: 34px;
  }

  #snap-toggle-button {
    height: 28px;
  }

  #advanced-special-angle-column .editor-control-button {
    min-height: 39px;
    height: 39px;
  }

  #angle-dial-wrap {
    --landscape-dial-size: min(16vw, 34dvh, 120px);
  }

  #advanced-add-button {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    font-size: 30px;
  }

  #bottom-nav,
  #editor.ui-single #bottom-nav,
  #editor.ui-advanced #bottom-nav,
  #editor.ui-multi #bottom-nav {
    width: clamp(214px, 30vw, 270px);
    bottom: calc(7px + env(safe-area-inset-bottom));
  }
}

/* Keep Debug Info below the undo/redo and flip buttons. */
#editor-info {
  top: calc(132px + env(safe-area-inset-top));
  right: 10px;
  max-width: min(68vw, 560px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}