/* Design v18: v17 "Mainframe Breaker JP" + the full back catalogue (MORE on the home page) and history timelines */
:root {
  --bg: #0c0f0f; --bg-2: #131818; --line: #243030; --fg: #8fd14f; --soft: #d9ded6; --dim: #9aa69e; --hot: #b6e57e;
  --vt: 'VT323', ui-monospace, monospace;
  --ja: 'DotGothic16', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --glow: 0 0 6px rgba(143, 209, 79, .55), 0 0 1px rgba(143, 209, 79, .9);
  --viewer-bg: rgba(12, 15, 15, .97); --viewer-fg: #d9ded6; --viewer-bg-solid: #0c0f0f; --viewer-font: var(--mono); --accent: #8fd14f;
}
* { box-sizing: border-box; }
html { background: #080a0a; color: var(--fg); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.65 var(--mono); background: #080a0a; color: var(--soft); overflow-x: clip; }
.crt { position: relative; min-height: 100vh; background: radial-gradient(ellipse at center, #141a1a 0%, var(--bg) 60%, #080a0a 100%); animation: flicker 6s infinite; }
.crt::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 102;
  background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .28) 2px 3px); }
.crt::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55) 100%); }
@keyframes flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .96; } 98% { opacity: .99; } }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; } /* no one-word last lines in titles */
p, figcaption { text-wrap: pretty; }
a { color: var(--fg); text-shadow: var(--glow); }
a:hover { color: var(--hot); }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 3px; }
.wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 0 24px; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--fg); color: var(--bg); padding: 10px 14px; }
.skip:focus { left: 8px; }
.box { background: rgba(19, 24, 24, .85); border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(143, 209, 79, .06); padding: 22px; }

.top { position: sticky; top: 0; z-index: 104; background: rgba(12, 15, 15, .94); border-bottom: 2px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; min-height: 60px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--hot); text-decoration: none; font: 400 26px/1 var(--vt); letter-spacing: .06em; text-shadow: 0 0 10px rgba(143, 209, 79, .8), 0 0 2px rgba(182, 229, 126, 1); }
.brand-die { width: 30px; height: 30px; filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 255, 255, .5)); }
.top nav { display: flex; gap: 2px; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--soft); text-decoration: none; font: 400 22px/1 var(--vt); letter-spacing: .06em; text-shadow: none; }
.top nav a:hover { color: var(--fg); text-shadow: var(--glow); background: rgba(143, 209, 79, .08); }

.boot { margin: 0 0 22px; font: 400 clamp(15px, 1.6vw, 19px)/1.35 var(--vt); color: var(--dim); white-space: pre-wrap; word-break: break-word; }
.boot b { font-weight: 400; color: var(--fg); text-shadow: var(--glow); }
.prompt { margin: 0 0 10px; font: 400 22px/1.3 var(--vt); color: var(--soft); word-break: break-word; }
.prompt a { text-shadow: none; color: var(--soft); }
.hero { padding-top: clamp(24px, 4vw, 48px); padding-bottom: clamp(48px, 8vw, 100px); }
.hero-grid { display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: clamp(28px, 6vw, 72px); align-items: center; }
.hero-title { margin: 0 0 18px; font: 400 clamp(48px, 8.4vw, 112px)/.92 var(--vt); color: var(--fg); text-transform: uppercase; letter-spacing: .01em; text-shadow: 0 0 10px rgba(143, 209, 79, .55), 0 0 2px rgba(143, 209, 79, .9); }
.cur { display: inline-block; width: .5em; height: .8em; margin-left: .12em; vertical-align: -.04em; background: var(--fg); box-shadow: var(--glow); animation: blink 1s steps(1) infinite; }
.cur-s { width: .55em; height: 1em; margin-left: .3em; vertical-align: -.15em; }
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { margin: 0 0 14px; font: 400 23px/1.3 var(--vt); color: var(--fg); letter-spacing: .03em; }
.hero-intro { margin: 0 0 28px; max-width: 60ch; color: var(--soft); font-size: clamp(16px, 1.5vw, 18px); }
.hero-act, .links { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; color: var(--bg); background: var(--fg); text-decoration: none; text-shadow: none;
  font: 400 24px/1 var(--vt); letter-spacing: .04em; box-shadow: 0 0 14px rgba(143, 209, 79, .35); border: 2px solid var(--fg); }
