/* TypeRally — お知らせ（UPDATED!）
 * 骨組み（update-note.js が作る要素）と見た目は TARGETLET の update-note.css と同じ（2026-10-07 の版を写した）。
 * 色と書体は style.css の変数を使う。デザインを直す回に、TypeRally の着せ替えに替える。
 */
html.un-open{overflow:hidden}
.un-back,.un-back *{box-sizing:border-box}

.un-back{
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:12px;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px),
    rgba(9,18,40,.8);
  overscroll-behavior:contain; animation:un-fade .22s ease-out both;
}
.un-back.un-leave{animation:un-fade .18s ease-in reverse both}

.un-card{
  position:relative; width:min(780px,100%); max-height:calc(100dvh - 24px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--paper-2); color:var(--ink);
  border:3px solid #1650B4; border-radius:14px;
  box-shadow:0 0 0 6px rgba(255,255,255,.16), 0 30px 60px -18px rgba(0,0,0,.7);
  animation:un-rise .5s cubic-bezier(.2,1.3,.4,1) both;
}

/* 絵（表紙の面） */
.un-art{position:relative; flex:0 0 auto; background:#1650B4; line-height:0}
.un-art img{display:block; width:100%; height:auto; aspect-ratio:16/9; max-height:min(33dvh,420px); object-fit:cover}

/* 日付 = 黄色の丸シール */
.un-date{
  position:absolute; top:12px; right:14px; width:84px; height:84px; border-radius:50%;
  display:grid; place-content:center; justify-items:center; gap:1px;
  background:#F0B400; color:#15213D; border:3px solid #fff; line-height:1;
  font-family:var(--disp); font-weight:800; transform:rotate(9deg);
  box-shadow:0 4px 0 rgba(14,58,134,.45);
  animation:un-pop .45s cubic-bezier(.2,1.6,.4,1) .42s both;
}
.un-y{font-size:13px; letter-spacing:.08em}
.un-md{font-size:25px; letter-spacing:-.01em}

/* 帯 */
.un-band{
  position:relative; flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:4px 16px;
  padding:9px 22px 10px; background:#D3121B; color:#fff;
  border-top:3px solid #fff; border-bottom:3px solid #F0B400;
  animation:un-wipe .42s cubic-bezier(.2,.8,.2,1) .18s both;
}
.un-stamp{
  margin:0; font-family:var(--disp); font-weight:800; line-height:1.05;
  font-size:calc(clamp(32px,8vw,60px) * var(--proj)); letter-spacing:.015em;
  text-shadow:0 3px 0 rgba(0,0,0,.2);
}
.un-kicker{
  font-family:var(--jp); font-weight:800; font-size:calc(15px * var(--proj)); letter-spacing:.06em;
  padding:3px 12px; border-radius:999px; background:#fff; color:#D3121B;
}

/* 中身 */
.un-body{flex:1 1 auto; min-height:0; overflow:auto; padding:16px 20px 6px; -webkit-overflow-scrolling:touch}
.un-list{list-style:none; margin:0; padding:0; display:grid; gap:10px}
/* 項目 = サイトの札と同じ形（白い面・左上に赤の鉤・右下に青の鉤・赤い番号） */
.un-item{
  position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:12px; align-items:start;
  padding:11px 16px 12px 14px; border-radius:6px; background:var(--paper-2); border:1px solid var(--rule);
  box-shadow:0 10px 18px -16px rgba(14,58,134,.55);
  animation:un-up .4s ease-out both;
}
.un-item::before,.un-item::after{content:""; position:absolute; width:20px; height:20px; pointer-events:none}
.un-item::before{top:-1px; left:-1px; border-top:3px solid var(--red); border-left:3px solid var(--red); border-radius:6px 0 0 0}
.un-item::after{right:-1px; bottom:-1px; border-right:3px solid var(--navy); border-bottom:3px solid var(--navy); border-radius:0 0 6px 0}
.un-item:nth-child(1){animation-delay:.34s}
.un-item:nth-child(2){animation-delay:.42s}
.un-item:nth-child(3){animation-delay:.5s}
.un-item:nth-child(n+4){animation-delay:.58s}
.un-num{grid-row:1 / span 2; padding-top:4px; font-family:var(--disp); font-weight:800; font-size:calc(17px * var(--proj)); line-height:1.2; letter-spacing:.02em; color:var(--red)}
.un-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.un-tag{
  flex:0 0 auto; font-family:var(--disp); font-weight:800; font-size:calc(12px * var(--proj)); letter-spacing:.1em;
  padding:3px 10px 2px; border-radius:999px; background:#F0B400; color:#15213D;
}
.un-tag[data-kind="up"]{background:#1650B4; color:#fff}
.un-h{margin:0; font-family:var(--jp); font-weight:800; font-size:calc(19px * var(--proj)); line-height:1.4; letter-spacing:.01em}
.un-p{margin:5px 0 0; font-size:calc(14.5px * var(--proj)); line-height:1.75; color:var(--ink-soft)}

.un-foot{flex:0 0 auto; display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; padding:12px 20px 18px}
.un-ok{
  font-family:var(--disp); font-weight:800; font-size:calc(19px * var(--proj)); letter-spacing:.04em;
  padding:12px 40px 11px; border:0; border-radius:999px; cursor:pointer;
  background:#1650B4; color:#fff; box-shadow:0 5px 0 #0E3A86;
  transition:transform .08s, box-shadow .08s;
}
.un-ok:hover{background:#1B5CC9}
.un-ok:active{transform:translateY(4px); box-shadow:0 1px 0 #0E3A86}
.un-ok:focus-visible{outline:3px solid #F0B400; outline-offset:3px}
.un-once{font-size:calc(12.5px * var(--proj)); color:var(--ink-soft)}

@media (max-width:520px){
  .un-date{width:66px; height:66px; top:9px; right:10px}
  .un-y{font-size:11px} .un-md{font-size:20px}
  .un-band{padding:8px 16px 9px}
  .un-body{padding:13px 14px 4px}
  .un-foot{padding:10px 14px 14px}
  .un-art img{max-height:min(30dvh,420px)}
  .un-ok{width:100%}
  .un-once{width:100%; text-align:center}
}

@keyframes un-fade{from{opacity:0} to{opacity:1}}
@keyframes un-rise{from{opacity:0; transform:translateY(28px) scale(.94)} to{opacity:1; transform:none}}
@keyframes un-pop{from{opacity:0; transform:rotate(-30deg) scale(.2)} to{opacity:1; transform:rotate(9deg) scale(1)}}
@keyframes un-wipe{from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0)}}
@keyframes un-up{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  .un-back,.un-card,.un-date,.un-band,.un-item{animation:none}
}