/* =============================================
   VARIABLES
   ============================================= */
:root {
  --bg:        #f5ede0;
  --white:     #ffffff;
  --dark:      #1c1208;
  --text:      #2a1e10;
  --mid:       #7a6a56;
  --dim:       #b0a090;
  --border:    rgba(42,30,16,0.10);
  --border-h:  rgba(42,30,16,0.22);

  /* Shape / tag accent colors */
  --amber:     #f7c86a;
  --peach:     #f5a878;
  --rose:      #e8a0aa;
  --sage:      #9ec8a0;
  --lav:       #bbaad8;
  --sky:       #92c4d8;
  --mint:      #8ed4c0;
  --yellow:    #f2e070;

  --font-display: 'Syne', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;
  --font-jp:      'Noto Sans JP', sans-serif;

  --max-w:     1100px;
  --radius:    14px;
}

/* =============================================
   RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Always use the custom cursor — no finger/pointer anywhere */
* { cursor: none !important; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
  cursor: none;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
em { font-style: italic; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(42,30,16,0.18); border-radius: 3px; }

/* =============================================
   CANVAS + CURSOR
   ============================================= */
#trail-canvas {
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
}

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 9px; height: 9px;
  background: var(--text);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .18s, height .18s, opacity .18s, background .2s;
  will-change: transform;
}

.cursor-dot.is-hover {
  width: 20px; height: 20px;
  background: var(--amber);
  opacity: 0.65;
}

.cursor-dot.is-hidden { opacity: 0; }

/* =============================================
   GRAIN TEXTURE (subtle, warm)
   ============================================= */
body::before {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  z-index: 9989;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  animation: grain 0.38s steps(1) infinite;
}

@keyframes grain {
  0%  { transform: translate(0,0); }
  20% { transform: translate(-4%,-8%); }
  40% { transform: translate(6%, 3%); }
  60% { transform: translate(-5%, 7%); }
  80% { transform: translate(4%,-5%); }
}

/* =============================================
   FLOATING PILL NAV
   ============================================= */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  padding: 20px 24px;
  pointer-events: none;
}

.nav-pill {
  pointer-events: all;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 10px 10px 10px 24px;
  box-shadow:
    0 2px 12px rgba(42,30,16,0.07),
    0 8px 32px rgba(42,30,16,0.05);
  max-width: var(--max-w);
  width: 100%;
  transition: box-shadow .3s;
}

.nav-pill:hover {
  box-shadow:
    0 4px 20px rgba(42,30,16,0.10),
    0 12px 40px rgba(42,30,16,0.07);
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  margin-right: auto;
}

.nav-links {
  display: flex;
  gap: 4px;
}

.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--mid);
  padding: 8px 16px;
  border-radius: 100px;
  transition: background .2s, color .2s;
}

.nav-links a:hover,
.nav-links a.active {
  background: var(--bg);
  color: var(--text);
}

.nav-hire {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  background: var(--text);
  color: var(--white);
  padding: 10px 22px;
  border-radius: 100px;
  transition: background .2s, transform .2s;
  white-space: nowrap;
}

.nav-hire:hover {
  background: #3a2c1a;
  transform: scale(1.02);
}

/* =============================================
   HERO
   ============================================= */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 24px 80px;
  overflow: hidden;
  background: var(--bg);
}

.hero-inner {
  position: relative;
  z-index: 5;
  text-align: center;
  max-width: 680px;
}

.hero-eye {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 28px;
  opacity: 0;
  animation: fade-up .7s .1s ease forwards;
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 120px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--text);
  margin-bottom: 24px;
  opacity: 0;
  animation: fade-up .8s .25s ease forwards;
}

.hero-desc {
  font-size: 17px;
  font-weight: 400;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 40px;
  opacity: 0;
  animation: fade-up .8s .4s ease forwards;
}

.btn-hero {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  border: 1.5px solid var(--border-h);
  border-radius: 100px;
  padding: 12px 28px;
  background: var(--white);
  opacity: 0;
  animation: fade-up .8s .55s ease forwards;
  transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 2px 8px rgba(42,30,16,.06);
}

.btn-hero:hover {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(42,30,16,.15);
}

/* =============================================
   FLOATING BADGES
   ============================================= */
