:root{
  color-scheme:dark;
  --navy:#10142f;
  --navy-2:#171d46;
  --panel:#050607;
  --panel-2:#0b0d10;
  --line:#343942;
  --line-strong:#5a606b;
  --text:#f6f7f9;
  --muted:#b9bec8;
  --yellow:#f5e500;
  --red:#d7192d;
  --blue:#175ab6;
  --route-black:#111;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;
}

*{box-sizing:border-box}

html,
body{
  margin:0;
  min-width:320px;
  min-height:100%;
  background:#020304;
  color:var(--text);
}

body{
  min-height:100svh;
  overflow:hidden;
}

a{color:inherit}

.departure-board{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:100%;
  height:100svh;
  background:var(--panel);
}

.board-topbar{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  min-height:120px;
  border-bottom:3px solid var(--line-strong);
  background:var(--navy);
}

.station-heading,
.direction-heading,
.clock-panel{
  min-width:0;
  padding:18px 24px;
}

.station-heading{
  display:flex;
  align-items:center;
  gap:18px;
}

.board-links{
  display:grid;
  flex:0 0 auto;
  gap:6px;
}

.back-link,
.switch-link{
  padding:8px 10px;
  border:1px solid rgb(255 255 255 / 28%);
  border-radius:6px;
  color:#e8eaf3;
  font-size:12px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
}

.switch-link{
  background:rgb(255 255 255 / 8%);
}

.back-link:hover,
.switch-link:hover{background:rgb(255 255 255 / 14%)}

.station-heading h1,
.station-heading p,
.direction-heading strong,
.direction-heading span,
.direction-heading small{
  margin:0;
}

.station-heading h1{
  font-size:clamp(30px,3.2vw,50px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1.08;
}

.station-heading p{
  margin-top:6px;
  color:#d1d5e4;
  font-size:clamp(11px,1.05vw,15px);
  letter-spacing:.03em;
}

.direction-heading{
  display:grid;
  grid-template-columns:auto auto;
  align-content:center;
  justify-content:center;
  column-gap:14px;
  border-left:1px solid rgb(255 255 255 / 16%);
  border-right:1px solid rgb(255 255 255 / 16%);
  text-align:center;
}

.direction-heading strong{
  font-size:clamp(31px,3.6vw,54px);
  font-weight:900;
  letter-spacing:-.04em;
  line-height:1;
}

.direction-heading span{
  align-self:center;
  padding:5px 9px 6px;
  border:2px solid #fff;
  border-radius:4px;
  font-size:clamp(15px,1.4vw,21px);
  font-weight:900;
  line-height:1;
}

.direction-heading small{
  grid-column:1/-1;
  margin-top:8px;
  color:#d1d5e4;
  font-size:clamp(11px,1.05vw,15px);
  letter-spacing:.05em;
}

.clock-panel{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  font-variant-numeric:tabular-nums;
}

#clock{
  font-size:clamp(37px,4vw,61px);
  font-weight:850;
  letter-spacing:.015em;
  line-height:1;
}

#today{
  margin-top:8px;
  color:#d1d5e4;
  font-size:clamp(12px,1.1vw,16px);
}

.board-panel{
  display:grid;
  min-height:0;
  grid-template-rows:auto minmax(0,1fr);
  background:var(--panel);
}

.board-columns,
.departure-row{
  display:grid;
  grid-template-columns:minmax(300px,1.3fr) minmax(280px,1.15fr) minmax(230px,1fr);
}

.board-columns{
  min-height:70px;
  border-bottom:2px solid var(--line);
  background:#15181d;
}

.board-columns>span{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-right:1px solid var(--line);
  color:#f2f3f5;
  font-size:clamp(14px,1.2vw,18px);
  font-weight:800;
}

.board-columns>span:last-child{border-right:0}

.board-columns small{
  color:#aeb4be;
  font-size:.68em;
  font-weight:600;
}

.departures{
  display:grid;
  min-height:0;
  grid-auto-rows:minmax(0,1fr);
}

