/* playspuzzle — shared stylesheet for editorial / content pages (guides, articles,
   about, terms, contact). Matches the LOOP design system used across the games. */
:root{
  --bg:#0E0F13; --bg2:#15161C; --panel:#171922; --line:#262a38; --line2:#2f3446;
  --txt:#F4F5F8; --txt-dim:#aab0c2; --txt-mute:#6B6F7D; --accent:#19E3A8; --accent2:#16C9F0;
  --ch:#19E3A8; --dn:#5B8CFF; --md:#FF8A3D;
  --font-display:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Arial Rounded MT Bold",-apple-system,system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{background:var(--bg);}
body{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(1100px 700px at 50% -8%, #1a1d2b 0%, rgba(26,29,43,0) 58%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);
  background-attachment:fixed;
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:760px;margin:0 auto;padding:calc(var(--safe-t) + 22px) 20px calc(var(--safe-b) + 60px);}
header.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px;}
.wordmark{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:-.01em;color:var(--txt);}
.wordmark .dot{color:var(--accent);}
.backlink{font-size:13px;font-weight:700;color:var(--txt-dim);}
.crumb{font-size:13px;color:var(--txt-mute);margin:0 0 8px;}
.crumb a{color:var(--txt-mute);}
.crumb a:hover{color:var(--txt-dim);}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,6.5vw,38px);letter-spacing:-.02em;margin:0 0 12px;}
.lede{color:var(--txt-dim);font-size:17px;margin:0 0 8px;}
.meta{color:var(--txt-mute);font-size:13px;margin:0 0 18px;}
h2{font-family:var(--font-display);font-weight:800;font-size:21px;margin:34px 0 8px;}
h2 .em{color:var(--accent);}
h3{font-family:var(--font-display);font-weight:800;font-size:17px;margin:22px 0 6px;}
p,li{color:var(--txt-dim);font-size:15.5px;}
ul,ol{padding-left:22px;}
li{margin:6px 0;}
strong{color:var(--txt);font-weight:700;}
em{color:var(--txt);font-style:italic;}
blockquote{margin:18px 0;padding:12px 18px;border-left:3px solid var(--accent);background:var(--panel);border-radius:0 12px 12px 0;color:var(--txt-dim);}
hr{border:none;border-top:1px solid var(--line);margin:30px 0;}
code{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:1px 6px;font-size:13.5px;color:var(--txt);}

/* callout / tip box */
.tip{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:12px;padding:14px 18px;margin:16px 0;}
.tip strong{color:var(--txt);}

/* table */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14.5px;}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--txt-dim);}
th{color:var(--txt);font-weight:700;background:var(--panel);}

/* game cards (about page) */
.games{display:flex;flex-direction:column;gap:14px;margin:22px 0 8px;}
.game{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px;position:relative;overflow:hidden;}
.game::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);}
.game h3{font-family:var(--font-display);font-weight:800;font-size:18px;margin:0 0 4px;display:flex;align-items:center;gap:9px;}
.game h3 .dot{width:11px;height:11px;border-radius:50%;background:var(--c);flex:0 0 auto;}
.game p{margin:6px 0;}
.game .play{display:inline-block;margin-top:8px;font-weight:800;font-size:14px;color:var(--c);}
.g-ch{--c:var(--ch);} .g-dn{--c:var(--dn);} .g-md{--c:var(--md);}

/* article index cards */
.cards{display:flex;flex-direction:column;gap:12px;margin:20px 0;}
.acard{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
.acard:hover{border-color:var(--line2);text-decoration:none;}
.acard h3{margin:0 0 4px;color:var(--txt);}
.acard p{margin:0;color:var(--txt-dim);font-size:14.5px;}

/* FAQ accordion */
.faq{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px 18px;margin:12px 0;}
.faq details{border-bottom:1px solid var(--line);padding:12px 0;}
.faq details:last-child{border-bottom:none;}
.faq summary{font-weight:700;color:var(--txt);cursor:pointer;font-size:15.5px;}
.faq summary::-webkit-details-marker{color:var(--accent);}
.faq p{margin:8px 0 2px;}

/* related links row */
.related{margin:26px 0 0;}
.related a{display:inline-block;margin:0 10px 6px 0;font-weight:700;font-size:14px;}

/* CTA button */
.cta-row{margin:30px 0 8px;text-align:center;}
.cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:800;font-size:17px;color:#08110E;background:var(--accent);padding:14px 32px;border-radius:999px;box-shadow:0 5px 0 #0FA87C, 0 12px 20px rgba(0,0,0,.35);}
.cta:hover{text-decoration:none;}

/* footer */
footer{margin-top:46px;padding-top:20px;border-top:1px solid var(--line);text-align:center;color:var(--txt-mute);font-size:13px;}
footer a{color:var(--txt-dim);margin:0 7px;display:inline-block;}
footer .fmark{font-family:var(--font-display);font-weight:800;letter-spacing:.18em;color:var(--txt-dim);display:block;margin-bottom:8px;}
footer .fcopy{margin-top:10px;opacity:.7;}

/* desktop only: more generous left/right breathing room for the centered content
   (mobile keeps its tighter, full-width-friendly padding) */
@media (min-width: 720px){
  .wrap{ padding-left:48px; padding-right:48px; }
}