@font-face{font-family:"Orbitron";src:url(/fonts/Orbitron.ttf) format("truetype");font-weight:400 900;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/fonts/Rajdhani-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(/fonts/Rajdhani-SemiBold.ttf) format("truetype");font-weight:600 700;font-display:swap}

:root{
  --t:clamp(24px,2.4vw + 1.2vh,42px);
  --h:clamp(26px,3.2vw + 1.6vh,56px);
  --pink:#ff4fd8;
  --cyan:#3dfcff;
  --violet:#c04bff;
  --bg:#05031a;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
}

*{box-sizing:border-box}
html{
  margin:0;height:100%;height:100dvh;
  background:var(--bg);color:#fff;
  font-family:Rajdhani,sans-serif;
  overflow:hidden;overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
body{
  margin:0;min-height:100%;min-height:100dvh;height:100%;height:100dvh;
  overflow:hidden;overflow-x:hidden;background:var(--bg);
  padding:0;
}
#app{
  position:fixed;
  top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;height:100dvh;
  max-width:100vw;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  padding-top:var(--safe-t);
  padding-right:var(--safe-r);
  padding-bottom:var(--safe-b);
  padding-left:var(--safe-l);
  overflow:hidden;
}
#bg{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  max-width:100%;
}

.top,.bot,.cats,.stage{position:relative;z-index:2;max-width:100%}
.top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px 12px;flex-wrap:wrap;
  padding-top:8px;padding-bottom:8px;
  padding-left:max(12px,var(--safe-l));
  padding-right:max(12px,var(--safe-r));
  border-bottom:1px solid rgba(255,79,216,.35);
  background:rgba(10,2,30,.55);backdrop-filter:blur(6px);
  font-family:Orbitron,sans-serif;letter-spacing:.1em;text-transform:uppercase;
  min-width:0;
}
.brand{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-width:0;flex:1 1 180px}
.dot{flex:0 0 auto;width:10px;height:10px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:bl 1.6s infinite}
@keyframes bl{50%{opacity:.25}}
.title{
  font-weight:800;
  font-size:clamp(22px,calc(var(--t)*1.05),40px);
  color:var(--pink);text-shadow:0 0 14px rgba(255,79,216,.7);
  white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.05;
  min-width:0;
}
.sub{font-size:clamp(12px,calc(var(--t)*.5),20px);color:#d9b3ff}
.meta{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  font-size:clamp(12px,calc(var(--t)*.5),18px);color:#ffc0f0;
  min-width:0;
}
#status{color:var(--cyan);text-shadow:0 0 8px var(--cyan)}
#status.paused{color:#ffd24d;text-shadow:0 0 8px #ffd24d}

/* Category strip: horizontal scroll on narrow screens, wrap on wide */
.cats{
  display:flex;flex-wrap:nowrap;gap:8px;
  padding:8px 12px;
  background:rgba(8,2,24,.55);border-bottom:1px solid rgba(192,75,255,.25);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  max-height:none;
}
.cats::-webkit-scrollbar{height:4px}
.cats::-webkit-scrollbar-thumb{background:rgba(255,79,216,.45)}
.cat{
  flex:0 0 auto;
  font-family:Orbitron,sans-serif;font-weight:700;
  font-size:clamp(13px,calc(var(--t)*.55),22px);
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  color:#d9b3ff;background:rgba(20,4,50,.75);
  border:2px solid rgba(192,75,255,.55);
  padding:10px 14px;
  min-height:44px;min-width:44px;
  box-shadow:0 0 10px rgba(192,75,255,.15);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  -webkit-tap-highlight-color:rgba(61,252,255,.25);
}
.cat:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 16px rgba(61,252,255,.35)}
.cat.on{
  color:#fff;border-color:var(--pink);background:rgba(255,79,216,.18);
  box-shadow:0 0 18px rgba(255,79,216,.55), inset 0 0 12px rgba(255,79,216,.2);
}
.cat:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.stage{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(8px,2vh,28px) clamp(10px,3vw,36px);
  min-height:0;min-width:0;
  overflow-x:hidden;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
}
.snwrap{
  width:min(1100px,100%);
  max-width:100%;
  background:rgba(10,2,30,.72);
  border:2px solid var(--pink);
  box-shadow:0 0 30px rgba(255,79,216,.45);
  padding:clamp(12px,2.5vw,36px);
  min-width:0;
}
.sncard{display:flex;flex-direction:column;gap:clamp(8px,1.5vh,14px);animation:snin .5s ease-out;min-width:0}
.sncard.snout{animation:snoutk .45s ease-in forwards}
@keyframes snin{from{opacity:0;transform:perspective(900px) rotateX(-35deg) translateY(-30px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes snoutk{to{opacity:0;transform:perspective(900px) rotateX(40deg) translateY(40px) scale(.96);filter:blur(6px)}}

.snrow{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.snchip{
  font-family:Orbitron,sans-serif;font-weight:700;
  font-size:clamp(16px,var(--t),35px);
  padding:4px 12px;border:2px solid var(--cc,var(--cyan));
  color:var(--cc,var(--cyan));box-shadow:0 0 14px var(--cc,var(--cyan));
  white-space:normal;overflow-wrap:anywhere;
}
.sncount{
  font-family:Orbitron,sans-serif;
  font-size:clamp(16px,var(--t),35px);color:#d9b3ff;
}

.snh{
  display:block;
  font-family:Rajdhani,sans-serif;font-weight:700;
  font-size:var(--h);
  line-height:1.15;color:#fff;text-decoration:none;
  text-shadow:0 0 18px rgba(255,79,216,.6);
  white-space:normal;overflow:visible;
  overflow-wrap:anywhere;word-break:break-word;
  -webkit-line-clamp:unset;line-clamp:unset;
  text-overflow:clip;
  padding:6px 0;
  min-height:44px;
  -webkit-tap-highlight-color:rgba(61,252,255,.2);
}
.snh:hover,.snh:active{color:var(--cyan);text-shadow:0 0 22px rgba(61,252,255,.7)}

.snsrc{
  font-size:clamp(14px,calc(var(--t)*.85),32px);color:#ffc0f0;
  white-space:normal;overflow:visible;overflow-wrap:anywhere;
}
.snbar{height:6px;background:rgba(255,255,255,.1);margin-top:2px}
.snbar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  box-shadow:0 0 12px var(--pink);
}
.snbar i.run{animation:snbar 5s linear forwards}
.snbar i.paused{animation-play-state:paused}
@keyframes snbar{to{width:100%}}

.bot{
  padding:6px 12px;
  padding-bottom:max(6px,var(--safe-b));
  border-top:1px solid rgba(255,79,216,.3);
  background:rgba(10,2,30,.55);
  font-family:Orbitron,sans-serif;
  font-size:clamp(10px,calc(var(--t)*.4),16px);
  letter-spacing:.08em;text-transform:uppercase;color:#d9b3ff;
  min-width:0;
}
#hint{overflow-wrap:anywhere;white-space:normal}

.err .snh{color:#ff8fab}
.err .snchip{--cc:#ff5c5c;border-color:#ff5c5c;color:#ff5c5c;box-shadow:0 0 14px #ff5c5c}

/* Phones / small tablets: keep cats as a single scroll row so they never cover the card */
@media (max-width:900px){
  .cats{flex-wrap:nowrap;max-height:56px;padding:6px 10px}
  .cat{min-height:44px;padding:10px 12px}
  .stage{padding:10px 12px;align-items:flex-start}
  .title{font-size:clamp(22px,5.4vw,32px);letter-spacing:.06em}
  .sub{display:none}
  #clock{display:none}
}

/* Short landscape phones */
@media (max-height:450px) and (orientation:landscape){
  .top{padding:4px 10px}
  .title{font-size:clamp(20px,4.5vw,26px)}
  .cats{max-height:48px;padding:4px 8px}
  .cat{min-height:44px;padding:8px 12px;font-size:13px}
  .stage{padding:6px 10px}
  .snwrap{padding:10px 12px}
  .snh{font-size:clamp(22px,4.2vh + 1vw,32px)}
  .snchip,.sncount{font-size:clamp(14px,3.2vh,22px)}
  .snsrc{font-size:clamp(12px,2.8vh,18px)}
  .bot{padding:4px 10px;font-size:10px}
  .dot{width:8px;height:8px}
}

@media (min-width:901px){
  .cats{flex-wrap:wrap;overflow-x:visible;max-height:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .snbar i.run{width:100%}
}