.btn:hover { background: var(--bg); color: var(--fg); text-shadow: var(--glow); }
.btn-alt { background: transparent; color: var(--fg); text-shadow: var(--glow); }
.btn-alt:hover { background: var(--fg); color: var(--bg); text-shadow: none; }
.me { position: relative; margin: 0; border: 2px solid var(--line); padding: 8px; background: var(--bg-2); }
/* The vertical 開発者 ("developer") tag hanging off the photo's left edge, as in v8, in phosphor green. */
.me-ja { position: absolute; z-index: 2; top: 18px; left: -0.85em; writing-mode: vertical-rl; padding: 12px 7px; background: #000; border: 2px solid var(--fg);
  font: 400 clamp(30px, 3.2vw, 42px)/1 var(--ja); letter-spacing: .12em; color: var(--hot); text-shadow: var(--glow); box-shadow: 0 0 18px rgba(143, 209, 79, .25); }
.me-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.me-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.35) brightness(.95); transition: filter .5s; }
.me-img::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .35) 2px 4px), #79b045; mix-blend-mode: multiply; opacity: .95; transition: opacity .5s; }
.me:hover .me-img img { filter: none; } .me:hover .me-img::after { opacity: 0; }
.me figcaption { margin-top: 8px; font: 400 18px/1.2 var(--vt); color: var(--dim); }

.ja { font-family: var(--ja); }
.ja-tag { display: inline-block; vertical-align: .12em; margin-left: .5em; padding: 4px 8px 5px; border: 1px solid var(--line); background: #000; font: 400 .5em/1 var(--ja); color: var(--soft); text-shadow: none; letter-spacing: .08em; }
.sec { margin: 0 0 24px; font: 400 clamp(30px, 4vw, 44px)/1.05 var(--vt); color: var(--fg); text-shadow: var(--glow); letter-spacing: .02em; word-break: break-word; }
.sec-p { color: var(--dim); text-shadow: none; margin-right: .3em; }
.work, .about, .contact { padding-bottom: clamp(56px, 8vw, 100px); }
.ls-wrap { overflow-x: auto; border: 1px solid var(--line); background: rgba(19, 24, 24, .85); }
.ls { width: 100%; border-collapse: collapse; font: 400 21px/1.2 var(--vt); }
.ls th, .ls td { padding: 10px 14px; text-align: left; white-space: nowrap; border-bottom: 1px dashed var(--line); }
.ls thead th { color: var(--dim); font-weight: 400; letter-spacing: .08em; }
.ls tbody tr:last-child td { border-bottom: 0; }
.ls td { color: var(--soft); }
.ls-name a { display: inline-flex; align-items: center; min-height: 32px; font-size: 24px; }
.ls tbody tr:hover { background: rgba(143, 209, 79, .07); }
.ls-sum { margin: 10px 0 34px; font: 400 20px/1.3 var(--vt); color: var(--dim); }
.tag { font: 400 20px/1 var(--vt); letter-spacing: .06em; }
.tag-live { color: var(--fg); text-shadow: var(--glow); } .tag-archived { color: var(--dim); }

.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.card a { display: block; height: 100%; color: var(--soft); text-decoration: none; text-shadow: none; background: rgba(19, 24, 24, .9); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.card a:hover { border-color: var(--fg); box-shadow: 0 0 0 1px var(--fg), 0 0 24px rgba(143, 209, 79, .2); }
.card-img { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); background: #000; }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: brightness(.9); transition: filter .5s; }
.card-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(transparent 0 2px, rgba(0, 0, 0, .22) 2px 3px); transition: opacity .3s; }
.card a:hover .card-img img { filter: none; }
.card-body { display: grid; gap: 8px; padding: 18px 20px 22px; }
.card-top { display: flex; justify-content: space-between; align-items: center; }
.card-n { font: 400 20px/1 var(--vt); color: var(--dim); }
.card-title { font: 400 clamp(34px, 3.6vw, 44px)/1 var(--vt); color: var(--fg); text-shadow: var(--glow); text-transform: uppercase; }
.card-kind { font-size: 13px; color: var(--dim); }
.card-sum { color: var(--soft); font-size: 15px; }
.card-more { font: 400 21px/1 var(--vt); color: var(--fg); margin-top: 4px; }

.about-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; }
.about-grid .box p { margin: 0 0 14px; font-size: 16px; color: var(--soft); }
.svc { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 12px; }
.svc li { padding: 16px 18px; }
.svc h3 { margin: 0 0 4px; font: 400 24px/1.1 var(--vt); color: var(--fg); text-shadow: var(--glow); letter-spacing: .04em; }
.svc p { margin: 0; font-size: 14px; color: var(--dim); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.kv dt { font: 400 20px/1.2 var(--vt); color: var(--fg); letter-spacing: .06em; }
.kv dd { margin: 0; color: var(--soft); }

.contact-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(22px, 4vw, 40px); }
.contact-line { margin: 0; font: 400 clamp(26px, 3.4vw, 40px)/1.2 var(--vt); word-break: break-word; }
.contact-note { margin: 10px 0 0; font: 400 19px/1.3 var(--vt); color: var(--dim); }
.big-die { flex: none; width: clamp(120px, 15vw, 190px); height: auto; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .18)); transform: rotate(-6deg); transition: transform .5s; }
.big-die:hover { transform: rotate(10deg) scale(1.05); }

