/* Pixel edition — presentation only. The original layout and breakpoints live
   in style.css; this layer does not replace any grid, spacing or section order. */
:root {
  --bg: #160f1f;
  --surface: #291b32;
  --surface-hover: #39233e;
  --pink: #ff96d0;
  --pink-bright: #ff77bd;
  --text: #fff2fb;
  --muted: #c4a8cf;
  --subtle: #aa86b6;
  --border: #875776;
  --pixel-ink: #0e0816;
  --pixel-frame: #c98daf;
  --pixel-dim: #6e486e;
  --pixel-purple: #a16acf;
  --pixel: 'Press Start 2P', 'Courier New', monospace;
  --mono: var(--pixel);
}
body {
  font-family: var(--pixel);
  font-synthesis: none;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: auto;
  background-color: var(--bg);
  background-image: linear-gradient(#f9b1d503 1px, transparent 1px),
                    linear-gradient(90deg, #f9b1d503 1px, transparent 1px);
  background-size: 24px 24px;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, #0d051a0c 0, #0d051a0c 1px, transparent 1px, transparent 4px);
}
.ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(#ef98c913 .7px, transparent .7px);
  background-size: 5px 5px;
  mask-image: linear-gradient(#0009, transparent 75%);
}
::selection { color: #24102e; background: #ff9ed3; }
a, button { -webkit-tap-highlight-color: #ff96d022; }
:is(a,button,canvas,[tabindex="0"]):focus-visible {
  outline: 2px dashed #ffd0eb;
  outline-offset: 5px;
}
:is(.brand,.hero h1,.section h2,.project-title-row h3,.tech-group h3,
       .social-card h3,.game-title,.back-title,.anime-card h3,
       .primary-button,.filter-button,.retry-button,.main-nav,
       .section-kicker,.activity-label,.game-number,.back-kicker,
       .boot-gate-brand) {
  font-family: var(--pixel);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}
:is(.about-card,.about-avatar,.avatar-spark,.project-card,.project-loading,
       .mini-browser,.project-tag,.tech-badge,.activity-card,.social-card,
       .filter-button,.anime-empty,.anime-empty-icon,.anime-loading,.anime-poster,
       .anime-score,.retry-button,.game-card,.game-front,.game-back,
       .icon-button,.primary-button,.back-top,.toast,.skip-link,
       .contribution-cell,.heatmap-legend i,.language-dot,.status-dot,
       .anime-progressbar,.anime-progressbar span,.boot-gate-skip) {
  border-radius: 0;
}
/* Hard, layered edges: the border widths are kept from the original layout. */
:is(.about-card,.project-card,.activity-card,.social-card,.anime-empty,.anime-loading) {
  border-color: var(--pixel-frame);
  background: #291b32;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 2px #1b1124, 4px 4px 0 var(--pixel-ink), 4px 4px 0 1px #784b75;
}
:is(.project-card,.social-card) {
  transition: transform .12s steps(2), box-shadow .12s steps(2), background .12s;
}
:is(.project-card,.social-card):hover {
  transform: translate(2px,2px);
  border-color: #ffbce0;
  background: #32203c;
  box-shadow: inset 0 0 0 2px #1b1124, 2px 2px 0 var(--pixel-ink), 2px 2px 0 1px #b5739c;
}
.about-card,.activity-card { position: relative; }
.about-card::before,.about-card::after,.activity-card::before,.activity-card::after {
  content: '';
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border: 1px solid var(--pixel-ink);
  background: #e39ecb;
  box-shadow: 1px 1px 0 var(--pixel-ink);
  pointer-events: none;
}
.about-card::before,.activity-card::before { left: -4px; top: -4px; }
.about-card::after,.activity-card::after { right: -4px; bottom: -4px; background: #a778d4; }
/* Brand, navigation and existing decorative rules. */
.site-header { position: relative; border-bottom-color: #a978a2; }
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: repeating-linear-gradient(90deg,#ff82c2 0 13px,transparent 13px 19px,#9b6bc8 19px 25px,transparent 25px 31px);
  opacity: .7;
}
.brand { font-size: 12px; line-height: 29.7px; letter-spacing: -.3px; }
.brand .muted { color: #bc85bc; font-weight: 400; }
.brand .pixel-heart { filter: drop-shadow(2px 2px 0 #6e335a); }
.main-nav { font-size: 8px; line-height: 19.8px; color: #e8c5e4; }
.main-nav a { text-shadow: 1px 1px 0 var(--pixel-ink); }
.main-nav a:hover { color: #ff9bcf; }
.icon-button { border-color: #8d5f8c; background: #26172f; box-shadow: 2px 2px 0 var(--pixel-ink); }
.icon-button:hover { border-color: #ffc0e3; background: #482a50; }
.icon-button:active { box-shadow: none; }
.icon-button .icon { shape-rendering: crispEdges; }
.hero-footer { border-bottom-style: dashed; border-bottom-color: #785072; color: #c398c4; }
.hero-footer .pixel-note { color: #b08abc; }
.eyebrow { color: #c99bc7; letter-spacing: .6px; }
.tiny-spark,.hero-star,.avatar-spark,.section-spark { text-shadow: 2px 2px 0 #713a66; }
.hero h1 {
  font-size: clamp(44px,6.67vw,56px);
  line-height: 91.18px;
  letter-spacing: -1px;
  color: #ff85c5;
  -webkit-text-stroke: 1px #ffd5ee;
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 #6a2f64, 5px 5px 0 #bb7bdd, 8px 8px 0 #0d0716;
}
.hero-dot { color: #ffc1e5; }
.hero-kana { text-shadow: none; -webkit-text-stroke: 0; color: #c082b1; transform: none; }
.hero-greeting { color: #ecd1e9; }
.hero-description { color: #d8b5da; }
.hero-star { font-family: var(--pixel); transform: none; }
.hero-halo::after {
  border-color: #97658b52;
  border-style: dashed;
  box-shadow: none;
  background: radial-gradient(ellipse,#ac4c9220,transparent 65%);
}
.model-stage canvas,.model-fallback { image-rendering: pixelated; }
.model-hint { color: #d09bc4; transform: none; }
.model-controls .icon-button { border-color: #775473; }
.hero-about { color: #cea7ce; }
/* Pressed game-button states, with unchanged hit areas and spacing. */
.primary-button {
  position: relative;
  font-size: 8px;
  line-height: 19.8px;
  background: #ff83c3;
  color: #2d1332;
  outline: 1px solid #ffd4ed;
  box-shadow: inset 0 0 0 2px #a64b82,4px 4px 0 #0d0716,4px 4px 0 1px #935383;
  transition: transform .12s steps(2), box-shadow .12s steps(2), background .12s;
}
.primary-button::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px dashed #6c2c6b66;
  pointer-events: none;
}
.primary-button:hover {
  transform: translate(2px,2px);
  background: #ffb0dc;
  box-shadow: inset 0 0 0 2px #a64b82,2px 2px 0 #0d0716,2px 2px 0 1px #935383;
}
.primary-button:active { transform: translate(4px,4px); box-shadow: inset 0 0 0 2px #a64b82; }
.section-kicker { font-size: 7px; line-height: 16.5px; color: #bf8abd; letter-spacing: 0; }
.section h2 { font-size: 18px; line-height: 36.25px; letter-spacing: -.4px; text-shadow: 2px 2px 0 #653c67; }
.about-copy h2 { font-size: 16px; line-height: 27.5px; letter-spacing: 0; }
.about-copy p { color: #e0c2e6; }
.about-avatar { border-color: #e7add6; box-shadow: 3px 3px 0 #0e0718,3px 3px 0 1px #87527d; image-rendering: pixelated; }
.avatar-spark { color: #ffb6dd; background: #291b32; }
.section-description { color: #c8a7d1; }
.text-link { color: #d4a2d1; }
/* The portfolio keeps the same illustrations and two-card grid. */
.project-art { border-bottom: 1px solid #a56b98; background: #35203d; }
.self-art { background: #392340; }
.repo-art { background: #302039; }
.project-art::after { background-image: radial-gradient(#e6a6d12b .7px,transparent .7px); background-size: 5px 5px; }
.mini-browser {
  border-color: #edb8dc;
  background: #291730;
  box-shadow: inset 0 0 0 2px #5f355a,5px 5px 0 #120919,5px 5px 0 1px #8a537b;
  transform: translateX(-50%);
}
.mini-browser::after { background: #bb83ad; }
.mini-dots,.mini-domain { color: #efb9da; }
.mini-heart { filter: drop-shadow(2px 2px 0 #7a406b); }
.mini-caption { font-family: var(--pixel); font-size: 5px; }
.art-spark { font-family: var(--pixel); color: #f0b7dd; text-shadow: 2px 2px 0 #733f6b; }
.repo-art svg { color: #f5b9e0; transform: none; }
.repo-art-title { font-family: var(--pixel); font-size: 24px; line-height: 64.35px; font-weight: 400; letter-spacing: -1px; transform: none; text-shadow: 3px 3px 0 #773c69; }
.repo-art-caption { color: #d5a6c9; }
.project-title-row h3 { font-size: 11px; line-height: 26.4px; letter-spacing: -.3px; }
.project-copy>p { color: #d2b3da; }
.project-meta { color: #c6a0cc; }
.project-tag { border-color: #74496e; background: #3a2440; }
.language-dot { background: #cfb6e4; }
.language-dot.pink-dot { background: #ff8dc6; }
.project-loading { border-color: #97628b; background: #24182d; }
/* Equipment chips and genuine GitHub activity. */
.tech-group h3 { font-size: 7px; line-height: 14.85px; color: #d09ccf; letter-spacing: .4px; }
.tech-badge { background: #2d1d36; border-color: #7c5279; color: #edcfe9; box-shadow: 2px 2px 0 #100918; }
.tech-badge:hover { background: #43284b; transform: translate(1px,1px); box-shadow: 1px 1px 0 #100918; }
.tech-badge img { opacity: 1; image-rendering: pixelated; }
.activity-top p { color: #e4c6e7; }
.activity-label { font-size: 7px; line-height: 14.85px; color: #c394bd; }
.status-dot { background: #f487c2; box-shadow: 1px 1px 0 #6b315b; }
.contribution-cell,.heatmap-legend i { border-color: #a66c8a24; background: #38203e; }
.contribution-cell[data-level="1"],.heatmap-legend i[data-level="1"] { background: #73305f; }
.contribution-cell[data-level="2"],.heatmap-legend i[data-level="2"] { background: #ac467f; }
.contribution-cell[data-level="3"],.heatmap-legend i[data-level="3"] { background: #e36ca9; }
.contribution-cell[data-level="4"],.heatmap-legend i[data-level="4"] { background: #ffb1dc; border-color: #ffd0e9; }
.heatmap-months,.heatmap-daylabels,.activity-bottom { color: #bb92c5; }
.heatmap-scroll,.game-description { scrollbar-color: #d98bbb #291a32; }
/* Social blocks and status filters remain in their current positions. */
.social-card h3 { font-size: 9px; line-height: 19.8px; }
.social-card p { color: #c396cc; }
.social-icon { color: #ffd6ec; }
.social-icon.discord-icon { color: #d1b0f2; }
.social-icon.steam-icon { color: #e9c4ec; }
.social-action { color: #d19bc9; }
.social-card.is-copied { background: #4b2750; border-color: #ffb4dc; }
.small-handwritten { font-family: var(--pixel); font-size: 8px; line-height: 23.1px; transform: none; color: #e9a4cf; }
.filter-button { font-size: 7px; line-height: 16.5px; border-color: #80517d; background: #291c34; color: #cba4d2; box-shadow: 2px 2px 0 #100918; }
.filter-button.active { background: #6b335c; border-color: #ffb9df; color: #fff0fa; box-shadow: inset 0 0 0 1px #ab6793,2px 2px 0 #100918; }
.filter-button:hover { background: #4c2950; }
.filter-button.active span,.filter-button span { color: #f1b8df; }
.anime-empty::after { color: #e391c112; font-family: var(--pixel); transform: none; }
.anime-empty-icon { background: #402447; border-color: #95608c; color: #e9b7d8; box-shadow: 3px 3px 0 #120b1a; }
.anime-empty-icon span { color: #f3d8ea; }
.anime-empty h3 { font-family: var(--pixel); font-size: 9px; line-height: 23.1px; font-weight: 400; }
.anime-empty p { color: #caa8d4; }
.retry-button { font-size: 7px; line-height: 16.5px; background: #43244a; border-color: #ac76a2; box-shadow: 2px 2px 0 #100918; }
.retry-button:hover { background: #60335e; }
.anime-poster { border-color: #b482a5; box-shadow: 3px 3px 0 #100918; }
.anime-card h3 { font-size: 8px; line-height: 16.5px; }
.anime-score { border: 1px solid #c89db9; background: #27152edc; backdrop-filter: none; }
.anime-progress { color: #c6a0cf; }
.anime-progressbar { background: #482547; }
.anime-progressbar span { background: repeating-linear-gradient(90deg,#f093c3 0 5px,#8c4e7e 5px 7px); }
/* Vertical covers retain their size; final.css defines smooth 3D flips. */
.game-front,.game-back { border-color: #c38cab; box-shadow: inset 0 0 0 2px #221029; }

.game-front img { filter: saturate(.75) contrast(1.08) brightness(.85); image-rendering: pixelated; }
.game-card:hover .game-front img { transform: none; filter: saturate(.95) contrast(1.08) brightness(.94); }
.game-number { font-size: 6px; line-height: 11.55px; letter-spacing: .25px; color: #ffe3f4; }
.game-title { font-size: 12px; line-height: 24.8px; letter-spacing: -.2px; color: #ffe2f3; text-shadow: 2px 2px 0 #27112f; }
.game-genres { color: #d6b3df; }
.game-flip-hint { border-top-style: dashed; border-top-color: #996187; color: #ebb7dc; }
.game-back { background: #321d3b; }
.back-kicker { font-size: 6px; line-height: 13.2px; letter-spacing: .2px; color: #e2a4cc; }
.back-title { font-size: 11px; line-height: 22.1px; letter-spacing: -.3px; }
.game-description { color: #e5caed; }
.games-foot { color: #bb95c6; }
/* Footer and feedback use the same crisp edges. */
.site-footer { border-top-style: dashed; border-top-color: #8f618b; }
.footer-top .brand { font-size: 10px; line-height: 26.4px; }
.footer-top p,.footer-bottom { color: #bd94c7; }
.back-top { border-color: #bc83a9; background: #33203c; box-shadow: 2px 2px 0 #0e0816; }
.replay-button { color: #d79bc9; }
.toast { color: #2b1234; background: #ffb3dc; outline: 1px solid #ffe3f3; box-shadow: inset 0 0 0 2px #c16a9d,4px 4px 0 #120a19; }
.loading-flower { font-family: var(--pixel); animation-timing-function: steps(8); }
.loading-state,.inline-error,.data-note { color: #c89fcf; }
/* Intro retains its scene, timing and camera; only its UI/rendering is pixelled.
   Extra specificity keeps these rules above the module's injected CSS. */
body .twisty-intro__button, .boot-gate-skip {
  font-family: var(--pixel);
  font-size: 8px;
  line-height: 14.4px;
  border-radius: 0;
  border-color: #d39abb;
  background: #38203ee8;
  color: #f9d2ea;
  backdrop-filter: none;
  box-shadow: inset 0 0 0 2px #1b1124,3px 3px 0 #0d0716;
}
body .twisty-intro__top { font-family: var(--pixel); font-size: 8px; line-height: 18.15px; color: #ecb6dc; letter-spacing: 0; }
body .twisty-intro__title { font-family: var(--pixel); font-size: clamp(20px,3vw,32px); letter-spacing: -1px; color: #ffe1f1; text-shadow: 2px 2px 0 #8e416f,4px 4px 0 #1e0c2a; }
body .twisty-intro canvas { image-rendering: pixelated; }
.boot-gate-brand { font-size: 18px; line-height: 41.25px; color: #ffabd5; letter-spacing: -.5px; text-shadow: 3px 3px 0 #6b396c; }
@media (max-width:767px) {
  .brand { font-size: 11px; line-height: 26.4px; }
  .main-nav { font-size: 7px; line-height: 18.15px; }
  .hero h1 { font-size: clamp(32px,6.1vw,44px); line-height: 71.78px; }
  .section h2 { font-size: 16px; line-height: 32.5px; }
  .about-copy h2 { font-size: 15px; line-height: 26.25px; }
  .project-title-row h3 { font-size: 10px; line-height: 24.75px; }
  .social-card h3 { font-size: 8px; line-height: 18.15px; }
  .game-title { font-size: 11px; line-height: 22.32px; }
  .game-number { font-size: 5px; line-height: 9.9px; }
}
@media (max-width:540px) {
  .brand { font-size: 10px; line-height: 24.75px; }
  .main-nav { font-size: 7px; line-height: 16.5px; }
  .hero h1 { font-size: clamp(36px,10.6vw,48px); line-height: 81.48px; }
  .primary-button { font-size: 7px; line-height: 18.15px; }
  .section h2 { font-size: 14px; line-height: 31.25px; }
  .about-copy h2 { font-size: 16px; line-height: 27.5px; }
  .section-kicker { font-size: 6px; line-height: 14.85px; }
  .project-title-row h3 { font-size: 12px; line-height: 28.05px; }
  .tech-group h3 { font-size: 7px; line-height: 14.85px; }
  .activity-label { font-size: 6px; line-height: 13.2px; }
  .social-card h3 { font-size: 10px; line-height: 21.45px; }
  .small-handwritten { font-size: 7px; line-height: 19.8px; }
  .filter-button { font-size: 6px; line-height: 14.85px; }
  .anime-empty h3 { font-size: 8px; line-height: 20.8px; }
  .retry-button { font-size: 6px; line-height: 14.85px; }
  .game-title { font-size: 12px; line-height: 26.04px; }
  .game-number { font-size: 6px; line-height: 11.55px; }
  .back-title { font-size: 11px; line-height: 24.7px; }
  .footer-top .brand { font-size: 9px; line-height: 23.1px; }
  body .twisty-intro__button,.boot-gate-skip { font-size: 7px; line-height: 13.2px; }
}
@media (max-width:359px) {
  .brand { font-size: 9px; }
  .main-nav { font-size: 6px; line-height: 14.85px; }
  .hero h1 { font-size: 36px; line-height: 73.72px; }
  .section h2 { font-size: 13px; line-height: 28.75px; }
  .about-copy h2 { font-size: 16px; line-height: 28.75px; }
  .filter-button { font-size: 6px; line-height: 13.2px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { transition-duration: .001ms!important; animation-duration: .001ms!important; }
}