@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;600;800&family=DotGothic16&display=swap');

:root{
  --bg:#0a0a0f;
  --bg2:#12121a;
  --ink:#e8e3d6;
  --ink-dim:#9a958a;
  --line:#2a2a35;
  --teal:#a96fd4;
  --red:#d4543f;
  --gold:#d4b85a;
  --moon:#b8a8d4;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:"DotGothic16","MS PGothic","Osaka",monospace;
  font-size:13px;line-height:1.75;
  overflow-x:hidden;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='2,2 14,8 8,9 7,14' fill='%23e8e3d6'/></svg>") 2 2, auto;
}

.stars{position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(1px 1px at 17% 23%, #e8e3d6, transparent),
    radial-gradient(1px 1px at 63% 71%, var(--teal), transparent),
    radial-gradient(1px 1px at 84% 18%, var(--gold), transparent),
    radial-gradient(.5px .5px at 41% 82%, #e8e3d6, transparent),
    radial-gradient(.5px .5px at 92% 49%, #e8e3d6, transparent),
    radial-gradient(.5px .5px at 12% 58%, var(--moon), transparent),
    linear-gradient(180deg,#0d0d14 0%,#08080d 60%,#0a0a12 100%);
  background-size:200% 200%;
  animation:drift 120s linear infinite;
}
@keyframes drift{to{background-position:200% 200%,-200% 200%,200% -200%,0 200%,200% 0,-200% -200%,0 0}}
.stars::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(.5px .5px at 30% 40%,#fff 50%,transparent);
  background-size:240px 240px;
  animation:twinkle 5s ease-in-out infinite alternate;opacity:.4;
}
@keyframes twinkle{from{opacity:.2}to{opacity:.6}}

.topbar{
  background:var(--bg2);
  color:var(--ink-dim);
  border-bottom:1px solid var(--line);
  padding:4px 0;
  font-size:11px;letter-spacing:1px;
}
.topbar marquee{font-size:11px}
.topbar span.acc{color:var(--teal)}
.topbar span.red{color:var(--red)}

.container{max-width:900px;margin:0 auto;padding:24px 16px}
table.layout{width:100%;border-collapse:separate;border-spacing:14px 0}
table.layout > tbody > tr > td{vertical-align:top}

.header{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 8px 22px;
  margin-bottom:18px;
  text-align:left;
  position:relative;
  overflow:hidden;
}
.cat-cube-scene{
  position:absolute;top:50%;right:30px;transform:translateY(-50%);
  width:120px;height:120px;
  perspective:600px;
  cursor:grab;
  z-index:3;
}
.cat-cube-scene:active{cursor:grabbing}
.cat-cube{
  position:relative;width:100%;height:100%;
  transform-style:preserve-3d;
  transform:rotateX(-15deg) rotateY(0deg);
  animation:cubeSpin 16s linear infinite;
}
.cat-cube-scene:hover .cat-cube{animation-play-state:paused}
@keyframes cubeSpin{
  from{transform:rotateX(-15deg) rotateY(0deg)}
  to{transform:rotateX(-15deg) rotateY(360deg)}
}
.cat-face{
  position:absolute;width:120px;height:120px;
  background-size:88%;background-position:center;background-repeat:no-repeat;
  border:1px solid rgba(169,111,212,.4);
  background-color:rgba(10,10,15,.7);
  box-shadow:inset 0 0 18px rgba(169,111,212,.12);
  backface-visibility:visible;
}
.cf-front {background-image:url('../assets/header-cat-line.png'); transform:translateZ(60px)}
.cf-back  {background-image:url('../assets/cat-open-line.png');   transform:rotateY(180deg) translateZ(60px)}
.cf-right {background-image:url('../assets/cat-mouth-line.png');  transform:rotateY(90deg) translateZ(60px)}
.cf-left  {background-image:url('../assets/header-cat-line.png'); transform:rotateY(-90deg) translateZ(60px)}
.cf-top   {background-image:url('../assets/cat-open-line.png');   transform:rotateX(90deg) translateZ(60px); opacity:.85}
.cf-bottom{background-image:url('../assets/cat-mouth-line.png');  transform:rotateX(-90deg) translateZ(60px); opacity:.85}

@media(max-width:760px){
  .cat-cube-scene{
    width:70px;height:70px;right:6px;top:30px;transform:none;
    z-index:1;opacity:.55;
  }
  .cat-face{width:70px;height:70px}
  .cf-front{transform:translateZ(35px)}
  .cf-back{transform:rotateY(180deg) translateZ(35px)}
  .cf-right{transform:rotateY(90deg) translateZ(35px)}
  .cf-left{transform:rotateY(-90deg) translateZ(35px)}
  .cf-top{transform:rotateX(90deg) translateZ(35px)}
  .cf-bottom{transform:rotateX(-90deg) translateZ(35px)}
  .header .tagline,.header .greeting{padding-right:78px}
  .header h1,.header .meta{position:relative;z-index:2}
}
@media(max-width:430px){
  .cat-cube-scene{width:54px;height:54px;right:4px;top:24px;opacity:.4}
  .cat-face{width:54px;height:54px}
  .cf-front{transform:translateZ(27px)}
  .cf-back{transform:rotateY(180deg) translateZ(27px)}
  .cf-right{transform:rotateY(90deg) translateZ(27px)}
  .cf-left{transform:rotateY(-90deg) translateZ(27px)}
  .cf-top{transform:rotateX(90deg) translateZ(27px)}
  .cf-bottom{transform:rotateX(-90deg) translateZ(27px)}
  .header .tagline,.header .greeting{padding-right:58px}
}
.header::before{
  content:"";position:absolute;left:0;right:0;top:8px;height:1px;
  background:var(--line);
}
.header::after{
  content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;
  background:var(--line);
}
.header h1{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:46px;letter-spacing:.05em;
  color:var(--ink);
  line-height:1;
}
.header h1 .under{color:var(--red)}
.header h1 .cursor{
  display:inline-block;width:.5em;height:.85em;background:var(--ink);
  vertical-align:-.06em;margin-left:.05em;
  animation:caret 1.05s steps(2,end) infinite;
}
@keyframes caret{50%{opacity:0}}
.header .tagline{
  font-family:"Shippori Mincho",serif;
  color:var(--ink-dim);
  margin-top:10px;font-size:13px;letter-spacing:.15em;
}
.header .meta{
  color:var(--ink-dim);font-size:10px;margin-top:14px;letter-spacing:.1em;
  display:flex;gap:18px;flex-wrap:wrap;
}
.header .meta b{color:var(--teal);font-weight:normal}
.header .blink{animation:blink 1.4s steps(2,start) infinite;color:var(--red)}
@keyframes blink{to{opacity:0}}

.sidebar{width:210px;font-size:11px}
.sbox{
  background:var(--bg2);
  border:1px solid var(--line);
  padding:12px;margin-bottom:14px;
  position:relative;
}
.sbox h3{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:13px;color:var(--teal);
  letter-spacing:.15em;
  padding-bottom:6px;margin-bottom:8px;
  border-bottom:1px dashed var(--line);
}
.sbox h3::before{content:"◆ "}

.menu a{
  display:block;color:var(--ink);text-decoration:none;
  padding:3px 4px;border-bottom:1px dotted var(--line);
  transition:.15s;font-size:11px;
}
.menu a:last-child{border:0}
.menu a::before{content:"▸ ";color:var(--ink-dim)}
.menu a:hover{color:var(--teal);padding-left:10px}
.menu a:hover::before{color:var(--teal)}

.counter{
  background:#000;border:1px solid var(--line);padding:8px;
  text-align:center;font-family:"Courier New",monospace;
}
.counter .label{color:var(--ink-dim);font-size:9px;letter-spacing:.3em}
.counter .digits{
  display:inline-block;margin-top:4px;padding:5px 10px;
  background:#000;border:1px solid var(--teal);
  color:var(--teal);font-size:22px;letter-spacing:6px;
  text-shadow:0 0 4px var(--teal);
}
.counter .small{font-size:9px;color:var(--ink-dim);margin-top:5px;letter-spacing:.1em}
.counter .small em{color:var(--red);font-style:normal}

.banner-grid{display:flex;flex-direction:column;gap:5px;align-items:center}
.banner-img{
  display:block;
  width:100%;max-width:200px;height:auto;
  border:1px solid var(--line);
  cursor:pointer;
  image-rendering:auto;
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.banner-img.mini{max-width:88px}
.banner-img:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 0 0 1px var(--teal), 0 4px 12px rgba(0,0,0,.5);
  filter:brightness(1.12) saturate(1.1);
}
.banner-img:active{transform:translateY(0) scale(.99)}
.banner-img.copied{
  animation:bannerCopied .5s ease-out;
}
@keyframes bannerCopied{
  0%{box-shadow:0 0 0 1px var(--gold), 0 0 20px var(--gold)}
  100%{box-shadow:0 0 0 1px var(--line)}
}
.banner-help{
  font-size:9px;color:var(--ink-dim);margin-top:8px;
  line-height:1.7;text-align:center;letter-spacing:.03em;
}
.banner-help b{color:var(--teal);font-weight:normal}

.banner-toast{
  position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);
  background:#000;border:1px solid var(--teal);
  color:var(--teal);padding:10px 20px;
  font-family:"Courier New",monospace;font-size:11px;letter-spacing:.1em;
  z-index:9999;opacity:0;pointer-events:none;
  box-shadow:0 0 20px rgba(169,111,212,.25);
  transition:opacity .25s, transform .25s;
  max-width:90vw;
}
.banner-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.banner-toast .tag{color:var(--gold);word-break:break-all}

.now-item{padding:5px 0;border-bottom:1px dotted var(--line);font-size:11px}
.now-item:last-child{border:0}
.now-item .label{color:var(--ink-dim);font-size:9px;letter-spacing:.2em;display:block;margin-bottom:2px}
.now-item .val{color:var(--ink)}
.now-item .val em{color:var(--gold);font-style:normal}
.now-item .now-link{
  color:var(--teal);text-decoration:none;
  border-bottom:1px dotted var(--teal);
  transition:all .15s;
}
.now-item .now-link:hover{
  color:var(--gold);border-bottom-color:var(--gold);
  text-shadow:0 0 6px rgba(212,184,90,.4);
}

.news{font-size:10px}
.news dt{color:var(--teal);font-weight:bold;margin-top:6px;font-family:"Courier New",monospace}
.news dt:first-child{margin-top:0}
.news dd{padding-left:14px;color:var(--ink);margin-top:1px}

.main{font-size:13px}
.panel{
  background:rgba(18,18,26,.7);
  border:1px solid var(--line);
  padding:22px 24px;margin-bottom:18px;
  position:relative;
}
.panel h2{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:24px;color:var(--ink);
  letter-spacing:.05em;
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  position:relative;
}
.panel h2 .en{
  display:block;font-family:"Courier New",monospace;font-weight:normal;
  font-size:10px;color:var(--teal);letter-spacing:.3em;
  margin-bottom:2px;
}
.panel h2::after{
  content:"";position:absolute;bottom:-1px;left:0;width:48px;height:1px;
  background:var(--red);
}

.uid-panel{
  background:#050507;
  border:1px solid var(--teal);
  padding:24px;text-align:center;overflow:hidden;position:relative;
}
.uid-panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(169,111,212,.025) 3px,rgba(169,111,212,.025) 4px);
}
.uid-panel::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  animation:scanline 4s linear infinite;
}
@keyframes scanline{0%{top:0}100%{top:100%}}
.uid-en{
  font-family:"Courier New",monospace;color:var(--teal);
  letter-spacing:.4em;font-size:10px;
}
.uid-ja{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:18px;color:var(--ink);
  letter-spacing:.2em;margin-top:6px;
}
.uid-display{
  font-family:"Courier New",monospace;font-size:28px;letter-spacing:6px;
  margin:18px 0 14px;color:var(--gold);
  background:#000;border:1px dashed var(--gold);
  padding:14px 10px;display:inline-block;min-width:380px;
  text-shadow:0 0 8px rgba(212,184,90,.4);
  animation:uidPulse 3s ease-in-out infinite;
}
@keyframes uidPulse{
  0%,100%{box-shadow:inset 0 0 12px rgba(212,184,90,.1)}
  50%{box-shadow:inset 0 0 16px rgba(212,184,90,.25),0 0 8px rgba(212,184,90,.15)}
}
.uid-meta{color:var(--ink-dim);font-size:11px;letter-spacing:.1em}
.uid-meta .num{color:var(--red);font-family:"Courier New",monospace;font-size:14px;font-weight:bold}
.uid-meta .note{display:block;margin-top:6px;font-size:9px;color:var(--ink-dim)}

