@font-face {
  font-family: "M PLUS 1";
  src: url("./fonts/m-plus-1/MPLUS1-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

.theatre-entry, .theatre-view {
  --jt-font: "M PLUS 1", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  font-family: var(--jt-font);
  /* Keep iOS text autosizing from changing the size of individual passages. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.theatre-entry {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  padding: 11px 13px;
  overflow: hidden;
  border: 1px solid #9b6658;
  border-radius: 16px;
  color: #f6e5c8;
  background: radial-gradient(ellipse at 12% 20%, #8f25394d, transparent 58%), linear-gradient(115deg, #441324, #21111c);
  box-shadow: 0 11px 26px #0207133d, inset 0 1px #f6d98e17;
  text-align: left;
}
.theatre-entry:hover, .theatre-entry:focus-visible { border-color: #d0a65f; }
.theatre-entry:active { transform: scale(.985); }
.theatre-entry-icon {
  position: relative;
  width: 45px;
  height: 47px;
  overflow: hidden;
  border: 1px solid #b18c54;
  border-radius: 18px 18px 3px 3px;
  background: radial-gradient(ellipse at 50% 30%, #d5aa694d, #130e15 68%);
  box-shadow: inset 0 -5px #7a4c34;
}
.theatre-entry-icon::before, .theatre-entry-icon::after {
  position: absolute;
  top: 0;
  width: 17px;
  height: 37px;
  content: "";
  background: repeating-linear-gradient(90deg, #60172d 0, #9e2b47 4px, #4f1128 8px);
  border-bottom: 1px solid #cfa65f;
}
.theatre-entry-icon::before { left: 0; border-radius: 0 0 90% 0; }
.theatre-entry-icon::after { right: 0; border-radius: 0 0 0 90%; }
.theatre-entry-icon i { position: absolute; left: 21px; top: 24px; width: 3px; height: 8px; background: #ecd2a1; box-shadow: 0 0 10px #f4bf69; }
.theatre-entry-copy { display: grid; min-width: 0; gap: 3px; }
.theatre-entry-copy small { color: #d4ac78; font: 700 .53rem/1.3 ui-monospace, monospace; letter-spacing: .15em; }
.theatre-entry-copy strong { font: 500 .96rem/1.5 var(--jt-font); letter-spacing: .05em; }
.theatre-entry-copy > span { color: #c2a5ae; font-size: .62rem; }
.theatre-entry-arrow { color: #d6b07e; }

.theatre-view, .theatre-view * { box-sizing: border-box; }
.theatre-view[hidden], .theatre-view [hidden] { display: none !important; }
.theatre-view {
  --jt-gold: #d6b175;
  --jt-cream: #f6e8cf;
  --jt-red: #81213a;
  position: fixed;
  z-index: 127;
  inset: 0;
  isolation: isolate;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--jt-cream);
  background: radial-gradient(ellipse at 50% 0, #4b1d2b 0, #1c111c 40%, #0d0a11 85%);
  font-family: var(--jt-font);
  scrollbar-color: #80505f #1c111c;
}
.theatre-view button, .theatre-view select, .theatre-view input, .theatre-view textarea { font-family: inherit; }
.theatre-view button { cursor: pointer; }
.theatre-view button:disabled, .theatre-view select:disabled { opacity: .32; cursor: default; }
.theatre-view :focus-visible { outline: 2px solid #f0c77d; outline-offset: 4px; }
.jt-shell {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 760px);
  height: 100svh;
  height: 100dvh;
  min-height: 650px;
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
}
.jt-topbar { display: grid; grid-template-columns: 48px minmax(0, 1fr) 60px; align-items: center; gap: 10px; flex: 0 0 auto; }
.jt-topbar > div { min-width: 0; text-align: center; }
.jt-topbar p { margin: 0 0 4px; color: var(--jt-gold); font: 700 .49rem/1.3 ui-monospace, monospace; letter-spacing: .15em; }
.jt-topbar h1 { margin: 0; color: var(--jt-cream); font: 500 clamp(1.05rem, 4.8vw, 1.3rem)/1.4 var(--jt-font); letter-spacing: .05em; white-space: normal; }
.jt-small-button, .jt-action, .jt-nav-button, .jt-sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 9px;
  border: 1px solid #b997633d;
  border-radius: 11px;
  color: #e2c59d;
  background: #120c1680;
  font-size: .72rem;
  line-height: 1.2;
}
.jt-small-button.jt-add { border-color: #c1976673; background: #6a253a80; }
.jt-rule { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 0 5px; color: #bb9159; font-size: .55rem; }
.jt-rule::before, .jt-rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #b28b524d); }
.jt-rule::after { transform: rotate(180deg); }
.jt-programme { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px; flex: 0 0 auto; }
.jt-programme label { display: block; min-width: 0; }
.jt-programme label > span { display: block; margin: 0 0 3px 3px; color: #b99a78; font: 700 .48rem/1.2 ui-monospace, monospace; letter-spacing: .16em; }
.jt-programme select { width: 100%; min-width: 0; min-height: 37px; padding: 7px 24px 7px 9px; border: 1px solid #b9976333; border-radius: 8px; background: #21131f; color: #dfc7a7; font-size: 16px; text-overflow: ellipsis; }
.jt-action { align-self: end; min-width: 44px; padding: 8px; font-size: .64rem; }
.jt-action.jt-delete { color: #c89ba7; }
.jt-proscenium {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 240px;
  overflow: hidden;
  border: 1px solid #a1804f;
  border-bottom: 5px solid #76513a;
  border-radius: 76px 76px 11px 11px / 36px 36px 11px 11px;
  background: radial-gradient(ellipse at 50% 22%, #e7bb721f, transparent 64%), linear-gradient(#18111b, #17111a 70%, #211621);
  box-shadow: 0 0 0 4px #b28b5212, 0 0 0 8px #08060d, 0 20px 35px #0006, inset 0 1px #f9dca447;
}
.jt-proscenium::before {
  position: absolute;
  z-index: -1;
  inset: 18px 15% 32px;
  content: "";
  clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%);
  background: linear-gradient(#ffe2a30a, #ffe4ab09 70%, #f9d99a1c);
  pointer-events: none;
}
.jt-stage-floor { position: absolute; z-index: 1; inset: auto 0 0; height: 29px; background: repeating-linear-gradient(90deg, #b0754626 0 1px, transparent 1px 30px), linear-gradient(#654332, #2e1b21); border-top: 1px solid #d4a16766; box-shadow: 0 -3px 15px #e8bb6014; pointer-events: none; }
.jt-stage-floor::after { position: absolute; inset: auto 12px 4px; height: 3px; content: ""; background: radial-gradient(circle, #ffe3a1 0 1px, transparent 2px) 0 0 / 29px 3px; filter: drop-shadow(0 0 3px #ffc368); }
.jt-valance { position: absolute; z-index: 5; inset: 0 0 auto; height: 31px; border-bottom: 2px solid #ac7e47; border-radius: 0 0 50% 50% / 0 0 40% 40%; background: repeating-linear-gradient(90deg, #671a30, #8e2a43 9px, #4a1028 20px, #66182e 29px); box-shadow: 0 6px 16px #0008; pointer-events: none; }
.jt-curtain { position: absolute; z-index: 4; top: 0; bottom: 17px; width: 51%; background: repeating-linear-gradient(90deg, #4b1026 0, #9c2b46 9%, #701a32 17%, #3f0d23 25%); box-shadow: 6px 0 18px #0008, inset -3px 0 5px #d5785526; transition: transform 1100ms cubic-bezier(.22,.7,.22,1); pointer-events: none; }
.jt-curtain-left { left: 0; border-right: 2px solid #b58a4c; border-radius: 0 0 25% 0; transform-origin: left top; }
.jt-curtain-right { right: 0; border-left: 2px solid #b58a4c; border-radius: 0 0 0 25%; transform-origin: right top; }
.jt-curtains-open .jt-curtain-left { transform: translateX(-83%) rotate(-2deg); }
.jt-curtains-open .jt-curtain-right { transform: translateX(83%) rotate(2deg); }
.jt-performance, .jt-empty { position: relative; z-index: 2; min-height: 0; flex: 1 1 0; margin: 42px 13% 43px; opacity: 0; transition: opacity 550ms ease 260ms; }
.jt-curtains-open .jt-performance, .jt-curtains-open .jt-empty { opacity: 1; }
.jt-performance { display: flex; flex-direction: column; gap: 12px; }
.jt-performance h2 { flex: 0 0 auto; margin: 0; color: #f6dbac; font: 500 clamp(.96rem, 4.1vw, 1.15rem)/1.6 var(--jt-font); letter-spacing: .04em; text-align: center; max-height: 3.2em; overflow: auto; overflow-wrap: anywhere; }
.jt-performance h2::after { display: block; width: 38px; height: 1px; margin: 9px auto 0; content: ""; background: #c69d5759; }
.jt-script { flex: 1 1 0; min-height: 0; margin: 0; padding: 0 4px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #896148 transparent; color: #f4e8d4; font: 400 clamp(.9rem, 3.85vw, .95rem)/1.85 var(--jt-font); letter-spacing: .015em; white-space: pre-wrap; overflow-wrap: anywhere; touch-action: pan-y; }
.jt-performance .jt-meta { flex: 0 0 auto; margin: 0; color: #b39879; font-size: .58rem; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.jt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.jt-empty > span { color: #d6b175; font: 400 2.4rem/1 var(--jt-font); text-shadow: 0 0 25px #f2ca7f70; }
.jt-empty > small { color: #cda66e; font: 700 .48rem/1.5 ui-monospace, monospace; letter-spacing: .14em; }
.jt-empty h2 { margin: 0; color: #eddbc1; font: 500 1rem/1.8 var(--jt-font); }
.jt-empty p { margin: 0; color: #b89ea0; font-size: .68rem; line-height: 1.8; }
.jt-empty button { min-height: 44px; padding: 8px 14px; border: 1px solid #b895595c; border-radius: 8px; background: #5f24344d; color: #e7cba1; font-size: .7rem; }
.jt-navigation { display: grid; grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 12px; align-items: center; flex: 0 0 auto; padding-top: 4px; }
.jt-nav-button { font-size: 1.1rem; }
.jt-nav-copy { text-align: center; }
.jt-nav-copy strong { display: block; color: #ead0a9; font: 600 .75rem/1.5 ui-monospace, monospace; letter-spacing: .15em; }
.jt-nav-copy span { color: #9f8590; font-size: .56rem; }
.jt-audience { position: relative; flex: 0 0 104px; display: flex; align-items: end; justify-content: center; isolation: isolate; }
.jt-seats { position: absolute; inset: 2px -8px auto; z-index: -1; display: grid; gap: 4px; opacity: .8; perspective: 300px; }
.jt-seat-row { display: flex; justify-content: center; gap: 5px; height: 20px; }
.jt-seat-row:nth-child(1) { transform: scale(.78); }
.jt-seat-row:nth-child(2) { transform: scale(.89); }
.jt-seat-row i { display: block; width: clamp(17px, 4.9vw, 31px); height: 23px; border: 1px solid #a14b514d; border-radius: 9px 9px 3px 3px; background: linear-gradient(100deg, #25101f, #662537 48%, #301123); box-shadow: inset 0 2px #c25b541f, 0 5px #0b070e; }
.jt-seat-row i.jt-aisle { margin-left: 17px; }
.jt-bravo { position: absolute; top: -22px; left: 0; right: 0; color: #f2d49a; font: italic 500 1.2rem/1.4 Georgia, serif; letter-spacing: .18em; text-align: center; opacity: 0; pointer-events: none; }
.jt-applause { position: relative; min-width: 152px; min-height: 45px; padding: 10px 25px; border: 1px solid #c09a60; border-radius: 25px; color: #f9e4c2; background: linear-gradient(#722c3d, #461b30); box-shadow: 0 5px 19px #0007, inset 0 1px #f3cf8f29; font: 500 .85rem/1.4 var(--jt-font) !important; letter-spacing: .12em; }
.jt-applause::before, .jt-applause::after { content: "✦"; color: #cda363; font-size: .58rem; vertical-align: middle; }
.jt-applause::before { margin-right: 13px; }
.jt-applause::after { margin-left: 13px; }
.jt-applauding .jt-bravo { animation: jtBravo 1300ms ease both; }
.jt-applauding .jt-seat-row i { animation: jtAudienceGlow 1100ms ease both; }
.jt-bottom { display: flex; align-items: center; justify-content: space-between; gap: 9px; flex: 0 0 auto; }
.jt-bottom > span { color: #8d7480; font: 600 .44rem/1.4 ui-monospace, monospace; letter-spacing: .16em; }
.jt-sound { min-height: 34px; font-size: .63rem; padding: 7px 11px; }
.jt-status { flex: 0 0 auto; min-height: 1.6em; margin: 0; color: #c4a16e; font-size: .62rem; line-height: 1.6; text-align: center; }
.jt-enter { animation: jtPageEnter 300ms ease both; }
.jt-editing { overflow: hidden; }
.jt-editor-layer { position: fixed; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.jt-editor-backdrop { position: absolute; inset: 0; background: #08050cdc; backdrop-filter: blur(9px); }
.jt-editor-panel { position: relative; width: min(100%, 560px); max-height: 100%; margin: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid #b18b5c80; border-radius: 19px; background: linear-gradient(140deg, #3a1c2b, #1b1221); box-shadow: 0 25px 80px #0009; }
.jt-editor-panel header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.jt-editor-panel header p { margin: 0 0 5px; color: #b38e64; font: 700 .5rem/1.4 ui-monospace, monospace; letter-spacing: .15em; }
.jt-editor-panel h2 { margin: 0; color: #f0d7b2; font: 500 1.1rem/1.5 var(--jt-font); }
.jt-editor-close { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; padding: 0; border: 1px solid #bc8e613d; border-radius: 50%; background: #110a15a6; color: #dcbf9e; font-size: 1.25rem; }
.jt-save-status { min-height: 2.8em; margin: 0 0 12px; color: #cba479; font-size: .68rem; line-height: 1.5; }
.jt-editor-panel label { display: grid; min-width: 0; gap: 7px; margin: 0 0 15px; }
.jt-editor-panel label > span { color: #c6b2b6; font-size: .72rem; }
.jt-editor-panel input, .jt-editor-panel textarea { width: 100%; min-width: 0; padding: 11px 12px; border: 1px solid #a27b635c; border-radius: 9px; color: #f6e7d4; background: #130d18b3; font-size: 16px; line-height: 1.7; }
.jt-editor-panel input[type="date"] { display: block; min-height: 50px; max-width: 100%; -webkit-appearance: none; appearance: none; text-align: left; }
.jt-editor-panel input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.jt-editor-panel textarea { min-height: 220px; resize: vertical; white-space: pre-wrap; }
.jt-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }
.jt-editor-panel footer { display: flex; align-items: center; justify-content: end; gap: 10px; padding-top: 3px; }
.jt-editor-panel footer button { min-height: 45px; padding: 10px 14px; border: 1px solid #bb94605c; border-radius: 10px; color: #e7cdaa; background: #2a1726; font-size: .76rem; }
.jt-editor-panel footer .jt-save { color: #fce5bb; background: linear-gradient(#7c3347, #59243b); border-color: #c09a6380; }
@keyframes jtBravo { 0% { opacity: 0; transform: translateY(6px); } 18%, 65% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-12px); } }
@keyframes jtAudienceGlow { 25%, 60% { border-color: #daaa6766; filter: brightness(1.55); } }
@keyframes jtPageEnter { from { opacity: .1; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 620px) { .jt-shell { padding-right: 40px; padding-left: 40px; gap: 13px; } .jt-proscenium { min-height: 300px; } .jt-performance, .jt-empty { margin-top: 50px; } .jt-script { font-size: 1rem; } }
@media (max-width: 359px) { .jt-shell { padding-right: 12px; padding-left: 12px; gap: 8px; } .jt-topbar { gap: 6px; grid-template-columns: 44px minmax(0, 1fr) 52px; } .jt-topbar p { font-size: .43rem; letter-spacing: .08em; } .jt-performance, .jt-empty { margin-right: 12%; margin-left: 12%; } .jt-programme select { font-size: 16px; } .jt-editor-panel { padding: 16px; } .jt-editor-grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }
@media (prefers-reduced-motion: reduce) { .jt-curtain, .jt-performance, .jt-empty { transition: none; } .jt-enter, .jt-applauding .jt-bravo, .jt-applauding .jt-seat-row i { animation: none; } .jt-applauding .jt-bravo { opacity: 1; } }