/* Reading surfaces are independent from the in-game viewport. */
.reading-page{margin:0;background:#f4f1e9;color:#243c32;font-family:system-ui,-apple-system,'Malgun Gothic',sans-serif;word-break:keep-all;overflow-wrap:anywhere;line-height:1.8}
.reading-page *{box-sizing:border-box}.reading-page a{color:inherit;text-underline-offset:4px}.reading-page a:focus-visible,.lobby-reading a:focus-visible,.content-footer a:focus-visible{outline:3px solid #bc5138;outline-offset:5px;border-radius:4px}.reading-page img{max-width:100%;display:block}.skip{position:fixed;top:-100px;left:20px;z-index:10;background:#243c32;color:#fff!important;padding:12px}.skip:focus{top:10px}
.reading-header{max-width:1200px;margin:auto;padding:26px 32px;display:flex;align-items:center;justify-content:space-between;gap:22px;border-bottom:1px solid #d5d9cd}.reading-brand{font-size:20px;letter-spacing:-.8px;text-decoration:none!important;white-space:nowrap}.reading-brand b{color:#b64d35}.reading-header nav{display:flex;flex-wrap:wrap;gap:24px;font-size:13px}.reading-header nav a{padding:8px 0;text-decoration:none}.reading-header nav a:hover{text-decoration:underline}
.reading-wide{max-width:1200px;margin:auto;padding:0 32px}.kicker{display:block;font-size:11px;font-weight:700;letter-spacing:1px;color:#8c5943}.directory-heading{padding:64px 0 42px}.reading-page h1{font-size:clamp(34px,4.8vw,58px);line-height:1.23;letter-spacing:-2px;margin:14px 0 20px;text-wrap:balance}.directory-heading p{font-size:16px;color:#606f64;margin:0}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.guide-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-card{display:flex;flex-direction:column;min-width:0;text-decoration:none;border:1px solid #d9ddcf;border-radius:20px;overflow:hidden;background:#fffdf8;transition:transform .15s,box-shadow .15s}.guide-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px #243c3210}.guide-art{height:180px;position:relative;overflow:hidden}.guide-art img{width:100%;height:100%;object-fit:cover}.guide-art>span{position:absolute;top:12px;left:12px;padding:3px 10px;border-radius:20px;background:#fff6e8f0;font-size:11px;font-weight:700}.guide-copy{padding:23px;display:flex;flex:1;flex-direction:column}.guide-copy small{font-size:11px;color:#70776c}.guide-copy h2{font-size:22px;line-height:1.4;letter-spacing:-.8px;margin:8px 0 12px}.guide-copy p{font-size:14px;line-height:1.8;color:#607063;margin:0 0 24px}.read-link{margin-top:auto;padding-top:14px;border-top:1px solid #e1e4d9;font-size:12px;font-weight:700}.read-link b{float:right}.directory-note{margin:48px 0 64px;padding:28px 32px;border-left:3px solid #a4664b;background:#edece2}.directory-note h2{font-size:19px;margin:0 0 10px}.directory-note p{font-size:14px;margin:0;color:#607063}
.article-hero{max-width:1200px;margin:auto;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;padding:50px 32px;align-items:center}.breadcrumb{display:inline-block;font-size:12px;color:#627066!important;text-decoration:none;margin-bottom:30px;padding:4px 0}.hero-copy h1{font-size:clamp(32px,4vw,48px)}.hero-copy>p{font-size:17px;color:#5f6f64;max-width:30em;line-height:1.9}.hero-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:27px}.hero-actions>span{font-size:12px;color:#727c70}.play-link{background:#254b39;color:#fff9eb!important;border-radius:12px;padding:13px 22px;text-decoration:none;display:inline-flex;align-items:center;gap:32px;font-size:14px;font-weight:700;min-height:48px}.play-link:hover{background:#173b2a}.article-hero figure{margin:0;position:relative}.article-hero img{width:100%;height:330px;object-fit:cover;border-radius:22px}.article-hero figcaption{font-size:11px;color:#6c786b;margin-top:10px}.article-layout{border-top:1px solid #d9ddcf;max-width:1136px;margin:0 auto;padding:44px 0 28px;display:grid;grid-template-columns:minmax(0,730px) minmax(180px,1fr);gap:70px}.article-copy{font-size:16px;line-height:1.95}.article-copy .opening{font-size:18px;color:#3b5547;margin:0 0 44px}.article-copy section{margin:0 0 40px;scroll-margin-top:24px}.article-copy h2{font-size:24px;line-height:1.45;letter-spacing:-.7px;margin:0 0 16px}.article-copy p{margin:0 0 18px;color:#4e6355}.control-list{padding:0;margin:0;border-top:1px solid #d7ddcf}.control-list>div{padding:18px 0;border-bottom:1px solid #d7ddcf;display:grid;grid-template-columns:90px 1fr;gap:18px}.control-list dt{font-size:13px;font-weight:700}.control-list dd{margin:0;font-size:14px}.article-side{border-left:1px solid #d9ddcf;padding-left:28px;align-self:start;position:sticky;top:30px;font-size:13px}.article-side nav{display:grid;margin:16px 0 35px;gap:16px}.article-side nav a{text-decoration:none}.article-side p{font-size:12px;color:#718071;line-height:1.8}.one-tip{padding:24px 28px;background:#e8ecdf;border-radius:14px;margin:40px 0}.one-tip span{font-size:11px;font-weight:700;color:#58704f}.one-tip p{margin:8px 0 0;font-size:17px;color:#2d4838}.article-end{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:25px}.article-end>a:last-child{font-size:12px}.review-date{font-size:11px!important;color:#788270!important}.related{padding-top:36px;padding-bottom:64px}.related>h2{font-size:24px;margin:0 0 24px;letter-spacing:-.6px}
.text-page{max-width:820px;margin:auto;padding:46px 32px 64px}.text-page h1{font-size:clamp(34px,4vw,48px)}.text-lead{font-size:18px;color:#647364;margin:0 0 42px;padding-bottom:36px;border-bottom:1px solid #d4dacc}.text-page .article-copy section{margin-bottom:42px}.text-page .article-copy h2{font-size:22px}.contact-box{background:#e7edde;border-radius:16px;padding:28px;margin:0 0 42px}.contact-address{display:block;font-size:clamp(17px,3vw,25px);font-weight:700;margin:15px 0;overflow-wrap:anywhere}.contact-box p{font-size:12px!important;margin:12px 0 0}
.reading-footer{max-width:1136px;margin:0 auto;padding:34px 0 30px;border-top:1px solid #ced6c6}.reading-footer>p{font-size:13px;color:#74806f;margin:5px 0 18px}.reading-footer nav{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:12px}.reading-footer nav a{padding:8px 0}.reading-footer small{display:block;font-size:10px;color:#778372;margin-top:18px}
/* Deliberately scoped: no new content appears inside an active game. */
#lobby .lobby-reading{margin-top:60px;border-top:1px solid #d4d9ca;padding-top:35px;display:grid;grid-template-columns:1fr auto;gap:25px}#lobby .lobby-reading h2{font-size:28px;line-height:1.4;letter-spacing:-1px;margin:8px 0}#lobby .lobby-reading p{font-size:13px;line-height:1.8;color:#617161;margin:0}#lobby .reading-all{align-self:center;font-size:12px;color:#3c6149;padding:12px 0;text-underline-offset:4px}#lobby .lobby-guides{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}#lobby .lobby-guides>a{display:flex;flex-direction:column;text-decoration:none;color:#284232;padding:24px;border:1px solid #d6ddcc;background:#fbfaf3;border-radius:16px;min-width:0}#lobby .lobby-guides small{font-size:10px;color:#9c634b}#lobby .lobby-guides h3{font-size:19px;letter-spacing:-.6px;line-height:1.5;margin:8px 0 12px}#lobby .lobby-guides span{font-size:12px;margin-top:20px;padding-top:12px;border-top:1px solid #dce1d3}#lobby .lobby-about{grid-column:1/-1;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:24px 0}#lobby .lobby-about a{font-size:12px;white-space:nowrap;color:#3c6149}
body:not(.playing)>.content-footer{max-width:1200px;padding:24px 32px 36px;letter-spacing:0;font-size:12px;border-top:1px solid #d4d9ca}body:not(.playing)>.content-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin:14px 0}body:not(.playing)>.content-footer a{color:#5c705e;display:inline-block;padding:8px 0;text-decoration:none}body:not(.playing)>.content-footer small{font-size:10px}body.playing>.content-footer{display:none!important}
@media(max-width:1000px){.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.article-layout{margin:0 32px;gap:35px;grid-template-columns:minmax(0,1fr) 190px}.article-hero{gap:30px}.article-hero img{height:300px}.reading-footer{margin:0 32px}}
@media(max-width:650px){.reading-header{padding:18px 20px;display:block}.reading-brand{font-size:19px}.reading-header nav{gap:8px 22px;margin-top:12px;font-size:12px}.reading-wide{padding-left:20px;padding-right:20px}.directory-heading{padding:36px 0 30px}.directory-heading p{font-size:14px}.guide-grid,.guide-grid.two{grid-template-columns:1fr;gap:20px}.guide-art{height:190px}.guide-copy{padding:21px}.guide-copy h2{font-size:22px}.directory-note{margin:30px 0 40px;padding:22px}.article-hero{display:flex;flex-direction:column;align-items:stretch;padding:28px 20px;gap:28px}.article-hero h1{font-size:36px;letter-spacing:-1.4px}.breadcrumb{margin-bottom:22px}.hero-copy>p{font-size:16px}.article-hero img{height:220px}.article-layout{display:block;margin:0 20px;padding:28px 0}.article-side{display:none}.article-copy{font-size:15px;line-height:1.95}.article-copy .opening{font-size:17px;margin-bottom:34px}.article-copy h2{font-size:22px}.article-copy section{margin-bottom:32px}.control-list>div{grid-template-columns:65px 1fr;gap:14px}.control-list dd{font-size:14px}.one-tip{padding:20px}.one-tip p{font-size:16px}.related{padding-top:10px;padding-bottom:40px}.text-page{padding:28px 20px 40px}.text-page h1{letter-spacing:-1.4px}.text-lead{font-size:16px;margin-bottom:30px;padding-bottom:26px}.text-page .article-copy h2{font-size:21px}.contact-box{padding:22px}.reading-footer{margin:0 20px;padding:26px 0}.reading-footer nav{gap:6px 22px}#lobby .lobby-reading{grid-template-columns:1fr;margin-top:40px;gap:18px}#lobby .lobby-reading h2{font-size:25px}#lobby .reading-all{justify-self:start}#lobby .lobby-guides{grid-template-columns:1fr;gap:12px}#lobby .lobby-guides>a{padding:20px}#lobby .lobby-about{flex-direction:column;align-items:flex-start;gap:14px}body:not(.playing)>.content-footer{padding:24px 0 30px;margin:0 20px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.guide-card{transition:none}.guide-card:hover{transform:none}}
/* Keep the same cast as the playable games, using their existing atlas cells. */
.guide-art{height:220px;isolation:isolate}.guide-art.has-character>img{filter:brightness(.75) saturate(.85)}
.guide-art>.guide-character{position:absolute;display:block;left:50%;top:auto;bottom:-8px;width:270px;height:270px;padding:0;border-radius:0;background-color:transparent;background-image:url('/assets/characters-v7b.webp');background-size:300% 300%;background-repeat:no-repeat;transform:translateX(-50%);filter:drop-shadow(0 8px 6px #091e2866);z-index:1;pointer-events:none}
.guide-art>.character-flight{background-position:50% 0}.guide-art>.character-rhythm{background-position:50% 50%}.guide-art>.character-weather{background-position:100% 100%}
.guide-art>.character-goblin{background-image:url('/assets/hok-hero-v8.webp');background-size:400% 300%;background-position:0 0;width:300px;height:300px;bottom:-34px}
.guide-art>.art-genre{z-index:2}.article-hero .detail-art{height:330px;border-radius:22px}.article-hero .detail-art>img{height:100%;border-radius:0}.detail-art>.guide-character{width:375px;height:375px;bottom:-3px}.detail-art>.character-goblin{width:420px;height:420px;bottom:-48px}
@media(max-width:650px){.guide-art{height:235px}.guide-art>.guide-character{width:285px;height:285px;bottom:-8px}.guide-art>.character-goblin{width:320px;height:320px;bottom:-36px}.article-hero .detail-art{height:255px}.detail-art>.guide-character{width:310px;height:310px;bottom:-4px}.detail-art>.character-goblin{width:345px;height:345px;bottom:-38px}}
@media(max-width:350px){.guide-art{height:215px}.guide-art>.guide-character{width:260px;height:260px}.guide-art>.character-goblin{width:290px;height:290px;bottom:-30px}.article-hero .detail-art{height:230px}.detail-art>.guide-character{width:280px;height:280px}.detail-art>.character-goblin{width:315px;height:315px;bottom:-33px}}
.guide-art>.character-weather{width:215px;height:215px;bottom:0}
.detail-art>.character-weather{width:325px;height:325px;bottom:0}
@media(max-width:650px){.guide-art>.character-weather{width:230px;height:230px}.detail-art>.character-weather{width:250px;height:250px}}
@media(max-width:350px){.guide-art>.character-weather{width:210px;height:210px}.detail-art>.character-weather{width:225px;height:225px}}