.prof-grid{display:grid;grid-template-columns:104px 1fr;gap:18px;align-items:start}
.avatar{
  width:104px;height:104px;
  background:#0a0a0f url('../assets/avatar.png') center/cover;
  border:1px solid var(--line);
  position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(169,111,212,.15), 0 4px 14px rgba(0,0,0,.4);
  filter:contrast(1.03) saturate(.95);
}
.avatar::after{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.18) 2px,rgba(0,0,0,.18) 3px),
    radial-gradient(circle at center, transparent 50%, rgba(0,0,0,.35) 100%);
  pointer-events:none;
  mix-blend-mode:multiply;
}
.avatar::before{
  content:"";position:absolute;inset:0;
  box-shadow:inset 0 0 18px rgba(0,0,0,.6);
  pointer-events:none;
}

table.profile{width:100%;border-collapse:collapse;font-size:12px}
table.profile th{
  width:88px;color:var(--ink-dim);text-align:left;
  padding:5px 12px 5px 0;
  font-weight:normal;
  border-bottom:1px dotted var(--line);
  letter-spacing:.1em;
  font-size:11px;
  vertical-align:top;
}
table.profile td{
  padding:5px 0;color:var(--ink);
  border-bottom:1px dotted var(--line);
}

.skills{list-style:none}
.skills li{
  list-style:none;margin:10px 0;font-size:11px;
  display:grid;grid-template-columns:140px 1fr 44px;
  align-items:center;gap:12px;
}
.skills .name{color:var(--ink);font-family:"Courier New",monospace}
.skills .bar{
  height:14px;
  background:#050507;
  border:1px solid var(--line);
  position:relative;overflow:hidden;
  border-radius:2px;
}
.skills .bar::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent,transparent 9px,rgba(0,0,0,.4) 9px,rgba(0,0,0,.4) 10px);
  pointer-events:none;
  z-index:2;
}
.skills .fill{
  display:block;height:100%;
  width:var(--w);
  background:linear-gradient(90deg,var(--teal),var(--gold));
  box-shadow:0 0 8px rgba(169,111,212,.35);
  transform-origin:left center;
  animation:fillIn 1.6s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes fillIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.skills .pct{
  color:var(--teal);font-size:11px;text-align:right;
  font-family:"Courier New",monospace;
}
.skills .pct::after{content:"%";color:var(--ink-dim);font-size:9px;margin-left:1px}

.works{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.work{
  display:block;text-decoration:none;color:var(--ink);
  background:#050507;border:1px solid var(--line);
  padding:12px 14px;position:relative;
  transition:all .2s;overflow:hidden;
}
.work::before{
  content:"";position:absolute;top:0;left:0;width:2px;height:100%;
  background:var(--line);transition:.2s;
}
.work:hover{border-color:var(--teal);transform:translateY(-1px)}
.work:hover::before{background:var(--teal);width:3px}
.work .num{
  font-family:"Courier New",monospace;color:var(--ink-dim);
  font-size:9px;letter-spacing:.2em;
}
.work .title{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:14px;color:var(--ink);
  margin:2px 0 4px;letter-spacing:.05em;
  display:flex;align-items:center;gap:6px;
}
.work .title .ext-mark{color:var(--ink-dim);font-size:10px;transition:.2s}
.work:hover .title{color:var(--teal)}
.work:hover .title .ext-mark{color:var(--teal)}
.work .desc{color:var(--ink-dim);font-size:10.5px;line-height:1.55}
.work .host{
  font-family:"Courier New",monospace;font-size:9px;
  color:var(--ink-dim);margin-top:6px;letter-spacing:.05em;
  border-top:1px dotted var(--line);padding-top:5px;
}
.work .host .tag{
  display:inline-block;border:1px solid var(--line);
  padding:0 4px;margin-right:4px;color:var(--gold);
}

.twocol{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.twocol .card{
  background:#050507;border:1px solid var(--line);padding:14px;font-size:12px;
}
.twocol .card h4{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:14px;margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid var(--line);
  letter-spacing:.05em;
}
.card.like h4{color:var(--teal)}
.card.like h4::before{content:"◆ "}
.card.dislike h4{color:var(--ink-dim)}
.card.dislike h4::before{content:"◇ "}
.card ul{padding-left:1px;list-style:none}
.card ul li{margin:4px 0;padding-left:14px;position:relative;color:var(--ink)}
.card.like ul li::before{content:"・";position:absolute;left:0;color:var(--teal)}
.card.dislike ul li::before{content:"・";position:absolute;left:0;color:var(--ink-dim)}

.bbs-entry{
  background:#050507;border-left:2px solid var(--line);
  padding:10px 14px;margin:8px 0;font-size:12px;
}
.bbs-head{font-size:10px;color:var(--ink-dim);margin-bottom:4px;font-family:"Courier New",monospace;letter-spacing:.05em}
.bbs-body{color:var(--ink);line-height:1.7}
.bbs-foot{text-align:center;margin-top:14px}
.bbs-empty{
  text-align:center;color:var(--ink-dim);font-size:11px;
  padding:32px 8px;letter-spacing:.1em;font-family:"Shippori Mincho",serif;
  border:1px dashed var(--line);background:#050507;
}
.bbs-empty .sub{font-size:10px;display:inline-block;margin-top:6px;color:var(--ink-dim);font-family:inherit}
.btn{
  background:#000;color:var(--ink);
  border:1px solid var(--teal);
  padding:6px 18px;font-family:inherit;font-size:11px;
  cursor:pointer;letter-spacing:.2em;
  transition:all .2s;
}
.btn:hover{background:var(--teal);color:#000}

.links{display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px}
.links a{
  color:var(--ink);text-decoration:none;padding:7px 10px;
  border:1px solid var(--line);background:#050507;
  display:flex;align-items:center;gap:8px;
  transition:all .15s;
}
.links a .label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.links a:hover{border-color:var(--teal);color:var(--teal)}
.links a .ext{
  color:var(--ink-dim);font-size:10px;font-family:"Courier New",monospace;
  white-space:nowrap;flex-shrink:0;
}
.links a:hover .ext{color:var(--teal)}
.links a.new .ext::after{
  content:"new";color:var(--red);font-size:8px;
  border:1px solid var(--red);border-radius:2px;
  padding:0 3px;margin-left:6px;
  animation:blink 1.4s steps(2,start) infinite;
}

.footer{
  text-align:center;padding:24px 0 16px;font-size:10px;color:var(--ink-dim);
  border-top:1px solid var(--line);margin-top:8px;letter-spacing:.1em;
}
.footer .sep{color:var(--line);margin:0 8px}

.sparkle{
  position:fixed;pointer-events:none;z-index:9999;
  font-size:10px;font-family:"Courier New",monospace;
  animation:sparkAnim .9s ease-out forwards;
}
@keyframes sparkAnim{
  0%{opacity:.9;transform:scale(.5)}
  100%{opacity:0;transform:scale(1.2) translateY(-22px)}
}

.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.92);
  display:none;align-items:center;justify-content:center;z-index:1000;
  backdrop-filter:blur(3px);
}
.modal-bg.show{display:flex;animation:fade .35s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--bg2);
  border:1px solid var(--teal);
  padding:32px 36px;text-align:center;max-width:480px;
  box-shadow:0 0 40px rgba(169,111,212,.15);
  animation:popIn .5s cubic-bezier(.34,1.5,.64,1);
  position:relative;
}
@keyframes popIn{from{transform:translateY(20px) scale(.95);opacity:0}to{transform:none;opacity:1}}
.modal::before{
  content:"◆ WELCOME ◆";position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:var(--bg2);padding:0 12px;color:var(--teal);
  font-family:"Courier New",monospace;font-size:10px;letter-spacing:.4em;
}
.modal h2{
  font-family:"Shippori Mincho",serif;font-weight:800;
  color:var(--ink);font-size:22px;margin-top:6px;
  letter-spacing:.1em;
}
.modal .lead{color:var(--ink-dim);font-size:11px;margin-top:8px;line-height:1.7}
.modal .lead .num{color:var(--red);font-family:"Courier New",monospace;font-size:14px;font-weight:bold}
.modal .uid-big{
  font-family:"Courier New",monospace;font-size:22px;
  color:var(--gold);margin:18px 0;padding:14px;
  background:#000;border:1px dashed var(--gold);
  letter-spacing:5px;text-shadow:0 0 8px rgba(212,184,90,.3);
}
.modal .small{font-size:10px;color:var(--ink-dim);margin-top:8px;line-height:1.6}
.modal .btn{margin-top:14px}

.warning{
  border:1px solid var(--line);padding:8px 10px;
  background:#050507;
  color:var(--ink-dim);font-size:10px;text-align:center;
  letter-spacing:.05em;line-height:1.6;
}
.warning b{color:var(--red);font-weight:normal}

@media(max-width:760px){
  .sidebar{width:100%}
  table.layout, table.layout tbody{display:block;width:100%}
  table.layout tr{display:flex;flex-direction:column;width:100%}
  table.layout td{display:block;width:100%}

  .main{order:-1;display:flex;flex-direction:column}
  .main > #about{order:-1}
  .sidebar{order:1}
  .twocol,.links,.prof-grid,.works{grid-template-columns:1fr}
  .prof-grid{display:block}
  .avatar{margin-bottom:14px}
  .header h1{font-size:32px}
  .uid-display{min-width:0;width:100%;font-size:18px;letter-spacing:3px}
}

.clock{
  background:#000;border:1px solid var(--line);padding:8px 10px;
  font-family:"Courier New",monospace;font-size:10px;letter-spacing:.05em;
  color:var(--ink);line-height:1.55;
}
.clock .ln{display:flex;justify-content:space-between;gap:6px}
.clock .lbl{color:var(--ink-dim);font-size:9px;letter-spacing:.2em}
.clock .v{color:var(--teal);text-shadow:0 0 4px rgba(169,111,212,.4)}
.clock .v.gold{color:var(--gold);text-shadow:0 0 4px rgba(212,184,90,.3)}
.clock .v.dim{color:var(--ink-dim);text-shadow:none}
.clock .pulse{animation:clockPulse 1s steps(2,start) infinite}
@keyframes clockPulse{50%{opacity:.4}}

.console{
  background:#000;border:1px solid var(--teal);
  font-family:"Courier New",monospace;font-size:12px;
  color:var(--ink);
  position:relative;overflow:hidden;
}
.console::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(169,111,212,.04) 2px,rgba(169,111,212,.04) 3px);
}
.console-head{
  background:var(--teal);color:#000;
  padding:4px 10px;font-size:10px;letter-spacing:.2em;
  display:flex;justify-content:space-between;
}
.console-head .dots{letter-spacing:0}
.console-body{
  padding:10px 12px;height:240px;overflow-y:auto;
  line-height:1.55;
  contain:content;
}
.console-body::-webkit-scrollbar{width:8px}
.console-body::-webkit-scrollbar-track{background:#000}
.console-body::-webkit-scrollbar-thumb{background:var(--line)}
.console-body .ln{margin:1px 0;white-space:pre-wrap;word-break:break-all}
.console-body .ln.cmd{color:var(--ink)}
.console-body .ln.cmd::before{content:"yu@home:~$ ";color:var(--teal)}
.console-body .ln.out{color:var(--ink-dim)}
.console-body .ln.err{color:var(--red)}
.console-body .ln.sys{color:var(--gold)}
.console-input{
  display:flex;align-items:center;padding:6px 12px;
  border-top:1px dashed var(--line);
}
.console-input .prompt{color:var(--teal);margin-right:6px;flex-shrink:0}
.console-input input{
  flex:1;background:transparent;border:0;outline:0;
  color:var(--ink);font-family:inherit;font-size:12px;
  caret-color:var(--teal);
}

.fortune-btn{
  width:100%;background:#000;color:var(--gold);
  border:1px dashed var(--gold);
  padding:8px;font-family:inherit;font-size:11px;
  letter-spacing:.2em;cursor:pointer;
  transition:all .2s;
}
.fortune-btn:hover{
  background:var(--gold);color:#000;
  box-shadow:0 0 12px rgba(212,184,90,.4);
}

.fortune-modal .modal{border-color:var(--gold);box-shadow:0 0 40px rgba(212,184,90,.2)}
.fortune-modal .modal::before{content:"◆ FORTUNE ◆";color:var(--gold)}
.fortune-rank{
  font-family:"Shippori Mincho",serif;font-weight:800;
  font-size:48px;letter-spacing:.1em;
  margin:14px 0;
  background:linear-gradient(180deg,var(--gold),var(--red));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 20px rgba(212,184,90,.4);
  animation:rankPop .8s cubic-bezier(.34,1.5,.64,1);
}
@keyframes rankPop{from{transform:scale(.3) rotate(-15deg);opacity:0}to{transform:none;opacity:1}}
.fortune-line{
  font-family:"Shippori Mincho",serif;
  color:var(--ink);font-size:13px;line-height:1.8;
  padding:10px;border:1px dashed var(--line);background:#050507;
  margin:14px 0;
}
.fortune-meta{font-size:10px;color:var(--ink-dim);letter-spacing:.1em;margin-top:8px}

.konami-shake{animation:shake .5s linear}
@keyframes shake{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-6px,3px)}
  40%{transform:translate(6px,-3px)}
  60%{transform:translate(-3px,-3px)}
  80%{transform:translate(3px,3px)}
}
.debug-modal .modal{border-color:var(--red);box-shadow:0 0 40px rgba(212,84,63,.3)}
.debug-modal .modal::before{content:"★ DEBUG MODE UNLOCKED ★";color:var(--red);letter-spacing:.3em}
.debug-info{
  background:#000;border:1px solid var(--red);
  font-family:"Courier New",monospace;font-size:10px;
  color:var(--red);text-align:left;padding:10px;margin:14px 0;
  line-height:1.7;
}
.debug-info .k{color:var(--ink-dim)}
.debug-info .v{color:var(--gold)}