.badge {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--c, #f7c86a);
  color: rgba(30,18,6,.78);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
  z-index: 4;
  transition: transform .25s ease, box-shadow .25s ease;
  animation: badge-float var(--dur, 4s) ease-in-out infinite;
  will-change: transform;
  /* entrance */
  opacity: 0;
}

.badge.visible { animation: badge-float var(--dur, 4s) ease-in-out infinite; opacity: 1; }

@keyframes badge-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50%       { transform: translateY(var(--dy, -12px)) rotate(var(--rot, 0deg)); }
}

.badge:hover {
  transform: scale(1.1) translateY(-6px) !important;
  box-shadow: 0 12px 28px rgba(42,30,16,.15);
  z-index: 10;
  animation-play-state: paused;
}

/* Shape variants */
.badge-blob {
  width: 128px; height: 118px;
  border-radius: 62% 38% 46% 54% / 60% 44% 56% 40%;
  --rot: -6deg;
}

.badge-circle {
  width: 105px; height: 105px;
  border-radius: 50%;
  --rot: 0deg;
}

.badge-pill {
  padding: 13px 22px;
  border-radius: 100px;
  --rot: 2deg;
  font-size: 12px;
}

.badge-star {
  width: 124px; height: 124px;
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  --rot: 12deg;
}

.badge-spiky {
  width: 118px; height: 118px;
  clip-path: polygon(50% 0%,55% 30%,64% 9%,64% 32%,82% 17%,72% 37%,100% 38%,78% 50%,100% 62%,72% 63%,82% 83%,64% 68%,64% 91%,55% 70%,50% 100%,45% 70%,36% 91%,36% 68%,18% 83%,28% 63%,0% 62%,22% 50%,0% 38%,28% 37%,18% 17%,36% 32%,36% 9%,45% 30%);
  --rot: -4deg;
}

.badge-rect {
  width: 112px; height: 84px;
  border-radius: 16px;
  --rot: 3deg;
}

.badge-cross {
  width: 110px; height: 110px;
  clip-path: polygon(33% 0%,67% 0%,67% 33%,100% 33%,100% 67%,67% 67%,67% 100%,33% 100%,33% 67%,0% 67%,0% 33%,33% 33%);
  --rot: 14deg;
}

/* Badge entrance stagger */
[data-badge]:nth-of-type(1)  { animation-delay: 0.1s; }
[data-badge]:nth-of-type(2)  { animation-delay: 0.2s; }
[data-badge]:nth-of-type(3)  { animation-delay: 0.3s; }
[data-badge]:nth-of-type(4)  { animation-delay: 0.15s; }
[data-badge]:nth-of-type(5)  { animation-delay: 0.25s; }
[data-badge]:nth-of-type(6)  { animation-delay: 0.35s; }
[data-badge]:nth-of-type(7)  { animation-delay: 0.18s; }
[data-badge]:nth-of-type(8)  { animation-delay: 0.28s; }

/* =============================================
   SECTIONS — COMMON
   ============================================= */
.section { position: relative; padding: 100px 48px; }

.sec-white  { background: var(--white); }
.sec-cream  { background: var(--bg); }
.sec-dark   { background: var(--dark); padding-bottom: 0; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
}

.sec-eye {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
}

.sec-eye--light { color: rgba(255,255,255,.45); }

.sec-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.5vw, 58px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  margin-bottom: 52px;
  line-height: 1.05;
}

.sec-title--light { color: #f5ede0; }

/* =============================================
   REVEAL
   ============================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .65s ease, transform .65s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
   ABOUT
   ============================================= */
.about-text {
  max-width: 760px;
  margin-bottom: 44px;
}

.about-text p {
  font-size: 15px;
  color: var(--mid);
  line-height: 1.85;
  margin-bottom: 16px;
}

.about-text p:last-child { margin-bottom: 0; }
.about-text em { color: var(--text); font-style: italic; }

.about-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.stat-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 14px;
  text-align: center;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.stat-bubble:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(42,30,16,.08);
  border-color: var(--border-h);
}

.stat-bubble b {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 5px;
}

.stat-bubble span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--dim);
}

/* =============================================
   EXPERIENCE
   ============================================= */
.exp-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.exp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 32px;
  transition: border-color .25s, transform .25s, box-shadow .25s;
}