.loading-message,
.empty-message{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:0;
  padding:30px;
  color:#c9cdd5;
  font-size:clamp(18px,2.2vw,30px);
  text-align:center;
}

.departure-row{
  min-height:0;
  border-bottom:2px solid #252a31;
  background:linear-gradient(180deg,#080a0c,#050607);
}

.departure-row:last-child{border-bottom:0}

.departure-cell{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  border-right:1px solid #252a31;
}

.departure-cell:last-child{border-right:0}

.route-cell{
  padding:5px 7px;
}

.route-badge{
  display:grid;
  width:100%;
  height:calc(100% - 2px);
  min-height:64px;
  grid-template-columns:56px minmax(0,1fr);
  align-items:center;
  overflow:hidden;
  border:2px solid #6e747d;
  border-radius:3px;
  color:#fff;
  font-weight:900;
  box-shadow:inset 0 0 0 1px rgb(255 255 255 / 8%);
}

.route-badge[data-route="taka"]{background:var(--route-black)}
.route-badge[data-route="joto"]{background:var(--red);border-color:#ff6673}
.route-badge[data-route="kuwa"]{background:var(--blue);border-color:#6ba4ff}

.route-number{
  display:flex;
  height:100%;
  align-items:center;
  justify-content:center;
  border-right:2px solid rgb(255 255 255 / 45%);
  background:rgb(0 0 0 / 18%);
  font-size:clamp(34px,3.1vw,48px);
  font-variant-numeric:tabular-nums;
}

.route-name{
  min-width:0;
  padding:6px 9px;
  font-size:clamp(27px,2.7vw,44px);
  line-height:1.04;
  text-align:center;
}

.stop-cell{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}

.stop-name{
  font-size:clamp(24px,2.6vw,42px);
  font-weight:850;
  letter-spacing:-.035em;
  line-height:1.05;
  white-space:nowrap;
}

.stop-note{
  margin-top:8px;
  color:#d6dae2;
  font-size:clamp(14px,1.25vw,20px);
  font-weight:700;
  line-height:1.1;
}

.time-cell{
  font-size:clamp(42px,5vw,74px);
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
}

.next-day-mark{
  display:inline-block;
  margin-right:8px;
  padding:4px 6px;
  border:1px solid #8d939d;
  border-radius:3px;
  color:#d9dce2;
  font-size:.26em;
  font-weight:800;
  vertical-align:middle;
}

.debug-panel{
  position:fixed;
  z-index:20;
  right:14px;
  bottom:72px;
  width:min(360px,calc(100vw - 28px));
  border:1px solid #727884;
  border-radius:7px;
  background:rgb(18 21 27 / 96%);
  color:#fff;
  box-shadow:0 12px 32px rgb(0 0 0 / 45%);
}

.debug-panel[hidden]{display:none}

.debug-panel summary{
  width:max-content;
  margin-left:auto;
  padding:8px 11px;
  cursor:pointer;
  color:#111;
  background:#ffd400;
  border-radius:6px;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  list-style:none;
}

.debug-panel summary::-webkit-details-marker{display:none}

.debug-controls{
  display:grid;
  gap:8px;
  padding:12px;
}

.debug-controls label{
  font-size:12px;
  font-weight:800;
}

.debug-controls input{
  width:100%;
  padding:8px 9px;
  border:1px solid #686f7b;
  border-radius:4px;
  background:#080a0d;
  color:#fff;
  font:inherit;
  font-variant-numeric:tabular-nums;
}

.debug-buttons{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:6px;
}

.debug-buttons button{
  min-height:34px;
  border:1px solid #686f7b;
  border-radius:4px;
  background:#252a31;
  color:#fff;
  cursor:pointer;
  font-size:11px;
  font-weight:800;
}

.debug-buttons button:hover{background:#343a43}

.debug-controls small{
  color:#aeb4be;
  font-size:10px;
}

.board-footer{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  min-height:58px;
  align-items:center;
  border-top:2px solid var(--line-strong);
  background:#090b0e;
}

.notice-label,
.revision-label{
  display:flex;
  height:100%;
  align-items:center;
  padding:0 18px;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}

.notice-label{
  background:var(--yellow);
  color:#111;
}

.revision-label{
  border-left:1px solid var(--line);
  color:#bcc1ca;
}

.notice-viewport{
  min-width:0;
  overflow:hidden;
  padding:0 18px;
}

.notice-track{
  --notice-gap:48px;
  --notice-half-gap:24px;
  --notice-duration:24s;
  display:flex;
  width:max-content;
  align-items:center;
  gap:var(--notice-gap);
  animation:notice-scroll var(--notice-duration) linear infinite;
  will-change:transform;
}

.notice-copy{
  flex:0 0 auto;
  color:var(--yellow);
  font-size:clamp(17px,1.65vw,25px);
  font-weight:800;
  white-space:nowrap;
}

.notice-track.preview .notice-copy{
  color:#ffb847;
}

@keyframes notice-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--notice-half-gap)))}
}