.avatar{
  cursor:pointer;
  transform:perspective(500px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));
  transition:transform .15s ease-out;
  user-select:none;
}
.avatar:hover{
  box-shadow:0 0 0 1px rgba(169,111,212,.4), 0 8px 20px rgba(0,0,0,.5);
}
.avatar.glitching{
  animation:avatarGlitch .65s steps(13,end);
}
@keyframes avatarGlitch{
  0%   { transform:skew(0,0); filter:none; }
  8%   { transform:skew(12deg,-1deg) translate(4px,-2px); filter:hue-rotate(90deg) saturate(2.5); }
  16%  { transform:skew(-9deg,3deg) translate(-3px,2px); filter:hue-rotate(200deg) contrast(1.8); }
  24%  { transform:skew(2deg,5deg) translate(2px,1px); filter:invert(.4) hue-rotate(45deg); }
  32%  { transform:skew(-4deg,-2deg) translate(-1px,-3px); filter:blur(1.5px) hue-rotate(140deg); }
  40%  { transform:skew(11deg,0) translate(3px,0) scaleY(.9); filter:saturate(0) contrast(2.5); }
  48%  { transform:skew(-13deg,4deg) translate(-2px,1px); filter:invert(1); }
  56%  { transform:skew(6deg,-3deg) translate(1px,-1px) scaleX(1.05); filter:hue-rotate(300deg) saturate(3); }
  64%  { transform:skew(-3deg,2deg) translate(-2px,2px); filter:hue-rotate(60deg); }
  72%  { transform:skew(4deg,-1deg) translate(2px,0); filter:contrast(1.5); }
  80%  { transform:skew(-1deg) translate(-1px,-1px); filter:hue-rotate(20deg); }
  90%  { transform:skew(2deg) translate(1px,0); filter:saturate(1.4); }
  100% { transform:none; filter:none; }
}