.exp-card:hover {
  border-color: var(--border-h);
  transform: translateY(-3px);
  box-shadow: 0 10px 32px rgba(42,30,16,.07);
}

.exp-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 16px;
}

.exp-head h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.25;
}

.exp-role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
  letter-spacing: .04em;
}

.exp-meta {
  text-align: right;
  flex-shrink: 0;
}

.exp-meta time {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
}

.exp-dur {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: #b07f1a;
  background: rgba(247,200,106,.18);
  padding: 2px 9px;
  border-radius: 100px;
  margin: 4px 0 2px;
}

.exp-meta span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  margin-top: 2px;
}

.exp-bullets {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.exp-bullets li {
  font-size: 13.5px;
  color: var(--mid);
  padding-left: 16px;
  position: relative;
  line-height: 1.6;
}

.exp-bullets li::before {
  content: '—';
  position: absolute;
  left: 0;
  font-size: 11px;
  color: var(--dim);
  top: 1px;
}

/* =============================================
   SKILLS
   ============================================= */
.skills-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
}

.sk-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 14px;
}

.sk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
  transition: transform .2s, box-shadow .2s;
  border: 1.5px solid transparent;
}

.tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(42,30,16,.10);
}

.tag-amber { background: #fdf0d0; color: #7a5010; border-color: #f7c86a66; }
.tag-amber:hover { background: #f7c86a; border-color: #f7c86a; }

.tag-lav   { background: #ede8f8; color: #4a3870; border-color: #bbaad866; }
.tag-lav:hover   { background: #bbaad8; border-color: #bbaad8; }

.tag-rose  { background: #fde8ec; color: #782040; border-color: #e8a0aa66; }
.tag-rose:hover  { background: #e8a0aa; border-color: #e8a0aa; }

.tag-sage  { background: #e4f2e4; color: #2c5c2c; border-color: #9ec8a066; }
.tag-sage:hover  { background: #9ec8a0; border-color: #9ec8a0; }

/* =============================================
   EDUCATION
   ============================================= */
.edu-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.edu-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.edu-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(42,30,16,.08);
  border-color: var(--border-h);
}

.edu-yr {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--mid);
  margin-bottom: 14px;
}

.edu-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 10px;
}

.edu-card p {
  font-size: 13.5px;
  color: var(--mid);
  margin-bottom: 12px;
}

.edu-loc {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--dim);
  letter-spacing: .08em;
}

/* =============================================
   CERTS
   ============================================= */
.certs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.cert-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.cert-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(42,30,16,.08);
  border-color: var(--border-h);
}

.cert-item.cert-gold {
  background: #fffbec;
  border-color: #f7c86a55;
}

.ci {
  font-size: 18px;
  color: var(--dim);
  line-height: 1;
}

.cert-gold .ci { color: #d4920a; }

.cert-item span:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
  line-height: 1.5;
}

/* =============================================
   CONTACT (dark)
   ============================================= */
.contact-sub {
  font-size: 15px;
  color: rgba(245,237,224,.6);
  max-width: 460px;
  line-height: 1.75;
  margin-bottom: 48px;
}

.contact-list {
  max-width: 560px;
}

.c-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: padding-left .3s;
}

.c-item:hover {
  padding-left: 14px;
}

.c-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  width: 68px;
  flex-shrink: 0;
}

.c-val {
  flex: 1;
  font-size: 14.5px;
  color: #f5ede0;
  transition: color .2s;
}

.c-item:hover .c-val { color: var(--amber); }

.c-arrow {
  font-size: 16px;
  color: rgba(255,255,255,.25);
  transition: transform .3s, color .3s;
}

.c-item:hover .c-arrow {
  transform: translateX(6px);
  color: var(--amber);
}

footer {
  margin-top: 80px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 28px 0 40px;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-row span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.25);
}

/* =============================================
   HERO LO-FI SCENE
   ============================================= */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.hs-light {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 140%;
  height: 80%;
  background: radial-gradient(ellipse at 50% 30%, rgba(247,184,90,.18), rgba(247,184,90,0) 62%);
}

.hs-sun {
  position: absolute;
  left: 50%;
  bottom: 46px;
  transform: translateX(-50%);
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 48%, #fcd58c 0%, #f8be5e 55%, #f3ad44 100%);
  box-shadow: 0 0 80px 16px rgba(248,190,94,.40);
  animation: sun-pulse 8s ease-in-out infinite;
}

