:root { --accent:#5b8cff; --accent2:#9a6bff; --ink:#e8eef9; --dim:#8a97b0; --card:#0e1320; }
* { box-sizing: border-box; }
html,body { margin:0; padding:0; }
body {
  background: radial-gradient(1200px 700px at 70% -10%, #16213f 0%, #0a0e1a 45%, #06080f 100%);
  color: var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.6;
  min-height:100vh; overflow-x:hidden;
}
.stars { position:fixed; inset:0; pointer-events:none; z-index:0; }
.stars i { position:absolute; background:#cfe0ff; border-radius:50%; opacity:.5; animation:tw 4s infinite ease-in-out; }
@keyframes tw { 0%,100%{opacity:.25} 50%{opacity:.8} }
.wrap { position:relative; z-index:1; max-width:980px; margin:0 auto; padding:0 24px; }
.langnav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:14px; padding-top:18px; font-size:13px; }
.langnav a { color:var(--dim); text-decoration:none; }
.langnav a.on { color:#fff; font-weight:600; }
.langnav a:hover { color:#9bb6ff; }
/* Auth controls — unified with the STARCLAIM in-game console UI:
   cyan accent #29b6f6, framed panels with bright corner brackets, Noto Sans KR. */
.authnav { display:flex; align-items:center; gap:12px; margin-left:6px; }
.authgreet { color:#cfe3f2; font-weight:600; font-size:14px; max-width:160px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scframe { position:relative; }
.scframe > .cnr { position:absolute; width:11px; height:11px; pointer-events:none; }
.cnr.tl { top:-1px; left:-1px; border-top:2px solid #29b6f6; border-left:2px solid #29b6f6; }
.cnr.tr { top:-1px; right:-1px; border-top:2px solid #29b6f6; border-right:2px solid #29b6f6; }
.cnr.bl { bottom:-1px; left:-1px; border-bottom:2px solid #29b6f6; border-left:2px solid #29b6f6; }
.cnr.br { bottom:-1px; right:-1px; border-bottom:2px solid #29b6f6; border-right:2px solid #29b6f6; }
.scbtn { font-family:'Noto Sans KR',inherit; font-size:14px; color:#cfe3f2; letter-spacing:.02em;
  background:rgba(10,20,31,.5); border:1px solid rgba(41,182,246,.55); padding:8px 16px; cursor:pointer;
  transition:background .12s, border-color .12s, transform .1s, color .12s; }
.scbtn:hover { background:rgba(41,182,246,.16); border-color:rgba(41,182,246,.95); color:#fff; transform:scale(1.05); }
.scleft { margin-right:auto; }  /* push the rest of the top bar to the right */
.scmenu { position:relative; display:inline-flex; }
.schamb { font-family:inherit; width:44px; height:34px; display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; color:#fff; background:rgba(10,20,31,.5); border:1px solid rgba(41,182,246,.6);
  cursor:pointer; transition:background .12s; }
.schamb:hover { background:rgba(41,182,246,.16); }
.scdrop { position:absolute; top:calc(100% + 9px); right:0; min-width:180px; z-index:60;
  background:rgba(10,20,31,.97); border:1px solid rgba(41,182,246,.7); box-shadow:0 0 24px rgba(41,182,246,.28); padding:8px; }
.scdrop button { display:block; width:100%; text-align:left; font-family:'Noto Sans KR',inherit; font-size:15px;
  color:#cfe3f2; background:transparent; border:0; padding:9px 12px; cursor:pointer; }
.scdrop button:hover { color:#fff; background:rgba(41,182,246,.12); }
/* themed dialogs (confirm / login picker) — same look as the game's dialog.ts */
.scov { position:fixed; inset:0; z-index:1000; background:rgba(5,6,15,.78); display:flex;
  align-items:center; justify-content:center; font-family:'Noto Sans KR',sans-serif; }
.scdlg { width:min(340px, calc(100vw - 48px)); background:rgba(10,20,31,.97);
  border:1px solid rgba(41,182,246,.6); box-shadow:0 0 28px rgba(41,182,246,.25); padding:20px 22px 18px; color:#cfe3f2; }
.scdlg .dtitle { color:#29b6f6; font-weight:700; font-size:17px; letter-spacing:.04em; margin-bottom:10px; }
.scdlg .dmsg { font-size:14px; line-height:1.5; margin-bottom:14px; }
.scdlg .drow { display:flex; gap:10px; justify-content:flex-end; margin-top:14px; }
.scdlg .dcol { display:flex; flex-direction:column; gap:10px; }
.dbtn { font-family:'Noto Sans KR',inherit; font-size:14px; padding:9px 18px; cursor:pointer; color:#cfe3f2;
  background:rgba(136,153,170,.10); border:1px solid rgba(136,153,170,.53); transition:background .12s; }
.dbtn:hover { background:rgba(136,153,170,.22); }
.dbtn.prim { color:#fff; background:rgba(41,182,246,.2); border-color:rgba(41,182,246,.8); }
.dbtn.prim:hover { background:rgba(41,182,246,.33); }
.dbtn.full { width:100%; padding:12px 18px; font-size:15px; }
.dfield { width:100%; box-sizing:border-box; padding:10px 12px; margin-bottom:10px;
  font-family:'Noto Sans KR',inherit; font-size:15px; color:#eaf6ff; background:#05060f;
  border:1px solid rgba(41,182,246,.4); outline:none; }
.dfield:focus { border-color:#29b6f6; }
.dtextarea { height:120px; resize:vertical; line-height:1.5; }
header { padding:40px 0 28px; text-align:center; }
.brand { display:flex; align-items:center; justify-content:center; gap:clamp(10px,2.4vw,18px); }
.logoicon { flex:none; width:clamp(50px,9.5vw,88px); height:clamp(50px,9.5vw,88px);
  filter:drop-shadow(0 4px 18px rgba(120,150,255,.45));
  animation:oph-pulse 3.6s ease-in-out infinite; }
@keyframes oph-pulse {
  0%,100% { filter:drop-shadow(0 4px 16px rgba(120,150,255,.4)); }
  50% { filter:drop-shadow(0 4px 30px rgba(130,165,255,.82)); }
}
.logo {
  font-family:'Orbitron',sans-serif; font-weight:800; font-size:clamp(34px,7vw,64px);
  letter-spacing:.06em; margin:0;
  background:linear-gradient(90deg,#5b8cff,#bcccff 40%,#9a6bff 60%,#5b8cff);
  background-size:220% 100%; -webkit-background-clip:text;
  background-clip:text; color:transparent; text-shadow:0 0 40px rgba(91,140,255,.25);
  animation:oph-shimmer 7s linear infinite;
}
@keyframes oph-shimmer { to { background-position:220% 0; } }
@media (prefers-reduced-motion: reduce) { .logoicon, .logo { animation:none; } }
.tag { font-size:clamp(16px,2.6vw,22px); color:var(--ink); margin:14px 0 6px; font-weight:500; }
.sub { color:var(--dim); max-width:620px; margin:0 auto; font-size:15px; }
.bar { width:120px; height:3px; margin:26px auto 0; border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent); }
h2.section { font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--dim);
  margin:54px 0 18px; font-weight:700; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; }
.card { background:var(--card); border:1px solid #1d2740; border-radius:16px; overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .15s, border-color .15s, box-shadow .15s;
  display:flex; flex-direction:column; }
.card:hover { transform:translateY(-4px); border-color:#34508f; box-shadow:0 14px 40px rgba(10,16,40,.6); }
.card .thumb { aspect-ratio:1200/630; background:#0a0e1a center/cover no-repeat; }
.card .body { padding:16px 18px 18px; }
.card .title { font-family:'Orbitron',sans-serif; font-weight:600; font-size:18px; letter-spacing:.04em; margin:0 0 6px; }
.card .desc { color:var(--dim); font-size:14px; margin:0 0 12px; }
.pill { display:inline-block; font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:rgba(91,140,255,.14); color:#9bb6ff; border:1px solid rgba(91,140,255,.3); }
.play { display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:#9bb6ff; font-weight:600; font-size:14px; }
.soon { opacity:.6; cursor:default; }
.soon:hover { transform:none; border-color:#1d2740; box-shadow:none; }
.soon .thumb { background:
  repeating-linear-gradient(45deg,#0d1322,#0d1322 10px,#0f1628 10px,#0f1628 20px);
  display:flex; align-items:center; justify-content:center; color:#46557a; font-weight:700; letter-spacing:.1em; }
.prose { color:var(--dim); font-size:15px; line-height:1.8; max-width:760px; margin:0 0 12px; }
.prose b { color:var(--ink); }
.howto { color:var(--dim); font-size:14.5px; line-height:1.85; max-width:760px; margin:0 0 8px; padding-left:20px; }
.howto li { margin-bottom:4px; }
.morelink { margin:10px 0 0; font-size:14px; }
.morelink a { color:#9bb6ff; text-decoration:none; font-weight:600; }
.morelink a:hover { color:#bcccff; }
footer { color:var(--dim); font-size:13px; text-align:center; padding:60px 0 50px; }
footer a { color:#9bb6ff; text-decoration:none; }

/* content pages (guide / about / faq) */
.homelink { display:inline-flex; align-items:center; gap:8px; color:#9bb6ff; text-decoration:none;
  font-weight:700; font-size:15px; margin-top:6px; }
.homelink img { width:26px; height:26px; }
.pagetitle { font-family:'Orbitron',sans-serif; font-weight:800; font-size:clamp(26px,5vw,42px);
  letter-spacing:.04em; margin:22px 0 8px; text-align:center; line-height:1.1;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text;
  background-clip:text; color:transparent; }
.pagesub { color:var(--dim); text-align:center; max-width:660px; margin:0 auto; font-size:15px; }
.subnav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:20px 0 30px; }
.subnav a { color:#9bb6ff; text-decoration:none; font-size:14px; font-weight:600; padding:6px 15px;
  border:1px solid #1d2740; border-radius:999px; transition:border-color .15s, background .15s; }
.subnav a.on { color:#fff; background:rgba(91,140,255,.16); border-color:#34508f; }
.subnav a:hover { border-color:#34508f; }
.content { max-width:760px; margin:0 auto; }
.content h2 { font-family:'Orbitron',sans-serif; font-size:19px; color:var(--ink); letter-spacing:.02em;
  margin:34px 0 12px; font-weight:700; }
.content h3 { font-size:15.5px; color:#bcd0ee; margin:18px 0 6px; font-weight:700; }
.faq-q { color:var(--ink); font-weight:700; margin:22px 0 4px; font-size:16px; }
.faq-q::before { content:"Q. "; color:var(--accent); }
.faq-a { color:var(--dim); font-size:15px; line-height:1.8; margin:0; }
.posts { max-width:760px; margin:0 auto; }
.post { display:block; background:var(--card); border:1px solid #1d2740; border-radius:16px;
  padding:20px 22px; margin:0 0 16px; text-decoration:none; color:inherit;
  transition:border-color .15s, transform .15s, box-shadow .15s; }
.post:hover { border-color:#34508f; transform:translateY(-3px); box-shadow:0 12px 32px rgba(10,16,40,.5); }
.post .ptitle { font-family:'Orbitron',sans-serif; font-weight:600; font-size:18px; letter-spacing:.02em; margin:0 0 6px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; }
.post .pdate { color:var(--dim); font-size:13px; margin:0 0 10px; }
.post .pexcerpt { color:var(--dim); font-size:14.5px; line-height:1.8; margin:0; }
.post .pmore { color:#9bb6ff; white-space:nowrap; }