/* night-art.css — the painted city (学生 Night Owl) and the painted tray of cans (学生 Night Shift) */

/* ---- Night Owl: the street ---- */
#page-vocabulary.wd-page .nt-sky.kc-street {
  display: block; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; border-radius: 10px;
  padding: 44px 8px 0; background: #3b3270 url(night-city/skyline.jpg) center bottom / cover no-repeat;
}
#page-vocabulary.wd-page .nt-sky.kc-street::-webkit-scrollbar { display: none; }
.kc-street .kc-row { display: flex; align-items: flex-end; gap: 4px; width: max-content; margin: 0 auto; }
.kc-street .kc-b { position: relative; flex: none; }
.kc-street .kc-b img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: filter .5s; pointer-events: none; }
.kc-street.kc-spot .kc-b:not(.is-focus) img { filter: brightness(.62); }
.kc-street .kc-b.is-focus img { filter: brightness(1.08); }
#page-vocabulary.wd-page .kc-street .nt-win {
  position: absolute; width: auto; height: auto; border-radius: 1px; background: transparent; box-shadow: none; transform: none;
}
#page-vocabulary.wd-page .kc-street .nt-win::after { content: ''; position: absolute; inset: 4%; border-radius: 1px; transition: background .4s, box-shadow .4s; }
#page-vocabulary.wd-page .kc-street .nt-win:hover { transform: none; }
#page-vocabulary.wd-page .kc-street .nt-win:hover::after { outline: 1px solid rgba(255,255,255,.7); }
#page-vocabulary.wd-page .kc-street .nt-win.st-solid { background: transparent; box-shadow: none; }
#page-vocabulary.wd-page .kc-street .nt-win.st-solid::after { background: #ffd98a; box-shadow: 0 0 6px 1px rgba(255,184,92,.85); }
#page-vocabulary.wd-page .kc-street .nt-win.st-shaky { background: transparent; box-shadow: none; }
#page-vocabulary.wd-page .kc-street .nt-win.st-shaky::after { background: #ff7b8f; box-shadow: 0 0 6px 1px rgba(255,90,111,.8); }
#page-vocabulary.wd-page .kc-street .nt-win.is-here { outline: 1.5px solid #fff; outline-offset: 1px; z-index: 1; }
#page-vocabulary.wd-page .kc-street .nt-win.is-flash { animation: none; }
#page-vocabulary.wd-page .kc-street .nt-win.is-flash::after { animation: kc-light 1.2s ease-out; }
@keyframes kc-light { 0% { transform: scale(2.4); box-shadow: 0 0 22px 6px #ffd98a; } 100% { transform: none; } }
@media (min-width: 900px) { #page-vocabulary.wd-page .nt-sky.kc-street { padding-top: 60px; } }

/* ---- Night Shift: the tray ---- */
#page-vocabquiz.wd-page .nt-tray { flex-wrap: wrap; align-items: center; row-gap: 6px; }
#page-vocabquiz.wd-page .nt-tray .nt-tray-lbl { display: none; }
#page-vocabquiz.wd-page .nt-tray .wd-stops.kc-tray { flex: 1 1 100%; display: block; min-height: 0; }
.kc-trayart { position: relative; width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 900 / 414; background: url(night-city/tray.jpg) center / cover no-repeat; border-radius: 10px; overflow: hidden; }
.kc-trayart::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 40% at 50% 15%, rgba(150,180,255,.12), transparent 70%); }
.kc-cans { position: absolute; left: 7.5%; right: 7.6%; top: 16%; height: 58%; display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 1%; }
.kc-can { width: 8.6%; height: 100%; display: flex; align-items: flex-end; }
.kc-can img { width: 100%; display: block; opacity: 0; transform: translateY(-40%); }
.kc-can.ok img { opacity: 1; transform: none; filter: drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.kc-can.no img { opacity: .28; transform: none; filter: grayscale(1) brightness(.5); }
.kc-can.is-drop.ok img { animation: kc-drop .75s cubic-bezier(.3,.6,.4,1) both; }
.kc-can.is-drop.no img { animation: kc-miss .6s ease-out both; }
@keyframes kc-drop { 0% { transform: translateY(-150%) rotate(-10deg); opacity: 0; } 12% { opacity: 1; } 45% { transform: translateY(4%) rotate(4deg) scaleY(.94); } 60% { transform: translateY(-14%) rotate(-3deg); } 75% { transform: translateY(1%) rotate(1.5deg) scaleY(.98); } 87% { transform: translateY(-3%) rotate(-.6deg); } 100% { transform: none; } }
@keyframes kc-miss { 0% { transform: translateY(-60%); opacity: 0; } 60% { transform: translateY(2%); opacity: .32; } 100% { transform: none; opacity: .28; } }
.kc-trayart.is-full .kc-can.ok img { animation: kc-wave .5s ease-in-out calc(var(--i) * 60ms + .75s) 2; }
@keyframes kc-wave { 50% { transform: translateY(-12%) rotate(-3deg); } }
.kc-over { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.kc-vol { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.kc-spk { background: transparent; border: 1.5px solid rgba(255,255,255,.55); border-radius: 999px; width: 32px; height: 28px; font-size: .85rem; line-height: 1; cursor: pointer; padding: 0; }
.kc-spk:hover { border-color: #fff; }
.kc-vol input[type=range] { -webkit-appearance: none; appearance: none; width: 92px; height: 6px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, #ffd98a var(--v, 80%), rgba(255,255,255,.18) var(--v, 80%)); }
.kc-vol input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #ffd98a; }
.kc-vol input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #ffd98a; }
@media (prefers-reduced-motion: reduce) { .kc-can img, .kc-street .nt-win::after { animation: none !important; } }

/* the round tower's aircraft warning light */
.kc-beacon{position:absolute;left:50%;top:2.95%;width:0;height:0;pointer-events:none}
.kc-beacon::before,.kc-beacon::after,.kc-beacon i{content:'';position:absolute;border-radius:50%;transform:translate(-50%,-50%);left:0;top:0}
.kc-beacon::before{width:6px;height:6px;background:radial-gradient(circle,#fff2ee 0 20%,#ff3b2f 45%,#c4101a 100%);opacity:.2;animation:kc-bcore 2.8s ease-in-out infinite}
.kc-beacon::after{width:34px;height:34px;background:radial-gradient(circle,rgba(255,70,55,.55) 0,rgba(255,40,40,.22) 35%,rgba(255,30,30,0) 70%);opacity:0;animation:kc-bhalo 2.8s ease-in-out infinite}
.kc-beacon i{width:90px;height:90px;background:radial-gradient(circle,rgba(255,60,60,.12),rgba(255,60,60,0) 65%);opacity:0;animation:kc-bhalo 2.8s ease-in-out infinite}
@keyframes kc-bcore{0%,62%,100%{opacity:.25}14%,30%{opacity:1}}
@keyframes kc-bhalo{0%,62%,100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}16%,28%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.kc-beacon::before,.kc-beacon::after,.kc-beacon i{animation:none}.kc-beacon::before{opacity:.9}}