.hs-hills {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 230px;
}
.hs-hills .hill-back  { fill: #f3b78c; }
.hs-hills .hill-front { fill: #a9c6a0; }

.hs-plant {
  position: absolute;
  bottom: 4px;
  width: 64px;
  height: auto;
}
.hs-plant--l { left: 5%; }
.hs-plant--r { right: 5%; transform: scaleX(-1); }

.hs-cloud {
  position: absolute;
  opacity: .55;
  will-change: transform;
}
.hs-cloud--1 { width: 140px; top: 15%; animation: drift 42s linear infinite; }
.hs-cloud--2 { width: 96px;  top: 25%; opacity: .42; animation: drift 60s linear infinite; animation-delay: -22s; }
.hs-cloud--3 { width: 118px; top: 9%;  opacity: .48; animation: drift 52s linear infinite; animation-delay: -38s; }

@keyframes drift {
  from { transform: translateX(-200px); }
  to   { transform: translateX(calc(100vw + 220px)); }
}

@keyframes sun-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .9; }
}

/* =============================================
   HERO AVATAR
   ============================================= */
.hero-avatar {
  width: 148px;
  height: 148px;
  margin: 0 auto 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 10px 30px rgba(42,30,16,.16);
  opacity: 0;
  animation: fade-up .8s .05s ease forwards;
}
.hero-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  display: block;
}
.hero-avatar-svg { display: none; width: 100%; height: 100%; }
.hero-avatar.is-illus .hero-avatar-img { display: none; }
.hero-avatar.is-illus .hero-avatar-svg { display: block; }

/* =============================================
   DOODLE ACCENTS
   ============================================= */
.section { overflow: hidden; }
.section .container { position: relative; z-index: 1; }

.doodle {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  animation: doodle-bob var(--d, 7s) ease-in-out infinite;
  will-change: transform;
}
.doodle svg { width: 100%; height: 100%; display: block; }

@keyframes doodle-bob {
  0%, 100% { transform: translateY(0)    rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-9px) rotate(var(--r, 0deg)); }
}

/* =============================================
   SECTION SCENES (rolling landscape per section)
   ============================================= */
.sec-scene {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 160px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.sec-scene .ss-hills {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 100%;
}
.sec-scene .ss-sun   { position: absolute; border-radius: 50%; }
.sec-scene .ss-cloud,
.sec-scene .ss-tree,
.sec-scene .ss-flower,
.sec-scene .ss-bird,
.sec-scene .ss-star,
.sec-scene .ss-vignette { position: absolute; }

/* Contact section = night sky */
#contact .sec-scene { top: 0; bottom: 0; height: auto; }
.ss-moon { position: absolute; border-radius: 50%; }
.ss-stardot {
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #f3e6c2;
  opacity: .7;
  animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .7; }
  50%      { opacity: .2; }
}

footer { position: relative; z-index: 1; }

/* Blurred (teaser) game title */
.game-title-blur {
  filter: blur(7px);
  user-select: none;
  -webkit-user-select: none;
}

/* Publication feature bubble */
.pub-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 26px 30px;
  background: #fffbec;
  border: 1px solid rgba(247,200,106,.45);
  border-radius: 18px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.pub-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(42,30,16,.10);
  border-color: rgba(247,200,106,.8);
}
.pub-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(145deg,#f7c86a,#f3a07a);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.pub-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #b07f1a;
  margin-bottom: 6px;
}
.pub-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 8px;
}
.pub-desc {
  font-size: 13.5px;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 12px;
}
.pub-link {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: #b07f1a;
  border-bottom: 1.5px solid rgba(247,200,106,.7);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.pub-card:hover .pub-link { color: #8a5e0a; border-color: #b07f1a; }

/* =============================================
   LANGUAGE TOGGLE
   ============================================= */
.lang-toggle {
  display: inline-flex;
  background: var(--bg);
  border-radius: 100px;
  padding: 3px;
  margin: 0 4px 0 8px;
  flex-shrink: 0;
}

.lang-toggle button {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--mid);
  background: transparent;
  border: 0;
  padding: 6px 12px;
  border-radius: 100px;
  cursor: pointer;
  transition: background .25s, color .25s;
  line-height: 1;
}

.lang-toggle button.active {
  background: var(--text);
  color: var(--white);
}

/* =============================================
   COMPANY LOGO MONOGRAMS
   ============================================= */
.exp-id {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.exp-logo,
.edu-logo {
  flex-shrink: 0;
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

.edu-logo { margin-bottom: 16px; }

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}

.exp-logo-mono,
.edu-logo-mono {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'Syne', var(--font-jp), sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .01em;
}

.exp-logo.is-mono,
.edu-logo.is-mono {
  background: var(--lc, #888);
  border-color: transparent;
}
.exp-logo.is-mono .logo-img,
.edu-logo.is-mono .logo-img { display: none; }
.exp-logo.is-mono .exp-logo-mono,
.edu-logo.is-mono .edu-logo-mono { display: flex; }

/* =============================================
   GAMES SECTION
   ============================================= */
.games-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.game-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.game-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(42,30,16,.10);
  border-color: var(--border-h);
}

.game-media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #1c1208;
  overflow: hidden;
}

.game-video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%;
  height: 100%;
  /* scale up to crop YouTube letterboxing */
  min-width: 178%;
  min-height: 100%;
  transform: translate(-50%, -50%) scale(1.02);
  border: 0;
  pointer-events: none;
}

