/* =========================================================
   HABINA — Japanese utopia × indie game studio
   ========================================================= */
:root{
  --ink:#0a1210;
  --ink-2:#0e1a17;
  --forest:#0f3b3a;
  --forest-2:#123f33;
  --green:#036d50;
  --green-2:#2fa37a;
  --mint:#6fe0ae;
  --mint-glow:rgba(125,255,176,.35);
  --amber:#ffb85c;
  --vermilion:#c2412b;
  --washi:#e9dfc8;
  --washi-2:#d9ccb0;
  --washi-ink:#2a2a22;
  --wood:#2a1c12;
  --wood-2:#3b281a;
  --wood-line:#5a3e27;
  --text:#ece6d6;
  --text-dim:#b9b4a4;
  --serif-en:"Cormorant Garamond", "Shippori Mincho B1", serif;
  --serif-ja:"Shippori Mincho B1", serif;
  --sans:"Zen Kaku Gothic New", system-ui, sans-serif;
  --container:1180px;
  --nav-h:72px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{background:var(--ink);color:var(--text);font-family:var(--sans);line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.container{width:min(var(--container),100% - 32px);margin-inline:auto;position:relative;z-index:2}

/* ---------- textures ---------- */
.wood,.board,.nav,.beam,.shop,.notice-board,.featured,.member{
  --grain:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 7px),repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 23px);
}
.washi-texture{background-color:var(--washi)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;height:48px;padding:0 1.6em;font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.14em;border-radius:6px;transition:transform .2s,box-shadow .2s,background .2s;position:relative;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn--mint{background:var(--mint);color:#06281d;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 24px var(--mint-glow)}
.btn--mint:hover{box-shadow:0 0 0 1px rgba(255,255,255,.35) inset,0 0 36px rgba(125,255,176,.55)}
.btn--ghost{border:1.5px solid var(--mint);color:var(--text);background:rgba(6,20,16,.45);backdrop-filter:blur(4px)}
.btn--line{height:40px;font-size:.72rem;border:1px solid rgba(111,224,174,.6);color:var(--mint);background:rgba(8,24,20,.55);box-shadow:0 0 14px rgba(125,255,176,.12)}
.btn--dark{color:var(--green);border-color:rgba(3,109,80,.5);background:rgba(255,255,255,.25);box-shadow:none}
.btn--block{width:100%}
.btn span{font-weight:500;letter-spacing:.05em;opacity:.75;font-size:.85em}
/* pixel corners (from the HABINA STUDIO pixel logo) */
.btn--pixel::before,.btn--pixel::after{content:"";position:absolute;width:5px;height:5px;background:var(--mint);box-shadow:6px 0 0 var(--mint),0 6px 0 var(--mint)}
.btn--pixel::before{left:-8px;top:-8px}
.btn--pixel::after{right:-8px;bottom:-8px;box-shadow:-6px 0 0 var(--mint),0 -6px 0 var(--mint)}
.play{width:0;height:0;border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent}

/* ---------- typography ---------- */
.eyebrow{font-family:var(--sans);font-weight:700;letter-spacing:.18em;font-size:.82rem;color:var(--mint);text-shadow:0 0 18px rgba(125,255,176,.35)}
.eyebrow--small{font-size:.7rem}
.display{font-family:var(--serif-en);font-weight:600;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.05;letter-spacing:.02em;color:#f1e9d5}
.ja{font-family:var(--serif-ja)}
.rule{display:flex;align-items:center;gap:10px;margin:18px 0;max-width:420px}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(111,224,174,.7),transparent)}
.rule span{width:8px;height:8px;border:1px solid var(--mint);transform:rotate(45deg)}

/* ---------- placeholder frames ---------- */
.ph{position:relative;background:radial-gradient(120% 90% at 50% 120%,#2a8f62 0%,#1b6a4a 35%,#0f4433 70%,#0b2f25 100%);border-radius:4px;overflow:hidden}
.ph::after{content:"";position:absolute;inset:8px;border:1px solid rgba(160,240,200,.35);border-radius:2px;pointer-events:none}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.has-img::after{border-color:rgba(255,255,255,.18)}

/* =========================================================
   NAV
   ========================================================= */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,48px);
  background:var(--grain),linear-gradient(180deg,#1b130c,#120d08);border-bottom:1px solid rgba(111,224,174,.18);box-shadow:0 8px 30px rgba(0,0,0,.45);transition:background .3s}
.nav__logo{display:flex;align-items:center;gap:12px}
.nav__mark{height:38px;width:auto}
.nav__word{height:18px;width:auto}
.nav__menu{display:flex;align-items:center;gap:clamp(18px,3vw,40px);font-weight:700;font-size:.8rem;letter-spacing:.16em}
.nav__menu a:not(.btn){position:relative;padding:6px 0;color:#e7dfcd}
.nav__menu a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mint);transform:scaleX(0);transition:transform .25s;box-shadow:0 0 10px var(--mint)}
.nav__menu a:not(.btn):hover::after,.nav__menu a.is-active::after{transform:scaleX(1)}
.nav__menu a.is-primary{color:var(--mint)}
.nav__cta{height:40px}
.nav__toggle{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.nav__toggle span{width:24px;height:2px;background:var(--mint);transition:.3s}

/* =========================================================
   SCENES / PARALLAX
   ========================================================= */
.scene{position:absolute;inset:0;overflow:hidden}
.layer{position:absolute;inset:-6%;will-change:transform;pointer-events:none}
.layer img{width:100%;height:100%;object-fit:cover}
.layer--particles{inset:0;width:100%;height:100%}
.mist{position:absolute;left:-20%;width:140%;height:45%;background:radial-gradient(50% 50% at 50% 50%,rgba(240,232,210,.22),transparent 70%);filter:blur(20px);animation:drift 38s ease-in-out infinite alternate}
.mist--a{bottom:12%}
.mist--b{bottom:-5%;height:35%;opacity:.7;animation-duration:52s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;min-height:100svh;padding:calc(var(--nav-h) + 6vh) 0 140px;display:flex;align-items:center;overflow:hidden}
.hero .layer--far{left:20%}
.hero__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(10,18,16,.96) 22%,rgba(10,18,16,.7) 38%,rgba(10,18,16,.1) 60%,transparent 80%),
             linear-gradient(0deg,var(--ink) 0%,rgba(10,18,16,.0) 25%),
             linear-gradient(180deg,rgba(10,18,16,.5) 0%,transparent 18%)}
.hero__inner{position:relative;z-index:3;width:min(var(--container),100% - 32px);margin-inline:auto}
.hero__inner > *{max-width:560px}
.hero__title{font-family:var(--serif-en);font-weight:600;font-size:clamp(3rem,8vw,6.2rem);line-height:.95;letter-spacing:.02em;margin-top:14px;
  background:linear-gradient(180deg,#e9fff4 0%,#9ff0c9 55%,#5fcf9e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(125,255,176,.35)) drop-shadow(0 2px 0 rgba(0,0,0,.4))}
.tags{display:flex;flex-wrap:wrap;gap:10px}
.tag{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:6px;font-size:.74rem;font-weight:700;letter-spacing:.12em}
.tag--fill{background:var(--mint);color:#06281d}
.tag--line{border:1px solid var(--mint);color:var(--text)}
.tag--small{height:24px;padding:0 10px;font-size:.62rem;border-radius:20px}
.hero__tagline{font-size:1.05rem;margin-top:16px;color:#f3eddf}
.hero__lead{margin-top:10px;font-family:var(--serif-ja);color:var(--text-dim);font-size:.95rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px}
.hero__actions--center{justify-content:center}
.platforms{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.platform{height:30px;padding:0 14px;display:inline-flex;align-items:center;border-radius:5px;background:rgba(240,235,222,.92);color:#16231e;font-size:.66rem;font-weight:700;letter-spacing:.14em}
.hero__carousel{position:absolute;z-index:3;left:max(16px,calc((100% - var(--container))/2));bottom:36px;display:flex;gap:12px;padding:12px;background:rgba(6,14,12,.55);backdrop-filter:blur(6px);border-radius:8px;border:1px solid rgba(111,224,174,.15)}
.hero__carousel::before,.hero__carousel::after{content:"";position:absolute;width:12px;height:12px;border:2px solid var(--mint);}
.hero__carousel::before{left:-4px;top:-4px;border-right:0;border-bottom:0}
.hero__carousel::after{right:-4px;bottom:-4px;border-left:0;border-top:0}
.thumb{position:relative;width:96px;height:56px;border-radius:5px;opacity:.55;transition:.25s;overflow:hidden;outline:2px solid transparent}
.thumb.is-active{opacity:1;outline-color:var(--mint);box-shadow:0 0 18px var(--mint-glow)}
.thumb:hover{opacity:.9}
.thumb .ph{width:100%;height:100%}
.thumb .ph::after{inset:4px}
.thumb span{position:absolute;left:8px;bottom:4px;font-size:.55rem;font-weight:700;letter-spacing:.1em;z-index:1;color:#e9fff4}
.hero__mascot{position:absolute;right:6%;bottom:12%;width:22vw;max-width:320px;aspect-ratio:1;z-index:3}
.scroll-hint{position:absolute;z-index:3;left:50%;bottom:28px;width:24px;height:40px;border:1.5px solid rgba(111,224,174,.6);border-radius:14px;transform:translateX(-50%)}
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;background:var(--mint);border-radius:2px;transform:translateX(-50%);animation:hint 1.8s infinite}
@keyframes hint{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* =========================================================
   SECTIONS (common)
   ========================================================= */
.section{position:relative;padding:120px 0;overflow:hidden}
.section__bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform;z-index:0}
.section::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--ink) 0%,rgba(10,18,16,.55) 14%,rgba(10,18,16,.45) 50%,rgba(10,18,16,.6) 86%,var(--ink) 100%)}
.section__lead{margin:18px 0 0;color:var(--text-dim);font-family:var(--serif-ja);max-width:640px}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.board{display:inline-flex;align-items:center;gap:16px;padding:10px 26px;border-radius:4px;
  background:var(--grain),linear-gradient(180deg,#4a3220,#2e1f13);border:1px solid #6b4a2e;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -2px 0 rgba(0,0,0,.4)}
.board h2{font-family:var(--serif-en);font-weight:600;font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:.06em;color:#f0e2c4;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.board__studio{height:56px;width:auto;filter:drop-shadow(0 0 10px rgba(47,163,122,.4))}
.board__mark{height:34px;width:auto}
.board__by{font-size:.78rem;letter-spacing:.14em;color:var(--mint);font-weight:500}
.board-note{font-family:var(--serif-ja);color:var(--text-dim);font-size:.9rem;letter-spacing:.2em}
.board--plain{background:none;border:0;box-shadow:none;padding:0}

/* =========================================================
   GAMES
   ========================================================= */
.beam{height:16px;margin:46px -10px 0;border-radius:3px;background:var(--grain),linear-gradient(180deg,#4a3220,#24180f);box-shadow:0 8px 20px rgba(0,0,0,.5)}
.game-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:26px}
.game-card{position:relative;padding:14px 14px 18px;border-radius:4px;color:var(--washi-ink);transform-origin:50% -26px;transition:transform .5s cubic-bezier(.2,.8,.2,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#efe6d1,#ddd0b4);
  box-shadow:0 0 0 3px #3a281a,0 0 0 5px #24170e,0 18px 34px rgba(0,0,0,.55)}
.game-card::before,.game-card::after{content:"";position:absolute;top:-32px;width:2px;height:32px;background:linear-gradient(#8a6a48,#5a3e27)}
.game-card::before{left:22%}.game-card::after{right:22%}
.game-card .ph{aspect-ratio:4/3}
.game-card h3{font-family:var(--serif-en);font-weight:600;font-size:1.45rem;text-align:center;margin-top:14px;letter-spacing:.04em;line-height:1.2}
.game-card .ja{display:block;text-align:center;font-size:.72rem;color:#6b6352;min-height:1.2em}
.game-card .tags{justify-content:center;margin-top:10px;gap:6px}
.game-card .tag--small{border:1px solid rgba(3,109,80,.55);color:var(--green)}
.game-card .tag--status{background:#0f4433;color:#bff5dc;border-color:#0f4433}
.avatars{display:flex;gap:6px;justify-content:center;margin-top:12px}
.avatar{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(3,109,80,.6);background:radial-gradient(circle at 40% 35%,#2f8a64,#0f3b2d);display:grid;place-items:center;font-size:.6rem;font-weight:700;color:#d8ffe9;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.featured{display:grid;grid-template-columns:300px 1fr;gap:32px;margin-top:56px;padding:30px;border-radius:6px;
  background:linear-gradient(180deg,rgba(14,46,36,.92),rgba(8,28,22,.95));box-shadow:0 0 0 2px #3a281a,0 0 0 4px #1d130b,0 24px 50px rgba(0,0,0,.55);position:relative}
.featured::before{content:"";position:absolute;inset:10px;border:1px solid rgba(111,224,174,.2);border-radius:4px;pointer-events:none}
.featured__title{font-family:var(--serif-en);font-weight:600;font-size:2.2rem;line-height:1.1;margin:8px 0 14px;color:#f1e9d5}
.featured__desc{font-size:.9rem;color:var(--text-dim);margin-bottom:16px}
.featured .avatars{justify-content:flex-start;margin:0 0 22px}
.featured .avatar{border-color:rgba(111,224,174,.5)}
.featured__media{display:grid;grid-template-columns:1fr 110px;gap:12px}
.video{aspect-ratio:16/9;display:grid;place-items:center}
.video__play{position:relative;z-index:2;width:72px;height:72px;border-radius:50%;border:1.5px solid rgba(220,255,236,.8);background:rgba(8,30,22,.35);box-shadow:0 0 30px var(--mint-glow);transition:.25s}
.video__play::before{content:"";position:absolute;left:29px;top:22px;border-left:20px solid #e9fff4;border-top:14px solid transparent;border-bottom:14px solid transparent}
.video__play:hover{transform:scale(1.08)}
.shots{display:grid;grid-template-rows:repeat(4,1fr);gap:10px}
.shots .ph::after{inset:4px}

/* =========================================================
   ABOUT
   ========================================================= */
.center-head{text-align:center}
.center-head .sub{margin-top:14px;color:var(--mint);font-size:.95rem}
.center-head .sub .ja{display:block;color:var(--text-dim);font-size:.9rem;margin-top:6px}
.about-grid{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin-top:56px}
.washi-panel{position:relative;padding:34px 32px 30px;text-align:center;color:var(--washi-ink);border-radius:3px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#eee5d0,#ddd1b6);
  box-shadow:0 0 0 10px #2e1f13,0 0 0 12px #4a3220,0 30px 60px rgba(0,0,0,.6)}
.washi-panel__logo{height:74px;width:auto;margin:0 auto 6px}
.washi-panel__logo--habina{height:74px}
.washi-panel h3{font-family:var(--serif-en);font-weight:600;font-size:2.1rem;letter-spacing:.08em;color:#163a2e}
.washi-panel__line{font-family:var(--serif-ja);font-size:.92rem;color:#4b4638;margin-bottom:18px}
.washi-panel__line::after{content:"";display:block;width:70px;height:1px;margin:12px auto 0;background:linear-gradient(90deg,transparent,#8a7a5a,transparent)}
.ph--wide{aspect-ratio:16/9}
.washi-panel__text{font-size:.86rem;line-height:1.9;margin:18px 0 20px;text-align:left;color:#3a372d}
.about-link{position:relative;height:2px;background:linear-gradient(90deg,transparent,var(--mint),transparent);box-shadow:0 0 12px var(--mint)}
.about-link span{position:absolute;left:50%;top:50%;width:16px;height:16px;transform:translate(-50%,-50%) rotate(45deg);border:1.5px solid var(--mint);background:var(--ink);box-shadow:0 0 14px var(--mint-glow)}

/* =========================================================
   COMMUNITY
   ========================================================= */
.shops{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px}
.shop{position:relative;padding:0 14px 20px;border-radius:2px;text-align:center;
  background:var(--grain),linear-gradient(180deg,#2c1e13,#1a120b);box-shadow:inset 0 0 0 6px #3a281a,inset 0 0 0 7px #120c07,0 22px 40px rgba(0,0,0,.55)}
.shop__roof{height:46px;margin:0 -24px 0;position:relative;top:-18px;border-radius:4px 4px 0 0;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 2px,transparent 2px 18px),linear-gradient(180deg,#3a4440,#1f2725 70%,#141a18);
  clip-path:polygon(0 100%,4% 22%,12% 0,88% 0,96% 22%,100% 100%)}
.shop__noren{display:flex;gap:4px;justify-content:center;margin:-14px 6px 10px}
.shop__noren span{flex:1;height:30px;background:linear-gradient(180deg,#0e4f3b,#0a3a2c);border-radius:0 0 3px 3px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.shop__noren span:nth-child(2) {position:relative}
.shop .ph{aspect-ratio:4/3.4}
.shop .ph::after{border-color:rgba(160,240,200,.45)}
.lantern{position:absolute;top:44px;width:26px;height:40px;border-radius:12px;background:radial-gradient(circle at 50% 45%,#fff3d6 0%,#ffcf80 40%,#e08a2c 100%);box-shadow:0 0 26px rgba(255,184,92,.75),0 0 60px rgba(255,184,92,.3);z-index:2;animation:flicker 4s infinite}
.lantern::before,.lantern::after{content:"";position:absolute;left:4px;right:4px;height:4px;background:#2a1c12;border-radius:2px}
.lantern::before{top:-2px}.lantern::after{bottom:-2px}
.lantern--l{left:-13px}
@keyframes flicker{0%,100%{opacity:1}45%{opacity:.88}50%{opacity:.96}70%{opacity:.9}}
.shop h3{font-family:var(--serif-en);font-weight:600;font-size:1.45rem;letter-spacing:.05em;margin-top:16px;color:#f0e2c4;display:flex;align-items:center;justify-content:center;gap:8px;line-height:1.2}
.live{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:4px;background:#c22f2a;color:#fff;font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.08em}
.live::before{content:"";width:5px;height:5px;border-radius:50%;background:#fff}
.shop__sub{font-size:.72rem;color:var(--mint);letter-spacing:.1em}
.shop__desc{font-size:.78rem;color:var(--text-dim);margin:10px 2px 12px;line-height:1.7;min-height:5.1em;text-align:left}
.shop__date{font-size:.72rem;color:#e3c89a;letter-spacing:.08em;margin-bottom:12px}
.shop .btn--line{height:34px}

/* =========================================================
   MEMBERS
   ========================================================= */
.section--members{padding-top:0}
.members-scene{position:relative;z-index:1;height:clamp(200px,30vw,420px);margin-bottom:-60px;
  -webkit-mask:linear-gradient(180deg,transparent 0%,#000 18%,#000 55%,transparent 100%);mask:linear-gradient(180deg,transparent 0%,#000 18%,#000 55%,transparent 100%)}
.members-scene img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.members{position:relative;z-index:2;margin-top:34px}
.members__track{--gut:max(16px,calc((100vw - var(--container))/2));display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px var(--gut) 34px;scroll-padding-inline:var(--gut);scrollbar-width:none;outline:none}
.members__track::-webkit-scrollbar{display:none}
.member{flex:0 0 clamp(170px,17vw,210px);scroll-snap-align:start;position:relative;padding:12px;border-radius:3px;cursor:pointer;
  background:var(--grain),linear-gradient(180deg,#2d1f14,#1b130c);box-shadow:inset 0 0 0 1px #6b4a2e,0 16px 30px rgba(0,0,0,.55);transition:transform .35s,box-shadow .35s}
.member::before{content:"";position:absolute;left:50%;top:-8px;width:22px;height:12px;transform:translateX(-50%);background:#8a6a3c;clip-path:polygon(0 100%,50% 0,100% 100%);opacity:.8}
.member .ph{aspect-ratio:2/3.6;border-radius:2px}
.member__name{font-family:var(--serif-en);font-weight:600;font-size:1.15rem;text-align:center;margin-top:12px;letter-spacing:.06em;color:#f0e2c4}
.member__role{display:table;margin:6px auto 0;padding:2px 12px;border:1px solid rgba(111,224,174,.45);border-radius:4px;font-size:.6rem;letter-spacing:.14em;color:#cfeedd}
.member__bio{font-size:.7rem;color:var(--text-dim);line-height:1.6;margin-top:8px;text-align:center;max-height:0;overflow:hidden;transition:max-height .35s}
.member:hover,.member:focus-visible,.member.is-center{transform:translateY(-8px);box-shadow:inset 0 0 0 1px #ffcf80,0 0 0 2px rgba(255,184,92,.7),0 0 40px rgba(255,184,92,.35),0 20px 36px rgba(0,0,0,.6)}
.member:hover .member__bio,.member.is-center .member__bio{max-height:6em}
.members__controls{display:flex;align-items:center;justify-content:center;gap:20px}
.round-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(111,224,174,.7);color:var(--mint);font-size:1.6rem;line-height:1;background:rgba(8,24,20,.6);box-shadow:0 0 16px rgba(125,255,176,.2);transition:.2s}
.round-btn:hover{background:rgba(111,224,174,.15)}
.progress{width:min(380px,50vw);height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.progress span{display:block;height:100%;width:20%;background:var(--mint);box-shadow:0 0 10px var(--mint);border-radius:2px;transition:transform .15s}

/* =========================================================
   NEWS
   ========================================================= */
.notice-board{position:relative;padding:70px 34px 40px;margin-top:40px;border-radius:6px 6px 4px 4px;
  background:var(--grain),linear-gradient(180deg,#2a1c12,#1a120b);box-shadow:inset 0 0 0 10px #3a281a,inset 0 0 0 11px #120c07,0 30px 60px rgba(0,0,0,.6)}
.notice-board__crest{position:absolute;left:50%;top:-44px;transform:translateX(-50%);padding:14px 40px 10px;border-radius:60px 60px 6px 6px;background:var(--grain),linear-gradient(180deg,#3a281a,#24180f);box-shadow:0 0 0 2px #5a3e27,0 10px 20px rgba(0,0,0,.5)}
.notice-board__crest img{height:64px;width:auto}
.board-head--inset{padding:0 6px 22px;border-bottom:1px solid rgba(111,224,174,.15)}
.board-head--inset h2{font-family:var(--serif-en);font-size:2.2rem;font-weight:600;letter-spacing:.06em;color:#f0e2c4}
.notices{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:30px}
.notice{position:relative;display:block;padding:16px 16px 18px;color:var(--washi-ink);border-radius:2px;transition:transform .3s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .32 0 0 0 0 .2 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,#ece2cb,#d9cdb0);
  box-shadow:0 12px 24px rgba(0,0,0,.45)}
.notice::before{content:"";position:absolute;left:50%;top:-6px;width:14px;height:14px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 35% 35%,#e4b770,#8a5a24);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.notice:hover{transform:translateY(-4px) rotate(-.5deg)}
.notice .ph{aspect-ratio:16/10}
.notice__date{display:block;margin-top:14px;font-size:.72rem;letter-spacing:.12em;color:#5b6b56;border-bottom:1px solid rgba(3,109,80,.3);padding-bottom:6px}
.notice__title{font-family:var(--serif-ja);font-weight:700;font-size:1rem;line-height:1.6;margin-top:10px;min-height:3.2em;color:#1d2a22}
.notice__more{display:flex;justify-content:space-between;margin-top:12px;font-size:.74rem;color:var(--green);font-weight:700}

/* =========================================================
   JOIN
   ========================================================= */
.join{position:relative;min-height:88svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:120px 16px}
.join .layer--far img{filter:saturate(1.05)}
.join__shade{position:absolute;inset:0;z-index:1;background:radial-gradient(60% 55% at 50% 50%,rgba(10,18,16,.55),rgba(10,18,16,.8) 70%,var(--ink) 100%),linear-gradient(180deg,var(--ink) 0%,transparent 20%,transparent 80%,var(--ink) 100%)}
.join__inner{position:relative;z-index:3;max-width:760px}
.ja-lead{font-family:var(--serif-ja);font-size:clamp(1.05rem,2vw,1.3rem);color:var(--mint);margin-top:14px;letter-spacing:.2em}
.join__text{margin-top:18px;color:var(--text-dim);font-family:var(--serif-ja);font-size:.92rem}

/* =========================================================
   CONTACT / FOOTER
   ========================================================= */
.contact{position:relative;padding:100px 0 30px;background:linear-gradient(180deg,var(--ink),#0d2a25 40%,#0b2420);border-top:1px solid rgba(111,224,174,.2)}
.contact::before{content:"";position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;opacity:.35;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 300' preserveAspectRatio='none'%3E%3Cpath d='M0 220 C160 120 260 170 380 110 C520 40 620 150 760 100 C900 50 1000 140 1140 90 C1260 50 1360 120 1440 100 L1440 300 L0 300Z' fill='%23072019'/%3E%3Cpath d='M0 260 C200 190 320 230 480 180 C640 130 760 220 920 170 C1080 120 1220 200 1440 160 L1440 300 L0 300Z' fill='%23051713'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.contact__grid{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:start}
.contact__logos{display:flex;align-items:flex-end;gap:28px}
.contact__logo{height:120px;width:auto}
.contact__studio{height:90px;width:auto;opacity:.95}
.contact__tag{margin-top:26px;font-family:var(--serif-en);font-size:1.35rem;letter-spacing:.08em;line-height:1.5;color:#dfe9df}
.social{display:flex;gap:16px;margin-top:26px}
.social a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(111,224,174,.45);transition:.2s}
.social a:hover{background:rgba(111,224,174,.15);box-shadow:0 0 16px var(--mint-glow)}
.social svg{width:20px;height:20px;fill:var(--mint)}
.form{display:grid;gap:16px;padding:30px;border:1px solid rgba(111,224,174,.25);border-radius:8px;background:rgba(6,20,16,.55);backdrop-filter:blur(6px)}
.form__title{font-family:var(--serif-en);font-weight:600;font-size:1.6rem;letter-spacing:.12em;color:#f0e2c4}
.form__title span{font-family:var(--sans);font-size:.75rem;letter-spacing:.1em;color:var(--text-dim);margin-left:10px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:grid;gap:6px;font-size:.78rem;letter-spacing:.06em;color:var(--text-dim)}
.form em{color:var(--mint);font-style:normal}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border-radius:5px;border:1px solid rgba(111,224,174,.35);background:rgba(4,14,12,.7);color:var(--text);font:inherit;font-size:.92rem;outline:none;transition:.2s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--mint);box-shadow:0 0 0 3px rgba(111,224,174,.15)}
.form textarea{resize:vertical}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.form__status{min-height:1.4em;font-size:.85rem}
.form__status.ok{color:var(--mint)}.form__status.ng{color:#ff9b8a}
.footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:70px;padding-top:20px;border-top:1px solid rgba(111,224,174,.15);font-size:.72rem;color:#8f9c94;letter-spacing:.08em}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:rgba(0,0,0,.8);padding:16px}
.modal[hidden]{display:none}
.modal__box{position:relative;width:min(960px,100%)}
.modal__body{aspect-ratio:16/9;background:#000;border:1px solid rgba(111,224,174,.3);display:grid;place-items:center;color:var(--text-dim);font-family:var(--serif-ja);text-align:center;padding:20px}
.modal__body iframe{width:100%;height:100%;border:0}
.modal__close{position:absolute;right:0;top:-46px;width:40px;height:40px;font-size:1.6rem;color:var(--mint)}

/* ---------- reveal ---------- */
.reveal{opacity:0;translate:0 28px;transition:opacity .9s ease,translate .9s cubic-bezier(.2,.8,.2,1),transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.reveal.is-in{opacity:1;translate:none}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .game-cards,.shops{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .featured{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr;gap:40px}
  .about-link{display:none}
  .contact__grid{grid-template-columns:1fr}
  .hero__mascot{display:none}
}
@media (max-width:760px){
  :root{--nav-h:62px}
  .nav__word{height:15px}.nav__mark{height:32px}
  .nav__toggle{display:flex}
  .nav__menu{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:22px;padding:28px 16px 34px;background:#120d08f2;border-bottom:1px solid rgba(111,224,174,.2);transform:translateY(-120%);transition:transform .35s;z-index:-1}
  .nav.is-open .nav__menu{transform:none}
  .nav.is-open .nav__toggle span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .nav.is-open .nav__toggle span:nth-child(2){opacity:0}
  .nav.is-open .nav__toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .hero{align-items:flex-end;padding-bottom:150px}
  .hero .layer--far{left:-6%}
  .hero__shade{background:linear-gradient(0deg,var(--ink) 0%,rgba(10,18,16,.9) 45%,rgba(10,18,16,.35) 75%,rgba(10,18,16,.5) 100%)}
  .hero__carousel{left:16px;right:16px;bottom:20px;overflow-x:auto}
  .thumb{flex:0 0 76px;height:46px}
  .scroll-hint{display:none}
  .section{padding:90px 0}
  .game-cards,.shops,.notices{grid-template-columns:1fr}
  .featured{padding:20px}
  .featured__media{grid-template-columns:1fr}
  .shots{grid-template-columns:repeat(4,1fr);grid-template-rows:none}
  .shots .ph{aspect-ratio:16/10}
  .notice-board{padding:66px 16px 26px}
  .notice-board__crest{padding:12px 26px 8px}
  .notice-board__crest img{height:48px}
  .form__row{grid-template-columns:1fr}
  .contact__logo{height:90px}.contact__studio{height:68px}
  .board{padding:8px 16px}
  .board__studio{height:42px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;translate:none}
}

/* ---------- v1.1 additions ---------- */
.video{background-size:cover;background-position:center}
.video.has-img::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,20,16,.35),transparent 40%);z-index:1}
.video__play[hidden]{display:none}
.shot{display:block;width:100%;height:100%;border-radius:4px;overflow:hidden;transition:transform .2s,outline-color .2s;outline:2px solid transparent}
.shot .ph{width:100%;height:100%}
.shot:hover{transform:scale(1.03);outline-color:var(--mint)}
.featured__btns{display:flex;flex-wrap:wrap;gap:10px}
.featured__btns [hidden]{display:none}
.hero__carousel[hidden]{display:none}
.game-card[data-i]{cursor:pointer}
.game-card--soon{opacity:.82}
.game-card--soon h3{font-size:1.15rem;letter-spacing:.18em;color:#55604f}
.ph--soon{aspect-ratio:4/3;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#0e3a2c 0 12px,#0b3226 12px 24px)}
.ph--soon span{font-family:var(--sans);font-weight:700;font-size:.72rem;letter-spacing:.24em;color:rgba(200,245,222,.7);border:1px solid rgba(160,240,200,.35);padding:6px 12px;border-radius:3px}

.featured__media{align-items:start}
.shots{grid-template-rows:none;align-content:start}
.shots .shot,.shots > .ph{aspect-ratio:16/10;height:auto}
@media (max-width:760px){.shots{grid-template-columns:repeat(4,1fr)}}

/* ---------- v1.2 ---------- */
.washi-panel__logo--empty{height:74px}
.members__track{scroll-snap-type:none!important;cursor:grab;user-select:none}
.members__track.is-dragging{cursor:grabbing}
.members__track.is-dragging .member{pointer-events:none}
.member img{-webkit-user-drag:none}
.nav__word{height:20px}

/* ---------- v1.3 effects ---------- */
/* Hero: 層の重なり（Y26）と切り替え（墨がにじむように広がる） */
.hero-art{position:absolute;inset:0;left:20%}
.hero-art__set{position:absolute;inset:0;clip-path:circle(0% at 68% 55%);filter:blur(10px);opacity:0;
  transition:clip-path 1.3s cubic-bezier(.6,.05,.25,1),filter 1.3s ease,opacity .5s ease}
.hero-art__set.is-current{clip-path:circle(150% at 68% 55%);filter:none;opacity:1}
.hero-art__set .layer img{object-fit:cover}
@media (max-width:760px){.hero-art{left:0}}
/* 光の筋（T16 ゴッドレイ） */
.godrays{position:absolute;inset:0;left:20%;pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask:radial-gradient(120% 90% at 85% 0%,#000 0%,rgba(0,0,0,.6) 40%,transparent 75%);mask:radial-gradient(120% 90% at 85% 0%,#000 0%,rgba(0,0,0,.6) 40%,transparent 75%)}
.godrays[data-mode="day"]{opacity:.55}
.godrays[data-mode="night"]{opacity:.28}
.godrays span{position:absolute;left:50%;top:-40%;width:160%;height:180%;transform-origin:50% 0;translate:-12% 0;
  background:repeating-conic-gradient(from 150deg at 50% 0%,transparent 0deg,rgba(255,214,150,.0) 3deg,rgba(255,214,150,.22) 5deg,transparent 8deg,transparent 14deg);
  filter:blur(14px);animation:rays 18s ease-in-out infinite alternate}
.godrays span:nth-child(2){animation-duration:26s;animation-direction:alternate-reverse;opacity:.7}
.godrays span:nth-child(3){animation-duration:34s;opacity:.5;filter:blur(24px)}
.godrays[data-mode="night"] span{background:repeating-conic-gradient(from 150deg at 50% 0%,transparent 0deg,rgba(170,220,255,.18) 5deg,transparent 8deg,transparent 15deg)}
@keyframes rays{from{rotate:-6deg}to{rotate:6deg}}
@media (max-width:760px){.godrays{left:0}}
/* 吊り下げカード（P20） */
.game-card{transform-origin:50% -32px;transition:translate .9s cubic-bezier(.2,.8,.2,1),opacity .9s ease,box-shadow .35s}
.game-card:hover{box-shadow:0 0 0 3px #3a281a,0 0 0 5px #24170e,0 0 30px rgba(125,255,176,.18),0 24px 40px rgba(0,0,0,.6)}

.notice__slides img{position:absolute;inset:0;opacity:0;transition:opacity 1s ease}
.notice__slides img.is-on{opacity:1}
/* NEWS：画像を切らずに横長の枠に収める（左右は黒帯） */
.notice .ph.has-img{background:#000}
.notice .ph img{object-fit:contain}
.notice .ph.has-img::after{display:none}

/* v1.5: COMMUNITYは3枠 / FEATUREDの画像を切らずに収める */
.shops{grid-template-columns:repeat(3,1fr)}
.video{background-color:#000;background-size:contain;background-repeat:no-repeat}
.video.has-img::before{display:none}
.video.has-img::after{display:none}
.shots .ph.has-img{background:#000}
.shots .ph img{object-fit:contain}
.shots .ph.has-img::after{display:none}
@media (max-width:1000px){.shops{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.shops{grid-template-columns:1fr}}

/* 制作者アイコン：立ち絵の顔あたりを丸く切り抜く */
.avatar img{object-position:30% 42%;transform:scale(2.2);transform-origin:30% 42%}