.avatar-easter{
  position:fixed;top:30%;left:50%;transform:translate(-50%,-50%) scale(.5);
  background:#000;border:1px dashed var(--gold);
  color:var(--gold);padding:16px 28px;
  font-family:"Shippori Mincho",serif;font-size:18px;letter-spacing:.15em;
  z-index:9999;text-shadow:0 0 10px rgba(212,184,90,.6);
  opacity:0;
  pointer-events:none;
  animation:avEgg 3s ease-out forwards;
}
@keyframes avEgg{
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-8deg); }
  15%  { opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(0); }
  20%  { transform:translate(-50%,-50%) scale(1) rotate(0); }
  70%  { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.3) rotate(2deg); }
}

.fx-layer{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

.fx-aurora{
  position:absolute;inset:-20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(169,111,212,.0), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(212,84,63,.0), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(212,184,90,.0), transparent 50%);
  opacity:0;
  transition:opacity .6s;
  animation:auroraSwirl 18s linear infinite;
}
@keyframes auroraSwirl{
  0%{transform:rotate(0) scale(1)}
  50%{transform:rotate(180deg) scale(1.15)}
  100%{transform:rotate(360deg) scale(1)}
}

.fx-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(169,111,212,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(169,111,212,.5) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0;
  transition:opacity .5s;
  mask-image:radial-gradient(circle at 50% 60%, black, transparent 75%);
  -webkit-mask-image:radial-gradient(circle at 50% 60%, black, transparent 75%);
  animation:gridFlow 8s linear infinite;
}
@keyframes gridFlow{from{background-position:0 0}to{background-position:0 40px}}

