/* ============================================================
   ICY PURPLE HEAD ARCADE — Starry Night Cartoon Theme
   ============================================================ */
:root{
  --night0:#1a1040; --night1:#2b1a66; --night2:#3a2080;
  --frost:#f0ecff; --dim:#b9aee6;
  --purple:#9344dc; --purple-d:#5a1e96; --candy:#b06ef7;
  --ice:#7fe3ff; --star:#ffd32a; --danger:#ff6b81;
  --card:rgba(255,255,255,.07); --line:rgba(176,110,247,.35);
}
*{box-sizing:border-box}
html{
  scroll-behavior:smooth; min-height:100%;
  background:#1a1040 linear-gradient(180deg,var(--night0) 0%,var(--night1) 60%,var(--night2) 100%);
}
body{
  margin:0; color:var(--frost);
  font-family:"Segoe UI",Verdana,Arial,sans-serif; line-height:1.6;
  background:transparent; overflow-x:hidden;
}
/* starfield */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 25px 35px,#fff,transparent),
    radial-gradient(1.5px 1.5px at 150px 90px,#ffe9a8,transparent),
    radial-gradient(2px 2px at 310px 55px,#cfeaff,transparent),
    radial-gradient(1.5px 1.5px at 420px 150px,#fff,transparent),
    radial-gradient(2.5px 2.5px at 560px 40px,#ffd32a,transparent),
    radial-gradient(1.5px 1.5px at 640px 120px,#fff,transparent),
    radial-gradient(2px 2px at 780px 80px,#cfeaff,transparent),
    radial-gradient(1.5px 1.5px at 910px 160px,#fff,transparent);
  background-size:960px 200px; opacity:.8;
}
a{color:var(--ice); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto; border-radius:18px}
.wrap{max-width:1060px; margin:0 auto; padding:0 18px}

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(20,10,50,.85); backdrop-filter:blur(10px);
  border-bottom:2px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; padding:10px 18px}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none!important}
.logo-cube{
  width:44px; height:44px; border-radius:12px; position:relative; flex:none;
  background:linear-gradient(145deg,#b06ef7,#7a2fd0);
  border:3px solid #5a1e96; box-shadow:0 4px 14px rgba(147,68,220,.55);
}
.logo-cube::before{ /* eyes */
  content:""; position:absolute; top:10px; left:7px; width:10px; height:12px;
  background:#fff; border-radius:50%;
  box-shadow:14px 0 0 #fff, 3px 3px 0 -2px #201040, 17px 3px 0 -2px #201040;
}
.logo-cube::after{ /* smile */
  content:""; position:absolute; left:12px; bottom:7px; width:14px; height:7px;
  border:2.5px solid #2a1055; border-top:none; border-radius:0 0 12px 12px;
}
.logo-name{font-weight:900; font-size:19px; letter-spacing:.3px;
  background:linear-gradient(90deg,#cfeaff,#b06ef7);
  -webkit-background-clip:text; background-clip:text; color:transparent}
.nav{display:flex; gap:8px; flex-wrap:wrap}
.nav a{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px; border-radius:999px; font-weight:800; font-size:14px;
  color:var(--frost); text-decoration:none!important; border:2px solid transparent;
}
.nav a svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round}
.nav a:hover,.nav a.on{background:rgba(176,110,247,.2); border-color:var(--line)}
.nav a.play{background:linear-gradient(135deg,#9344dc,#c76ef7); box-shadow:0 4px 14px rgba(147,68,220,.5)}
.nav-toggle{
  display:none; width:44px; height:44px; padding:10px; border:2px solid var(--line);
  border-radius:12px; color:var(--frost); background:rgba(176,110,247,.14); cursor:pointer;
}
.nav-toggle svg,.btn svg,.scroll-top svg{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- buttons & chips ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; border:none; cursor:pointer; border-radius:16px;
  padding:14px 32px; font-size:17px; font-weight:900; color:#fff!important;
  font-family:inherit; text-decoration:none!important;
  background:linear-gradient(135deg,#9344dc,#c76ef7);
  box-shadow:0 6px 0 #5a1e96, 0 10px 24px rgba(147,68,220,.45);
  transition:transform .1s ease; letter-spacing:.4px;
}
.btn:hover{transform:translateY(-3px)}
.btn:active{transform:translateY(2px); box-shadow:0 3px 0 #5a1e96}
.btn.ice{background:linear-gradient(135deg,#2fa8d8,#7fe3ff); box-shadow:0 6px 0 #17618a, 0 10px 24px rgba(127,227,255,.35); color:#08304a!important}
.chips{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:18px 0}
.chip{background:var(--card); border:2px solid var(--line); border-radius:999px;
  padding:7px 17px; font-weight:800; font-size:13.5px; color:var(--ice)}

/* ---------- hero ---------- */
.hero{text-align:center; padding:44px 0 8px}
.hero h1{
  margin:0; font-size:clamp(34px,6vw,60px); font-weight:900; letter-spacing:-.5px;
  color:#fff; text-shadow:0 0 30px rgba(176,110,247,.8), 0 4px 0 #5a1e96;
}
.hero h1 .ice-word{color:var(--ice); text-shadow:0 0 30px rgba(127,227,255,.8), 0 4px 0 #17618a}
.hero p{color:var(--dim); font-size:clamp(15px,2.3vw,19px); font-weight:600; margin:10px 0 0}

/* ---------- game console ---------- */
.console{margin:26px auto 0; max-width:1000px}
.console-shell{
  border-radius:26px; overflow:hidden; border:3px solid var(--line);
  background:rgba(255,255,255,.05);
  box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 8px rgba(147,68,220,.12);
}
.console-top{display:flex; align-items:center; gap:8px; padding:12px 18px;
  background:rgba(147,68,220,.18); border-bottom:2px solid var(--line);
  font-weight:800; font-size:13.5px; color:var(--dim)}
.dot{width:12px;height:12px;border-radius:50%}
.d1{background:#ff6b81}.d2{background:#ffd32a}.d3{background:#2ecc71}
.console-top .ttl{margin-left:6px}
.console-top .live{margin-left:auto; background:rgba(46,204,113,.15); color:#7bedb0;
  border:1.5px solid rgba(46,204,113,.4); padding:3px 12px; border-radius:999px; font-size:11.5px}
.gameClass{aspect-ratio:1100/685; width:100%; border:0; display:block; background:#aee3ff}
.console-bottom{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  padding:16px; border-top:2px solid var(--line); background:rgba(147,68,220,.12)}

/* ---------- sections ---------- */
section{margin:52px 0 0}
.sec-title{display:flex; align-items:center; gap:12px; margin-bottom:20px}
.sec-title .ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  font-size:23px; background:linear-gradient(135deg,#9344dc,#c76ef7); box-shadow:0 4px 14px rgba(147,68,220,.5)}
.sec-title h2{margin:0; font-size:clamp(22px,3.4vw,30px); font-weight:900; color:#fff;
  text-shadow:0 0 20px rgba(176,110,247,.5)}
.panel{background:var(--card); border:2px solid var(--line); border-radius:22px; padding:22px 26px}
.panel h3{color:var(--candy); margin:0 0 10px; font-size:18px}
.panel p,.panel li{color:#d9d2f2; font-size:15.5px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
kbd{background:rgba(255,255,255,.12); border:2px solid var(--line); border-bottom-width:4px;
  border-radius:8px; padding:2px 10px; font-family:inherit; font-weight:800; font-size:13px; color:var(--ice)}

/* ---------- posts grid ---------- */
.posts{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px}
.post-card{
  background:var(--card); border:2px solid var(--line); border-radius:22px; overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease; text-decoration:none!important; display:block;
}
.post-card:hover{transform:translateY(-6px); box-shadow:0 18px 40px rgba(147,68,220,.35)}
.post-card img{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:0; display:block}
.post-card .pc-body{padding:15px 18px 18px}
.post-card .pc-tag{font-size:11px; font-weight:900; letter-spacing:1.6px; color:var(--star)}
.post-card h3{margin:6px 0 6px; color:#fff; font-size:16.5px; line-height:1.4}
.post-card p{margin:0; color:var(--dim); font-size:13.5px}

/* ---------- article ---------- */
.article{max-width:780px; margin:0 auto; padding:36px 0 0}
.article .crumb{font-size:13px; color:var(--dim); font-weight:700}
.article h1{font-size:clamp(28px,4.6vw,42px); font-weight:900; color:#fff; line-height:1.2;
  text-shadow:0 0 26px rgba(176,110,247,.6); margin:10px 0 12px}
.article .meta-line{color:var(--dim); font-size:13.5px; font-weight:700; margin-bottom:20px}
.article .meta-line span{color:var(--star)}
.article img.hero-img{width:100%; aspect-ratio:16/9; object-fit:cover; border:3px solid var(--line); box-shadow:0 20px 50px rgba(0,0,0,.45)}
.article .lead{font-size:18.5px; color:#e6dfff; font-weight:600; margin:22px 0}
.article h2{color:var(--candy); font-size:23px; margin:34px 0 10px; font-weight:900}
.article p{color:#d9d2f2; font-size:16px}
.cta-box{
  margin:38px 0; text-align:center; padding:28px 22px;
  background:linear-gradient(135deg,rgba(147,68,220,.25),rgba(127,227,255,.12));
  border:2px solid var(--line); border-radius:22px;
}
.cta-box .big{font-size:21px; font-weight:900; color:#fff; margin-bottom:14px}
.pn{display:flex; justify-content:space-between; gap:12px; margin:30px 0 0}
.pn a{flex:1; background:var(--card); border:2px solid var(--line); border-radius:16px;
  padding:13px 17px; font-weight:800; font-size:14px; color:var(--frost); text-decoration:none!important}
.pn a:hover{background:rgba(176,110,247,.18)}
.pn .next{text-align:right}

/* ---------- pines + footer ---------- */
.pines{margin-top:70px; height:90px; background-repeat:repeat-x; background-position:bottom;
  background-size:auto 90px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='90' viewBox='0 0 300 90'%3E%3Cg fill='%23150b38'%3E%3Cpath d='M30 90 L30 34 L12 62 L22 60 L6 84 L54 84 L38 60 L48 62 Z'/%3E%3Cpath d='M95 90 L95 14 L72 52 L85 49 L64 82 L126 82 L105 49 L118 52 Z'/%3E%3Cpath d='M170 90 L170 40 L154 64 L163 62 L149 85 L191 85 L177 62 L186 64 Z'/%3E%3Cpath d='M245 90 L245 20 L224 54 L236 51 L217 83 L273 83 L254 51 L266 54 Z'/%3E%3C/g%3E%3C/svg%3E");
}
.site-foot{background:#150b38; border-top:3px solid var(--line); padding:42px 0 24px}
.foot-cols{display:grid; grid-template-columns:minmax(240px,1.5fr) repeat(3,minmax(140px,1fr)); gap:clamp(24px,4vw,48px); align-items:start; margin-bottom:30px}
.foot-cols h4{color:var(--star); font-size:13px; letter-spacing:1.8px; margin:0 0 12px}
.foot-cols ul{list-style:none; margin:0; padding:0}
.foot-cols li{margin:7px 0}
.foot-cols a{color:#b9aee6; font-size:14px}
.foot-cols a:hover{color:var(--ice)}
.foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.foot-brand b{color:#fff}
.foot-note{max-width:360px; margin:0; color:#8d80c0; font-size:13.5px; line-height:1.7}
.foot-copy{border-top:1.5px solid rgba(176,110,247,.2); margin-top:0; padding-top:20px;
  text-align:center; color:#7c6fb0; font-size:12.5px; line-height:1.6}
.foot-copy a{color:#b9aee6;font-weight:800}

.scroll-top{
  position:fixed; right:clamp(14px,3vw,30px); bottom:clamp(14px,3vw,30px); z-index:80;
  width:48px; height:48px; display:grid; place-items:center; padding:0; border:2px solid rgba(255,255,255,.3);
  border-radius:50%; color:#fff; background:linear-gradient(135deg,#9344dc,#6a28b5);
  box-shadow:0 8px 24px rgba(20,10,50,.45); cursor:pointer; opacity:0; visibility:hidden;
  transform:translateY(14px); transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.scroll-top.is-visible{opacity:1;visibility:visible;transform:none}
.scroll-top:hover{transform:translateY(-3px)}
:focus-visible{outline:3px solid var(--star);outline-offset:3px}

/* ---------- faq ---------- */
details{background:var(--card); border:2px solid var(--line); border-radius:16px;
  padding:14px 20px; margin-bottom:10px}
details summary{cursor:pointer; font-weight:800; font-size:15.5px; color:#fff}
details p{color:#d9d2f2}

@media(max-width:760px){
  .site-head .wrap{flex-wrap:wrap}
  .logo-name{font-size:16px}
  .logo-cube{width:40px;height:40px}
  .nav-toggle{display:grid;place-items:center;margin-left:auto}
  .nav{display:none;flex-basis:100%;flex-direction:column;gap:5px;padding:10px 0 4px}
  .site-head.nav-open .nav{display:flex}
  .nav a,.nav a:not(.play){display:block;text-align:center;width:100%;padding:11px 16px}
  .grid2{grid-template-columns:1fr}
  .pn{flex-direction:column}
  .pn .next{text-align:left}
  .console-bottom{display:grid;grid-template-columns:1fr}
  .btn{width:100%;padding:13px 18px}
  .hero{padding-top:30px}
  .panel{padding:19px}
  .foot-cols{grid-template-columns:1fr 1fr;gap:24px 18px}
}
@media(max-width:480px){
  .wrap{padding-inline:14px}
  .site-head .wrap{padding-inline:14px}
  .posts{grid-template-columns:1fr}
  .foot-cols{grid-template-columns:1fr}
  .article{padding-top:26px}
  .scroll-top{width:44px;height:44px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}