/* COOARWORLD shared: tokens, header (mint), footer (mint, centered), page components.
   Used by: Home, COOAR GAMES, Balaclava Chain, 3D World, About. (THE MIIW / Gial ww keep their own design.) */
:root{
  --mint:#07E6D8;
  --charcoal:#1F1F21;
  --panel:#27292C;
  --hair:#45494D;
  --text:#EEF1F1;
  --sub:#8C9496;
  --mint-ink:#0B3F3B;
  --f-d:"Archivo","Arial Black",sans-serif;
  --f-m:"DM Mono","Menlo",monospace;
  --f-j:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
/* width/height属性は縦横比の予約用（読み込み中のズレ防止）。実際の高さはCSSに従う */
:where(img[height],video[height]){height:auto}
[hidden]{display:none!important}

html,body{overflow-x:hidden;overflow-x:clip;max-width:100%}
html{scroll-behavior:smooth}
body{margin:0;background:var(--charcoal);color:var(--text);font-family:var(--f-j);overflow-x:hidden;line-height:1.8}
img,video{max-width:100%}
a{color:inherit}
button,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--mint);outline-offset:3px}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.in{max-width:1600px;margin:0 auto}
.mono{font-family:var(--f-m);letter-spacing:.08em;text-transform:uppercase}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:12px;top:12px;z-index:100;background:#fff;color:#111;padding:8px 12px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--mint)}