.fx-scanline{
  position:absolute;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity:0;
  box-shadow:0 0 12px var(--teal);
  animation:fxScan 3s linear infinite;
}
@keyframes fxScan{0%{top:-2%}100%{top:102%}}

.fx-vignette{
  position:absolute;inset:0;
  box-shadow:inset 0 0 200px rgba(212,84,63,0);
  transition:box-shadow .5s;
}

body.fx-glitch-burst{animation:fxGlitchBurst .3s steps(4,end)}
@keyframes fxGlitchBurst{
  0%{filter:none}
  25%{filter:hue-rotate(40deg) saturate(1.4)}
  50%{filter:hue-rotate(-30deg) contrast(1.2)}
  75%{filter:hue-rotate(15deg)}
  100%{filter:none}
}

.fx-depth{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);
  font-family:"Courier New",monospace;font-size:9px;letter-spacing:.2em;
  color:var(--ink-dim);z-index:50;pointer-events:none;
  opacity:0;transition:opacity .4s;
  background:rgba(0,0,0,.5);padding:3px 10px;border:1px solid var(--line);
}
.fx-depth.show{opacity:1}
.fx-depth .lv{color:var(--teal)}
.fx-depth .lv.warn{color:var(--gold)}
.fx-depth .lv.max{color:var(--red);animation:blink 1s steps(2,start) infinite}

.stars,.fx-aurora,.fx-grid{will-change:transform,opacity;transform:translateZ(0)}
.sparkle{will-change:transform,opacity}

@media (prefers-reduced-motion: reduce){
  .stars,.stars::after,.fx-aurora,.fx-grid,.fx-scanline,
  .uid-display,.uid-panel::after,.header h1 .cursor,.header .blink,
  .clock .pulse,.skills .fill,.cat-cube{
    animation:none !important;
  }
  .skills .fill{transform:scaleX(1) !important}
  .sparkle{display:none !important}
}

.fx-aurora,.fx-grid,.fx-scanline{animation-play-state:paused}

.fortune-actions{
  display:flex;gap:8px;justify-content:center;align-items:stretch;
  margin-top:16px;flex-wrap:wrap;
}
.fortune-actions .btn,
.fortune-tweet{
  box-sizing:border-box;
  height:36px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 18px;
  font-family:inherit;font-size:11px;letter-spacing:.15em;
  line-height:1;margin:0;
  cursor:pointer;
}
.fortune-tweet{
  background:#000;color:var(--ink);
  border:1px solid var(--teal);
  text-decoration:none;
  transition:all .2s;
}
.fortune-tweet:hover{
  background:var(--teal);color:#000;
  box-shadow:0 0 12px rgba(169,111,212,.4);
}

.weather{font-size:11px;font-family:"Courier New",monospace}
.weather-loading{color:var(--ink-dim);font-size:10px;text-align:center;padding:8px 0;letter-spacing:.1em}
.weather-loading::after{content:" ●";animation:blink 1s steps(2,start) infinite}
.weather-head{
  display:flex;align-items:center;gap:8px;
  padding-bottom:6px;margin-bottom:6px;border-bottom:1px dashed var(--line);
}
.weather-icon{font-size:26px;line-height:1}
.weather-temp{
  font-size:22px;color:var(--teal);font-weight:bold;
  text-shadow:0 0 6px rgba(169,111,212,.4);
}
.weather-temp .unit{font-size:11px;color:var(--ink-dim)}
.weather-loc{
  font-size:10px;color:var(--ink-dim);margin-left:auto;text-align:right;
  letter-spacing:.05em;line-height:1.4;
}
.weather-loc .city{color:var(--ink);font-size:11px}
.weather-desc{color:var(--gold);font-size:10px;margin-bottom:6px;letter-spacing:.05em}
.weather-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:9px}
.weather-grid .k{color:var(--ink-dim)}
.weather-grid .v{color:var(--ink);text-align:right}
.weather-err{color:var(--ink-dim);font-size:9px;text-align:center;padding:6px 0;line-height:1.5}
.weather-fore{
  display:flex;justify-content:space-between;gap:3px;
  margin-top:8px;padding-top:6px;border-top:1px dashed var(--line);
}
.weather-fore .day{text-align:center;flex:1;font-size:8px}
.weather-fore .day .dn{color:var(--ink-dim)}
.weather-fore .day .di{font-size:14px;margin:2px 0}
.weather-fore .day .dt{color:var(--teal);font-size:9px}
.weather-credit{font-size:7px;color:var(--ink-dim);text-align:right;margin-top:6px;opacity:.6;letter-spacing:.03em}