.proj { padding-top: clamp(28px, 5vw, 56px); padding-bottom: 72px; }
.proj-head { margin-bottom: 30px; }
.proj-title { margin: 10px 0 16px; font: 400 clamp(52px, 9vw, 120px)/.92 var(--vt); color: var(--fg); text-transform: uppercase; text-shadow: 0 0 10px rgba(143, 209, 79, .55), 0 0 2px rgba(143, 209, 79, .9); word-break: break-word; }
.proj-sum { max-width: 62ch; margin: 0 0 22px; font-size: clamp(16px, 1.6vw, 19px); color: var(--soft); }
.offline { margin: 0; font: 400 21px/1.3 var(--vt); color: var(--hot); letter-spacing: .03em; }
.proj-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; margin-bottom: 40px; }
.proj-body p { margin: 0 0 14px; color: var(--soft); }
.facts { align-self: start; }
.proj-video { padding: 0; margin: 0 0 36px; box-shadow: 0 0 30px rgba(143, 209, 79, .15); }
.proj-hero img { width: 100%; height: auto; max-height: 720px; object-fit: cover; }
/* A wide in-game banner with its line of text over the left side (WoW Forever Japanese). */
.proj-banner { position: relative; padding: 0; margin: 0 0 36px; overflow: hidden; box-shadow: 0 0 30px rgba(143, 209, 79, .15); }
.proj-banner img { width: 100%; height: auto; display: block; }
.proj-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 10, 10, .85) 0%, rgba(8, 10, 10, .55) 38%, transparent 65%); pointer-events: none; }
.banner-txt { position: absolute; z-index: 1; left: clamp(16px, 5%, 64px); top: 50%; transform: translateY(-50%); max-width: min(46%, 520px); }
.banner-txt h2 { margin: 0 0 10px; font: 400 clamp(30px, 4.4vw, 60px)/.95 var(--vt); text-transform: uppercase; color: var(--fg); text-shadow: var(--glow); }
.banner-txt p { margin: 0; color: var(--soft); font-size: clamp(13px, 1.3vw, 17px); }
.stats { list-style: none; margin: 0 0 44px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.stats li { padding: 18px; }
.stats b { display: block; font: 400 clamp(44px, 5vw, 60px)/.9 var(--vt); color: var(--fg); text-shadow: var(--glow); margin-bottom: 8px; }
.stats span { font-size: 13px; color: var(--dim); }
.feats { margin-bottom: 44px; }
.feat { display: grid; grid-template-columns: 1fr minmax(180px, 270px); gap: clamp(24px, 6vw, 80px); align-items: center; padding: 30px 0; border-top: 1px dashed var(--line); }
.feat-flip { grid-template-columns: minmax(180px, 270px) 1fr; }
.feat-flip .feat-text { order: 2; }
.feat:has(.feat-wide) { grid-template-columns: 1fr 1.3fr; }
.feat-flip:has(.feat-wide) { grid-template-columns: 1.3fr 1fr; }
.feat-n { margin: 0 0 4px; color: var(--dim); }
.feat h3 { margin: 0 0 12px; font: 400 clamp(32px, 4vw, 48px)/1 var(--vt); color: var(--fg); text-transform: uppercase; text-shadow: var(--glow); }
.feat-text p:last-child { margin: 0; color: var(--soft); max-width: 52ch; }
.feat-img { margin: 0; filter: drop-shadow(0 0 24px rgba(143, 209, 79, .15)); }
.feat-img:not(.feat-wide) img { border-radius: 26px; } /* app screens read as a phone */
.feat-video { display: block; width: 100%; height: auto; background: #000; border: 1px solid var(--line); }
.hist { margin-bottom: 24px; }
.show { margin-bottom: 44px; }
.show-txt { margin-bottom: 22px; } .show-txt h3 { margin: 0 0 12px; font: 400 clamp(26px, 3vw, 36px)/1 var(--vt); text-transform: uppercase; color: var(--fg); text-shadow: var(--glow); } .show-txt p { margin: 0 0 12px; color: var(--soft); max-width: 75ch; } .show-txt p:last-child { margin-bottom: 0; } .show-link { margin-top: 18px; }
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.gal-phone { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
/* Gallery tiles share one 16:10 shape so rows line up; the viewer still opens the whole image. */
.gal:not(.gal-phone) .g > a img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.g { margin: 0; }
.g a { display: block; border: 1px solid var(--line); text-shadow: none; transition: border-color .2s, box-shadow .2s; }
.g a:hover { border-color: var(--fg); box-shadow: 0 0 18px rgba(143, 209, 79, .2); }
.g figcaption { margin-top: 8px; font: 400 19px/1.25 var(--vt); color: var(--dim); }
.g figcaption strong { font-weight: 400; color: var(--fg); margin-right: 6px; }
.pager { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 40px 0 0; font: 400 26px/1.2 var(--vt); }
.pager a:last-child { margin-left: auto; text-align: right; }
.all-work { margin: 28px 0 0; }
.work-page { padding-top: clamp(28px, 5vw, 56px); }
/* History timeline: one row per real redesign, newest first, joined by a line. */
.tl { margin-bottom: 44px; }
.tl-list { list-style: none; margin: 0; padding: 0; }
.tl-item { position: relative; display: grid; grid-template-columns: 130px 1fr 1.3fr; gap: 24px; align-items: start; padding: 0 0 30px; }
.tl-item::before { content: ''; position: absolute; left: 7px; top: 34px; bottom: 0; border-left: 2px dashed var(--line); }
.tl-item:last-child::before { display: none; }
.tl-year { position: relative; margin: 0; padding-left: 26px; font: 400 26px/1.1 var(--vt); color: var(--fg); text-shadow: var(--glow); }
.tl-year::before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; background: var(--fg); box-shadow: var(--glow); }
.tl-body h3 { margin: 0 0 8px; font: 400 28px/1.05 var(--vt); color: var(--fg); text-transform: uppercase; }
.tl-body p { margin: 0; color: var(--soft); font-size: 15px; }
.vids { margin-bottom: 44px; }
.vids .m-video { border: 1px solid var(--line); }

.foot { border-top: 2px solid var(--line); }
.foot-in { display: flex; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; font: 400 20px/1.3 var(--vt); color: var(--dim); }

@media (max-width: 820px) {
  .hero-grid, .cards, .about-grid, .proj-grid, .gal { grid-template-columns: 1fr; }
  .tl-item { grid-template-columns: 1fr; gap: 12px; padding-left: 26px; } .tl-item::before { top: 30px; } .tl-year { margin-left: -26px; }
  .feat, .feat-flip, .feat:has(.feat-wide), .feat-flip:has(.feat-wide) { grid-template-columns: 1fr; } .feat-flip .feat-text { order: 0; } .feat-img:not(.feat-wide) { max-width: 260px; }
  .gal-phone { grid-template-columns: 1fr 1fr; }
  .me { max-width: 300px; }
  .contact-in { flex-direction: column; align-items: flex-start; }
  .wrap { padding-left: 16px; padding-right: 16px; }
  .brand span { display: none; }
  .top nav a { padding: 0 7px; font-size: 20px; }
  .ls-own { display: none; }
  .ls th:nth-child(2) { display: none; }
}
@media (max-width: 560px) {
  .banner-txt { position: static; transform: none; max-width: none; padding: 16px; } .proj-banner::after { display: none; }
  .stats { grid-template-columns: 1fr 1fr; gap: 10px; } .stats li { padding: 14px; }
  .ls { font-size: 18px; }
  .ls th, .ls td { padding: 8px 10px; }
  .ls-date, .ls th:nth-child(3) { display: none; }
  .ls-name a { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .crt { animation: none; }
  .cur { animation: none; }
}

/* The page's scanlines cover everything, but an image or video being hovered (or a video playing) rises above them and
   shows clean. The sticky header sits above that, with its own scanlines, so a lifted image never covers it. */
.top::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, .28) 2px 3px); }
.g, .feat-img, .proj-video, .proj-banner { position: relative; }
.card a:hover .card-img, .g:hover, .feat-img:hover, .proj-video:hover, .proj-banner:hover,
.playing, .g:has(iframe), .proj-video:has(iframe) { z-index: 103; }
.card a:hover .card-img::after { opacity: 0; }
/* --More-- at the end of the listing's summary line, in inverse video like the Unix pager. */
.ls-more { display: inline-block; margin-left: 12px; padding: 0 6px; background: var(--fg); color: var(--bg); text-shadow: none; text-decoration: none; }
.ls-more:hover { background: var(--hot); color: var(--bg); }