/* ---------- header ---------- */
/* JSでヘッダーが入る前から同じ高さ・色の枠を確保し、表示時に本文がずれないようにする（ページ遷移時のガタつき対策） */
#cw-hd:empty{display:block;position:sticky;top:0;z-index:50;background:var(--mint);padding-top:env(safe-area-inset-top,0px);min-height:calc(76px + env(safe-area-inset-top,0px))}
@media (max-width:760px){#cw-hd:empty{min-height:calc(64px + env(safe-area-inset-top,0px))}}
.hd{position:sticky;top:0;padding-top:env(safe-area-inset-top,0px);/* 上端セーフエリアまでヘッダー色でつなげる */z-index:50;background:var(--mint);color:var(--charcoal)}
.hd .in{display:flex;align-items:center;gap:20px;min-height:76px}
.hd .logo{display:block;line-height:0;flex:none}
.hd .logo img{height:40px;width:auto}
.menu{display:flex;gap:4px;list-style:none;margin:0 0 0 auto;padding:0}
.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;text-decoration:none;font-family:var(--f-d);font-stretch:110%;font-weight:800;font-size:14px;letter-spacing:.04em;text-transform:uppercase;border-radius:999px}
.menu a:hover,.menu a[aria-current="page"]{background:var(--charcoal);color:var(--mint)}
.hd .tools{display:flex;align-items:center;gap:10px;flex:none}
.lang{position:relative;display:flex;align-items:center}
.lang label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lang select{appearance:none;-webkit-appearance:none;min-height:44px;padding:0 34px 0 16px;border:2px solid var(--charcoal);border-radius:999px;background:transparent;color:var(--charcoal);font-family:var(--f-m);font-size:13px;letter-spacing:.06em;cursor:pointer}
.lang::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:7px;border-right:2px solid var(--charcoal);border-bottom:2px solid var(--charcoal);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.lang select option{color:#111}
.burger{display:none;width:44px;height:44px;border:2px solid var(--charcoal);border-radius:50%;background:none;cursor:pointer;place-items:center}
.burger span{display:block;width:16px;height:2px;background:var(--charcoal);box-shadow:0 5px 0 var(--charcoal),0 -5px 0 var(--charcoal)}
.sub{background:#1A1A1C;border-bottom:1px solid var(--hair)}
.sub .in{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:12px;font-size:13.5px;font-weight:700}
.sub .mono{font-weight:500;font-size:12px;color:var(--sub)}
.sub a{text-decoration:none;color:var(--sub)}
.sub a:hover{color:var(--mint)}

/* ---------- footer (mint, centered) ---------- */
.ft{background:var(--mint);color:var(--charcoal);text-align:center}
.ft .in{padding-block:64px 28px;max-width:1100px}
.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ft h2{margin:0 0 10px;font-family:var(--f-m);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mint-ink)}
.ft ul{list-style:none;margin:0;padding:0}
.ft li a{display:inline-flex;align-items:center;min-height:36px;text-decoration:none;font-family:var(--f-d);font-stretch:110%;font-weight:800;font-size:16px}
.ft li a:hover{text-decoration:underline;text-underline-offset:4px}
.ft li a.ft-mail{font-family:var(--f-m);font-weight:500;font-size:clamp(10.5px,3vw,13px);letter-spacing:0;white-space:nowrap}
.ft .tbd{font-size:13px;color:var(--mint-ink);margin:6px 0 0}
.ft-sns{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-top:44px}
.sns-row{display:flex;flex-direction:column;align-items:center;gap:8px}
.sns-row small{font-family:var(--f-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mint-ink)}
.sns{display:flex;gap:8px}
.sns a{width:44px;height:44px;border-radius:50%;border:2px solid var(--charcoal);display:grid;place-items:center;text-decoration:none}
.sns a:hover{background:var(--charcoal);color:var(--mint)}
.sns svg{width:18px;height:18px;fill:currentColor}
.ft-mark{display:block;width:64px;height:64px;margin:52px auto 18px}
.ft-bot{border-top:2px solid var(--charcoal);padding-top:18px;display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-family:var(--f-m);font-size:12px;letter-spacing:.06em}
.ft-bot a{text-decoration:none}
.ft-bot a:hover{text-decoration:underline}

/* ---------- page components (sub pages) ---------- */
.pg-head{position:relative;overflow:hidden;border-bottom:1px solid var(--hair)}
.pg-head .in{position:relative;padding-block:clamp(56px,8vw,112px) clamp(40px,6vw,80px);z-index:1}
.pg-head .eyebrow{margin:0 0 18px;color:var(--sub);font-size:13px}
.pg-head h1{margin:0;font-family:var(--f-d);font-stretch:125%;font-weight:900;font-size:clamp(48px,9vw,132px);line-height:.84;letter-spacing:-.01em;text-transform:uppercase}
.pg-head h1 .o{color:transparent;-webkit-text-stroke:2px var(--mint)}
.pg-head .lead{margin:28px 0 0;max-width:36em;font-size:clamp(15px,1.4vw,18px);color:#C9CED0}
.deco{position:absolute;right:-8%;top:50%;width:min(720px,70vw);aspect-ratio:1;translate:0 -50%;pointer-events:none;z-index:0}
/* 回転はSVG内部の図形ではなく、HTML要素としての<svg>ごと回す（GPU合成で処理され、毎フレームの再計算・再描画が起きない） */
.deco svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.deco circle{fill:none}
.ring{transform-box:fill-box;transform-origin:center}
.motion .ring.r1{animation:cwturn 90s linear infinite}
.motion .ring.r2{animation:cwturn 140s linear infinite reverse}
@keyframes cwturn{to{transform:rotate(360deg)}}
.crumb{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px;font-family:var(--f-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.crumb a{text-decoration:none}.crumb a:hover{color:var(--mint)}
.sec{padding-block:clamp(56px,8vw,104px);border-bottom:1px solid var(--hair)}
.sh{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.sh h2{margin:0;font-family:var(--f-d);font-stretch:125%;font-weight:900;font-size:clamp(32px,4.6vw,64px);line-height:.9;text-transform:uppercase}
.sh h2 i{font-style:normal;color:var(--mint)}
.sh p{margin:0;color:var(--sub)}
.frame{background:var(--panel);border:1px solid var(--hair);border-radius:16px;overflow:hidden}
.card{display:block;background:var(--panel);border:1px solid var(--hair);border-radius:14px;padding:18px 22px 20px;text-decoration:none;transition:border-color .25s}
a.card:hover,a.card:focus-visible{border-color:var(--mint)}
.card .n{font-family:var(--f-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.card .n i{font-style:normal;color:var(--mint);margin-right:8px}
.card b{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-family:var(--f-d);font-stretch:118%;font-weight:900;font-size:clamp(20px,2vw,28px);line-height:1.05;margin-top:8px}
a.card b::after{content:"↗";font-weight:400;color:var(--mint)}
.card p{margin:8px 0 0;color:#C9CED0;font-size:14px;line-height:1.7}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;background:var(--mint);color:var(--charcoal);text-decoration:none;font-family:var(--f-d);font-stretch:110%;font-weight:800;font-size:15px;letter-spacing:.02em;text-transform:uppercase;border:0;cursor:pointer}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:none;color:var(--text);border:1px solid var(--hair)}
.btn.ghost:hover{border-color:var(--mint);color:var(--mint)}
.btn[aria-disabled="true"]{background:#34373B;color:var(--sub);cursor:not-allowed}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{font-family:var(--f-m);font-size:12px;letter-spacing:.06em;border:1px solid var(--hair);border-radius:999px;padding:4px 12px;color:#C9CED0}
.dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);border-top:1px solid var(--hair)}
.dl dt,.dl dd{margin:0;padding:14px 0;border-bottom:1px solid var(--hair)}
.dl dt{font-family:var(--f-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);padding-right:28px;padding-top:17px}
.tbd{color:var(--sub)}

@media (max-width:1080px){
  .menu{display:none}
  .burger{display:grid;margin-left:auto}
  .hd.open .menu{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:var(--mint);padding:8px max(16px,env(safe-area-inset-left,0px)) 16px;border-top:2px solid var(--charcoal)}
}
@media (max-width:760px){
  .hd .in{gap:10px;min-height:64px}
  .hd .logo img{height:30px}
  .sub .mono{display:none}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-sns{gap:24px}
  .deco{opacity:.5}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}