.pixel-wrap{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pixel-editor-col,.pixel-received-col{display:flex;flex-direction:column;gap:10px}

.pixel-canvas{
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  width:100%;aspect-ratio:1;
  background:#050507;border:1px solid var(--teal);
  gap:1px;padding:1px;
  touch-action:none;
}
.pixel-cell{
  background:#0a0a0f;cursor:pointer;
  transition:background .05s;
}
.pixel-cell:hover{outline:1px solid var(--gold);outline-offset:-1px}

.pixel-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pixel-color-label{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-dim)}
.pixel-color-label input[type=color]{
  width:32px;height:24px;padding:0;border:1px solid var(--line);background:#000;cursor:pointer;
}
.pixel-tool-btn{
  width:28px;height:24px;background:#000;color:var(--ink);
  border:1px solid var(--line);cursor:pointer;font-family:inherit;font-size:11px;
  transition:all .15s;
}
.pixel-tool-btn:hover{border-color:var(--teal);color:var(--teal)}
.pixel-tool-btn.active{background:var(--teal);color:#000;border-color:var(--teal)}
.pixel-recent .sw{width:16px;height:16px;border:1px solid var(--line);cursor:pointer}
.pixel-recent .sw:hover{transform:scale(1.15);border-color:var(--ink)}

.pixel-title-input{
  background:#050507;border:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:12px;
  padding:7px 10px;outline:none;
}
.pixel-title-input:focus{border-color:var(--teal)}

.pixel-submit{
  background:#000;color:var(--gold);
  border:1px dashed var(--gold);
  padding:9px;font-family:inherit;font-size:11px;
  letter-spacing:.1em;cursor:pointer;transition:all .2s;
}
.pixel-submit:hover{background:var(--gold);color:#000;box-shadow:0 0 12px rgba(212,184,90,.4)}
.pixel-submit:disabled{opacity:.4;cursor:not-allowed}
.pixel-submit:disabled:hover{background:#000;color:var(--gold);box-shadow:none}

.pixel-msg{font-size:10px;min-height:14px;letter-spacing:.05em}
.pixel-msg.ok{color:var(--teal)}
.pixel-msg.err{color:var(--red)}
.pixel-msg.warn{color:var(--gold)}

.pixel-note{
  margin-top:14px;font-size:9px;color:var(--ink-dim);
  line-height:1.7;letter-spacing:.03em;
  border-top:1px dashed var(--line);padding-top:10px;
}
.pixel-note b{color:var(--gold)}

@media(max-width:620px){
  .pixel-wrap{grid-template-columns:1fr}
}

.pixel-wrap{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
@media(max-width:560px){.pixel-wrap{grid-template-columns:1fr}}

.pixel-canvas{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  width:192px;height:192px;
  border:1px solid var(--teal);
  background:#000;
  box-shadow:0 0 14px rgba(169,111,212,.2);
  touch-action:none;
}
.pixel-cell{
  border:1px solid rgba(42,42,53,.6);
  cursor:crosshair;
  background:#0a0a0f;
  transition:background .05s;
}
.pixel-cell:hover{outline:1px solid var(--gold);outline-offset:-1px;z-index:2}

.pixel-tools{font-size:11px}
.pixel-tools .row{margin-bottom:10px}
.pixel-tools .row .rl{
  display:block;color:var(--ink-dim);font-size:9px;letter-spacing:.2em;margin-bottom:4px;
}
.pixel-color-area{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pixel-color-area input[type=color]{
  width:38px;height:38px;padding:0;border:1px solid var(--line);
  background:#000;cursor:pointer;
}
.pixel-swatches{display:flex;gap:3px;flex-wrap:wrap}
.pixel-sw{
  width:18px;height:18px;border:1px solid var(--line);cursor:pointer;
  transition:transform .1s;
}
.pixel-sw:hover{transform:scale(1.15);border-color:var(--ink)}
.pixel-sw.active{border-color:var(--teal);box-shadow:0 0 6px var(--teal)}

.pixel-recent{
  display:flex;gap:3px;
  overflow-x:auto;overflow-y:hidden;
  max-width:69px;
  padding-bottom:3px;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.pixel-recent::-webkit-scrollbar{height:5px}
.pixel-recent::-webkit-scrollbar-track{background:transparent}
.pixel-recent::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.pixel-recent .pixel-sw{flex-shrink:0}

.pixel-btns{display:flex;gap:6px;flex-wrap:wrap}
.pixel-btns .btn{font-size:10px;padding:0 12px;height:30px;display:inline-flex;align-items:center}
.pixel-btns .btn.erase{border-color:var(--ink-dim);color:var(--ink-dim)}
.pixel-btns .btn.erase:hover{background:var(--ink-dim);color:#000}
.pixel-btns .btn.clear{border-color:var(--red);color:var(--red)}
.pixel-btns .btn.clear:hover{background:var(--red);color:#000}

.pixel-title-input{
  width:100%;background:#000;border:1px solid var(--line);
  color:var(--ink);font-family:inherit;font-size:12px;
  padding:7px 10px;outline:none;
}
.pixel-title-input:focus{border-color:var(--teal)}
.pixel-title-count{font-size:9px;color:var(--ink-dim);text-align:right;margin-top:2px}
.pixel-title-count.over{color:var(--red)}

.pixel-submit{
  width:100%;height:38px;
  background:#000;border:1px solid var(--teal);color:var(--teal);
  font-family:inherit;font-size:12px;letter-spacing:.15em;cursor:pointer;
  transition:all .2s;
}
.pixel-submit:hover:not(:disabled){background:var(--teal);color:#000;box-shadow:0 0 14px rgba(169,111,212,.4)}
.pixel-submit:disabled{border-color:var(--line);color:var(--ink-dim);cursor:not-allowed}

.pixel-msg{font-size:10px;margin-top:8px;line-height:1.6;min-height:14px}
.pixel-msg.ok{color:var(--teal)}
.pixel-msg.warn{color:var(--gold)}
.pixel-msg.err{color:var(--red)}

.pixel-cooldown{font-size:10px;color:var(--ink-dim);margin-top:6px;font-family:"Courier New",monospace}
.pixel-cooldown .t{color:var(--gold)}

.pixel-received{
  margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);
}
.pixel-received h4{
  font-family:"Shippori Mincho",serif;font-size:13px;color:var(--gold);
  margin-bottom:10px;letter-spacing:.1em;white-space:nowrap;
}
.pixel-received h4::before{content:"◆ "}
.pixel-gift{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pixel-gift-art{
  width:96px;height:96px;
  display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);
  border:1px solid var(--gold);background:#000;
  box-shadow:0 0 12px rgba(212,184,90,.25);
  image-rendering:pixelated;
}
.pixel-gift-art div{width:100%;height:100%}
.pixel-gift-meta{font-size:11px;line-height:1.7}
.pixel-gift-meta .gt{color:var(--ink);font-family:"Shippori Mincho",serif;font-size:14px}
.pixel-gift-meta .gf{color:var(--ink-dim);font-size:10px;font-family:"Courier New",monospace}
.pixel-gift-empty{color:var(--ink-dim);font-size:10px;font-style:italic}

.pixel-note{
  font-size:9px;color:var(--ink-dim);margin-top:12px;line-height:1.6;
  border:1px dashed var(--line);padding:8px;background:#050507;
}

.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
.reveal.in{
  opacity:1;
  transform:translateY(0);
}
.sbox.reveal{transition-duration:.55s}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important;transition:none !important}
}

.panel{transition:border-color .25s, box-shadow .25s, transform .25s}
.panel:hover{
  border-color:rgba(169,111,212,.5);
  box-shadow:0 4px 20px rgba(0,0,0,.4), 0 0 0 1px rgba(169,111,212,.15);
  transform:translateY(-2px);
}
.sbox{transition:border-color .25s, box-shadow .25s}
.sbox:hover{
  border-color:rgba(169,111,212,.4);
  box-shadow:0 0 12px rgba(169,111,212,.12);
}

.bbs-pager{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin-top:12px;padding-top:10px;border-top:1px dashed var(--line);
}
.bbs-pager:empty{display:none}
.bbs-page-btn{
  background:#000;color:var(--ink);
  border:1px solid var(--line);
  padding:5px 12px;font-family:inherit;font-size:10px;letter-spacing:.1em;
  cursor:pointer;transition:all .2s;
}
.bbs-page-btn:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.bbs-page-btn:disabled{opacity:.3;cursor:not-allowed}
.bbs-page-info{
  font-family:"Courier New",monospace;font-size:11px;color:var(--ink-dim);
  letter-spacing:.1em;min-width:48px;text-align:center;
}

.pixel-btns .btn.save{border-color:var(--gold);color:var(--gold)}
.pixel-btns .btn.save:hover{background:var(--gold);color:#000}
.pixel-gift-meta .gift-save{
  margin-top:8px;height:28px;font-size:10px;padding:0 12px;
  border-color:var(--gold);color:var(--gold);
  display:inline-flex;align-items:center;
}
.pixel-gift-meta .gift-save:hover{background:var(--gold);color:#000}

.fx-rain-layer,.fx-cat-layer{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden}
.fx-raindrop{
  position:absolute;top:-10%;
  width:1px;height:60px;
  background:linear-gradient(transparent, rgba(169,111,212,.8));
  animation:rainfall linear forwards;
}
@keyframes rainfall{
  to{transform:translateY(120vh)}
}
.fx-catdrop{
  position:absolute;top:-80px;
  width:48px;height:48px;
  background-size:contain;background-position:center;background-repeat:no-repeat;
  animation:catfall linear forwards;
  filter:drop-shadow(0 0 4px rgba(169,111,212,.5));
}
@keyframes catfall{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(120vh) rotate(var(--spin,360deg))}
}
.like-clickable,.dislike-clickable{
  cursor:pointer;transition:all .15s;position:relative;
}
.like-clickable:hover{color:var(--teal);text-shadow:0 0 8px rgba(169,111,212,.5)}
.like-clickable::after{content:" ◆";font-size:8px;opacity:.5}
.dislike-clickable:hover{color:var(--moon);text-shadow:0 0 8px rgba(184,168,212,.5)}
.dislike-clickable::after{content:" ☂";font-size:9px;opacity:.5}

.typing .tcaret{
  display:inline-block;width:.55em;height:1em;
  background:var(--teal);vertical-align:-.12em;margin-left:2px;
  animation:tcaretBlink .7s steps(2,start) infinite;
}
@keyframes tcaretBlink{50%{opacity:0}}

.cursor-cat{
  position:fixed;top:0;left:0;width:34px;height:34px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  pointer-events:none;z-index:9997;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 4px rgba(169,111,212,.5));
  opacity:0;transition:opacity .3s;
  will-change:transform;
}
.cursor-cat.show{opacity:.9}

.paw-print{
  position:fixed;width:14px;height:14px;pointer-events:none;z-index:9996;
  color:var(--teal);font-size:14px;line-height:1;
  transform:translate(-50%,-50%) rotate(var(--pr,0deg));
  animation:pawFade 1.4s ease-out forwards;
}
@keyframes pawFade{
  0%{opacity:.8;transform:translate(-50%,-50%) rotate(var(--pr,0deg)) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--pr,0deg)) scale(.7)}
}

.panel{transform-style:preserve-3d;will-change:transform}
.panel.tilting{transition:transform .08s ease-out}

.panel h2{position:relative}
.panel h2.glitch{
  animation:txtGlitchShadow .32s steps(2,end);
}
@keyframes txtGlitchShadow{
  0%  {text-shadow:none; transform:translate(0,0)}
  20% {text-shadow:-2px 0 var(--red), 2px 0 var(--teal); transform:translate(-1px,0)}
  40% {text-shadow:2px 0 var(--red), -2px 0 var(--teal); transform:translate(1px,0)}
  60% {text-shadow:-1px 0 var(--red), 1px 0 var(--teal); transform:translate(-1px,0)}
  80% {text-shadow:1px 0 var(--red), -1px 0 var(--teal); transform:translate(0,0)}
  100%{text-shadow:none; transform:translate(0,0)}
}

.confetti{
  position:fixed;top:-20px;width:8px;height:8px;pointer-events:none;z-index:9999;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(110vh) rotate(var(--cspin,720deg));opacity:.8}
}

.panel h2::after{transition:width .5s cubic-bezier(.16,1,.3,1)}
.panel:hover h2::after{width:120px}

@keyframes softPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

.uid-display.typing-uid{border-color:var(--teal)}

.banner-img,.work,.pixel-canvas{will-change:transform}

.links a{position:relative;overflow:hidden}
.links a::after{
  content:"";position:absolute;left:-100%;bottom:0;width:100%;height:1px;
  background:linear-gradient(90deg,transparent,var(--teal),transparent);
  transition:left .4s;
}
.links a:hover::after{left:100%}

.work .num{transition:transform .25s, color .25s}
.work:hover .num{transform:translateX(4px);color:var(--teal)}

@media (prefers-reduced-motion: reduce){
  .cursor-cat,.paw-print,.confetti{display:none !important}
  .panel.tilting{transform:none !important}
}

.gacha-machine{text-align:center}
.gacha-display{
  background:#000;border:2px solid var(--teal);
  padding:20px 8px;margin:14px 0;
  font-family:"Courier New",monospace;
  position:relative;overflow:hidden;
}
.gacha-display::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(169,111,212,.04) 3px,rgba(169,111,212,.04) 4px);
}
.gacha-number{
  font-size:clamp(28px, 13vw, 40px);
  letter-spacing:2px;font-weight:bold;
  color:var(--teal);text-shadow:0 0 12px rgba(169,111,212,.6);
  display:flex;justify-content:center;
  white-space:nowrap;
  position:relative;z-index:1;
}
.gacha-number .digit{display:inline-block;width:1ch;text-align:center}
.gacha-number.rolling .digit{animation:digitRoll .08s steps(1) infinite}
@keyframes digitRoll{0%{opacity:.4}50%{opacity:1}}
.gacha-label{font-size:8px;color:var(--ink-dim);letter-spacing:.25em;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gacha-rank{
  font-family:"Shippori Mincho",serif;font-size:16px;
  margin-top:10px;letter-spacing:.15em;min-height:22px;
}
.gacha-rank.normal{color:var(--ink-dim)}
.gacha-rank.rare{color:var(--gold);text-shadow:0 0 8px rgba(212,184,90,.5)}
.gacha-rank.legend{
  color:var(--red);font-size:22px;font-weight:800;
  text-shadow:0 0 14px rgba(212,84,63,.7);
  animation:legendPulse .5s ease-in-out infinite alternate;
}
@keyframes legendPulse{from{transform:scale(1)}to{transform:scale(1.08)}}

.gacha-btn{
  width:100%;height:40px;
  background:#000;border:1px solid var(--teal);color:var(--teal);
  font-family:inherit;font-size:13px;letter-spacing:.2em;cursor:pointer;
  transition:all .2s;
}
.gacha-btn:hover:not(:disabled){background:var(--teal);color:#000;box-shadow:0 0 16px rgba(169,111,212,.5)}
.gacha-btn:disabled{border-color:var(--line);color:var(--ink-dim);cursor:not-allowed}

.gacha-actions{display:flex;gap:8px;margin-top:10px;align-items:stretch}
.gacha-actions .gacha-tweet{
  flex:1;height:36px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:#000;border:1px solid var(--teal);color:var(--ink);
  font-family:inherit;font-size:11px;letter-spacing:.1em;text-decoration:none;
  transition:all .2s;
}
.gacha-actions .gacha-tweet:hover{background:var(--teal);color:#000}
.gacha-actions .gacha-tweet.hidden{display:none}

.gacha-cooldown{font-size:10px;color:var(--ink-dim);margin-top:8px;font-family:"Courier New",monospace}
.gacha-cooldown .t{color:var(--gold)}

.gacha-hint{font-size:9px;color:var(--ink-dim);margin-top:10px;line-height:1.6;opacity:.7}

.fx-yj-layer{position:fixed;inset:0;pointer-events:none;z-index:9999;overflow:hidden}
.fx-yj{
  position:absolute;top:-220px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  animation:yjfall linear forwards;
  filter:drop-shadow(0 0 6px rgba(169,111,212,.5));
}
@keyframes yjfall{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(130vh) rotate(var(--yjspin,360deg))}
}
.fx-yj-flash{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:radial-gradient(circle, rgba(212,84,63,.3), transparent 70%);
  opacity:0;animation:yjFlash 1s ease-out;
}
@keyframes yjFlash{0%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .fx-yj{display:none !important}
  .gacha-rank.legend{animation:none !important}
}

.fx-rose{filter:drop-shadow(0 0 6px rgba(230,160,190,.6))}
.fx-rose-flash{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:radial-gradient(circle, rgba(212,120,160,.3), transparent 70%);
  opacity:0;animation:yjFlash 1s ease-out;
}

.bbs-entry{border-left:3px solid var(--author-col, var(--line))}
.bbs-entry.mine{
  background:rgba(169,111,212,.06);
  border-left-color:var(--teal);
}
.bbs-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bbs-author{
  font-size:10px;display:inline-flex;align-items:center;gap:3px;
  font-family:"Courier New",monospace;
}
.bbs-author .aid{font-size:8px;opacity:.7;letter-spacing:.05em}
.bbs-you{
  font-size:8px;background:var(--teal);color:#000;
  padding:1px 5px;border-radius:2px;letter-spacing:.1em;font-weight:bold;
}
.bbs-meta{
  font-size:9px;color:var(--ink-dim);margin-left:auto;
  font-family:"Courier New",monospace;letter-spacing:.03em;
}
.bbs-entry .name{color:var(--ink);font-size:12px}

.gacha-number.phantom{font-family:"Shippori Mincho",serif}
.masaji-text{
  font-size:clamp(30px,15vw,46px);font-weight:800;letter-spacing:4px;
  background:linear-gradient(90deg,#a96fd4,#d4b85a,#d4543f,#a96fd4);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:masajiShine 1.5s linear infinite;
  text-shadow:none;
}
@keyframes masajiShine{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.gacha-rank.phantom{
  color:#d4b85a;font-size:18px;font-weight:800;
  text-shadow:0 0 14px rgba(212,184,90,.7);
  animation:phantomPulse .6s ease-in-out infinite alternate;
}
@keyframes phantomPulse{from{transform:scale(1);opacity:.85}to{transform:scale(1.1);opacity:1}}

.fx-masaji{filter:drop-shadow(0 0 8px rgba(212,184,90,.6))}
.fx-masaji-flash{
  position:fixed;inset:0;pointer-events:none;z-index:9998;
  background:
    radial-gradient(circle at 30% 40%, rgba(169,111,212,.35), transparent 60%),
    radial-gradient(circle at 70% 60%, rgba(212,184,90,.35), transparent 60%);
  opacity:0;animation:masajiFlash 1.2s ease-out;
}
@keyframes masajiFlash{0%{opacity:1}100%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  .fx-masaji{display:none !important}
  .gacha-rank.phantom,.masaji-text{animation:none !important}
}

.loader{
  position:fixed;inset:0;z-index:100000;
  background:#0a0a0f;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s ease, visibility .6s;
}
.loader.done{opacity:0;visibility:hidden;pointer-events:none}
.loader-inner{text-align:center;width:280px;max-width:80vw}
.loader-cat{
  width:90px;height:90px;margin:0 auto 18px;
  background:url('../assets/header-cat-line.png') center/contain no-repeat;
  animation:loaderCatSpin 1.4s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(169,111,212,.5));
}
@keyframes loaderCatSpin{
  0%,100%{transform:rotate(-8deg) scale(1)}
  50%{transform:rotate(8deg) scale(1.08)}
}
.loader-title{
  font-family:"Courier New",monospace;font-size:15px;letter-spacing:.25em;
  color:var(--teal);margin-bottom:8px;
}
.loader-dots::after{content:"";animation:loaderDots 1.2s steps(4,end) infinite}
@keyframes loaderDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}100%{content:""}}
.loader-msg{
  font-family:"Shippori Mincho",serif;font-size:12px;color:var(--ink-dim);
  margin-bottom:16px;letter-spacing:.1em;min-height:18px;
}
.loader-bar{
  width:100%;height:6px;background:#050507;border:1px solid var(--line);
  overflow:hidden;position:relative;
}
.loader-fill{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--teal),var(--gold));
  box-shadow:0 0 8px rgba(169,111,212,.5);
  transition:width .2s ease-out;
}
.loader-pct{
  font-family:"Courier New",monospace;font-size:10px;color:var(--ink-dim);
  margin-top:6px;letter-spacing:.1em;
}

