* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07070c; color: #eee; font-family: "Segoe UI", system-ui, sans-serif; }
body { background: radial-gradient(ellipse at top, #2a1030 0%, #07070c 60%); }
#app { max-width: 1000px; margin: 0 auto; padding: 16px; }
.hidden { display: none !important; }
.logo { font-family: Impact, "Arial Black", sans-serif; font-size: 72px; letter-spacing: 4px; text-align: center; margin: 10px 0 0;
  background: linear-gradient(#ffe27a, #ff7b00 55%, #9b1c00); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #000) drop-shadow(0 0 18px #ff5a0055); }
.logo span { display: block; font-size: 110px; line-height: .9; background: linear-gradient(#fff, #c9d6ff 40%, #3c55ff); -webkit-background-clip: text; background-clip: text; }
.tag { text-align: center; color: #b9a; margin-top: 4px; }
.panel { background: #14121cdd; border: 1px solid #3a2f48; border-radius: 10px; padding: 16px; margin: 14px auto; max-width: 640px; }
.panel h3 { margin: 0 0 10px; color: #ffcf6b; }
.panel h3 small { color: #888; font-weight: normal; font-size: 13px; }
label { display: block; margin-bottom: 12px; color: #ccc; }
input { background: #0c0b12; color: #fff; border: 1px solid #554; border-radius: 6px; padding: 10px; font-size: 16px; }
#name { width: 100%; margin-top: 6px; }
#joinCode { width: 110px; text-transform: uppercase; letter-spacing: 4px; text-align: center; font-weight: bold; }
.row { display: flex; gap: 10px; margin: 10px 0; }
.row .big { flex: 1; }
button { cursor: pointer; border: none; border-radius: 6px; padding: 10px 16px; font-weight: 700; font-size: 15px; color: #fff;
  background: linear-gradient(#ff8a1f, #c23b00); box-shadow: 0 3px 0 #5a1a00; }
button:hover { filter: brightness(1.15); }
button:disabled { filter: grayscale(1) brightness(.6); cursor: default; }
button.alt { background: linear-gradient(#5a78ff, #2733b8); box-shadow: 0 3px 0 #111a60; }
button.big { font-size: 18px; padding: 14px; text-transform: uppercase; letter-spacing: 1px; }
button.small { padding: 6px 10px; font-size: 13px; }
button.ghost { background: #2a2733; box-shadow: none; }
.err { color: #ff6b6b; min-height: 18px; }
.roomlist .room { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 6px; background: #1d1a27; margin-bottom: 6px; }
.roomlist .room b { letter-spacing: 3px; color: #ffcf6b; margin-right: 10px; }
.roomlist .empty { color: #777; }
.keys { display: flex; flex-wrap: wrap; gap: 8px 18px; }
kbd { display: inline-block; min-width: 24px; padding: 2px 6px; margin-right: 2px; border-radius: 4px; background: #2d2a38; border: 1px solid #555; border-bottom-width: 3px; font-size: 12px; text-align: center; }
.hint { color: #9a92a8; font-size: 13px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#selCode, #fCode { letter-spacing: 3px; color: #ffcf6b; }
h2 { text-align: center; font-family: Impact, "Arial Black", sans-serif; font-size: 44px; letter-spacing: 3px; margin: 12px 0; color: #ffcf6b; text-shadow: 0 3px 0 #000; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.card { position: relative; background: #17141f; border: 3px solid #2e2838; border-radius: 8px; padding: 8px; text-align: center; cursor: pointer; transition: transform .1s; }
.card:hover { transform: translateY(-3px); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.card .nm { font-weight: 800; font-size: 13px; margin-top: 6px; height: 32px; overflow: hidden; }
.card .tt { font-size: 11px; color: #9a92a8; height: 14px; overflow: hidden; }
.card.p1 { border-color: #3fa9ff; box-shadow: 0 0 14px #3fa9ff; }
.card.p2 { border-color: #ff4d4d; box-shadow: 0 0 14px #ff4d4d; }
.card.p1.p2 { border-color: #d05cff; box-shadow: 0 0 14px #d05cff; }
.card .badge { position: absolute; top: 4px; font-size: 11px; font-weight: 900; padding: 2px 6px; border-radius: 4px; }
.card .b1 { left: 4px; background: #3fa9ff; } .card .b2 { right: 4px; background: #ff4d4d; }
.bars { font-size: 10px; color: #aaa; text-align: left; margin-top: 4px; }
.bar { height: 5px; background: #333; border-radius: 3px; margin: 2px 0 4px; } .bar i { display: block; height: 100%; border-radius: 3px; background: #ffb23f; }
.selfoot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-top: 16px; }
.pcard { background: #14121c; border-radius: 8px; padding: 10px; min-height: 64px; display: flex; gap: 10px; align-items: center; }
.pcard.p1 { border-left: 5px solid #3fa9ff; } .pcard.p2 { border-right: 5px solid #ff4d4d; flex-direction: row-reverse; text-align: right; }
.pcard img { width: 48px; height: 48px; border-radius: 6px; }
.pcard .who { font-size: 12px; color: #aaa; } .pcard .fn { font-weight: 800; } .pcard .ok { color: #7dff8a; font-size: 12px; font-weight: 800; }
#cv { width: 100%; display: block; border-radius: 8px; background: #000; box-shadow: 0 0 40px #000; image-rendering: auto; }
.fightbar { display: flex; gap: 14px; align-items: center; margin-top: 8px; }
.fightbar .hint { flex: 1; text-align: center; }

button.story { background: linear-gradient(#1bd6f0, #0a6a8a); color: #001; }
.storycard { max-width: 860px; font-size: 16px; line-height: 1.5; }
.storycard h2 { margin-top: 0; }
.storycard h3 { color: #7ff3ff; }
.scoutmsg { color: #7ff3ff; font-family: monospace; font-size: 17px; border-left: 3px solid #2fe6ff; padding-left: 10px; }
.dm { background: #0c1a24; border: 1px solid #1f5a70; border-radius: 8px; padding: 10px; font-family: monospace; }
.clue { color: #ffcf6b; }
.grid.mini { grid-template-columns: repeat(6, 1fr); }
.grid.mini .card img { width: 100%; }
.ladderwrap { display: flex; gap: 20px; align-items: flex-start; }
.tower { display: flex; flex-direction: column; gap: 3px; min-width: 190px; }
.rung { display: flex; align-items: center; gap: 8px; padding: 2px 6px; border-radius: 6px; background: #1c1826; opacity: .75; font-size: 13px; }
.tower .rung img { width: 26px; height: 26px; border-radius: 4px; object-fit: cover; }
.rung.done { opacity: .35; text-decoration: line-through; }
.rung.cur { opacity: 1; background: #5a1a1a; outline: 2px solid #ff4d4d; font-weight: bold; }
.rung.clone img { filter: hue-rotate(160deg) saturate(2); }
.rung.boss { background: #0c2a34; color: #7ff3ff; }
.brief { flex: 1; }
.ending { display: flex; gap: 16px; align-items: center; }
.ending img { width: 120px; height: 120px; border-radius: 10px; object-fit: cover; border: 2px solid #ffcf6b; }
#title { display: flex; justify-content: center; }
#tcv { width: 100%; max-width: 1100px; display: block; border-radius: 8px; cursor: pointer; box-shadow: 0 0 60px #000; background: #000; }
#logo { cursor: pointer; }
button.train { background: linear-gradient(#ffcf6b, #b36b00); color: #120800; }
#selcv { width: 100%; display: block; border-radius: 8px; margin: 0 0 12px; background: #08060d; }
.grid.enter .card { animation: cardIn .45s cubic-bezier(.2, 1.4, .4, 1) backwards; animation-delay: calc(var(--i) * 35ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) scale(.6) rotate(-6deg); } }
.card { overflow: hidden; }
.card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-120%); pointer-events: none; }
.card:hover::after { transition: transform .5s; transform: translateX(120%); }
.card:hover { transform: translateY(-4px) scale(1.04); }
.card.p1, .card.p2 { animation: pickPulse 1.2s ease-in-out infinite; }
@keyframes pickPulse { 50% { filter: brightness(1.25); } }
#fight { position: relative; }
#fight.demo .fightbar { display: none; }
.movelist { position: absolute; left: 3%; right: 3%; top: 4%; max-height: 82%; overflow: auto; background: rgba(8,6,14,.94); border: 2px solid #ffcf6b; border-radius: 10px; padding: 14px 18px; z-index: 5; font-size: 13px; }
.movelist .mlhead { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.movelist .mlhead img { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; }
.movelist .mlhead h3 { margin: 0; font-family: Impact, sans-serif; font-size: 26px; letter-spacing: 1px; }
.movelist .mlhead button { margin-left: auto; }
.movelist table { width: 100%; border-collapse: collapse; }
.movelist th { text-align: left; color: #ffcf6b; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid #3a3346; padding: 4px; }
.movelist td { padding: 4px; border-bottom: 1px solid #1f1a28; vertical-align: top; }
.movelist td.in { font-family: monospace; color: #8ac8ff; white-space: nowrap; }
.movelist td small { display: block; color: #9a92a8; }
.movelist tr.sec td { color: #ff8a8a; font-weight: 900; text-transform: uppercase; padding-top: 10px; border-bottom: 1px solid #5a2a2a; }
.movelist .hidden { display: none; }
/* main menu */
#lobby { display: flex; justify-content: center; }
.menu-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; box-shadow: 0 0 60px #000, 0 0 0 1px #2a1c22; background: #05040a; }
#menucv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.menu-ui { position: absolute; inset: 0; container-type: size; }
.logo.mini { position: absolute; left: 4.5%; top: 4%; margin: 0; text-align: left; font-size: 4.2cqw; letter-spacing: 2px; font-style: italic; }
.logo.mini span { font-size: 7.6cqw; line-height: .85; }
.menu { position: absolute; left: 3%; top: 25%; display: flex; flex-direction: column; gap: .4cqh; transition: opacity .2s; }
.menu.dim { opacity: .45; }
.mi { all: unset; box-sizing: border-box; position: relative; display: block; width: 38cqw; white-space: nowrap; padding: .9cqh 2cqw .9cqh 3cqw; cursor: pointer; transform: skewX(-12deg); color: #8c8496;
  border-left: 4px solid transparent; transition: color .12s, background .12s, padding .15s, border-color .12s; }
.mi b { display: block; font: italic 900 3.5cqw/1 Impact, "Arial Black", sans-serif; letter-spacing: 1px; text-transform: uppercase; transform: skewX(12deg); text-shadow: 0 3px 0 #000; }
.mi small { display: block; font: 600 1.35cqw "Segoe UI", sans-serif; letter-spacing: .5px; color: #6f6878; margin-top: .4cqh; transform: skewX(12deg); max-height: 0; overflow: hidden; transition: max-height .15s; }
.mi.sel { color: #fff; padding-left: 4.5cqw; border-left-color: #ffe27a; background: linear-gradient(90deg, rgba(230,40,20,.9), rgba(230,40,20,.35) 70%, transparent); }
.mi.sel b { background: linear-gradient(#fff, #ffe9b0); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #000); text-shadow: none; }
.mi.sel small { color: #ffd9c8; max-height: 3cqh; }
.mi.sel::before { content: '\25B6'; position: absolute; left: 1.2cqw; top: 50%; transform: translateY(-50%) skewX(12deg); color: #ffe27a; font-size: 1.8cqw; animation: miArrow .6s ease-in-out infinite alternate; }
@keyframes miArrow { to { left: 1.9cqw; } }
.mi:focus-visible { outline: 2px solid #ffe27a; }
.pname { position: absolute; left: 4.5%; bottom: 7.5%; display: flex; align-items: center; gap: 10px; margin: 0; color: #ffcf6b; font: italic 900 1.6cqw Impact, sans-serif; letter-spacing: 2px; }
.pname input#name { width: 20cqw; margin: 0; padding: .8cqh 1cqw; font-size: 1.5cqw; background: rgba(0,0,0,.6); border: 1px solid #5a3a3a; border-bottom: 2px solid #ff5a3a; border-radius: 3px; }
.menu-foot { position: absolute; right: 2%; top: 1.6%; color: #aaa; font-size: 1.2cqw; }
.menu-foot kbd { font-size: 1.1cqw; }
.pane { position: absolute; right: 3%; top: 8%; width: 44%; max-height: 76%; overflow: auto; padding: 18px 20px; background: linear-gradient(160deg, rgba(20,14,26,.96), rgba(10,6,12,.96)); border: 1px solid #5a2a2a; border-top: 3px solid #ff4a2a; border-radius: 6px; box-shadow: 0 10px 40px #000; animation: paneIn .18s ease-out; }
.pane.wide { width: 56%; }
.pane h3 { margin: 0 0 12px; font: italic 900 26px Impact, sans-serif; letter-spacing: 1px; color: #fff; text-transform: uppercase; }
.pane h3 small { font: 12px "Segoe UI", sans-serif; color: #999; margin-left: 8px; }
.pane #btnCreate { width: 100%; }
.pane .row { margin: 12px 0; }
.pane #joinCode { flex: 1; }
.pane .hint { line-height: 1.5; }
@keyframes paneIn { from { opacity: 0; transform: translateX(30px); } }
.menu-ui .err { position: absolute; left: 4.5%; bottom: 3%; }

/* party mode */
#fight.party .fightbar { display: none; }
.pstage { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; box-shadow: 0 0 60px #000, 0 0 0 1px #2a1c22; background: #05040a; container-type: inline-size; }
.pstage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.pui { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 2.2cqw; box-sizing: border-box; font-family: "Segoe UI", sans-serif; }
.pui.final { align-items: flex-end; justify-content: flex-end; pointer-events: none; }
.pui.final .pbtns { pointer-events: auto; margin: 0; }
.pbox { width: 100%; max-height: 100%; overflow: auto; background: linear-gradient(160deg, rgba(20,14,26,.93), rgba(10,6,12,.93)); border: 1px solid #3a2f48; border-left: 4px solid #ff5a3a; border-radius: 6px; padding: 1.6cqw 2cqw; box-sizing: border-box; color: #ddd; font-size: 1.35cqw; }
.pbox h2 { margin: 0 0 1cqw; font: italic 900 3.6cqw/1 Impact, "Arial Black", sans-serif; letter-spacing: 1px; color: #fff; text-shadow: 0 3px 0 #000; }
.pbox h2 span { color: #ff5a3a; }
.pbox h4 { margin: 0 0 .6cqw; font: italic 900 1.6cqw Impact, sans-serif; letter-spacing: 2px; color: #ffcf6b; }
.pbox h4 small { font: 1.1cqw "Segoe UI", sans-serif; color: #888; margin-left: 6px; letter-spacing: 0; }
.pbox kbd { display: inline-block; min-width: 1.4cqw; padding: .1cqw .5cqw; border: 1px solid #555; border-bottom-width: 2px; border-radius: 3px; background: #1a1622; color: #ffe27a; font: 700 1.1cqw monospace; text-align: center; }
.pcols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2cqw; }
.prow { display: flex; align-items: center; gap: .7cqw; margin-bottom: .45cqw; padding: .3cqw .5cqw; background: rgba(255,255,255,.03); border-left: 3px solid var(--c); border-radius: 3px; }
.prow .pn { font: italic 900 1.4cqw Impact, sans-serif; color: var(--c); width: 2.2cqw; }
.prow img { width: 2.6cqw; height: 2.6cqw; object-fit: cover; border-radius: 3px; }
.prow input, .prow select, .pg select { margin: 0; padding: .35cqw .6cqw; font-size: 1.2cqw; background: #0c0a10; color: #fff; border: 1px solid #3a2f48; border-radius: 3px; }
.prow input { flex: 1; min-width: 0; }
.prow select { width: 11cqw; }
.prow .px { all: unset; cursor: pointer; color: #888; font-size: 1.6cqw; padding: 0 .3cqw; }
.prow .px:hover { color: #ff5a3a; }
.pg { display: flex; align-items: baseline; gap: .6cqw; padding: .22cqw 0; cursor: pointer; }
.pg input { accent-color: #ff5a3a; margin: 0; }
.pg b { color: #fff; font-size: 1.3cqw; }
.pg small { color: #777; font-size: 1.05cqw; }
.pkeys { margin-top: 1cqw; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5cqw; font-size: 1.1cqw; line-height: 1.6; color: #aaa; }
.pkeys b { color: #fff; }
.pbtns { display: flex; justify-content: flex-end; gap: 1cqw; margin-top: 1.2cqw; }
.pbtns button { font: italic 900 1.6cqw Impact, sans-serif; letter-spacing: 1px; padding: .7cqw 1.8cqw; border-radius: 3px; }
.pbtns .go { background: linear-gradient(90deg, #ff3a1a, #ff8a1a); color: #fff; box-shadow: 0 0 20px rgba(255,90,40,.4); }
.pbtns .go:hover { filter: brightness(1.15); }
.pbtns .ghost, .pplayers .ghost { background: rgba(255,255,255,.06); color: #ccc; border: 1px solid #3a2f48; }
.pplayers .ghost { font-size: 1.2cqw; padding: .4cqw 1cqw; margin-top: .3cqw; }
.pui.card { background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,0)); }
.pbox.intro, .pbox.res { width: 78%; }
.pbox.intro h2 { font-size: 5cqw; }
.pbox.intro p { font-size: 1.6cqw; line-height: 1.45; margin: .6cqw 0; }
.pbox .pts { color: #ffcf6b; font-size: 1.3cqw !important; }
.pbox .sat { color: #999; font-size: 1.2cqw !important; }
.gnum { font: 700 1.1cqw "Segoe UI", sans-serif; letter-spacing: 3px; color: #ff5a3a; margin-bottom: .4cqw; }
.chips { display: flex; flex-wrap: wrap; gap: .6cqw; margin-top: 1cqw; }
.chip { display: inline-flex; align-items: center; gap: .5cqw; padding: .3cqw .8cqw .3cqw .3cqw; background: rgba(255,255,255,.05); border: 1px solid var(--c); border-radius: 30px; font-weight: 700; color: #fff; font-size: 1.3cqw; }
.chip img { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; object-fit: cover; }
.chip em { color: #999; font-style: normal; font-weight: 400; font-size: 1.05cqw; }
.rcols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2cqw; }
.rrow { display: grid; grid-template-columns: 2cqw 2.6cqw 1fr auto; grid-template-rows: auto auto; column-gap: .8cqw; align-items: center; padding: .4cqw .6cqw; margin-bottom: .4cqw; background: rgba(255,255,255,.04); border-left: 3px solid var(--c); }
.rrow b { grid-row: span 2; font: italic 900 2cqw Impact, sans-serif; color: var(--c); }
.rrow img { grid-row: span 2; width: 2.6cqw; height: 2.6cqw; object-fit: cover; border-radius: 3px; }
.rrow span { font-weight: 800; color: #fff; font-size: 1.4cqw; }
.rrow small { grid-column: 3; color: #888; font-size: 1.05cqw; }
.rrow em { grid-row: 1 / span 2; grid-column: 4; font: italic 900 2cqw Impact, sans-serif; color: #7dff8a; font-style: normal; }
.srow { position: relative; display: flex; justify-content: space-between; padding: .35cqw .6cqw; margin-bottom: .3cqw; background: rgba(255,255,255,.04); font-size: 1.3cqw; color: #fff; overflow: hidden; }
.srow i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); opacity: .25; }
.srow span, .srow b { position: relative; }
.pui.final { align-items: flex-start; }
.pbox h2 { margin-bottom: .6cqw; }
.pgames { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1cqw; align-content: start; }
.pgames h4 { grid-column: 1 / -1; }
.pg { flex-wrap: wrap; row-gap: 0; padding: .15cqw 0; }
.pg small { flex-basis: 100%; padding-left: 1.6cqw; }
.pkeys { margin-top: .6cqw; }
.pbtns { margin-top: .8cqw; }
.pui.final { justify-content: flex-start; }
.pstage canvas.pgl { display: none; }
.pnetrow { display: flex; align-items: center; flex-wrap: wrap; gap: .8cqw; margin-top: .8cqw; padding: .6cqw .9cqw; background: rgba(255,90,58,.08); border: 1px solid #5a2f38; border-radius: 4px; font-size: 1.15cqw; color: #aaa; }
.pnetrow b { font: italic 900 1.5cqw Impact, sans-serif; letter-spacing: 2px; color: #ffcf6b; }
.pnetrow span { flex: 1; }
.pnetrow button { font: italic 900 1.4cqw Impact, sans-serif; letter-spacing: 1px; padding: .5cqw 1.4cqw; border-radius: 3px; }
.pnetrow .go { background: linear-gradient(90deg, #ff3a1a, #ff8a1a); color: #fff; }
.pnetrow .ghost { background: rgba(255,255,255,.06); color: #ddd; border: 1px solid #3a2f48; }
.pnetrow input { width: 7cqw; margin: 0; padding: .45cqw .6cqw; font: 700 1.4cqw monospace; text-transform: uppercase; letter-spacing: 3px; background: #0c0a10; color: #fff; border: 1px solid #3a2f48; border-radius: 3px; }
.pnetrow em { flex-basis: 100%; color: #ff7a6a; font-style: normal; }
.ncode { display: flex; align-items: center; gap: 1cqw; margin-bottom: 1cqw; }
.ncode span { font: 700 1.1cqw "Segoe UI", sans-serif; letter-spacing: 3px; color: #ff5a3a; }
.ncode b { font: italic 900 4cqw/1 Impact, sans-serif; letter-spacing: .5cqw; color: #ffe27a; text-shadow: 0 3px 0 #000; }
.ncode input { flex: 1; min-width: 0; margin: 0; padding: .4cqw .6cqw; font-size: 1.1cqw; background: #0c0a10; color: #aaa; border: 1px solid #3a2f48; border-radius: 3px; }
.ncode button { font: 700 1.1cqw "Segoe UI", sans-serif; padding: .45cqw 1cqw; background: rgba(255,255,255,.06); color: #ddd; border: 1px solid #3a2f48; border-radius: 3px; }
.prow.off { opacity: .45; }
.prow .nnm { flex: 1; color: #fff; font-weight: 700; font-size: 1.3cqw; }
.prow .nfx { color: #999; font-size: 1.1cqw; }
.prow em.crown, .prow em.you { font: italic 900 1cqw Impact, sans-serif; letter-spacing: 1px; padding: .1cqw .5cqw; border-radius: 3px; font-style: normal; }
.prow em.crown { background: #c9a23a; color: #000; }
.prow em.you { background: var(--c); color: #000; }
.nmsg { color: #999; font-size: 1.1cqw; line-height: 1.5; margin: .6cqw 0 0; }
.nmsg.err { color: #ff7a6a; }
.nwait { align-self: center; color: #ffcf6b; font: italic 700 1.4cqw "Segoe UI", sans-serif; }
.pbtns button:disabled { opacity: .4; cursor: default; }
#pnet { position: fixed; top: 6px; left: 50%; transform: translateX(-50%); z-index: 50; padding: 4px 12px; background: rgba(10,6,12,.85); border: 1px solid #3a2f48; border-radius: 20px; font: 12px "Segoe UI", sans-serif; color: #ccc; pointer-events: none; white-space: nowrap; }
#pnet b { color: #ffe27a; letter-spacing: 2px; margin-right: 6px; }
#pnet i { font-style: normal; font-weight: 700; }
#pnet .w { color: #ff7a6a; margin-left: 6px; }
#pnet.hidden, #ptouch.hidden { display: none; }
#ptouch { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: space-between; align-items: flex-end; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; }
#ptouch button { pointer-events: auto; touch-action: none; border: 2px solid rgba(255,255,255,.35); background: rgba(20,14,26,.55); color: #fff; font: 900 20px Impact, sans-serif; border-radius: 50%; width: 62px; height: 62px; padding: 0; box-shadow: none; }
#ptouch button.on { background: rgba(255,90,58,.75); border-color: #fff; }
#ptouch .tpad { display: grid; grid-template-columns: repeat(3, 62px); grid-template-rows: repeat(3, 62px); gap: 4px; }
#ptouch .tpad .u { grid-area: 1 / 2; } #ptouch .tpad .l { grid-area: 2 / 1; } #ptouch .tpad .r { grid-area: 2 / 3; } #ptouch .tpad .d { grid-area: 3 / 2; }
#ptouch .tpad button { border-radius: 12px; }
#ptouch .tbtn { display: grid; grid-template-columns: repeat(2, 70px); gap: 8px; }
#ptouch .tbtn button { width: 70px; height: 70px; }
#ptouch .tbtn .p { background: rgba(255,90,58,.45); } #ptouch .tbtn .k { background: rgba(80,160,255,.45); } #ptouch .tbtn .s { background: rgba(255,210,60,.45); } #ptouch .tbtn .b { background: rgba(120,255,140,.35); }
#ptouch .tok { width: auto !important; height: 44px !important; padding: 0 18px !important; border-radius: 22px !important; background: rgba(125,255,138,.3) !important; font-size: 16px !important; align-self: flex-end; }