.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

a:focus-visible{
  outline:3px solid #fff;
  outline-offset:3px;
}

@media(max-width:900px){
  body{overflow:auto}

  .departure-board{
    min-height:100svh;
    height:auto;
  }

  .board-topbar{
    grid-template-columns:1fr auto;
    min-height:0;
  }

  .station-heading{
    padding:14px 16px;
  }

  .back-link{display:none}
  .board-links{gap:0}
  .switch-link{padding:7px 9px;font-size:11px}

  .direction-heading{
    grid-column:1/-1;
    grid-row:2;
    padding:13px 16px;
    border:0;
    border-top:1px solid rgb(255 255 255 / 16%);
  }

  .clock-panel{
    padding:14px 16px;
  }

  .board-columns,
  .departure-row{
    grid-template-columns:minmax(150px,1.05fr) minmax(0,1.2fr) minmax(120px,.8fr);
  }

  .departures{
    grid-auto-rows:minmax(92px,1fr);
  }

  .departure-cell{
    padding:8px 10px;
  }

  .route-cell{padding:4px 5px}

  .route-badge{
    min-height:56px;
    grid-template-columns:46px minmax(0,1fr);
  }

  .route-number{font-size:29px}
  .route-name{font-size:clamp(18px,4.2vw,27px)}
  .stop-name{font-size:clamp(20px,4.6vw,30px)}
  .stop-note{font-size:clamp(12px,2.2vw,17px)}
  .time-cell{font-size:clamp(34px,8vw,48px)}

  .board-footer{
    grid-template-columns:auto minmax(0,1fr);
  }

  .revision-label{display:none}

  .debug-panel{
    right:10px;
    bottom:62px;
  }
}

@media(max-width:560px){
  .station-heading h1{font-size:25px}
  .station-heading p{font-size:10px}
  #clock{font-size:29px}
  #today{font-size:10px}
  .direction-heading strong{font-size:28px}
  .direction-heading span{font-size:13px}
  .board-columns{min-height:45px}
  .board-columns>span{padding:6px;font-size:12px}
  .board-columns small{display:none}

  .board-columns,
  .departure-row{
    grid-template-columns:minmax(108px,.95fr) minmax(0,1.25fr) minmax(94px,.7fr);
  }

  .route-cell{padding:3px 4px}

  .route-badge{
    width:100%;
    min-height:50px;
    grid-template-columns:38px minmax(0,1fr);
  }

  .route-number{font-size:28px}
  .route-name{padding:5px 4px;font-size:16px}
  .stop-name{font-size:18px}
  .stop-note{margin-top:4px;font-size:11px}
  .time-cell{font-size:31px}

  .notice-label{display:none}
  .board-footer{grid-template-columns:1fr;min-height:48px}
  .notice-viewport{padding:0 12px}
  .notice-track{--notice-gap:36px;--notice-half-gap:18px}
  .notice-copy{font-size:14px}
}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
  .notice-track{animation:none!important;transform:none!important}
  .notice-copy[aria-hidden="true"]{display:none}
}