.greeting{
  font-family:"Shippori Mincho",serif;
  font-size:12px;color:var(--gold);margin-top:8px;
  letter-spacing:.08em;min-height:18px;
  opacity:0;animation:greetFade 1s ease-out .4s forwards;
}
@keyframes greetFade{to{opacity:1}}

body.tod-dawn .stars{filter:brightness(1.3) saturate(.7)}
body.tod-dawn .header::before,body.tod-dawn .header::after{background:rgba(212,184,140,.3)}
body.tod-morning .stars{opacity:.5}
body.tod-day .stars{opacity:.35}
body.tod-evening{}
body.tod-night .greeting{color:var(--teal)}
body.tod-latenight .greeting{color:var(--red)}

body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  transition:background 2s ease;
}
body.tod-dawn::after{background:radial-gradient(ellipse at 50% 0%, rgba(212,180,150,.10), transparent 60%)}
body.tod-morning::after{background:radial-gradient(ellipse at 50% 0%, rgba(180,200,220,.08), transparent 60%)}
body.tod-day::after{background:radial-gradient(ellipse at 50% 0%, rgba(160,180,212,.05), transparent 60%)}
body.tod-evening::after{background:radial-gradient(ellipse at 50% 100%, rgba(212,120,90,.08), transparent 60%)}
body.tod-night::after{background:radial-gradient(ellipse at 50% 50%, rgba(120,90,160,.06), transparent 70%)}
body.tod-latenight::after{background:radial-gradient(ellipse at 50% 50%, rgba(80,40,90,.10), transparent 70%)}

