/* 2026-10: 紅色テーマの紹介パネル・競技紹介・飛行機の光跡。
   文章は index.html、配色の基本は style.css 冒頭で編集できます。 */

#flight-effect {
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:60;
  pointer-events:none;
}
.fx-off #flight-effect { display:none; }

/* 参照画像の斜めカット・二重ライン・短いスリットを、可変高の背景に。 */
.hud-panel {
  --hud-cut:polygon(0 26px,26px 0,62% 0,calc(62% + 12px) 12px,calc(100% - 14px) 12px,100% 26px,100% calc(100% - 26px),calc(100% - 26px) 100%,32% 100%,calc(32% - 12px) calc(100% - 12px),14px calc(100% - 12px),0 calc(100% - 26px));
  position:relative;
  isolation:isolate;
  min-width:0;
  filter:drop-shadow(0 8px 25px #10060d40);
}
.hud-panel::before,.hud-panel::after {
  content:"";
  position:absolute;
  pointer-events:none;
  clip-path:var(--hud-cut);
}
.hud-panel::before {
  inset:0;
  z-index:-2;
  background:linear-gradient(125deg,#ff9ab5 0%,#ba4264 36%,#723952 62%,#b18ae0 100%);
  opacity:.8;
}
.hud-panel::after {
  inset:1px;
  z-index:-1;
  background:
    radial-gradient(ellipse at 0 0,#8b284c22,transparent 63%),
    linear-gradient(130deg,#24121ff7,#190f1dfc 58%,#20162cfa);
}
.hud-panel__trim {
  position:absolute;
  inset:7px;
  z-index:0;
  pointer-events:none;
  clip-path:var(--hud-cut);
  background:
    linear-gradient(90deg,#ff8ead99,#f5527800) left 26px top 0 / 44% 1px no-repeat,
    linear-gradient(#ff8ead99,#f5527800) left 0 top 26px / 1px 31% no-repeat,
    linear-gradient(270deg,#b293e199,#9c69ed00) right 26px bottom 0 / 41% 1px no-repeat,
    linear-gradient(0deg,#b293e199,#9c69ed00) right 0 bottom 26px / 1px 30% no-repeat;
}
.hud-panel__trim::before {
  content:"";
  position:absolute;
  right:28px;
  top:17px;
  width:34px;
  height:4px;
  transform:skewX(-40deg);
  background:repeating-linear-gradient(90deg,#ff98bb88 0 7px,transparent 7px 11px);
}
.hud-panel__trim::after {
  content:"";
  position:absolute;
  left:38%;
  bottom:2px;
  width:82px;
  height:5px;
  background:repeating-linear-gradient(135deg,#eb7fa788 0 4px,transparent 4px 8px);
}
.hud-panel .hud-panel__label {
  display:block;
  margin:0 0 27px;
  font:9px/1.5 var(--mono);
  letter-spacing:.18em;
  color:#e194af;
}
.story-copy.hud-panel {
  padding:35px clamp(25px,3vw,43px) 39px;
}
.story-copy.hud-panel h3 { font-size:clamp(27px,3vw,39px); }
.story-copy.hud-panel>p:not(.kicker) { color:#cdb8c4; }
.story-status { flex-wrap:wrap; color:#c2a5b6; }
.story-status .small-code { color:#aa8198; }
.character-profile.hud-panel {
  padding:38px clamp(25px,3vw,43px) 43px;
}
.visual-copy.hud-panel {
  padding:39px clamp(25px,3vw,43px) 43px;
}
.profile-text,.visual-copy>p { color:#c8b0bf; }
.cast-button:disabled { cursor:not-allowed; }

/* 機体紹介：画像を切り抜かずに表示し、諸元表はHTMLで編集できます。 */
.broom-section {
  position:relative;
  background:radial-gradient(ellipse at 12% 40%,#832b4420,transparent 60%),#170d16;
  border-bottom:1px solid #ff8baa14;
}
.broom-heading { margin:0; font-family:var(--serif); font-weight:400; }
.broom-heading>span { display:block; font-size:clamp(20px,2.4vw,30px); letter-spacing:.08em; }
.broom-heading>b { display:inline-block; margin:4px 17px 0 0; font-size:clamp(46px,5.7vw,76px); line-height:1.3; font-weight:400; letter-spacing:.03em; }
.broom-heading>small { display:inline-block; color:#e3a4b8; font:10px/1.7 var(--mono); letter-spacing:.2em; }
.broom-layout { display:grid; grid-template-columns:minmax(0,1.28fr) minmax(0,1fr); gap:clamp(25px,4vw,54px); align-items:start; }
.broom-visual { min-width:0; margin:0; border:1px solid #e8799a5c; background:#21101d; box-shadow:0 18px 70px #0003; }
.broom-visual-head { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:16px 18px; font:9px/1.5 var(--mono); letter-spacing:.12em; color:#df9eb3; }
.broom-visual-head>span:first-child { display:flex; align-items:center; gap:9px; }
.broom-visual-head>span:last-child { font:15px/1.4 var(--serif); color:#ffe5ec; }
.broom-image { display:block; position:relative; width:100%; padding:0; border:0; background:#eee4ef; cursor:zoom-in; }
.broom-image img { display:block; width:100%; height:auto; aspect-ratio:2048/1649; object-fit:contain; }
.broom-image-corners { position:absolute; inset:12px; pointer-events:none; }
.broom-image-corners::before,.broom-image-corners::after { content:""; position:absolute; width:22px; height:22px; border:1px solid #63233a8c; }
.broom-image-corners::before { top:0; left:0; border-right:0; border-bottom:0; }
.broom-image-corners::after { bottom:0; right:0; border-left:0; border-top:0; }
.broom-zoom { position:absolute; right:18px; bottom:18px; display:grid; place-items:center; width:39px; height:39px; color:#ffdfeb; background:#30101ed9; border:1px solid #ffd2e18c; transition:background .25s,box-shadow .25s; }
.broom-zoom svg { width:20px; height:20px; }
.broom-image:hover .broom-zoom { background:#782847; box-shadow:0 0 24px #ff8eac55; }
.broom-visual figcaption { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 15px; padding:14px 18px; font:9px/1.6 var(--mono); letter-spacing:.08em; color:#c99aad; border-bottom:1px solid #f584a225; }
.broom-visual figcaption b { font:10px/1.6 var(--sans); font-weight:400; }
.broom-visual figcaption>span:last-child { color:#e3b2c2; font-family:var(--sans); }
.broom-capabilities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); padding:20px 10px; }
.broom-capabilities>span { min-width:0; text-align:center; font:12px/1.6 var(--sans); letter-spacing:.04em; color:#e5cad5; }
.broom-capabilities>span+span { border-left:1px solid #f584a225; }
.broom-capabilities small { display:block; margin-bottom:7px; font:8px/1.3 var(--mono); letter-spacing:.1em; color:#bf7893; }
.broom-data.hud-panel { padding:34px clamp(24px,2.5vw,36px) 38px; }
.broom-data-heading { display:flex; flex-wrap:wrap; align-items:center; gap:7px 15px; padding-bottom:17px; border-bottom:1px solid #ef84a441; }
.broom-data-heading h3 { margin:0; font:400 28px/1.4 var(--serif); letter-spacing:.12em; }
.broom-data-heading>span { font:8px/1.7 var(--mono); letter-spacing:.12em; color:#bb819c; }
.broom-description { margin:21px 0 25px; color:#ddc3ce; font:13px/2.15 var(--sans); letter-spacing:.04em; }
.broom-specs { width:100%; border-collapse:collapse; table-layout:fixed; text-align:left; }
.broom-specs th,.broom-specs td { vertical-align:middle; border-bottom:1px solid #f08ca529; padding:14px 0; overflow-wrap:anywhere; }
.broom-specs th { width:35%; padding-right:15px; color:#cfa3b6; font:400 11px/1.6 var(--sans); }
.broom-specs th small { display:block; margin-top:5px; color:#ab7892; font:7px/1.6 var(--mono); letter-spacing:.07em; }
.broom-specs td { color:#f6e6ed; font:13px/1.9 var(--sans); letter-spacing:.04em; }
.broom-specs strong { color:#ffb5cc; font-weight:500; }
.broom-energy { display:flex; align-items:center; gap:13px; margin-top:25px; color:#edbccb; }
.broom-energy>svg { width:33px; height:33px; color:#f17c9c; }
.broom-energy>span { font:16px/1.6 var(--serif); letter-spacing:.1em; }
.broom-energy small { display:block; color:#bc879f; margin-top:5px; font:8px/1.6 var(--mono); letter-spacing:.09em; }

@media (min-width:761px) {
  .desktop-nav { gap:clamp(12px,2.4vw,34px); }
  .site-header { gap:16px; }
}
@media (min-width:761px) and (max-width:1000px) {
  .broom-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:25px; }
  .broom-visual-head { font-size:7px; padding-inline:12px; }
  .broom-capabilities>span { font-size:10px; }
  .broom-data.hud-panel { padding-inline:22px; }
  .broom-specs th { width:38%; }
}
@media (max-width:760px) {
  .broom-layout { grid-template-columns:minmax(0,1fr); gap:28px; }
  .broom-heading>span { font-size:clamp(18px,4.7vw,25px); }
  .broom-heading>b { font-size:55px; }
  .broom-heading>small { font-size:8px; }
  .broom-data.hud-panel { padding:31px 25px 35px; }
  .broom-visual-head { font-size:8px; padding:13px 14px; }
  .broom-visual figcaption { padding:12px 14px; font-size:8px; }
  .broom-capabilities { padding:17px 5px; }
  .broom-capabilities>span { font-size:11px; }
}
@media (max-width:380px) {
  .broom-data.hud-panel { padding-inline:20px; }
  .broom-specs td { font-size:12px; }
  .broom-specs th { width:38%; font-size:10px; }
  .broom-description { font-size:12px; }
  .broom-visual-head { font-size:7px; letter-spacing:.07em; }
}

/* タブの名称とイラストはHTML、切り替えはapp.jsに集約。 */
.world-layout { align-items:start; }
.competition-heading { font-size:clamp(34px,4.5vw,59px); letter-spacing:.09em; }
.competition-heading>span { font:10px/1.8 var(--mono); letter-spacing:.24em; }
.world-window {
  background:linear-gradient(145deg,#34132466,#140c18);
  border-color:#e36a8c66;
  box-shadow:0 0 50px #f4527610;
}
.world-window-head,.world-window-foot { color:#cd97af; }
.world-illustration {
  aspect-ratio:1.44;
  background:radial-gradient(ellipse at 50% 62%,#a439601c,transparent 70%);
}
.competition-visual {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 5px #ff75983b);
  animation:competition-enter .55s ease both;
}
.world-window[data-world="race"] { border-color:#b394e577; }
.world-window[data-world="race"] .world-grid { animation-duration:4s; }
.world-window[data-world="battle"] { border-color:#ff729477; }
.world-coordinate { color:#ca94ac; }
.world-caption { color:#a17c96; }
.world-details>.kicker { color:#c2a0b4; }
.world-tabs { gap:8px; border-bottom:0; }
.world-tabs button {
  min-width:0;
  min-height:106px;
  padding:23px 6px 17px;
  background:#2d132459;
  border:1px solid #e97a9b26;
  color:#bca0b3;
  transition:background .25s,color .25s,border-color .25s;
}
.world-tabs button:hover { color:#ffe4ef; background:#61233e44; }
.world-tabs button[aria-selected="true"] {
  color:#fff1f6;
  border-color:#f879a17a;
  background:linear-gradient(145deg,#8f294a55,#3c203149);
  box-shadow:inset 0 0 28px #f3557f0a;
}
.world-tabs button>.competition-number {
  position:absolute;
  top:6px;
  left:9px;
  color:#b67b96;
  font:8px/1 var(--mono);
}
.world-tabs button>.competition-tab-label {
  display:flex;
  flex-direction:column;
  gap:8px;
  color:inherit;
}
.competition-tab-label strong {
  font:500 clamp(24px,2.4vw,33px)/1.15 var(--serif);
  letter-spacing:.08em;
}
.competition-tab-label small {
  font:9px/1.2 var(--mono);
  letter-spacing:.19em;
  color:#cc95ae;
}
.world-tabs button[aria-selected="true"] small { color:#ffb6ce; }
.world-tabpanel.hud-panel {
  margin-top:22px;
  padding:30px 29px 36px;
  min-height:308px;
}
.world-tabpanel.hud-panel .hud-panel__label { margin-bottom:21px; }
.world-tabpanel.hud-panel h3 { font-size:clamp(23px,2.2vw,29px); line-height:1.7; }
.world-tabpanel.hud-panel p { color:#c4adbe; font-size:13px; }
.world-kanji { color:#ec88b00c; right:18px; top:58px; }
.world-footnote { display:block; color:#a17b95; margin-top:18px; }
.world-window-foot>span:nth-child(2) { font-size:10px; }

@keyframes competition-enter {
  from { opacity:0; transform:translateY(10px) scale(.975); }
  to { opacity:1; transform:none; }
}
@media (min-width:761px) and (max-width:1100px) {
  .world-layout { grid-template-columns:51% 1fr; gap:4%; }
  .world-tabpanel.hud-panel { padding-inline:23px; }
  .world-tabs { gap:5px; }
  .competition-tab-label strong { font-size:26px; }
  .world-window-head { padding-inline:12px; letter-spacing:.04em; }
}
@media (max-width:760px) {
  .story-copy.hud-panel,.character-profile.hud-panel,.visual-copy.hud-panel { padding:30px 24px 35px; }
  .hud-panel .hud-panel__label { font-size:8px; margin-bottom:23px; }
  .story-copy.hud-panel h3 { font-size:27px; }
  .story-copy.hud-panel>p:not(.kicker) { font-size:13px; }
  .world-layout { grid-template-columns:1fr; gap:28px; }
  .world-illustration { aspect-ratio:1.38; }
  .world-tabs button { min-height:108px; padding:23px 6px 17px; }
  .competition-tab-label strong { font-size:30px; }
  .competition-tab-label small { font-size:10px; }
  .world-tabpanel.hud-panel { min-height:294px; padding:29px 25px 35px; }
  .world-tabpanel.hud-panel h3 { font-size:26px; }
  .world-tabpanel.hud-panel p { font-size:13px; }
  .world-window-head>span:first-child { font-size:7px; letter-spacing:.03em; }
  .world-window-foot>span:nth-child(2) { font-size:9px; }
  .competition-heading>span { font-size:9px; }
}
@media (max-width:380px) {
  .story-copy.hud-panel,.character-profile.hud-panel,.visual-copy.hud-panel { padding-inline:20px; }
  .story-copy.hud-panel h3 { font-size:24px; letter-spacing:.035em; }
  .competition-tab-label strong { font-size:27px; }
  .world-tabpanel.hud-panel { padding-inline:22px; }
  .world-tabpanel.hud-panel h3 { font-size:24px; }
  .story-status .small-code { display:none; }
}

/* 公開用の簡潔な文章に合わせて余白を調整。 */
.story-copy.hud-panel > .kicker { margin-bottom: 25px; }
.world-tabpanel.hud-panel { min-height: 225px; }
.world-tabpanel.hud-panel h3 { margin-bottom: 16px; }
.visual-copy.hud-panel h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.6; }
.visual-copy.hud-panel .visual-note { color: #bfa6b2 !important; }
.broom-energy > span { font-size: 14px; letter-spacing: .04em; }
.closing-section { padding: 64px 0 72px; }
.closing-section h2 { font-size: 28px; line-height: 1.5; margin: 0 0 28px; }
.site-footer { color: #b69ba9; }
main:focus { outline: none; }
@media (max-width: 760px) {
  .world-tabpanel.hud-panel { min-height: 210px; }
  .visual-layout { gap: 28px; }
  .closing-section { padding: 48px 0 56px; }
  .closing-section h2 { font-size: 25px; }
}