*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{margin:0;min-height:100vh;background-color:var(--color-page);background-image:url(/images/hero-comic-bg.webp);background-repeat:no-repeat;background-position:top;background-size:cover;background-attachment:fixed;color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-body);line-height:var(--leading-body);overflow-x:hidden}html[lang=th] body{line-height:var(--leading-body-th);letter-spacing:var(--tracking-th)}iframe,img,svg,video{max-width:100%}img,svg,video{height:auto}h1,h2,h3,h4{margin:0 0 var(--space-3);font-family:var(--font-display);font-weight:400;line-height:var(--leading-heading);color:var(--color-ink)}html[lang=th] h1,html[lang=th] h2,html[lang=th] h3,html[lang=th] h4{line-height:var(--leading-display-th);text-transform:none;letter-spacing:var(--tracking-th)}p{margin:0 0 var(--space-4)}a{color:var(--color-red-deep);text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit;color:inherit}:focus-visible{outline:none;box-shadow:var(--ring-focus)}.wrap{width:100%;max-width:var(--content-max);margin:0 auto;padding-inline:var(--gutter)}.wrap-play{max-width:var(--content-max-play)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.skip{position:absolute;left:var(--space-2);top:calc(-1 * var(--space-16));z-index:var(--z-toast);padding:var(--space-3) var(--space-5);background:var(--color-yellow);color:var(--color-ink);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-4);font-family:var(--font-display);transition:top var(--motion-hover) var(--ease-out)}.skip:focus{top:var(--space-2)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);min-height:var(--tap-min);padding:var(--space-2) var(--space-5);color:var(--color-ink);background:var(--color-yellow);font-family:var(--font-display);font-size:var(--text-body);line-height:1.15;letter-spacing:.05em;text-align:center;text-decoration:none;border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-4);cursor:pointer;transition:transform var(--motion-hover) var(--ease-out),box-shadow var(--motion-hover) var(--ease-out),background-color var(--motion-hover) var(--ease-out)}html[lang=th] .btn{letter-spacing:var(--tracking-th);font-size:var(--text-sm)}.btn:hover{text-decoration:none;transform:translate(var(--lift-hover),var(--lift-hover-y));box-shadow:var(--shadow-hard-9-11)}.btn:active{transform:translate(var(--press-sm),var(--press-sm));box-shadow:var(--shadow-hard-1)}.btn.big{min-height:56px;font-size:var(--text-h3);padding:var(--space-3) var(--space-6)}.btn.xl{min-height:66px;padding:var(--space-3) var(--space-8) var(--space-2);font-size:clamp(1.5rem,1rem + 1.6vw,2rem);border-width:var(--border-5);box-shadow:var(--shadow-hard-8)}.btn.xl:hover{box-shadow:var(--shadow-hard-12)}.btn.xl:active{transform:translate(var(--press-lg),var(--press-lg));box-shadow:var(--shadow-hard-2)}.btn.block{display:flex;width:100%}.btn>svg{flex:none}.btn.t-gold{color:var(--color-ink);background:var(--color-yellow)}.btn.t-gold:hover,.btn.t-red{color:var(--color-white);background:var(--color-red-deep)}.btn.t-red:hover{color:var(--color-yellow);background:var(--color-ink)}.btn.t-ink{color:var(--color-white);background:var(--color-ink)}.btn.t-ink:hover{color:var(--color-white);background:var(--color-red-deep)}.btn.t-outline{color:var(--color-ink);background:var(--color-surface)}.btn.t-outline:hover{color:var(--color-ink);background:var(--color-yellow)}.btn.t-ghost{color:var(--color-ink);background:var(--color-panel);border-color:transparent;box-shadow:none}.btn.t-ghost:hover{color:var(--color-ink);background:var(--color-yellow);border-color:var(--color-ink);box-shadow:var(--shadow-hard-3)}.btn:disabled,.btn[aria-disabled=true]{background:var(--color-disabled);color:var(--color-white);box-shadow:none;cursor:not-allowed;transform:none}.icon-btn{display:inline-grid;place-items:center;width:var(--tap-min);height:var(--tap-min);background:var(--color-surface);color:var(--color-ink);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-3);cursor:pointer;transition:transform var(--motion-hover) var(--ease-out),background-color var(--motion-hover) var(--ease-out)}.icon-btn:hover{background:var(--color-yellow)}.icon-btn:active{transform:translate(var(--press-sm),var(--press-sm));box-shadow:var(--shadow-hard-1)}.ic-k{fill:var(--color-ink)}.ic-w{fill:var(--color-white)}.ic-y{fill:var(--color-yellow)}.ic-r{fill:var(--color-red)}.ic-b{fill:var(--color-blue)}.ic-g{fill:var(--color-green)}.ic-line{stroke:var(--color-ink)}.hdr-wrap{position:sticky;top:0;z-index:var(--z-sticky);background:var(--color-panel);border-bottom:var(--border-4) solid var(--color-ink)}.hdr{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;width:100%;max-width:var(--content-max);margin:0 auto;padding:var(--space-3) var(--gutter)}.hdr-wrap.play .hdr{max-width:var(--content-max-play);gap:var(--space-4)}.mark{flex:none;display:block;transform:rotate(var(--tilt-logo))}.mark,.mark:hover{text-decoration:none}.plate-body,.plate-top{display:block}.plate-top{font-size:2rem;line-height:.86;letter-spacing:var(--tracking-display);color:var(--color-yellow);-webkit-text-stroke:5px var(--color-ink);paint-order:stroke}.plate-bottom,.plate-top{font-family:var(--font-display)}.plate-bottom{display:inline-block;font-size:1.4375rem;line-height:1;letter-spacing:var(--tracking-nav);color:var(--color-white);background:var(--color-ink);padding:1px var(--space-2)}.hdr-wrap.play .plate-top{font-size:1.875rem}.hdr-wrap.play .plate-bottom{font-size:1.25rem}.site-footer .plate-top{font-size:1.75rem;-webkit-text-stroke:0}.site-footer .plate-bottom{font-size:1.25rem;color:var(--color-ink);background:var(--color-yellow);padding:1px var(--space-2)}.hdr-nav{display:flex;align-items:center;gap:var(--space-1);flex-wrap:wrap;margin-left:var(--space-1)}.hdr-nav .btn{min-height:var(--tap-min);padding:var(--space-2) var(--space-4);font-family:var(--font-body);font-weight:var(--weight-black);font-size:var(--text-body);letter-spacing:var(--tracking-nav);text-transform:uppercase;border-width:var(--border-3)}html[lang=th] .hdr-nav .btn{font-family:var(--font-body);font-size:var(--text-sm);text-transform:none;letter-spacing:var(--tracking-th)}.hdr-nav .btn.t-outline{padding:var(--space-2) var(--space-5);box-shadow:var(--shadow-hard-3)}.hdr-nav .btn:hover{transform:none}.hdr-end{gap:var(--space-3);margin-left:auto}.hdr-end,.hdr-search{display:flex;align-items:center}.hdr-search{gap:var(--space-2);background:var(--color-surface);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-4);padding:var(--space-1) var(--space-2) var(--space-1) var(--space-4)}.hdr-search .field{display:flex;align-items:center}.hdr-search input{width:170px;min-height:36px;border:0;outline:0;background:transparent;color:var(--color-ink);font-size:var(--text-body);font-weight:var(--weight-bold)}.hdr-search input::placeholder{color:var(--color-ink-soft)}.hdr-search-go{display:grid;place-items:center;width:36px;height:36px;border:0;background:transparent;color:var(--color-ink);cursor:pointer;border-radius:var(--radius-pill)}.hdr-search:focus-within{box-shadow:var(--ring-focus)}.hdr-search-sm{display:none}.lang{display:flex;align-items:stretch;border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-4);background:var(--color-surface);overflow:hidden}.lang-link{display:grid;place-items:center;min-height:40px;padding:var(--space-2) var(--space-3);font-family:var(--font-display);font-size:1.0625rem;color:var(--color-ink);background:var(--color-surface);text-decoration:none}.lang-link:hover{text-decoration:none;background:var(--color-yellow)}.lang-link+.lang-link{border-left:var(--border-3) solid var(--color-ink)}.lang-link[aria-current=true]{background:var(--color-yellow)}.avatar{display:grid;place-items:center;flex:none;width:52px;height:52px;padding:0;overflow:hidden;background:var(--color-yellow);color:var(--color-ink);border:var(--border-4) solid var(--color-ink);border-radius:50%;box-shadow:var(--shadow-hard-4);cursor:pointer;transition:transform var(--motion-hover) var(--ease-out),box-shadow var(--motion-hover) var(--ease-out)}.avatar:hover{transform:rotate(-8deg)}.avatar:active{transform:translate(var(--press-sm),var(--press-sm));box-shadow:var(--shadow-hard-1)}.avatar-face{display:block;width:42px;height:42px}@media (max-width:767px){.avatar-face{width:34px;height:34px}}.drawer-toggle{display:none;position:relative}.drawer-toggle>summary{display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);list-style:none;background:var(--color-surface);color:var(--color-ink);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-3);cursor:pointer}.drawer-toggle>summary::-webkit-details-marker{display:none}.drawer-panel{position:absolute;right:0;top:calc(100% + var(--space-2));z-index:var(--z-overlay);display:grid;gap:var(--space-1);min-width:220px;padding:var(--space-3);background:var(--color-surface);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-md);box-shadow:var(--shadow-hard-6)}.drawer-link{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min);padding:var(--space-2) var(--space-3);color:var(--color-ink);font-weight:var(--weight-black);border:var(--border-3) solid transparent;border-radius:var(--radius-sm)}.drawer-link:hover,.drawer-link[aria-current=page]{text-decoration:none;background:var(--color-yellow);border-color:var(--color-ink)}.hero{position:relative;background-color:var(--color-page);background-repeat:no-repeat;background-position:100% 100%;background-size:auto 100%}.hero.art{background-image:linear-gradient(100deg,var(--color-page) 0 30%,color-mix(in srgb,var(--color-page),transparent 100%) 58%),url(/images/hero-monsters.webp);background-position:50%,100% 100%;background-size:cover,auto 100%}.hero-inner{display:flex;align-items:center;position:relative;min-height:clamp(370px,29vw,470px);padding-block:var(--space-8) clamp(2.125rem,26vw,2.375rem)}.hero-plate{position:relative;z-index:var(--z-raised);max-width:min(94%,540px);padding:var(--space-1) var(--space-3);margin:calc(-1 * var(--space-1)) calc(-1 * var(--space-3));border-radius:var(--radius-2xl);background:color-mix(in srgb,var(--color-page) 90%,transparent)}.hero-plate h1{margin:0;font-size:var(--text-display);line-height:var(--leading-display);text-shadow:4px 4px 0 color-mix(in srgb,var(--color-ink) 18%,transparent)}html[lang=th] .hero-plate h1{line-height:var(--leading-display-th)}.hero-line1,.hero-line2{display:block}.hero-line2{color:var(--color-red);-webkit-text-stroke:4px var(--color-ink);paint-order:stroke}.hero-tagline{max-width:26ch;margin:var(--space-4) 0 var(--space-6);font-size:var(--text-lead);font-weight:var(--weight-bold);line-height:var(--leading-body);text-wrap:pretty}html[lang=th] .hero-tagline{max-width:30ch;font-size:var(--text-lead-th);line-height:var(--leading-body-th)}.hero-cta{display:flex;flex-wrap:wrap;gap:var(--space-4)}.tilegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:var(--space-3);padding-top:var(--space-5)}.tile{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-4) var(--space-2) var(--space-3);color:var(--color-ink);background:var(--color-surface);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-md);box-shadow:var(--shadow-hard-5);text-decoration:none;transition:transform var(--motion-hover) var(--ease-out),box-shadow var(--motion-hover) var(--ease-out),background-color var(--motion-hover) var(--ease-out)}.tile.on,.tile:hover{background:var(--color-yellow)}.tile:hover{text-decoration:none;transform:translate(var(--lift-hover),var(--lift-hover-y));box-shadow:var(--shadow-hard-9-11)}.tile:active{transform:translate(var(--press-sm),var(--press-sm));box-shadow:var(--shadow-hard-1)}.tile-icon{display:block;width:46px;height:46px}.tile-name{display:block;font-family:var(--font-display);font-size:1.1875rem;letter-spacing:var(--tracking-display);text-align:center}html[lang=th] .tile-name{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-bold);letter-spacing:var(--tracking-th)}.tile-count{display:block;font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--color-ink-soft)}.tile-glyph,.tile.on .tile-count,.tile:hover .tile-count{color:var(--color-ink)}.tile-glyph{display:block;width:46px;height:46px}.tile-glyph svg{width:100%;height:100%}.band{padding-top:var(--space-10)}.sech{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)}.sech h1,.sech h2{margin:0;font-size:var(--text-h2);border-bottom:6px solid var(--color-red);padding-bottom:2px}html[lang=th] .sech h1,html[lang=th] .sech h2{font-size:calc(var(--text-h2) * .72);font-family:var(--font-body);font-weight:var(--weight-black)}.sech .btn{margin-left:auto}.sech p{margin:var(--space-2) 0 0;flex-basis:100%;color:var(--color-ink-soft)}.pagehead{padding-top:var(--space-8)}.pagehead h1{margin:0;font-size:var(--text-h2);border-bottom:6px solid var(--color-red);padding-bottom:2px;display:inline-block}.pagehead p{max-width:62ch;margin:var(--space-4) 0 0;color:var(--color-ink-soft)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);padding:0;margin:0;list-style:none}.card{position:relative;display:flex;flex-direction:column;background:var(--color-surface);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard-6);overflow:hidden;transition:transform var(--motion-hover) var(--ease-out),box-shadow var(--motion-hover) var(--ease-out)}.card:hover{transform:translate(var(--lift-hover),-5px);box-shadow:var(--shadow-hard-9-11)}.cover{position:relative;aspect-ratio:5/4;border-bottom:var(--border-4) solid var(--color-ink);background:var(--color-thumb-sky);overflow:hidden}.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.poster-fallback{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:clamp(2rem,8vw,3rem);color:var(--color-ink);background:var(--color-thumb-sand)}.badge.fresh{left:-4px;top:var(--space-3);padding:2px var(--space-3);font-size:1.0625rem;color:var(--color-white);background:var(--color-red-deep);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-pill);transform:rotate(var(--tilt-badge))}.badge.fresh,.rank{position:absolute;z-index:var(--z-raised);font-family:var(--font-display);box-shadow:var(--shadow-hard-3)}.rank{right:var(--space-2);top:var(--space-2);display:grid;place-items:center;min-width:34px;height:34px;padding-inline:var(--space-1);color:var(--color-ink);background:var(--color-yellow);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-pill)}.heart-slot{position:absolute;right:var(--space-2);bottom:var(--space-2);z-index:var(--z-raised)}.heart{display:grid;place-items:center;width:40px;height:40px;font-size:1.25rem;line-height:1;color:var(--color-ink);background:var(--color-surface);border:var(--border-3) solid var(--color-ink);border-radius:50%;box-shadow:var(--shadow-hard-3);cursor:pointer}.heart[aria-pressed=true]{color:var(--color-white);background:var(--color-red-deep)}.heart:active{transform:translate(2px,2px);box-shadow:var(--shadow-hard-1)}.card>h3{margin:0;padding:var(--space-3) var(--space-4) 0;font-size:var(--text-h3);line-height:var(--leading-heading);letter-spacing:.03em}html[lang=th] .card>h3{letter-spacing:var(--tracking-th);line-height:var(--leading-display-th)}.title-link{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--color-ink)}.title-link:after{content:"";position:absolute;inset:0}.title-link:hover{text-decoration:none;color:var(--color-red-deep)}.card-meta{margin:var(--space-2) 0 0;padding:0 var(--space-4) var(--space-4);font-weight:var(--weight-bold)}.card-meta,.when{font-size:var(--text-label);color:var(--color-ink-soft)}.when{margin:var(--space-1) 0 0;padding:0 var(--space-4)}.promo{position:relative;display:flex;align-items:center;justify-content:center;min-height:clamp(190px,17vw,260px);margin-top:var(--space-8);padding:var(--space-6) 6%;background:var(--color-yellow);border:var(--border-5) solid var(--color-ink);border-radius:var(--radius-xl);box-shadow:var(--shadow-hard-9);overflow:hidden}.promo.art{background-image:url(/images/comics-banner-bg.webp);background-position:50%;background-size:cover;background-repeat:no-repeat}.promo-inner{position:relative;max-width:34ch;text-align:center}.promo-inner h2{margin:0;font-size:clamp(1.875rem,1.2rem + 3.8vw,2.875rem);line-height:.96;text-wrap:balance;color:var(--color-red);-webkit-text-stroke:5px var(--color-ink);paint-order:stroke;text-shadow:4px 4px 0 color-mix(in srgb,var(--color-ink) 25%,transparent)}html[lang=th] .promo-inner h2{line-height:var(--leading-display-th)}.promo-inner p{max-width:28ch;margin:var(--space-3) auto var(--space-5);font-size:var(--text-lead-th);font-weight:var(--weight-bold);line-height:1.3;text-wrap:pretty}html[lang=th] .promo-inner p{line-height:var(--leading-body-th)}.featgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5);padding:0;margin:0;list-style:none}.featitem:last-child:nth-child(odd){grid-column:1/-1}.featlink{display:flex;flex-direction:column;align-items:center;padding:var(--space-2);color:var(--color-ink);text-decoration:none;border-radius:var(--radius-md)}.feat-art{display:block;width:100%;max-width:168px;aspect-ratio:1;transition:transform var(--motion-hover) var(--ease-out)}.feat-art img{width:100%;height:100%;object-fit:contain}.featitem:nth-child(odd) .featlink:hover .feat-art{transform:rotate(-7deg) scale(1.05)}.featitem:nth-child(2n) .featlink:hover .feat-art{transform:rotate(7deg) scale(1.05)}.featlink:active .feat-art{transform:scale(.97)}.featname{display:block;margin-top:var(--space-2);font-family:var(--font-display);font-size:1.375rem;letter-spacing:var(--tracking-display);text-align:center}html[lang=th] .featname{font-family:var(--font-body);font-weight:var(--weight-bold);font-size:1.125rem;letter-spacing:var(--tracking-th)}.featcount{display:block;margin-top:2px;font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--color-ink-soft)}.featlink:hover .featname{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}.featlink:hover .featcount{color:var(--color-ink)}.topgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-5);padding:0;margin:0;list-style:none}.topitem{text-align:center}.topcircle{position:relative;display:grid;place-items:center;width:124px;height:124px;margin:0 auto;overflow:hidden;background:var(--color-thumb-sky);border:var(--border-5) solid var(--color-ink);border-radius:50%;box-shadow:var(--shadow-hard-5);transition:transform var(--motion-hover) var(--ease-out)}.topitem:nth-child(2n) .topcircle:hover{transform:rotate(7deg)}.topitem:nth-child(odd) .topcircle:hover{transform:rotate(-7deg)}.topcircle img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.topname{display:block;margin-top:var(--space-3);font-family:var(--font-display);font-size:1.375rem;letter-spacing:var(--tracking-display);color:var(--color-ink)}html[lang=th] .topname{font-family:var(--font-body);font-weight:var(--weight-bold);font-size:1.125rem;letter-spacing:var(--tracking-th)}.topwhen{margin:2px 0 0;font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--color-ink-soft)}.play-body{min-height:100vh;background-color:var(--color-page);background-image:radial-gradient(color-mix(in srgb,var(--color-ink) 8%,transparent) 1px,transparent 1.1px);background-size:7px 7px}.play-main{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-start;padding-block:var(--space-6) var(--space-10)}.play-col{flex:1 1 520px;min-width:0}.play-side{flex:1 1 300px;display:flex;flex-direction:column;gap:var(--space-5);min-width:0}.gamehead{display:flex;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}.game-title{margin:0;font-size:var(--text-h1);line-height:.95;color:var(--color-red);-webkit-text-stroke:var(--border-4) var(--color-ink);paint-order:stroke}html[lang=th] .game-title{line-height:var(--leading-display-th)}.game-lede{max-width:34ch;margin:0 0 6px;font-size:var(--text-body);font-weight:var(--weight-bold)}.game-tag{font-size:var(--text-sm);font-weight:var(--weight-black);background:var(--color-yellow)}.game-tag,.hdr-tag{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;padding:var(--space-1) var(--space-3);color:var(--color-ink);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-3)}.hdr-tag{font-family:var(--font-display);font-size:1.1875rem;background:var(--color-green)}html[lang=th] .hdr-tag{font-weight:var(--weight-bold)}.hdr-back,html[lang=th] .hdr-tag{font-family:var(--font-body);font-size:var(--text-sm)}.hdr-back{font-weight:var(--weight-black);letter-spacing:.05em;text-transform:uppercase;border-width:var(--border-3);box-shadow:var(--shadow-hard-3)}.hdr-back small,html[lang=th] .hdr-back{text-transform:none;letter-spacing:var(--tracking-th)}.hdr-back small{font-size:.75rem;font-weight:var(--weight-body)}.shell{background:var(--color-surface);border:var(--border-5) solid var(--color-ink);border-radius:var(--radius-2xl);box-shadow:var(--shadow-hard-9);overflow:hidden}.shell-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-3) var(--space-4);background:var(--color-yellow);border-bottom:var(--border-4) solid var(--color-ink)}.shell-name{flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--font-display);font-size:1.5rem;color:var(--color-ink)}html[lang=th] .shell-name{font-family:var(--font-body);font-weight:var(--weight-black);font-size:var(--text-lead-th)}.shell-bar .btn{margin-left:auto}.shell-bar .heart{background:var(--color-surface)}.shell-stage{position:relative;padding:var(--space-5);background:linear-gradient(var(--color-thumb-sky) 0 46%,var(--color-thumb-ground) 46%)}.stage-slot{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:4/3}.stage-slot>.front,.stage-slot>iframe{position:absolute;inset:0;display:block;width:100%;height:100%;background:var(--color-surface);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-lg);overflow:hidden}.stage-slot>.front{z-index:var(--z-raised);display:grid;place-items:center;align-content:center;gap:var(--space-3);padding:var(--space-5);overflow:auto;text-align:center}.shell-stage .poster,.shell-stage .poster-card{max-width:200px;border-radius:var(--radius-md)}.muted-on-dark{color:var(--color-ink-soft)}.play-hint{display:block;width:fit-content;max-width:100%;margin:var(--space-4) auto 0;padding:var(--space-1) var(--space-4);font-size:var(--text-sm);font-weight:var(--weight-bold);text-align:center;color:var(--color-ink);background:var(--color-surface);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-3)}.play-hint-ghost{visibility:hidden}.sidecard{padding:var(--space-4) var(--space-5);background:var(--color-surface);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard-6)}.sidecard h2{margin:0;font-size:1.5rem}.siderows{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);padding:0;list-style:none}.siderow{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);color:var(--color-ink);font-weight:var(--weight-black);font-size:var(--text-body);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-sm);box-shadow:var(--shadow-hard-3);background:var(--color-surface)}.siderow:hover{text-decoration:none;background:var(--color-yellow)}.siderow-dot{position:relative;flex:none;width:34px;height:34px;overflow:hidden;background:var(--color-thumb-sky);border:var(--border-3) solid var(--color-ink);border-radius:50%}.siderow-dot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.siderow b{margin-left:auto;font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--color-ink-soft)}.crumb{padding-top:var(--space-5);margin-bottom:var(--space-5)}.crumb ol{display:flex;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-size:var(--text-label);font-weight:var(--weight-bold)}.crumb li,.crumb ol{gap:var(--space-2);align-items:center}.crumb li{display:inline-flex}.crumb [aria-current=page],.crumb a{display:inline-block;padding:2px var(--space-3);border:var(--border-2) solid var(--color-ink);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-ink)}.crumb [aria-current=page]{background:var(--color-yellow)}.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:var(--space-5) 0}.filterbar .field{display:inline-flex;align-items:center}.filterbar input,.filterbar select{min-height:var(--tap-min);padding:var(--space-2) var(--space-4);font-weight:var(--weight-bold);color:var(--color-ink);background:var(--color-surface);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-3)}.pills{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:var(--space-4) 0;padding:0;list-style:none}.catgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--space-3)}.cathero{display:flex;align-items:center;gap:var(--space-4);min-height:140px;margin-top:var(--space-5);padding:var(--space-5);background:var(--color-yellow);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard-6)}.cathero h1{margin:0;font-size:var(--text-h2)}.cathero p{margin:var(--space-1) 0 0;font-weight:var(--weight-bold)}.setgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-5);padding:0;margin:0;list-style:none}.setcard{padding:var(--space-5);background:var(--color-purple);border:var(--border-5) solid var(--color-ink);border-radius:var(--radius-xl);box-shadow:var(--shadow-hard-9)}.setcard h2{margin:0 0 var(--space-2);font-size:var(--text-h3)}.criteria{display:block;margin:var(--space-4) 0;padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-ink);background:var(--color-yellow);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-2xl);box-shadow:var(--shadow-hard-3)}.toprows{display:grid;gap:var(--space-4);padding:0;margin:0;list-style:none}.toprows>li{display:flex;align-items:center;gap:var(--space-4)}.rank-num{display:grid;place-items:center;flex:none;width:34px;height:34px;font-family:var(--font-display);color:var(--color-ink);background:var(--color-yellow);border:var(--border-3) solid var(--color-ink);border-radius:50%;box-shadow:var(--shadow-hard-3)}.toprows .card{flex:1 1 auto;min-width:0}.catlinks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-4) 0;padding:0;list-style:none}.catlinks a,.catlinks strong{display:inline-block;padding:var(--space-1) var(--space-3);font-size:var(--text-label);font-weight:var(--weight-bold);color:var(--color-ink);background:var(--color-surface);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-pill);box-shadow:var(--shadow-hard-3)}.catlinks a:hover{text-decoration:none;background:var(--color-yellow)}.doc{max-width:720px;margin:var(--space-6) auto var(--space-10);padding:var(--space-6) var(--space-8) var(--space-8);background:var(--color-surface);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard-6)}.doc>h1{margin:0 0 var(--space-2);font-size:var(--text-h2);border-bottom:6px solid var(--color-red);padding-bottom:2px;display:inline-block}.doc .when{padding:0;margin:0 0 var(--space-6)}.doc .prose>h1:first-child,.doc .prose>h2:first-child{display:none}.prose{max-width:68ch}.prose h2{margin-top:var(--space-8);font-size:var(--text-h3)}.prose h3{margin-top:var(--space-6);font-size:var(--text-lead-th)}.prose ol,.prose ul{padding-left:var(--space-6)}.prose li{margin-bottom:var(--space-2)}.prose a{text-decoration:underline}.site-footer{margin-top:var(--space-8);padding:var(--space-6) 0;background:var(--color-ink);color:var(--color-white)}.ft-row{align-items:center}.ft-links,.ft-row{display:flex;gap:var(--space-6);flex-wrap:wrap}.ft-links{margin:0 0 0 var(--space-4);padding:0;list-style:none}.ft-links a{color:var(--color-white);font-weight:var(--weight-black);font-size:var(--text-sm);letter-spacing:.07em;text-transform:uppercase}html[lang=th] .ft-links a{font-weight:var(--weight-bold);text-transform:none;letter-spacing:var(--tracking-th)}.ft-links a:hover{color:var(--color-yellow)}.ft-extra{display:flex;align-items:flex-start;gap:var(--space-5);flex-wrap:wrap;margin-top:var(--space-5)}.ft-extra p{flex:1 1 320px;margin:0;font-size:var(--text-sm);color:var(--color-on-ink-muted)}.ft-top{flex:none;color:var(--color-white);background:transparent;border-color:var(--color-white);box-shadow:none}.ft-top:hover{color:var(--color-ink);background:var(--color-yellow);border-color:var(--color-yellow)}.ft-top:focus-visible{box-shadow:var(--ring-focus-dark)}.ft-base{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-5);align-items:center;margin-top:var(--space-4);padding-top:var(--space-3);border-top:var(--border-2) solid var(--color-rule-dark);font-size:var(--text-copyright);font-weight:var(--weight-bold);color:var(--color-on-ink-muted)}.ft-base p{margin:0}.ft-base a{color:var(--color-on-ink-muted)}.ft-base a:hover{color:var(--color-yellow)}.site-footer.slim{padding:var(--space-5) 0}.site-footer.slim .ft-base{margin-top:0;padding-top:0;border-top:0}.to-top{position:fixed;right:var(--space-4);bottom:calc(var(--space-4) + env(safe-area-inset-bottom, 0px));z-index:var(--z-overlay);border-width:var(--border-4);box-shadow:var(--shadow-hard-4)}.notice,.to-top{background:var(--color-yellow)}.notice{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-5) 0;padding:var(--space-3) var(--space-5);font-weight:var(--weight-bold);color:var(--color-ink);border:var(--border-3) solid var(--color-ink);border-radius:var(--radius-md);box-shadow:var(--shadow-hard-3)}.empty{display:grid;justify-items:center;gap:var(--space-3);margin:var(--space-8) auto;padding:var(--space-8) var(--space-5);max-width:520px;text-align:center;background:var(--color-surface);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-lg);box-shadow:var(--shadow-hard-6)}.empty .glyph{display:grid;place-items:center;width:96px;height:96px;color:var(--color-ink);background:var(--color-yellow);border:var(--border-4) solid var(--color-ink);border-radius:50%;box-shadow:var(--shadow-hard-4)}.empty h1,.empty h2{margin:0;font-size:var(--text-h3)}.empty p{margin:0;color:var(--color-ink-soft)}.skeleton{background:var(--color-panel);border:var(--border-4) solid var(--color-ink);border-radius:var(--radius-md);animation:goz-pulse 1.5s ease-in-out infinite}@keyframes goz-pulse{0%,to{background-color:var(--color-panel)}50%{background-color:var(--color-surface)}}.goz-anim-bob{animation:goz-bob var(--motion-bob) ease-in-out infinite}.goz-anim-twinkle{animation:goz-twinkle var(--motion-twinkle) ease-in-out infinite}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skeleton{animation:none}.avatar:hover,.btn:hover,.card:hover,.sech-mascots:hover .mascot-left,.sech-mascots:hover .mascot-right,.tile:hover,.topcircle:hover{transform:none}}@media (max-width:767px){.hdr-nav,.hdr-search{display:none}.hdr-search-sm{display:inline-grid}.drawer-toggle{display:block}.plate-top{font-size:1.625rem;-webkit-text-stroke-width:4px}.plate-bottom{font-size:1.125rem}.avatar{width:var(--tap-min);height:var(--tap-min)}.hero.art{background-image:linear-gradient(var(--color-page) 0 55%,color-mix(in srgb,var(--color-page),transparent 100%) 78%),url(/images/hero-monsters.webp);background-position:50%,bottom;background-size:cover,100% auto;padding-bottom:38vw}.hero-inner{min-height:0;padding-block:var(--space-6) var(--space-6)}.tilegrid{grid-template-columns:repeat(2,minmax(0,1fr))}.ft-links{margin-left:0;gap:var(--space-4)}}@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (min-width:768px){.tilegrid{grid-template-columns:repeat(4,minmax(0,1fr))}.featgrid{grid-template-columns:repeat(3,minmax(0,1fr))}.featitem:last-child:nth-child(odd){grid-column:auto}}@media (min-width:1024px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tilegrid{grid-template-columns:repeat(7,minmax(0,1fr))}.featgrid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media (min-width:1280px){.grid{grid-template-columns:repeat(5,minmax(0,1fr))}}