.seg-display{
  display:flex;gap:3px;justify-content:center;margin:8px 0;
}
.seg-digit{
  width:22px;height:34px;
  background:#050507;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:"Courier New",monospace;font-size:22px;font-weight:bold;
  color:var(--teal);
  text-shadow:0 0 8px rgba(169,111,212,.7);
  position:relative;
  border-radius:2px;
}
.seg-digit::before{
  content:"8";position:absolute;color:rgba(169,111,212,.08);
  font-family:inherit;font-size:inherit;font-weight:inherit;
}
.seg-digit span{position:relative;z-index:1}
.seg-you{
  font-size:11px;color:var(--ink-dim);text-align:center;margin-top:8px;
  font-family:"Shippori Mincho",serif;letter-spacing:.05em;
}
.seg-you-num{
  color:var(--gold);font-family:"Courier New",monospace;font-weight:bold;
  font-size:14px;text-shadow:0 0 6px rgba(212,184,90,.5);
}

.game-info{font-size:11px;color:var(--ink-dim);margin-bottom:12px;line-height:1.6}
.game-info b{color:var(--teal)}
.game-warn{color:var(--moon)}
.game-stage{
  position:relative;width:100%;height:320px;
  background:#050507;border:1px solid var(--teal);
  overflow:hidden;border-radius:3px;
  box-shadow:inset 0 0 30px rgba(169,111,212,.1);
}
.game-hud{
  position:absolute;top:0;left:0;right:0;z-index:5;
  display:flex;justify-content:space-between;
  padding:8px 12px;font-family:"Courier New",monospace;font-size:12px;
  color:var(--teal);background:linear-gradient(180deg,rgba(0,0,0,.6),transparent);
  pointer-events:none;letter-spacing:.05em;
}
.game-hud span span{color:var(--gold);font-weight:bold}
.game-overlay{
  position:absolute;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(10,10,15,.85);
  transition:opacity .3s;
}
.game-overlay.hidden{opacity:0;pointer-events:none}
.game-score-final{
  font-family:"Shippori Mincho",serif;font-size:16px;color:var(--gold);
  min-height:24px;text-align:center;
}
.game-btn{
  background:#000;border:1px solid var(--teal);color:var(--teal);
  padding:10px 28px;font-family:inherit;font-size:13px;letter-spacing:.15em;
  cursor:pointer;transition:all .2s;
}
.game-btn:hover{background:var(--teal);color:#000;box-shadow:0 0 16px rgba(169,111,212,.5)}
.game-best{font-size:10px;color:var(--ink-dim);font-family:"Courier New",monospace}
.game-best span{color:var(--gold)}
.game-target{
  position:absolute;width:46px;height:46px;
  background-size:contain;background-repeat:no-repeat;background-position:center;
  cursor:pointer;z-index:3;
  filter:drop-shadow(0 0 4px rgba(169,111,212,.4));
  transition:transform .08s;
  will-change:top;
}
.game-target:active{transform:scale(.85)}
.game-target.rain{
  background-image:none;
  width:3px;height:34px;
  background:linear-gradient(transparent, var(--moon));
  filter:none;cursor:default;
}
.game-pop{
  position:absolute;z-index:6;pointer-events:none;
  font-family:"Courier New",monospace;font-size:14px;font-weight:bold;
  animation:gamePop .6s ease-out forwards;
}
@keyframes gamePop{
  0%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-30px)}
}