.game-banner-blur {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(14px) brightness(.62) saturate(1.15);
  transform: scale(1.18);
}

/* Sugardew video fallback image (shows if the trailer can't load) */
.game-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.game-video { z-index: 1; }

.game-dev-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.55);
  padding: 11px 22px;
  border-radius: 100px;
  background: rgba(28,18,8,.32);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: center;
}

.game-body {
  padding: 24px 26px 26px;
}

.game-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.game-head h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
}

.game-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 5px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.game-pill--out { background: #e4f2e4; color: #2c5c2c; }
.game-pill--dev { background: #fde8ec; color: #782040; }

.game-role {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 12px;
}

.game-desc {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 18px;
}

.game-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1.5px solid var(--amber);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}

.game-link:hover {
  color: #000;
  border-color: var(--text);
}

/* =============================================
   JAPANESE MODE FONTS
   ============================================= */
body.jp {
  font-family: var(--font-jp), 'DM Sans', system-ui, sans-serif;
}

body.jp .sec-title,
body.jp .exp-head h3,
body.jp .edu-card h3,
body.jp .game-head h3 {
  font-family: var(--font-jp), sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* Hero name + numeric stats stay Latin display font */
body.jp .hero-name,
body.jp .stat-bubble b {
  font-family: var(--font-display), sans-serif;
}

/* =============================================
   KEYFRAMES
   ============================================= */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 960px) {
  .section { padding: 80px 32px; }

  .badge-blob   { width: 100px; height: 92px; font-size: 10px; }
  .badge-circle { width: 84px; height: 84px; font-size: 10px; }
  .badge-star   { width: 96px; height: 96px; font-size: 10px; }
  .badge-spiky  { width: 92px; height: 92px; font-size: 10px; }
  .badge-rect   { width: 88px; height: 66px; font-size: 10px; }
  .badge-cross  { width: 86px; height: 86px; font-size: 10px; }

  .skills-layout { grid-template-columns: 1fr; gap: 32px; }
  .games-grid { grid-template-columns: 1fr; }
  .edu-row { grid-template-columns: 1fr; }
  .certs-grid { grid-template-columns: repeat(2, 1fr); }
  .exp-head { flex-direction: column; gap: 6px; }
  .exp-meta { text-align: left; }
}

@media (max-width: 640px) {
  .section { padding: 64px 20px; }
  #hero { padding: 100px 16px 60px; }

  /* Hide some badges on small screens */
  #hero .badge:nth-of-type(n+5) { display: none; }
  #hero .badge:nth-of-type(3)   { display: none; }

  .nav-pill { padding: 8px 8px 8px 18px; }
  .nav-links { display: none; }
  .hero-name { font-size: clamp(52px, 14vw, 72px); }
  .sec-title { font-size: clamp(28px, 8vw, 36px); }
  .about-stats { grid-template-columns: 1fr 1fr; }
  .certs-grid  { grid-template-columns: 1fr 1fr; }
  .game-head   { flex-direction: column; align-items: flex-start; }
  .footer-row  { flex-direction: column; gap: 8px; text-align: center; }
}