/* PATCH NOT FOUND — menu / button system (owner: typography · TYPOGRAPHY.md §17 · behaviour js/menu_skin.js)
   User: "ปุ่มต่างๆ ไม่ได้ออกแบบมาเลย ให้เข้าธีม" → one PNF button language for the title, pause, mode pick and other DOM menus:
   skewed plates (the plate leans, the letters stand), red/black/ink, a checker-glitch accent, display font for the primary.
     .pnf-menu            vertical list
     .pnf-btn             a menu row: plate on ::before, red slash on ::after, ▶ cursor (.pnf-cur), icon (.pnf-ic), label (b) + subline (small)
     .pnf-btn.pnf-pri     the one big red action (เล่นต่อ / เริ่มเกมใหม่)
     .pnf-btn.pnf-sec     dark plate, red edge
     .pnf-chip            small status chip (online)  · .pnf-mini  small plate button
   Hover/focus: plate slides right, slash sweeps in, cursor shows. :focus-visible = keyboard/gamepad (white ring on the plate). Press: squash. */
:root{--pnf-red:#d0101e;--pnf-red2:#ff2e43;--pnf-ink:#0b0a0e;--pnf-ink2:#16131d;--pnf-paper:#f4efe6;--pnf-sk:-14deg}

.pnf-menu{display:flex;flex-direction:column;align-items:flex-start;gap:calc(var(--L) * 4);margin:calc(var(--L) * 8) 0 0;padding:0 0 0 calc(var(--L) * 10);list-style:none}
:root .pnf-btn{position:relative;isolation:isolate;display:flex;align-items:center;gap:calc(var(--L) * 6);min-height:44px;margin:0;padding:calc(var(--L) * 3) calc(var(--L) * 16) calc(var(--L) * 3) calc(var(--L) * 12);
  background:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;color:var(--pnf-paper);text-align:left;cursor:pointer;white-space:nowrap;
  transition:transform .14s cubic-bezier(.2,.9,.3,1.3),color .1s;-webkit-tap-highlight-color:transparent;outline:none}
.pnf-btn::before{content:"";position:absolute;inset:0;z-index:-2;transform:skewX(var(--pnf-sk));background:var(--pnf-ink);border-left:calc(var(--L) * 3) solid var(--pnf-red);box-shadow:calc(var(--L) * 3) calc(var(--L) * 3) 0 rgba(0,0,0,.55);transition:background .12s}
.pnf-btn::after{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--pnf-sk)) scaleX(0);transform-origin:left;background:linear-gradient(100deg,var(--pnf-red) 0 62%,transparent 62% 66%,var(--pnf-red) 66% 70%,transparent 70%);opacity:.95;transition:transform .16s ease-out}
.pnf-btn b{font:700 var(--t-md)/1.15 var(--f-ui);letter-spacing:.03em}
.pnf-btn small{display:block;font:600 var(--t-xs)/1.2 var(--f-ui);letter-spacing:.02em;opacity:.82}
.pnf-btn .pnf-tx{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pnf-ic{width:calc(var(--L) * 16);height:calc(var(--L) * 16);flex:none;display:grid;place-items:center}
.pnf-ic img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(1px 1px 0 #000)}
.pnf-cur{position:absolute;left:calc(var(--L) * -10);top:50%;transform:translate(-6px,-50%);opacity:0;color:var(--pnf-red2);font:400 var(--t-sm)/1 var(--f-display);transition:opacity .12s,transform .14s;text-shadow:1px 1px 0 #000}
.pnf-btn:hover,.pnf-btn:focus-visible,.pnf-btn.pnf-sel{transform:translateX(calc(var(--L) * 6))}
.pnf-btn:hover::after,.pnf-btn:focus-visible::after,.pnf-btn.pnf-sel::after{transform:skewX(var(--pnf-sk)) scaleX(1)}
.pnf-btn:hover .pnf-cur,.pnf-btn:focus-visible .pnf-cur,.pnf-btn.pnf-sel .pnf-cur{opacity:1;transform:translate(0,-50%)}
.pnf-btn:focus-visible::before{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--pnf-ink),calc(var(--L) * 3) calc(var(--L) * 3) 0 rgba(0,0,0,.55)}
.pnf-btn:active,.pnf-btn.pnf-press{transform:translateX(calc(var(--L) * 6)) scale(.96,.9)}
.pnf-btn[disabled]{opacity:.45;cursor:default}

/* primary: big red plate, display font, subline inside */
:root .pnf-btn.pnf-pri{min-height:calc(var(--L) * 30);padding:calc(var(--L) * 4) calc(var(--L) * 26) calc(var(--L) * 4) calc(var(--L) * 16);margin-bottom:calc(var(--L) * 4)}
.pnf-pri::before{background:var(--pnf-red);border-left:0;box-shadow:calc(var(--L) * 4) calc(var(--L) * 4) 0 #000,inset 0 0 0 2px rgba(255,255,255,.12)}
.pnf-pri::after{background:linear-gradient(100deg,#fff 0 3%,transparent 3% 5%,#fff 5% 6%,transparent 6%);opacity:.9}
.pnf-pri b{font:400 var(--t-x2)/1 var(--f-display);letter-spacing:.04em;text-shadow:2px 2px 0 rgba(0,0,0,.45)}
.pnf-pri small{font-size:var(--t-xs);opacity:.92;margin-top:calc(var(--L) * 1)}
.pnf-pri .pnf-glitch{position:absolute;right:calc(var(--L) * -4);top:calc(var(--L) * -4);width:calc(var(--L) * 14);height:calc(var(--L) * 14);z-index:1;transform:skewX(var(--pnf-sk));
  background:repeating-conic-gradient(#fff 0 25%,var(--pnf-ink) 0 50%) 0 0/calc(var(--L) * 4.6) calc(var(--L) * 4.6);box-shadow:2px 2px 0 #000}
.pnf-pri:hover::before,.pnf-pri:focus-visible::before{background:var(--pnf-red2)}

/* entrance: plates slide in staggered; respects reduce motion (OS setting or the game's reduce-flash) */
@keyframes pnfIn{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
.pnf-enter .pnf-btn{animation:pnfIn .32s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(var(--i,0) * 60ms + 120ms)}
@keyframes pnfGlitch{0%,100%{transform:none;filter:none;opacity:1}12%{transform:translate(-4px,1px) skewX(-8deg);filter:hue-rotate(40deg) saturate(2)}18%{transform:translate(5px,-2px);opacity:.6}24%{transform:none;opacity:1;filter:none}30%{clip-path:inset(30% 0 40% 0);transform:translateX(-6px)}36%{clip-path:none;transform:none}}
.pnf-enter .ob-logo-title{animation:pnfGlitch .7s steps(1,end) .1s 1}
@media (prefers-reduced-motion:reduce){.pnf-enter .pnf-btn,.pnf-enter .ob-logo-title{animation:none}.pnf-btn{transition:none}}
:root[data-rf] .pnf-enter .pnf-btn,:root[data-rf] .pnf-enter .ob-logo-title{animation:none}

/* online chip (corner) + small plate */
.pnf-net{position:absolute;right:max(calc(var(--L) * 10),env(safe-area-inset-right,0px));bottom:max(calc(var(--L) * 8),env(safe-area-inset-bottom,0px));z-index:3;display:flex;align-items:center;gap:calc(var(--L) * 5)}
:root .pnf-chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:calc(var(--L) * 4);min-height:36px;padding:2px calc(var(--L) * 10);background:none;border:0;color:var(--pnf-paper);font:600 var(--t-xs)/1.2 var(--f-ui);white-space:nowrap;cursor:default}
.pnf-chip::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--pnf-sk));background:rgba(8,6,12,.82);border:1px solid rgba(244,239,230,.25)}
button.pnf-chip{cursor:pointer}button.pnf-chip:hover::before,button.pnf-chip:focus-visible::before{border-color:#fff}
.pnf-dot{width:.6em;height:.6em;border-radius:50%;background:#8a8494;box-shadow:0 0 0 2px rgba(0,0,0,.6)}
.pnf-chip.on .pnf-dot{background:#4dff8f;box-shadow:0 0 6px #4dff8f}.pnf-chip.warn .pnf-dot{background:#ffd23f}
.pnf-chip i{font-style:normal;color:#ffd23f}
:root .pnf-mini{position:relative;isolation:isolate;min-height:44px;padding:0 calc(var(--L) * 12);background:none!important;border:0!important;color:#fff;font:700 var(--t-sm)/1 var(--f-ui);white-space:nowrap;cursor:pointer;letter-spacing:.03em}
.pnf-mini::before{content:"";position:absolute;inset:4px 0;z-index:-1;transform:skewX(var(--pnf-sk));background:var(--pnf-red);box-shadow:2px 2px 0 #000}
.pnf-mini:hover::before,.pnf-mini:focus-visible::before{background:var(--pnf-red2);box-shadow:0 0 0 2px #fff,2px 2px 0 #000}
.pnf-pop{position:absolute;right:0;bottom:calc(100% + 6px);display:flex;flex-direction:column;gap:4px;padding:6px;background:rgba(8,6,12,.95);border:1px solid rgba(244,239,230,.3)}
.pnf-pop[hidden]{display:none}

/* ---- title layout ---- */
#ov-title.pnf-title .btns{display:none!important}
#ov-title.pnf-title .ovbox{display:flex;flex-direction:column;align-items:flex-start;padding-bottom:calc(var(--L) * 18)}
#ov-title.pnf-title .ovbox h2{font-size:var(--t-lg);line-height:1.3;max-width:34em}
#ov-title.pnf-title .ovbox>p{font-size:var(--t-xs);max-width:46em;opacity:.85}
#ov-title.pnf-title .obm-ver{position:absolute;left:calc(var(--L) * 14);bottom:calc(var(--L) * 5);margin:0;font:600 max(12px,var(--t-xs))/1 var(--f-ui);letter-spacing:.06em;opacity:.7;background:none;padding:0;max-width:calc(100% - 24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
@media (max-height:420px){#ov-title.pnf-title .obm-ver{left:max(10px,calc(var(--L) * 8));bottom:max(8px,calc(var(--L) * 2));max-width:46%}}
@media (max-height:520px){#ov-title.pnf-title .ovbox>p{display:none}#ov-title.pnf-title .ovbox h2{font-size:var(--t-sm);margin:0}
  #ov-title.pnf-title .ob-logo-title{width:min(150px,30%);margin-bottom:2px}.pnf-menu{margin-top:calc(var(--L) * 5)}}
@media (max-height:400px){#ov-title.pnf-title .ovbox h2{display:none}.pnf-menu{gap:3px}:root .pnf-btn.pnf-pri{min-height:calc(var(--L) * 26)}}

/* ---- other DOM menus wearing the same plates (pause top row, mode pick, confirm rows) ---- */
:root .pnf-row{display:flex;flex-wrap:wrap;gap:calc(var(--L) * 4) calc(var(--L) * 10);align-items:center}
:root .pnf-row>button:not(.pnf-btn){position:relative;isolation:isolate;min-height:44px;padding:0 calc(var(--L) * 12);background:none!important;border:0!important;border-radius:0;color:#fff;font:700 var(--t-sm)/1 var(--f-ui);white-space:nowrap;letter-spacing:.02em;transition:transform .12s}
:root .pnf-row>button:not(.pnf-btn)::before{content:"";position:absolute;inset:3px 0;z-index:-1;transform:skewX(var(--pnf-sk));background:var(--pnf-ink2);border-left:3px solid var(--pnf-red);box-shadow:2px 2px 0 rgba(0,0,0,.6)}
:root .pnf-row>button.primary::before{background:var(--pnf-red);border-left:0}
:root .pnf-row>button:not(.pnf-btn):hover,:root .pnf-row>button:not(.pnf-btn):focus-visible{transform:translateX(3px)}
:root .pnf-row>button:not(.pnf-btn):hover::before,:root .pnf-row>button:not(.pnf-btn):focus-visible::before{background:var(--pnf-red);box-shadow:0 0 0 2px #fff,2px 2px 0 #000}
:root .pnf-row>button:not(.pnf-btn):active{transform:translateX(3px) scale(.96,.9)}
:root .pnf-row>button[aria-pressed="true"]::before{background:var(--pnf-paper)}:root .pnf-row>button[aria-pressed="true"]{color:var(--pnf-ink)}

/* ---- js/online.js markup in the same language (account strip + login gate) ---- */
#obn-ttl.pnf-net{display:flex;align-items:center;gap:calc(var(--L) * 6);margin:0;flex-wrap:nowrap}
#obn-ttl.pnf-net .obn-st{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:36px;padding:2px calc(var(--L) * 10);color:var(--pnf-paper);font:600 var(--t-xs)/1.2 var(--f-ui);white-space:nowrap}
#obn-ttl.pnf-net .obn-st::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(var(--pnf-sk));background:rgba(8,6,12,.82);border:1px solid rgba(244,239,230,.25)}
#obn-ttl.pnf-net .obn-st::after{content:"";order:-1;width:.6em;height:.6em;margin-right:.5em;border-radius:50%;background:#4dff8f;box-shadow:0 0 6px #4dff8f}
:root #obn-ttl.pnf-net .obn-b{position:relative;isolation:isolate;min-height:44px!important;padding:0 calc(var(--L) * 12)!important;background:none!important;border:0!important;color:#fff;font:700 var(--t-sm)/1 var(--f-ui)!important;cursor:pointer}
#obn-ttl.pnf-net .obn-b::before{content:"";position:absolute;inset:4px 0;z-index:-1;transform:skewX(var(--pnf-sk));background:var(--pnf-red);box-shadow:2px 2px 0 #000}
#obn-ttl.pnf-net .obn-b:hover::before,#obn-ttl.pnf-net .obn-b:focus-visible::before{background:var(--pnf-red2);box-shadow:0 0 0 2px #fff,2px 2px 0 #000}
#obn-gate .obn-gbox h2{font:400 var(--t-x2)/1.15 var(--f-display);letter-spacing:.03em}
#obn-gate .obn-gbox p{font:500 var(--t-sm)/1.55 var(--f-ui)}
:root .pnf-btn:focus-visible,:root .pnf-row>button:focus-visible,:root .pnf-mini:focus-visible,:root .pnf-chip:focus-visible{outline:none!important} /* the ring is drawn on the slanted plate (::before) */

/* big monitors (responsive §16): the title panel grows with the screen so plates stay a comfortable size */
@media (min-width:1500px) and (min-height:900px){#ov-title.pnf-title .ovbox{zoom:1.25}}
/* new key art (art/ui/title_bg*.webp): Tawan fills the right ~40%, the left half is open sky — the panel is a left-anchored fade that stays out of him */
:root #ov-title.pnf-title .ovbox{max-width:min(44%,calc(44vw / var(--pz,1)))!important;background:linear-gradient(90deg,rgba(6,4,9,.82) 0,rgba(6,4,9,.7) 70%,rgba(6,4,9,0) 100%)!important;box-shadow:none!important;border-left:6px solid var(--pnf-red);padding-right:calc(var(--L) * 24)}
@media (min-width:1500px) and (min-height:900px){:root{--pz:1.25}}

/* login gate up: the title's own logo/tagline sit under the gate's translucent scrim and ghosted through — hide them (the gate has its own logo) */
html.obn-gated #ov-title .ovbox{visibility:hidden}

/* first paint (owner, reload flash): the legacy title (web-style buttons + tagline) must never paint before js/menu_skin.js has dressed it.
   menu_skin.js adds html.skin-ready once the kit menu exists. No legacy fallback is painted. */
html:not(.skin-ready) #ov-title{visibility:hidden}
html:not(.skin-ready) #ov-title .ovbox{visibility:hidden}

/* title / login gate (owner): no in-game HUD or dock over the title — the pause and AUTO buttons, touch pad, quick dock and toasts stay hidden until the player is in the lobby */
body:has(#ov-title:not([hidden])) :is(#m-pause,#hud-auto,#hud-auto-pop,#qm,#qm-toast,#touch,.rv2-hub-fly),
body:has(#obn-gate:not([hidden])) :is(#m-pause,#hud-auto,#hud-auto-pop,#qm,#qm-toast,#touch){display:none!important}