*{box-sizing:border-box}html,body{margin:0;background:#0b1020;color:#eef2ff;font-family:system-ui,-apple-system,sans-serif}
body{min-height:100vh;min-height:100dvh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
button,input{font:inherit}.app{width:min(100%,760px);margin:auto;padding:8px;display:grid;gap:8px}
.topbar{display:flex;justify-content:space-between;align-items:center}.status{font-size:.8rem;padding:4px 8px;border-radius:999px;background:#374151}.status.online{background:#14532d}
.game-wrap{width:100%;aspect-ratio:1;max-height:62vh;max-height:62dvh;margin:auto;background:#020617}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}
.meters{display:grid;gap:4px}.meters>div{display:grid;grid-template-columns:28px 1fr 64px;gap:6px;align-items:center;font-size:.78rem}.meters progress{width:100%}
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.quick button,.controls button,#chatForm button{min-height:48px;border:0;border-radius:10px;background:#263449;color:white;font-weight:700}
.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center}.dpad{display:grid;grid-template-columns:repeat(3,52px);gap:4px;justify-content:center}.dpad button{min-height:52px}.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.actions .attack{grid-column:1/-1;min-height:72px;background:#7f1d1d}
.connection{background:#111827;padding:8px;border-radius:8px}.connection label{display:grid;gap:4px;margin-top:8px}.connection input,#chatInput{min-height:42px;border:1px solid #475569;border-radius:8px;background:#020617;color:white;padding:8px}
.log{height:112px;overflow:auto;background:#020617;border:1px solid #334155;border-radius:8px;padding:6px;font:12px ui-monospace,monospace;white-space:pre-wrap}
#chatForm{display:grid;grid-template-columns:1fr 72px;gap:6px;margin-top:6px}
@media (orientation:landscape) and (min-width:700px){.app{grid-template-columns:minmax(360px,1fr) 300px;align-items:start}.topbar{grid-column:1/-1}.game-wrap{grid-row:3/8}.meters,.quick,.controls,.connection,.chat{grid-column:2}.quick{grid-template-columns:repeat(2,1fr)}}
.game-wrap{position:relative}.map-note{position:absolute;right:6px;bottom:6px;padding:3px 6px;border-radius:5px;background:rgba(2,6,23,.82);color:#fbbf24;font:11px ui-monospace,monospace;pointer-events:none}
.connection-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}.connection-buttons button{min-height:40px;border:0;border-radius:8px;background:#334155;color:#fff;font-weight:700}
.topbar small{font-weight:500;color:#94a3b8}
.log .rx{color:#bfdbfe}.log .tx{color:#bbf7d0}
.map-debug{background:#111827;border:1px solid #334155;border-radius:8px;padding:8px}
.map-debug-head{display:flex;justify-content:space-between;gap:8px;align-items:center}
.map-debug-head span{font:11px ui-monospace,monospace;color:#fbbf24}
.map-debug-grid{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:4px 8px;margin-top:6px;font:12px ui-monospace,monospace}
.map-debug-grid span{color:#94a3b8}.map-debug-grid b{font-weight:600}
.map-debug-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.map-debug-actions button{min-height:38px;border:0;border-radius:8px;background:#334155;color:#fff;font-weight:700}
@media(max-width:520px){.map-debug-grid{grid-template-columns:auto 1fr}.map-debug-actions{grid-template-columns:1fr}}
.object-debug{background:#111827;border:1px solid #334155;border-radius:8px;padding:8px}
.object-debug textarea{width:100%;min-height:110px;resize:vertical;background:#020617;color:#dbeafe;border:1px solid #334155;border-radius:6px;padding:6px;font:11px/1.35 ui-monospace,monospace;box-sizing:border-box}
/* v0.5.1: 操作UIとPCレイアウトを共通化。OS/ブラウザ固有機能に依存しない。 */
.controls{display:grid;grid-template-columns:1fr;gap:8px;align-items:center}
.dpad{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));gap:6px;justify-content:stretch}
.dpad button{min-height:56px;display:grid;place-items:center;align-content:center;gap:1px}
.dpad button span{font-weight:800}.dpad button small{font-size:.72rem}
.dpad .attack{background:#7f1d1d}.dpad .cast{background:#4338ca}
.number-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.number-pad button{min-height:44px;border:0;border-radius:9px;background:#334155;color:#fff;font-weight:800;font-size:1.05rem}
.connection-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.connection-actions button{min-height:44px}
#playerStatusPanel{width:100%}
@media (orientation:landscape) and (min-width:700px){
.app{width:min(100%,760px);margin:auto;padding:8px;display:grid;grid-template-columns:1fr;gap:8px;align-items:start}
.topbar,.game-wrap,#playerStatusPanel,.map-debug,.object-debug,.quick,.controls,.connection,.chat,.raw-m57-panel,#worldInfo{grid-column:1;grid-row:auto}
.game-wrap{max-height:none;width:100%}
.quick{grid-template-columns:repeat(4,1fr)}
}
/* v0.5.2: PCは左=マップ/状態、右=操作・接続・各種コンソール。スマホは従来どおり縦積み。 */
.left-pane,.right-pane{display:grid;gap:8px;min-width:0}
@media (orientation:landscape) and (min-width:900px){
.app{width:min(100%,1440px);max-width:1440px;margin:auto;padding:8px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px;align-items:start}
.topbar{grid-column:1/-1}
.left-pane{grid-column:1;grid-row:2;align-self:start;position:sticky;top:8px}
.right-pane{grid-column:2;grid-row:2;align-self:start}
.game-wrap{width:100%;max-height:none;aspect-ratio:1}
.right-pane .controls{order:1}
.right-pane .connection{order:2}
.right-pane .quick{order:3;grid-template-columns:repeat(4,1fr)}
.right-pane .map-debug{order:4}
.right-pane .object-debug{order:5}
.right-pane .chat{order:6}
.right-pane .raw-m57-panel{order:7}
}
@media (max-width:899px), (orientation:portrait){
.app{width:min(100%,760px);grid-template-columns:1fr}
.left-pane,.right-pane{grid-column:1}
}
/* v0.5.4: world/new-user sync + smaller desktop map. */
.connection-actions.single{grid-template-columns:1fr}
.world-registry{margin:.55rem 0;padding:.55rem;border:1px solid #374151;border-radius:.45rem;background:#0f172a}
.world-registry select,.world-registry input{width:100%;min-height:40px;border:1px solid #475569;border-radius:8px;background:#020617;color:white;padding:7px}
.world-registry-grid{display:grid;grid-template-columns:1fr 1.25fr .55fr;gap:6px;margin-top:6px}
.world-registry-grid label{margin-top:0}
.world-registry-actions{grid-template-columns:repeat(3,1fr)}
.sub-state{margin-top:.35rem;font-size:.82em;color:#cbd5e1}
.bgm-settings{margin:.55rem 0;padding:.55rem;border:1px solid #374151;border-radius:.45rem;background:#0f172a;display:grid;grid-template-columns:auto auto minmax(150px,1fr);gap:6px 10px;align-items:center}
.bgm-settings>strong{font-size:.86rem}
.bgm-settings label{margin:0!important;display:flex!important;align-items:center;gap:6px;font-size:.78rem;color:#cbd5e1}
.bgm-settings input[type="checkbox"]{width:18px;height:18px;min-height:0!important;padding:0!important;margin:0;accent-color:#4f46e5}
.bgm-settings input[type="range"]{width:min(180px,34vw);min-height:24px!important;height:24px;padding:0!important;margin:0;accent-color:#4f46e5;background:transparent!important;border:0!important}
.bgm-settings #bgmVolumeValue{min-width:3.2em;text-align:right;font:11px ui-monospace,monospace;color:#e2e8f0}
.bgm-settings #bgmState{grid-column:1/-1;color:#94a3b8;font-size:.72rem;line-height:1.2}
@media(max-width:620px){.bgm-settings{grid-template-columns:auto 1fr}.bgm-settings .bgm-volume-label{grid-column:1/-1}.bgm-settings input[type="range"]{width:min(220px,58vw)}}
.game-wrap{width:min(100%,560px)}
@media (orientation:landscape) and (min-width:900px){
.left-pane{justify-items:center}
.left-pane #worldInfo,.left-pane #playerStatusPanel{width:min(100%,560px)}
.game-wrap{width:min(calc(100% - 96px),560px);max-width:560px}
}
@media(max-width:620px){
.world-registry-grid{grid-template-columns:1fr}
.world-registry-actions{grid-template-columns:1fr}
}
/* v0.5.5: world manager collapsed by default + iOS/export/mapset fixes. */
.world-manager{margin-top:.55rem;border-top:1px solid #334155;padding-top:.45rem}
.world-manager>summary{cursor:pointer;user-select:none;font-weight:700;color:#cbd5e1;padding:.25rem 0}
.world-manager[open]>summary{margin-bottom:.35rem}
/* v0.5.6: normal play focuses on saved character -> connect. */
.player-launch{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:end;margin:.25rem 0}
.player-launch label{display:grid;gap:3px;font-size:.85rem;color:#cbd5e1}
.player-launch select{width:100%;min-height:42px;border:1px solid #475569;border-radius:8px;background:#020617;color:white;padding:7px}
.player-launch #characterCacheState{font-size:.78rem;color:#94a3b8;padding-bottom:.55rem;white-space:nowrap}
@media (max-width:699px){.player-launch{grid-template-columns:1fr}.player-launch #characterCacheState{padding-bottom:0}}
/* v0.5.7: iOS visible .phirc backup sidecar support; no layout change. */
/* v0.5.13: PC normal-play flow + viewport-aware smaller map + persistent log controls. */
.world-action-row{
width:min(100%,500px);
display:grid;
grid-template-columns:minmax(0,1.45fr) minmax(180px,.75fr);
gap:6px;
align-items:stretch;
margin:.2rem auto .35rem;
}
#worldInfo,#lastAction{
margin:0;
padding:.42rem .6rem;
border:1px solid #374151;
border-radius:.45rem;
background:#111827;
color:#e5e7eb;
font-size:.84rem;
line-height:1.3;
min-width:0;
display:flex;
align-items:center;
}
#lastAction{background:#0f172a;color:#cbd5e1;border-color:#334155}
.session-panel{
background:#111827;
border:1px solid #334155;
border-radius:8px;
padding:8px;
}
.session-panel .connection-actions{margin-top:6px}
.chat{background:#111827;border:1px solid #334155;border-radius:8px;padding:8px}
.combat-utility-drawer{background:#111827;border:1px solid #334155;border-radius:8px;padding:6px}
.combat-utility-drawer>summary{cursor:pointer;list-style:none;font-weight:800;color:#f8fafc;padding:4px 6px;border-radius:7px;background:#263449}
.combat-utility-drawer>summary::-webkit-details-marker{display:none}
.combat-utility-drawer[open]>summary{margin-bottom:6px}
.combat-utility-drawer .chat,.combat-utility-drawer .session-panel{margin-top:0}
.combat-utility-drawer .session-panel + .chat{margin-top:6px}
.chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.chat-log-actions{display:flex;gap:6px}
.chat-log-actions button{min-height:30px;border:0;border-radius:7px;padding:4px 9px;background:#334155;color:#fff;font-weight:700;font-size:.78rem}
.log-cache-note{display:block;color:#94a3b8;font-size:.72rem;margin-top:4px}
.control-pads{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,.62fr);gap:8px;align-items:start}
.controls{background:#111827;border:1px solid #334155;border-radius:8px;padding:8px}
.controls .dpad{grid-template-columns:repeat(3,minmax(48px,1fr));gap:4px}
.controls .dpad button{min-height:44px;padding:3px}
.controls .dpad button small{font-size:.65rem}
.controls .number-pad{gap:4px}
.controls .number-pad button{min-height:39px;font-size:.92rem}
.developer-tools{margin-top:2px;background:#0f172a;border:1px solid #263449;border-radius:8px;padding:7px}
.developer-tools>summary{cursor:pointer;color:#94a3b8;font-size:.8rem;font-weight:700}
.developer-tools[open]>summary{margin-bottom:8px}
.developer-tools .map-debug,.developer-tools .object-debug,.developer-tools .raw-m57-panel{margin-top:8px}
/* Smaller by default than the former 560px map. On desktop, viewport height also constrains it. */
.game-wrap{width:min(100%,500px)}
.left-pane #playerStatusPanel{width:min(100%,500px)}
@media (orientation:landscape) and (min-width:900px){
.app{grid-template-columns:minmax(430px,1fr) minmax(360px,.9fr);gap:12px}
.left-pane{justify-items:center}
.world-action-row,.left-pane #playerStatusPanel{width:min(100%,500px)}
.game-wrap{
width:clamp(340px,calc(100dvh - 235px),500px);
max-width:500px;
}
.right-pane{gap:8px;max-height:calc(100dvh - 54px);overflow:auto;padding-right:2px}
.right-pane .session-panel{order:1}
.right-pane .chat{order:2}
.right-pane .controls{order:3}
.right-pane .connection{order:4}
.right-pane .developer-tools{order:5}
.log{height:170px}
}
@media (max-width:899px), (orientation:portrait){
.world-action-row{width:min(100%,500px)}
.control-pads{grid-template-columns:1fr}
.controls .dpad{grid-template-columns:repeat(3,minmax(72px,1fr));gap:6px}
.controls .dpad button{min-height:54px}
.controls .number-pad button{min-height:44px}
}
@media (max-width:560px){
.world-action-row{grid-template-columns:1fr}
#worldInfo,#lastAction{min-height:38px}
}
/* v0.5.14: PC仮完成。左ペインは維持し、右ペインだけ広告＋通常操作を1画面へ圧縮。 */
.runtime-debug{margin-top:8px;background:#111827;border:1px solid #334155;border-radius:8px;padding:8px}
.debug-runtime-log{max-height:150px;overflow:auto;margin-top:6px;padding:6px;border:1px solid #334155;border-radius:6px;background:#020617;color:#cbd5e1;font:11px/1.35 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap}
.debug-runtime-log .rx{color:#bfdbfe}.debug-runtime-log .tx{color:#bbf7d0}.debug-runtime-log .warn{color:#fde68a}
@media (orientation:landscape) and (min-width:900px){
.right-pane{gap:5px;max-height:none;overflow:visible;padding-right:0;align-content:start}
.right-pane .pc-ad-slot{display:grid!important;order:0;min-height:58px;height:58px;border-radius:8px;font-size:.78rem}
.right-pane .session-panel{order:1;padding:5px 7px}
.right-pane .chat{order:2;padding:6px 7px}
.right-pane .controls{order:3;padding:6px 7px}
.right-pane .connection{order:4;padding:6px 7px}
.right-pane .developer-tools{order:5;padding:5px 7px;margin-top:0}
.player-launch{margin:0;gap:5px;grid-template-columns:minmax(0,1fr) auto}
.player-launch label{font-size:.76rem;gap:1px}
.player-launch select{min-height:32px;padding:3px 6px;border-radius:6px;font-size:.82rem}
.player-launch #characterCacheState{font-size:.68rem;padding-bottom:.35rem}
.session-panel .connection-actions{margin-top:4px}
.connection-actions button{min-height:32px;border-radius:6px;font-size:.82rem}
.chat-head{margin-bottom:4px}
.chat-head strong{font-size:.82rem}
.chat-log-actions button{min-height:26px;padding:2px 7px;font-size:.7rem}
.log{height:118px;padding:5px;font-size:11px;line-height:1.28;border-radius:6px}
.log-cache-note{font-size:.64rem;margin-top:2px;line-height:1.15}
#chatForm{margin-top:4px;grid-template-columns:1fr 58px;gap:4px}
#chatInput{min-height:32px;padding:4px 6px;border-radius:6px;font-size:.82rem}
#chatForm button{min-height:32px;border-radius:6px;font-size:.78rem}
.control-pads{grid-template-columns:minmax(0,1fr) minmax(120px,.52fr);gap:5px}
.controls .dpad{gap:3px}
.controls .dpad button{min-height:35px;padding:1px;border-radius:7px}
.controls .dpad button span{font-size:.82rem;line-height:1}
.controls .dpad button small{font-size:.56rem;line-height:1}
.controls .number-pad{gap:3px}
.controls .number-pad button{min-height:31px;font-size:.78rem;border-radius:7px}
.connection>summary,.developer-tools>summary{font-size:.74rem;line-height:1.1;padding:2px 0}
.developer-tools[open]>summary{margin-bottom:5px}
}
@media (max-width:899px), (orientation:portrait){
.right-pane .pc-ad-slot{display:none!important}
}
/* v0.5.15: XREA top-ad aware PC compaction + cleaner normal-play hierarchy. */
@media (orientation:landscape) and (min-width:900px){
/* XREA Free inserts its real ad above the app, so do not reserve a second in-app ad row. */
.pc-ad-slot{display:none!important}
.app{gap:6px;padding-top:5px}
.topbar{font-size:.9rem;min-height:28px}
.left-pane,.right-pane{gap:6px}
/* Keep the left composition, but allow a slightly smaller map when the forced ad consumes height. */
.game-wrap{width:min(100%,480px,calc(100dvh - 390px));max-width:480px;min-width:360px}
.world-action-row,.left-pane #playerStatusPanel{width:min(100%,480px)}
/* Connection button sits left of the character pulldown and is intentionally compact. */
.session-panel{display:grid;grid-template-columns:64px minmax(0,1fr);gap:5px;align-items:end;padding:4px 6px}
.session-panel .connection-actions{grid-column:1;grid-row:1;margin:0}
.session-panel .player-launch{grid-column:2;grid-row:1;margin:0;gap:4px;align-items:end}
.session-panel .connection-actions button{min-height:29px;height:29px;padding:1px 6px;font-size:.72rem;border-radius:6px}
.session-panel .player-launch label{font-size:0;gap:0}
.session-panel .player-launch select{min-height:29px;height:29px;padding:2px 6px;font-size:.76rem;border-radius:6px}
.session-panel .player-launch #characterCacheState{font-size:.62rem;padding-bottom:.27rem}
/* Spend the saved height on more conversation lines. */
.right-pane .chat{padding:5px 6px}
.chat-head{margin-bottom:3px}
.chat-head strong{font-size:.8rem}
.chat-log-actions button{min-height:24px;padding:1px 6px;font-size:.66rem}
.log{height:168px;padding:4px 5px;font-size:10.8px;line-height:1.24}
.log-cache-note{font-size:.6rem;margin-top:1px;line-height:1.1}
#chatForm{margin-top:3px;grid-template-columns:1fr 52px;gap:3px}
#chatInput{min-height:29px;height:29px;padding:3px 6px;font-size:.78rem}
#chatForm button{min-height:29px;height:29px;font-size:.72rem}
/* Compact d-pad / number pad; preserve the same commands and arrangement. */
.right-pane .controls{padding:4px 6px}
.control-pads{grid-template-columns:minmax(0,1fr) minmax(108px,.48fr);gap:4px}
.controls .dpad{gap:2px}
.controls .dpad button{min-height:31px;height:31px;padding:0;border-radius:6px}
.controls .dpad button span{font-size:.76rem;line-height:.95}
.controls .dpad button small{font-size:.5rem;line-height:.95}
.controls .number-pad{gap:2px}
.controls .number-pad button{min-height:27px;height:27px;padding:0;font-size:.72rem;border-radius:6px}
/* New-account/world management is collapsed, but easier to notice. */
.right-pane .connection{padding:4px 6px;border-color:#475569;background:#162033}
.right-pane .connection>summary{padding:5px 7px;border-radius:6px;background:#263449;color:#f8fafc;font-size:.78rem;font-weight:800;cursor:pointer}
.right-pane .connection>summary:hover{background:#334155}
.right-pane .developer-tools{padding:4px 6px}
}
@media (orientation:landscape) and (min-width:900px) and (max-height:820px){
.game-wrap{width:min(100%,450px,calc(100dvh - 350px));max-width:450px;min-width:340px}
.world-action-row,.left-pane #playerStatusPanel{width:min(100%,450px)}
.log{height:150px}
}
/* v0.5.16: PCは左ペイン寸法を維持しつつ左右を寄せ、余剰高を会話ログへ優先配分。 */
@media (orientation:landscape) and (min-width:900px){
/* 左側の480px構成は維持。左カラムの余白だけ減らして右側を近づける。 */
.app{
width:min(100%,1440px);
max-width:1440px;
grid-template-columns:minmax(430px,560px) minmax(0,1fr);
column-gap:8px;
row-gap:6px;
}
/* 開発者欄は画面下へはみ出してよい。通常操作部分の高さを優先する。 */
.right-pane{overflow:visible;max-height:none;gap:5px;align-content:start}
/* 会話を主役に。文字も読みやすいサイズへ戻し、表示行数を増やす。 */
.right-pane .chat{padding:5px 6px}
.log{
height:260px;
padding:6px 7px;
font-size:13px;
line-height:1.34;
}
.log-cache-note{display:none}
.chat-head strong{font-size:.86rem}
.chat-log-actions button{min-height:24px;padding:1px 6px;font-size:.67rem}
#chatForm{margin-top:4px}
/* 操作パッドは補助操作としてさらに薄くする。 */
.right-pane .controls{padding:3px 5px}
.control-pads{grid-template-columns:minmax(0,1fr) minmax(96px,.40fr);gap:3px}
.controls .dpad{gap:2px}
.controls .dpad button{
min-height:27px;
height:27px;
padding:0;
border-radius:5px;
}
.controls .dpad button span{font-size:.76rem;line-height:.9}
.controls .dpad button small{font-size:.47rem;line-height:.9}
.controls .dpad .attack span{font-size:1rem;line-height:1}
.controls .number-pad{gap:2px}
.controls .number-pad button{
min-height:23px;
height:23px;
padding:0;
border-radius:5px;
font-size:.68rem;
line-height:1;
}
/* 新規登録欄は目立たせたまま、開発者欄は通常画面の高さ計算対象にしない。 */
.right-pane .connection>summary{font-size:.8rem}
.right-pane .developer-tools{margin-top:0}
}
@media (orientation:landscape) and (min-width:900px) and (max-height:820px){
/* XREA広告で縦が狭くてもログを優先し、デバッグ欄の見切れを許容する。 */
.log{height:225px;font-size:12.5px;line-height:1.32}
}
/* v0.5.17: PC左ペインを縦方向に圧縮し、マップ面積を拡大。 */
.player-status-head{display:flex;align-items:center;gap:.65rem;min-width:0;margin-bottom:.2rem}
.player-status-head strong{white-space:nowrap}
#playerLevelSummary{font-size:.76rem;color:#cbd5e1;white-space:nowrap}
.player-status-head #playerStatusState{margin-left:auto;white-space:nowrap;color:#94a3b8}
.player-meter-row{display:grid;grid-template-columns:1.7rem 1fr auto;gap:.3rem;align-items:center;margin:.08rem 0;font-size:.78rem}
.player-meter-row progress{height:.65rem}
@media (orientation:landscape) and (min-width:900px){
/* クライアント名と接続状態を隣接させてヘッダの視線移動と高さを抑える。 */
.topbar{justify-content:flex-start;gap:8px;min-height:24px;padding:0 2px}
.topbar .status{padding:2px 7px;font-size:.72rem}
.topbar strong{font-size:.88rem;line-height:1.1}
/* 世界名だけを常時表示。IP/PORTは世界管理内に残す。 */
.world-action-row{
width:min(100%,530px);
grid-template-columns:minmax(0,1.15fr) minmax(150px,.85fr);
gap:5px;
margin:.08rem auto .22rem;
}
#worldInfo,#lastAction{min-height:30px;padding:.26rem .48rem;font-size:.78rem;line-height:1.15}
/* 状態欄を薄くしてキャラ名・4系統Lvを一列へ。 */
.left-pane #playerStatusPanel{
width:min(100%,530px);
margin:.22rem 0 .25rem!important;
padding:.34rem .55rem!important;
}
.player-status-head{margin-bottom:.12rem;gap:.55rem}
.player-status-head strong{font-size:.88rem}
#playerLevelSummary{font-size:.72rem}
.player-status-head #playerStatusState{font-size:.65rem}
.player-meter-row{grid-template-columns:1.55rem 1fr 66px;gap:.28rem;margin:.03rem 0;font-size:.74rem}
.player-meter-row progress{height:.55rem}
/* 圧縮した上段・状態欄の高さをマップへ返す。 */
.game-wrap{
width:min(100%,530px,calc(100dvh - 330px));
max-width:530px;
min-width:380px;
}
}
@media (orientation:landscape) and (min-width:900px) and (max-height:820px){
.world-action-row,.left-pane #playerStatusPanel{width:min(100%,500px)}
.game-wrap{width:min(100%,500px,calc(100dvh - 300px));max-width:500px;min-width:350px}
#playerLevelSummary{font-size:.68rem}
}
@media (max-width:620px){
.player-status-head{flex-wrap:wrap;gap:.25rem .55rem}
.player-status-head #playerStatusState{margin-left:0}
#playerLevelSummary{font-size:.7rem}
}
/* v0.5.18: 縦持ちスマホのマップタップ移動 + ダブルタップズーム抑止。 */
html,body,.app,button,input,select,textarea,summary{touch-action:manipulation}
canvas{touch-action:none}
@media (orientation:portrait) and (max-width:899px){
.game-wrap{cursor:default}
#game{-webkit-tap-highlight-color:transparent}
}
/* v0.5.19: 横持ちスマホ簡易両手操作。中央MAP最優先、左=移動/回転、右=攻撃/数字/最小ログ。 */
.mobile-stick-panel{display:none}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.landscape-map-mode{right:6px!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
html,body{width:100%;height:100%;overflow:hidden}
body{min-height:100dvh}
.app{
width:100%;
max-width:none;
height:var(--phi-mobile-available-height,100dvh);
margin:0;
padding:3px;
gap:4px;
grid-template-columns:clamp(122px,17vw,158px) minmax(0,1fr) clamp(132px,20vw,176px);
grid-template-rows:minmax(0,1fr);
align-items:stretch;
}
/* 横持ちでは専用左右操作帯を優先し、通常ヘッダは高さを使わない。 */
.topbar{display:none!important}
.mobile-stick-panel{
display:flex;
flex-direction:column;
justify-content:flex-end;
grid-column:1;
grid-row:1;
min-width:0;
min-height:0;
padding:10px 4px 6px;
border:1px solid #334155;
border-radius:10px;
background:#111827;
gap:8px;
align-items:center;
justify-items:center;
touch-action:none;
user-select:none;
-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;
}
.mobile-turn-row{
width:100%;
margin-top:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:3px;
}
.mobile-turn-row button{
min-width:0;
min-height:52px;
height:52px;
padding:0;
border:0;
border-radius:10px;
background:#334155;
color:#fff;
font-weight:900;
font-size:1.55rem;
touch-action:manipulation;
}
.virtual-stick{
width:min(100%,126px);
margin-top:auto;
aspect-ratio:1;
align-self:center;
display:grid;
place-items:center;
touch-action:none;
}
.virtual-stick-ring{
width:88%;
aspect-ratio:1;
border:2px solid #64748b;
border-radius:50%;
background:
linear-gradient(90deg,transparent 48%,rgba(148,163,184,.25) 49%,rgba(148,163,184,.25) 51%,transparent 52%),
linear-gradient(0deg,transparent 48%,rgba(148,163,184,.25) 49%,rgba(148,163,184,.25) 51%,transparent 52%),
#0b1020;
display:grid;
place-items:center;
box-shadow:inset 0 0 0 10px rgba(15,23,42,.6);
}
.virtual-stick-knob{
width:42%;
aspect-ratio:1;
border-radius:50%;
background:#94a3b8;
border:2px solid #e2e8f0;
box-shadow:0 2px 8px rgba(0,0,0,.45);
transform:translate(0,0);
will-change:transform;
pointer-events:none;
}
.mobile-stick-caption{font-size:.68rem;color:#cbd5e1;line-height:1}
.mobile-connection-status{
width:100%;
padding:3px 4px;
border-radius:7px;
background:#374151;
color:#e5e7eb;
font-size:.66rem;
text-align:center;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
.mobile-connection-status.online{background:#14532d}
/* 中央はMAP優先。世界/操作とHP/MPは最小限に圧縮する。 */
.left-pane{
grid-column:2!important;
grid-row:1!important;
display:grid;
grid-template-rows:auto minmax(0,1fr) auto;
gap:2px!important;
min-width:0;
min-height:0;
justify-items:center;
align-content:center;
position:static!important;
}
.world-action-row{
width:100%!important;
margin:0!important;
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
gap:2px!important;
}
#worldInfo,#lastAction{
min-height:20px!important;
height:20px;
padding:2px 5px!important;
font-size:.61rem!important;
line-height:16px!important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.game-wrap{
width:min(100%,calc(100dvh - 61px))!important;
max-width:none!important;
min-width:0!important;
max-height:none!important;
align-self:center;
margin:0 auto!important;
}
.map-note{font-size:8px;padding:2px 4px;right:3px;bottom:3px}
.left-pane #playerStatusPanel{
width:100%!important;
margin:0!important;
padding:2px 4px!important;
display:grid;
grid-template-columns:1fr 1fr;
gap:1px 5px;
border-radius:6px!important;
}
.player-status-head{
grid-column:1/-1;
margin:0!important;
gap:5px!important;
min-height:14px;
}
.player-status-head strong{font-size:.65rem!important}
#playerLevelSummary{font-size:.57rem!important}
.player-status-head #playerStatusState{display:none}
.player-meter-row{
grid-template-columns:18px 1fr 42px!important;
gap:2px!important;
margin:0!important;
font-size:.57rem!important;
min-width:0;
}
.player-meter-row progress{height:.42rem!important}
.player-meter-row b{font-size:.55rem;white-space:nowrap}
/* 右手側：攻撃/CAST/数字を優先し、ログは数行だけ。 */
.right-pane{
grid-column:3!important;
grid-row:1!important;
display:grid!important;
grid-template-rows:minmax(0,1fr) auto!important;
height:100%!important;
justify-content:normal;
gap:4px!important;
min-width:0;
min-height:0;
overflow:hidden!important;
align-content:stretch!important;
padding:0!important;
position:static!important;
}
.right-pane .controls{grid-row:2;order:unset;padding:4px!important}
.right-pane .combat-utility-drawer{grid-row:1;order:unset;display:grid!important;grid-template-rows:minmax(0,1fr);height:100%!important;margin:0;padding:4px!important;border-radius:8px!important;background:#111827!important;border:1px solid #334155!important}
.right-pane .combat-utility-drawer>summary{padding:5px 6px!important;border-radius:6px!important;background:#263449!important;font-size:.66rem!important}
.right-pane .combat-utility-drawer[open]>summary{margin-bottom:4px!important}
.right-pane .chat{padding:4px!important}
.right-pane .session-panel{padding:3px!important}
.right-pane .connection,.right-pane .developer-tools{display:none!important}
.control-pads{grid-template-columns:1fr!important;gap:3px!important}
.controls .dpad{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:3px!important;
}
.controls .dpad button{display:none!important}
.controls .dpad .attack,.controls .dpad .cast{
display:grid!important;
min-height:50px!important;
height:50px!important;
padding:0!important;
border-radius:9px!important;
}
.controls .dpad .attack span{font-size:1.65rem!important}
.controls .dpad .cast span{font-size:.78rem!important}
.controls .dpad .cast small{display:none}
.controls .number-pad{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:3px!important;
}
.controls .number-pad button{
min-height:32px!important;
height:32px!important;
padding:0!important;
border-radius:7px!important;
font-size:.78rem!important;
}
.combat-utility-drawer:not([open]) .chat,
.combat-utility-drawer:not([open]) .session-panel{display:none!important}
.chat-head{display:none!important}
.right-pane .log{
height:54px!important;
min-height:48px;
padding:3px 4px!important;
font-size:9.5px!important;
line-height:1.2!important;
border-radius:6px!important;
}
.log-cache-note{display:none!important}
#chatForm{
margin-top:3px!important;
grid-template-columns:1fr 38px!important;
gap:3px!important;
}
#chatInput{
min-height:27px!important;
height:27px!important;
padding:2px 4px!important;
font-size:.66rem!important;
border-radius:6px!important;
}
#chatForm button{
min-height:27px!important;
height:27px!important;
padding:0!important;
font-size:.64rem!important;
border-radius:6px!important;
}
/* 接続操作は残すが、プレイ中は最小限。 */
.session-panel{
display:grid!important;
grid-template-columns:46px minmax(0,1fr)!important;
gap:3px!important;
align-items:end!important;
}
.session-panel .connection-actions{
grid-column:1!important;
grid-row:1!important;
margin:0!important;
}
.session-panel .connection-actions button{
min-height:27px!important;
height:27px!important;
padding:0 2px!important;
font-size:.62rem!important;
border-radius:6px!important;
}
.session-panel .player-launch{
grid-column:2!important;
grid-row:1!important;
margin:0!important;
gap:0!important;
}
.session-panel .player-launch label{font-size:0!important;gap:0!important}
.session-panel .player-launch select{
width:100%;
min-height:27px!important;
height:27px!important;
padding:1px 3px!important;
font-size:.62rem!important;
border-radius:6px!important;
}
.session-panel .player-launch #characterCacheState{display:none!important}
}
/* v0.5.20: 縦持ちは会話・通常移動・各種操作、横持ちは戦闘操作に役割分担。 */
@media (orientation:portrait) and (pointer:coarse){
.mobile-stick-panel{display:none!important}
.right-pane .chat{order:1}
.right-pane .controls{order:2}
.right-pane .session-panel{order:3}
.right-pane .connection{order:4}
.right-pane .developer-tools{order:5}
}
/* v0.5.21 PublicBetaGuard: developer/debug panels are omitted from public HTML. */
/* v0.5.26: basic PHI actions + map orientation + system magic selector. */
.utility-command-panel{display:grid;gap:6px;margin-top:8px;padding-top:7px;border-top:1px solid #334155}
.basic-action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.basic-action-grid button,.more-action-grid button{min-height:38px;border:0;border-radius:8px;background:#334155;color:#fff;font-weight:800}
.utility-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.utility-select-grid label{display:grid;gap:3px;font-size:.72rem;color:#cbd5e1}
.utility-select-grid select{width:100%;min-height:38px;border:1px solid #475569;border-radius:8px;background:#020617;color:#fff;padding:5px}
.more-actions{border:1px solid #334155;border-radius:8px;padding:4px 6px}
.more-actions>summary{cursor:pointer;font-size:.72rem;font-weight:800;color:#cbd5e1}
.more-action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:5px}
@media (orientation:portrait) and (pointer:coarse){
.utility-command-panel{margin-top:6px}
.basic-action-grid{grid-template-columns:repeat(4,1fr)}
.basic-action-grid button{min-height:44px}
.utility-select-grid{grid-template-columns:1fr}
.utility-select-grid select{min-height:44px}
.more-action-grid{grid-template-columns:repeat(3,1fr)}
.more-action-grid button{min-height:42px}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
/* Combat landscape stays map/attack focused; utility actions live in portrait/general UI. */
.utility-command-panel{display:none!important}
}
/* v0.5.28: protocol-aware interaction overlay + DM condition summary. */
.player-condition-summary{
display:inline-flex;
align-items:center;
min-height:1.35rem;
padding:1px 6px;
border:1px solid #92400e;
border-radius:999px;
background:#451a03;
color:#fde68a;
font-size:.68rem;
font-weight:800;
line-height:1.2;
white-space:nowrap;
}
.player-condition-summary[hidden]{display:none!important}
.interaction-overlay[hidden]{display:none!important}
.interaction-overlay{
position:absolute;
left:6px;
bottom:6px;
z-index:6;
width:min(72%,340px);
max-height:58%;
display:flex;
flex-direction:column;
gap:5px;
padding:7px;
border:1px solid rgba(148,163,184,.72);
border-radius:9px;
background:rgba(2,6,23,.88);
color:#f8fafc;
box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.interaction-overlay.reading{width:min(88%,440px)}
.interaction-overlay-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
min-width:0;
}
.interaction-overlay-head strong{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:.78rem;
}
#interactionCloseBtn{
flex:0 0 auto;
width:28px;
min-height:28px;
padding:0;
border:0;
border-radius:7px;
background:#334155;
color:#fff;
font-size:1rem;
font-weight:900;
}
.interaction-overlay-body{
min-height:0;
max-height:calc(58dvh - 78px);
overflow:auto;
display:grid;
gap:3px;
font:11px/1.32 ui-monospace,SFMono-Regular,Consolas,monospace;
white-space:pre-wrap;
overscroll-behavior:contain;
}
.interaction-line{
padding:2px 3px;
border-radius:5px;
background:rgba(15,23,42,.52);
}
.interaction-choice{
width:100%;
min-height:34px;
display:grid;
grid-template-columns:2.2rem 1fr;
gap:5px;
align-items:center;
text-align:left;
padding:4px 7px;
border:1px solid #475569;
border-radius:7px;
background:rgba(30,41,59,.92);
color:#fff;
font:700 11px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.interaction-choice-number{
text-align:center;
color:#fde68a;
font-weight:900;
}
.interaction-overlay-hint{
color:#cbd5e1;
font-size:.68rem;
line-height:1.2;
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.interaction-overlay{
left:4px;
bottom:4px;
width:min(78%,300px);
max-height:62%;
padding:5px;
border-radius:7px;
}
.interaction-overlay.reading{width:min(92%,360px)}
.interaction-overlay-body{
max-height:calc(62dvh - 64px);
font-size:9.5px;
line-height:1.22;
gap:2px;
}
.interaction-choice{
min-height:28px;
grid-template-columns:1.8rem 1fr;
padding:2px 5px;
font-size:9.5px;
}
.interaction-overlay-head strong{font-size:.68rem}
#interactionCloseBtn{width:24px;min-height:24px;font-size:.9rem}
.interaction-overlay-hint{font-size:.58rem}
.player-condition-summary{
min-height:1rem;
padding:1px 4px;
font-size:.55rem;
}
}
@media (orientation:portrait) and (pointer:coarse){
.interaction-overlay{
width:min(84%,360px);
max-height:52%;
}
.interaction-overlay.reading{width:calc(100% - 12px)}
}
/* v0.5.29: 縦持ちマップ移動のタップ位置を半透明の円で可視化。 */
.portrait-map-tap-hints{display:none}
.portrait-map-tap-hint[hidden]{display:none!important}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
.portrait-map-tap-hints{
display:block;
position:absolute;
inset:0;
z-index:4;
pointer-events:none;
}
.portrait-map-tap-hint{
position:absolute;
display:grid;
place-items:center;
width:clamp(40px,11vw,52px);
aspect-ratio:1;
min-height:0;
padding:0;
transform:translate(-50%,-50%);
border:1px solid rgba(226,232,240,.42);
border-radius:50%;
background:rgba(15,23,42,.28);
color:rgba(248,250,252,.76);
font-size:clamp(.9rem,4vw,1.2rem);
font-weight:900;
line-height:1;
box-shadow:0 2px 8px rgba(0,0,0,.18);
pointer-events:auto;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.portrait-map-tap-hint:active{
background:rgba(51,65,85,.78);
border-color:rgba(248,250,252,.9);
transform:translate(-50%,-50%) scale(.94);
}
}
/* v0.5.30: portrait/landscape shared HUD, compact session controls, and map-first mobile layout. */
.map-hud,.map-action-overlay,.mobile-cast-button{display:none}
@media (pointer:coarse) and (max-width:899px){
.map-hud{
position:absolute;
inset:5px 5px auto 5px;
z-index:5;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:4px;
pointer-events:none;
font-weight:800;
text-shadow:0 1px 2px rgba(0,0,0,.9);
}
.map-hud-world-action,.map-hud-status{
max-width:calc(100% - 10px);
display:flex;
align-items:center;
gap:5px;
padding:3px 6px;
border:1px solid rgba(148,163,184,.34);
border-radius:7px;
background:rgba(2,6,23,.56);
color:#e2e8f0;
font-size:.66rem;
line-height:1.25;
white-space:nowrap;
overflow:hidden;
}
.map-hud-world-action span,.map-hud-status span,.map-hud-status strong{
overflow:hidden;
text-overflow:ellipsis;
}
.map-hud-status{
gap:7px;
font-size:.64rem;
}
.map-hud-status strong{color:#fff}
.map-hud-status b{font-weight:900}
.map-hud-conditions{
padding:1px 4px;
border-radius:999px;
background:rgba(120,53,15,.72);
color:#fde68a;
}
.map-hud-conditions[hidden]{display:none!important}
/* Mobile uses the map HUD instead of separate rows below/above the map. */
.left-pane>.world-action-row,
.left-pane>#playerStatusPanel{display:none!important}
}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
.app{width:100%;max-width:none;padding:6px;gap:6px}
.left-pane,.right-pane{width:100%;max-width:none;justify-items:stretch}
.game-wrap{
width:100%!important;
max-width:none!important;
min-width:0!important;
margin:0!important;
}
.map-action-overlay{
position:absolute;
right:7px;
top:50%;
z-index:5;
display:flex;
flex-direction:column;
gap:8px;
transform:translateY(-50%);
pointer-events:none;
}
.map-action-overlay button{
width:clamp(48px,12vw,58px);
aspect-ratio:1;
min-height:0;
padding:0;
border:1px solid rgba(226,232,240,.42);
border-radius:50%;
color:rgba(255,255,255,.88);
font-size:.72rem;
font-weight:900;
pointer-events:auto;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.map-action-hit{background:rgba(127,29,29,.44)}
.map-action-cast{background:rgba(67,56,202,.42)}
.map-action-overlay button:active{filter:brightness(1.25);transform:scale(.94)}
.combat-utility-drawer{
width:100%;
padding:0;
border:0;
background:transparent;
}
.combat-utility-drawer>summary{display:none}
.combat-utility-drawer[open]>summary{margin:0}
.combat-utility-drawer .session-panel + .chat{margin-top:6px}
.session-panel{
width:100%;
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:6px;
align-items:end;
padding:6px;
}
.session-panel .player-launch{min-width:0}
.session-panel .player-launch label{font-size:0;gap:0}
.session-panel .player-launch select{
width:100%;
min-height:42px;
height:42px;
font-size:1rem;
}
.session-panel .player-launch #characterCacheState{display:none}
.session-panel .connection-actions{
margin:0;
grid-template-columns:1fr;
}
.session-panel .connection-actions button{
min-width:84px;
min-height:42px;
height:42px;
}
.chat{width:100%;padding:7px}
.right-pane .log{height:clamp(150px,24dvh,230px)}
.log-cache-note{font-size:.68rem}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.left-pane{
grid-template-rows:minmax(0,1fr)!important;
}
.game-wrap{
width:min(100%,calc(var(--phi-mobile-available-height,100dvh) - 6px))!important;
}
.mobile-stick-panel{padding:6px 4px!important;gap:5px!important}
.mobile-cast-button{
display:block;
width:100%;
min-height:44px;
height:44px;
padding:0;
border:0;
border-radius:9px;
background:#4338ca;
color:#fff;
font-size:.78rem;
font-weight:900;
}
.mobile-stick-caption{display:none!important}
/* CAST moves to the left hand; attack remains on the right with the number pad. */
.controls .dpad{grid-template-columns:1fr!important}
.controls .dpad .cast{display:none!important}
.controls .dpad .attack{
display:grid!important;
width:100%!important;
min-height:52px!important;
height:52px!important;
}
.map-hud{
inset:3px 3px auto 3px;
gap:2px;
}
.map-hud-world-action,.map-hud-status{
max-width:78%;
padding:2px 4px;
border-radius:5px;
font-size:.53rem;
}
.map-hud-status{font-size:.52rem}
.right-pane .log{
height:72px!important;
min-height:66px!important;
}
}
/* v0.5.31: landscape full-play layout. Portrait full-play rules are appended below. */
.landscape-action-strip,.landscape-map-tools,.landscape-map-mode,.landscape-swap-sides,.landscape-sensitivity,.mobile-session-row,.mobile-connect-button{display:none}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.app{
grid-template-columns:clamp(148px,18vw,182px) minmax(0,1fr) clamp(205px,26vw,260px)!important;
gap:4px!important;
}
/* Left hand: connection, turns, movement stick, CAST. */
.mobile-stick-panel{
padding:5px 4px!important;
gap:5px!important;
justify-content:stretch!important;
}
.mobile-session-row{
order:1;
width:100%;
display:grid;
grid-template-columns:minmax(0,1fr) 48px;
gap:3px;
align-items:stretch;
}
.mobile-connection-status{
width:auto!important;
min-width:0;
display:flex;
align-items:center;
justify-content:center;
padding:2px 3px!important;
font-size:.58rem!important;
}
.mobile-connect-button{
display:block;
min-width:0;
min-height:28px;
height:28px;
padding:0 2px;
border:0;
border-radius:7px;
background:#334155;
color:#fff;
font-size:.58rem;
font-weight:800;
}
.mobile-turn-row{order:2;margin-top:0!important}
.mobile-turn-row button{
min-height:45px!important;
height:45px!important;
font-size:1.28rem!important;
}
.virtual-stick{
order:3;
width:min(100%,124px)!important;
margin:auto!important;
}
.mobile-cast-button{
order:4;
display:block!important;
margin-top:auto;
min-height:clamp(38px,10vh,46px)!important;
min-height:clamp(38px,10dvh,46px)!important;
height:clamp(38px,10vh,46px)!important;
height:clamp(38px,10dvh,46px)!important;
}
.mobile-stick-caption{display:none!important}
/* Centre: maximise the square map and put non-modal information/actions over it. */
.left-pane{
grid-template-rows:minmax(0,1fr)!important;
align-content:center!important;
}
.game-wrap{
width:min(100%,calc(var(--phi-mobile-available-height,100dvh) - 6px))!important;
max-width:none!important;
max-height:none!important;
margin:auto!important;
}
.map-note{display:none!important}
.map-hud{
inset:3px 3px auto 3px!important;
gap:2px!important;
align-items:flex-start!important;
}
.map-hud-world-action,
.map-hud-status,
.map-hud-levels{
max-width:96%!important;
padding:2px 4px!important;
border:1px solid rgba(148,163,184,.28);
border-radius:5px;
background:rgba(2,6,23,.48);
color:#e2e8f0;
font-size:.50rem!important;
line-height:1.18!important;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.map-hud-world-action{
display:flex!important;
gap:6px!important;
}
.map-hud-status{
display:flex!important;
gap:6px!important;
}
.map-hud-levels{
display:block;
font-weight:800;
}
.landscape-action-strip{
position:absolute;
left:4px;
right:150px;
bottom:4px;
z-index:5;
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:2px;
pointer-events:none;
}
.landscape-action-strip button{
min-width:0;
min-height:26px;
height:26px;
padding:0 2px;
border:1px solid rgba(226,232,240,.22);
border-radius:5px;
background:rgba(15,23,42,.34);
color:rgba(248,250,252,.82);
font-size:.48rem;
font-weight:800;
line-height:1.05;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
pointer-events:auto;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.landscape-action-strip button:active{
background:rgba(71,85,105,.72);
border-color:rgba(248,250,252,.66);
}
.landscape-map-tools{
position:absolute;
right:5px;
bottom:5px;
z-index:6;
display:grid;
grid-template-columns:34px 50px 58px;
gap:3px;
align-items:stretch;
pointer-events:none;
}
.landscape-map-tools button{
display:grid;
place-items:center;
min-width:0;
min-height:26px;
height:54px;
padding:1px 2px;
border:1px solid rgba(191,219,254,.52);
border-radius:6px;
background:rgba(30,64,175,.58);
color:#fff;
font-size:.52rem;
font-weight:900;
line-height:1.05;
pointer-events:auto;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.landscape-map-mode{font-size:.68rem!important}
.landscape-swap-sides{background:rgba(51,65,85,.64)!important}
.landscape-sensitivity{background:rgba(67,56,202,.58)!important}
.landscape-map-tools button:active{filter:brightness(1.22)}
/* Right hand: log/chat is always visible, then HIT/numbers/system magic. */
.right-pane{
justify-content:stretch!important;
gap:4px!important;
}
.right-pane .combat-utility-drawer{
grid-row:1!important;
order:unset!important;
display:grid!important;
grid-template-rows:minmax(0,1fr)!important;
height:100%!important;
min-height:0;
margin:0!important;
padding:4px!important;
overflow:hidden;
}
.right-pane .combat-utility-drawer>summary{display:none!important}
.right-pane .session-panel{display:none!important}
.combat-utility-drawer:not([open]) .chat{display:grid!important}
.right-pane .chat{
display:grid!important;
grid-template-rows:auto minmax(0,1fr) 36px!important;
height:100%;
min-height:0;
padding:3px!important;
}
.chat-head{
display:flex!important;
margin:0 0 2px!important;
font-size:.58rem;
}
.chat-log-actions{display:none!important}
.right-pane .log{
height:auto!important;
min-height:0!important;
padding:3px 4px!important;
font-size:8.8px!important;
line-height:1.18!important;
}
#chatForm{
height:36px!important;
min-height:36px!important;
margin:0!important;
grid-template-columns:minmax(0,1fr) 36px!important;
}
.right-pane .controls{
grid-row:2!important;
order:unset!important;
display:block!important;
padding:3px!important;
}
.control-pads{display:grid!important;grid-template-columns:1fr!important;gap:3px!important}
.controls .dpad{
display:grid!important;
grid-template-columns:1fr!important;
gap:2px!important;
}
.controls .dpad button{display:none!important}
.controls .dpad .attack{
display:grid!important;
min-height:42px!important;
height:42px!important;
border-radius:7px!important;
}
.controls .dpad .attack span{font-size:1.35rem!important}
.controls .dpad .cast{display:none!important}
.controls .number-pad{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:2px!important;
}
.controls .number-pad button{
min-height:27px!important;
height:27px!important;
border-radius:6px!important;
font-size:.68rem!important;
}
/* Same system-magic selector as portrait; other utility actions are one-tap on the map. */
.utility-command-panel{
display:block!important;
margin:3px 0 0!important;
padding:0!important;
border:0!important;
}
.utility-command-panel .basic-action-grid,
.utility-command-panel .more-actions{display:none!important}
.utility-select-grid{
display:block!important;
}
.utility-select-grid label:first-child{display:none!important}
.utility-select-grid label:last-child{
display:grid!important;
gap:1px!important;
font-size:.50rem!important;
}
.utility-select-grid select{
min-height:28px!important;
height:28px!important;
padding:1px 3px!important;
border-radius:6px!important;
font-size:.60rem!important;
}
.right-pane .connection,.right-pane .developer-tools{display:none!important}
/* Handedness swap changes only the visual columns; command logic is shared. */
.app.landscape-sides-swapped{
grid-template-columns:clamp(205px,26vw,260px) minmax(0,1fr) clamp(148px,18vw,182px)!important;
}
.app.landscape-sides-swapped .mobile-stick-panel{grid-column:3!important}
.app.landscape-sides-swapped .left-pane{grid-column:2!important}
.app.landscape-sides-swapped .right-pane{grid-column:1!important}
}
/* v0.5.31: prevent accidental iOS text selection/blue highlight during rapid play taps.
Keep chat/log and text fields selectable/editable. */
@media (pointer:coarse){
body,.app,
.game-wrap,.map-hud,.map-action-overlay,
.portrait-map-tap-hints,.landscape-action-strip,.landscape-map-tools,
.mobile-stick-panel,.controls,.utility-command-panel,
button,summary,label{
-webkit-user-select:none;
user-select:none;
-webkit-touch-callout:none;
-webkit-tap-highlight-color:transparent;
}
.log,.log *,.chat input,.chat textarea,input,textarea{
-webkit-user-select:text;
user-select:text;
-webkit-touch-callout:default;
}
}
/* v0.5.31: portrait full-play first pass + log-side interaction overlay. */
.portrait-connect-button{display:none}
.chat{position:relative}
/* Interaction lists/readers belong to the log area, never the map. */
.chat .interaction-overlay{
left:5px!important;
right:5px!important;
top:30px!important;
bottom:43px!important;
width:auto!important;
max-width:none!important;
max-height:none!important;
z-index:12!important;
}
.chat .interaction-overlay.reading{width:auto!important}
.chat .interaction-overlay-body{
max-height:none!important;
min-height:0;
overflow:auto;
}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
html,body{width:100%;min-height:100%;overflow-x:hidden}
body{background:#0f172a}
.app{
display:flex!important;
flex-direction:column!important;
width:100%!important;
max-width:none!important;
min-height:100dvh;
margin:0!important;
padding:4px!important;
gap:4px!important;
}
/* One-line launch/status bar. */
.topbar{
order:1;
width:100%;
min-height:34px;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto auto;
gap:4px;
align-items:center;
padding:3px 5px!important;
}
.topbar strong{
min-width:0;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
font-size:.72rem!important;
}
.topbar #appVersion{display:none}
.topbar .status{
min-width:0;
max-width:112px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
padding:3px 5px!important;
font-size:.58rem!important;
}
.portrait-connect-button{
display:block;
min-height:28px;
height:28px;
padding:0 7px;
border:0;
border-radius:7px;
background:#334155;
color:#fff;
font-size:.62rem;
font-weight:800;
}
.mobile-stick-panel{display:none!important}
.left-pane{
order:2;
width:100%!important;
max-width:none!important;
display:block!important;
}
.left-pane>.world-action-row,.left-pane>#playerStatusPanel{display:none!important}
.game-wrap{
width:min(100%,clamp(290px,52dvh,520px))!important;
max-width:none!important;
min-width:0!important;
margin:0 auto!important;
}
/* Keep map movement/HIT/CAST on the map; use only explicit turn controls below. */
.map-action-overlay{
right:6px!important;
gap:6px!important;
}
.map-action-overlay button{
width:clamp(44px,11vw,54px)!important;
}
.landscape-map-tools{
display:block!important;
position:absolute;
right:6px;
bottom:6px;
z-index:6;
pointer-events:none;
}
.landscape-map-tools .landscape-map-mode{
display:grid!important;
place-items:center;
width:42px;
height:38px;
min-height:0;
padding:0;
border:1px solid rgba(191,219,254,.58);
border-radius:7px;
background:rgba(30,64,175,.60);
color:#fff;
font-size:.62rem!important;
font-weight:900;
pointer-events:auto;
}
.landscape-map-tools .landscape-swap-sides,
.landscape-map-tools .landscape-sensitivity{display:none!important}
.right-pane{
order:3;
width:100%!important;
max-width:none!important;
display:flex!important;
flex-direction:column!important;
gap:4px!important;
}
/* Compact explicit turns + horizontal 1..9 row. */
.right-pane .controls{
order:1!important;
width:100%;
padding:4px!important;
margin:0!important;
}
.control-pads{display:grid!important;grid-template-columns:1fr!important;gap:3px!important}
.controls .dpad{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:3px!important;
}
.controls .dpad button{display:none!important}
.controls .dpad button[data-command="turn l"],
.controls .dpad button[data-command="turn b"],
.controls .dpad button[data-command="turn r"]{
display:grid!important;
min-height:34px!important;
height:34px!important;
padding:0!important;
border-radius:7px!important;
}
.controls .dpad button span{font-size:.9rem!important}
.controls .dpad button small{font-size:.52rem!important}
.controls .number-pad{
display:grid!important;
grid-template-columns:repeat(9,minmax(0,1fr))!important;
gap:2px!important;
}
.controls .number-pad button{
min-width:0!important;
min-height:30px!important;
height:30px!important;
padding:0!important;
border-radius:6px!important;
font-size:.68rem!important;
}
/* Frequent one-tap actions and system magic stay above the log. */
.utility-command-panel{
order:2!important;
width:100%;
margin:0!important;
padding:4px!important;
gap:4px!important;
border:1px solid #334155!important;
border-radius:8px;
}
.basic-action-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:3px!important;
}
.basic-action-grid button{
min-width:0;
min-height:34px!important;
height:34px!important;
padding:0 2px!important;
font-size:.62rem!important;
}
.utility-select-grid{
grid-template-columns:1fr!important;
gap:3px!important;
}
.utility-select-grid label:first-child{display:none!important}
.utility-select-grid label:last-child{
display:grid!important;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
gap:5px!important;
font-size:.58rem!important;
}
.utility-select-grid select{
min-height:32px!important;
height:32px!important;
padding:1px 4px!important;
font-size:.64rem!important;
}
.more-actions{
margin-top:0!important;
padding:3px 5px!important;
}
.more-actions>summary{font-size:.62rem!important}
.more-action-grid{grid-template-columns:repeat(3,1fr)!important}
.more-action-grid button{min-height:34px!important;font-size:.62rem!important}
/* Log is the shared log/list/read surface. Character/admin controls follow below it. */
.combat-utility-drawer{
order:3!important;
display:flex!important;
flex-direction:column!important;
width:100%;
padding:0!important;
border:0!important;
background:transparent!important;
}
.combat-utility-drawer>summary{display:none!important}
.combat-utility-drawer .chat{
order:1;
width:100%;
margin:0!important;
padding:5px!important;
}
.combat-utility-drawer .session-panel{
order:2;
width:100%;
margin-top:5px!important;
}
.chat-head{margin-bottom:3px!important}
.chat-head strong{font-size:.68rem}
.chat-log-actions button{min-height:26px!important;font-size:.58rem!important}
.right-pane .log{
height:clamp(120px,18dvh,190px)!important;
min-height:110px!important;
padding:4px!important;
font-size:.68rem!important;
line-height:1.28!important;
}
.log-cache-note{display:none!important}
#chatForm{
margin-top:3px!important;
grid-template-columns:minmax(0,1fr) 46px!important;
gap:3px!important;
}
#chatInput,#chatForm button{
min-height:32px!important;
height:32px!important;
font-size:.68rem!important;
}
.session-panel{
display:grid!important;
grid-template-columns:minmax(0,1fr) 64px!important;
gap:4px!important;
padding:5px!important;
}
.session-panel .player-launch select{
min-height:34px!important;
height:34px!important;
font-size:.72rem!important;
}
.session-panel .connection-actions button{
min-width:0!important;
min-height:34px!important;
height:34px!important;
font-size:.62rem!important;
}
.right-pane .connection{
order:4!important;
width:100%;
margin:0!important;
}
/* Log-side list/read overlay fills the log area but leaves chat input usable. */
.chat .interaction-overlay{
top:27px!important;
bottom:38px!important;
left:4px!important;
right:4px!important;
padding:5px!important;
border-radius:7px!important;
}
.chat .interaction-overlay-body{
font-size:10px!important;
line-height:1.24!important;
}
.chat .interaction-choice{
min-height:30px!important;
padding:3px 5px!important;
font-size:10px!important;
}
}
/* v0.5.31 real-device refinement 1 (cache 05311). */
.portrait-turn-overlay,.portrait-system-magic,.portrait-login-name{display:none}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
.topbar{
grid-template-columns:minmax(0,1fr) auto auto auto!important;
}
.portrait-login-name{
display:block;
max-width:86px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
padding:3px 5px;
border-radius:7px;
background:#1e293b;
color:#e2e8f0;
font-size:.58rem;
font-weight:800;
}
/* Match level text to the compact top HUD rows. */
.map-hud-levels{font-size:.66rem!important}
/* Turns move from the keypad area onto three map corners. */
.portrait-turn-overlay{
display:block;
position:absolute;
inset:0;
z-index:6;
pointer-events:none;
}
.portrait-turn-overlay button{
position:absolute;
width:44px;
height:44px;
min-height:0;
padding:0;
border:1px solid rgba(226,232,240,.40);
border-radius:50%;
background:rgba(30,41,59,.38);
color:rgba(255,255,255,.88);
font-size:.80rem;
font-weight:900;
pointer-events:auto;
touch-action:manipulation;
-webkit-tap-highlight-color:transparent;
}
.portrait-turn-back{font-size:.62rem!important}
/* HIT remains readily reachable; CAST owns the requested lower-right corner. */
.map-action-overlay{
position:absolute!important;
inset:0!important;
display:block!important;
transform:none!important;
pointer-events:none;
}
.map-action-overlay button{
position:absolute!important;
}
.map-action-hit{right:7px!important;top:50%!important;transform:translateY(-50%)}
.map-action-cast{}
/* Map direction remains on-map but vacates the lower-right CAST corner. */
.landscape-map-tools{
left:50%!important;
right:auto!important;
bottom:6px!important;
transform:translateX(-50%);
}
/* The three turn buttons above the number row are now redundant. */
.controls .dpad{display:none!important}
/* System magic moves into the centre of the DM-log header. */
.portrait-system-magic{
display:grid;
grid-template-columns:minmax(0,1fr)!important;
gap:3px;
align-items:center;
min-width:0;
font-size:0!important;
color:#cbd5e1;
}
.portrait-system-magic select{
min-width:0;
width:100%;
height:27px;
min-height:27px;
padding:1px 3px;
border:1px solid #475569;
border-radius:6px;
background:#020617;
color:#fff;
font-size:.58rem;
}
.chat-head{
display:grid!important;
grid-template-columns:auto minmax(0,1fr) auto!important;
gap:4px!important;
align-items:center!important;
}
.chat-log-actions{display:block!important}
.chat-log-actions button{
min-height:27px!important;
height:27px!important;
padding:0 5px!important;
}
/* The old selector row is no longer needed in portrait. */
.utility-select-grid{display:none!important}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
/* Requested order: left turn, right turn, 180 turn; make them easier to hit. */
.mobile-turn-row button{
min-height:56px!important;
height:56px!important;
font-size:1.45rem!important;
border-radius:11px!important;
}
/* Use more of the already-reserved joystick column. */
.virtual-stick{
width:min(100%,156px)!important;
}
.virtual-stick-ring{width:96%!important}
.virtual-stick-knob{width:44%!important}
.mobile-cast-button{
min-height:52px!important;
height:52px!important;
}
/* Prioritise one-tap action buttons over the three map-setting buttons. */
.landscape-action-strip{
right:120px!important;
gap:3px!important;
}
.landscape-action-strip button{
min-height:32px!important;
height:32px!important;
font-size:.56rem!important;
border-radius:6px!important;
}
.landscape-map-tools{
grid-template-columns:28px 39px 46px!important;
gap:2px!important;
right:4px!important;
bottom:4px!important;
}
.landscape-map-tools button{
height:42px!important;
min-height:42px!important;
font-size:.46rem!important;
}
.landscape-map-mode{font-size:.60rem!important}
/* Keep chat input visible under the log on short landscape screens. */
#chatForm{
display:grid!important;
flex:0 0 30px!important;
min-height:30px!important;
}
#chatInput,#chatForm button{
display:block!important;
min-height:28px!important;
height:28px!important;
}
.right-pane .log{
min-height:68px!important;
}
}
/* v0.5.31 portrait layout: Excel annotation is the source of truth (cache 05312). */
.portrait-character-select{display:none}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
/* Header: client title | character selector | connection state | connect/disconnect. */
.topbar{
grid-template-columns:minmax(0,1fr) minmax(74px,96px) auto auto!important;
gap:4px!important;
}
.portrait-character-select{
display:block;
width:100%;
min-width:0;
height:28px;
min-height:28px;
padding:1px 5px;
border:1px solid #475569;
border-radius:7px;
background:#111827;
color:#f8fafc;
font-size:.60rem;
font-weight:800;
}
.portrait-login-name{display:none!important}
/* The lower duplicate character selector/connect row is explicitly deleted. */
.combat-utility-drawer .session-panel{display:none!important}
/* Player-centred 3x3 cluster:
TL=left turn, T=move up, TR=right turn,
L/R=move, BL=180, B=move down, BR=CAST. */
.portrait-turn-overlay{
display:block!important;
position:absolute!important;
inset:0!important;
z-index:6!important;
pointer-events:none!important;
}
.portrait-turn-overlay button,
.map-action-overlay .map-action-cast{
position:absolute!important;
width:clamp(40px,11vw,52px)!important;
height:auto!important;
aspect-ratio:1!important;
min-height:0!important;
padding:0!important;
left:auto;
right:auto;
top:auto;
bottom:auto;
transform:translate(-50%,-50%)!important;
border:1px solid rgba(226,232,240,.42)!important;
border-radius:50%!important;
background:rgba(30,41,59,.30)!important;
color:rgba(248,250,252,.82)!important;
font-size:.72rem!important;
font-weight:900!important;
pointer-events:auto!important;
touch-action:manipulation!important;
-webkit-tap-highlight-color:transparent!important;
box-shadow:0 2px 8px rgba(0,0,0,.18)!important;
}
.portrait-turn-back{font-size:.58rem!important}
.map-action-cast{
background:rgba(67,56,202,.42)!important;
font-size:.66rem!important;
}
/* HIT is separate at the lower-left area indicated in the annotated image. */
.map-action-overlay{
position:absolute!important;
inset:0!important;
display:block!important;
transform:none!important;
pointer-events:none!important;
z-index:6!important;
}
.map-action-overlay .map-action-hit{
position:absolute!important;
left:18%!important;
top:85%!important;
right:auto!important;
bottom:auto!important;
transform:translate(-50%,-50%)!important;
width:clamp(52px,15vw,68px)!important;
height:auto!important;
aspect-ratio:1!important;
min-height:0!important;
border-radius:50%!important;
pointer-events:auto!important;
}
/* N/P view toggle stays available at the existing lower-right map edge. */
.landscape-map-tools{
left:auto!important;
right:6px!important;
bottom:6px!important;
transform:none!important;
}
/* Explicitly delete the old turn row above 1..9. */
.controls .dpad{display:none!important}
/* The old standalone system-magic row is deleted; the selector lives in log header. */
.utility-select-grid{display:none!important}
.portrait-system-magic{
display:grid!important;
grid-template-columns:auto minmax(70px,1fr)!important;
gap:3px!important;
align-items:center!important;
min-width:0!important;
}
.chat-head{
display:grid!important;
grid-template-columns:auto minmax(0,1fr) auto!important;
gap:4px!important;
align-items:center!important;
}
}
/* v0.5.32: interaction scrolling, event separators, and compact mobile controls. */
.mobile-more-actions,.mobile-character-select{display:none}
.interaction-overlay{min-height:0}
.interaction-overlay-body{flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.interaction-choice{touch-action:manipulation}
.log .separator{margin:1.35rem 0;padding:.35rem .2rem;text-align:center;color:#bfdbfe;font-weight:800;letter-spacing:.03em}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.mobile-session-row{grid-template-columns:minmax(42px,.8fr) minmax(0,1.6fr) 46px!important}
.mobile-character-select{display:block;min-width:0;height:28px;padding:0 2px;border:1px solid #475569;border-radius:6px;background:#0f172a;color:#fff;font-size:.56rem}
.mobile-turn-row button{min-height:55px!important;height:55px!important}
.virtual-stick{margin:5px auto 0!important}
.mobile-cast-button{margin-top:2px!important}
.mobile-more-actions{order:5;display:block;width:100%;margin:0}
.mobile-more-actions summary{min-height:28px;display:grid;place-items:center;border:1px solid #475569;border-radius:7px;background:#1e293b;font-size:.62rem;font-weight:800;list-style:none}
.mobile-more-actions summary::-webkit-details-marker{display:none}
.mobile-more-actions>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:2px}
.mobile-more-actions button{min-height:28px;padding:1px;font-size:.56rem}
.landscape-map-tools button{grid-template-rows:1fr 1fr}
.landscape-map-tools button span{display:block}
.right-pane .combat-utility-drawer{display:flex!important;flex-direction:column!important}
.right-pane .chat{flex:1 1 auto!important;height:auto!important;overflow:hidden!important}
.right-pane .log{min-height:42px!important}
#chatForm{display:grid!important;flex:0 0 30px!important;min-height:30px!important}
}
@media (orientation:portrait) and (pointer:coarse){
.topbar #appVersion{display:block!important;margin-top:1px;font-size:.48rem!important;line-height:1.05;opacity:.8}
.topbar>strong{display:flex;flex-direction:column;min-width:0}
.portrait-turn-left,.portrait-turn-right{width:clamp(48px,13vw,60px)!important;font-size:1.15rem!important}
.portrait-map-tap-hint{width:clamp(44px,12vw,58px)!important;height:clamp(44px,12vw,58px)!important}
.map-action-hit{width:clamp(68px,20vw,92px)!important;transform:translate(-65%,-35%)!important;font-size:1rem!important}
.basic-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* v0.5.33: larger portrait map cluster, compact actions, and stable landscape chat. */
.mobile-system-magic{display:none}
.interaction-pay-form{display:grid;gap:8px}
.interaction-pay-form input{width:100%;min-height:42px;padding:7px 9px;border:1px solid #64748b;border-radius:8px;background:#020617;color:#f8fafc;font-size:1rem}
.interaction-pay-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.interaction-pay-actions button{min-height:38px;border:0;border-radius:8px;background:#334155;color:#fff;font-weight:800}
.interaction-overlay.eagle-eye{width:min(92%,500px)}
.chat .interaction-overlay:not(.eagle-eye){height:auto!important;max-height:min(58%,340px)!important;bottom:auto!important}.chat .interaction-overlay:not(.eagle-eye) .interaction-overlay-body{max-height:min(40dvh,240px)!important}
.eagle-eye-grid{display:grid;grid-template-columns:repeat(11,1fr);gap:1px;font:12px/1 ui-monospace,monospace;background:#020617;padding:5px}.eagle-eye-grid span{min-width:0;min-height:1.2em;text-align:center;color:#dbeafe;background:#0f172a}.eagle-eye-grid span:nth-child(61){outline:2px solid #fbbf24;background:#334155}
.keymap-toggle{width:100%;min-height:32px;margin-top:5px;border:1px solid #475569;border-radius:7px;background:#1e293b;color:#fff;font-weight:800}
.keymap-panel{margin-top:6px;padding:9px;border:1px solid #475569;border-radius:8px;background:#0f172a;color:#e2e8f0}
.keymap-panel small{display:block;margin-top:7px;color:#cbd5e1}.keymap-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.keymap-tabs{display:flex;gap:3px}.keymap-tabs button{min-height:28px;padding:2px 7px;border:1px solid #475569;border-radius:6px;background:#1e293b;color:#e2e8f0;font-size:.72rem;font-weight:800}.keymap-tabs button[aria-selected="true"]{background:#475569;color:#fff}.keymap-layout{display:none;margin:9px auto 0;max-width:700px}.keymap-panel[data-view="normal"] .keymap-layout[data-keymap-layout="normal"],.keymap-panel[data-view="shift"] .keymap-layout[data-keymap-layout="shift"]{display:block}.keymap-key-row{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin:4px 0}.keymap-key-row.row-a{margin-left:3%;margin-right:3%}.keymap-key-row.row-z{margin-left:8%;margin-right:13%;grid-template-columns:repeat(7,minmax(0,1fr))}.keymap-key-row.row-space{display:flex;justify-content:center}.keymap-key{display:grid;min-height:48px;padding:4px 2px;border:1px solid #64748b;border-radius:6px;background:#1e293b;color:#fff;text-align:center;font:800 .8rem/1 ui-monospace,monospace;align-content:space-between}.keymap-key small{min-height:1.8em;color:#cbd5e1;font:600 .58rem/1.15 system-ui,-apple-system,sans-serif;overflow-wrap:anywhere}.keymap-space{width:42%;min-width:160px}
.pc-keypad,.pc-keypad-ops,.keymap-toggle,.keymap-panel,.pc-basic-actions,.pc-more-actions{display:none}
.combat-utility-drawer>.world-action-row{display:none}
html,body{max-width:100%;overflow-x:hidden}
/* Detail belongs in the overlay; the normal log keeps only the summary row. */
.log .separator{margin:.65rem 0}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
/* These buttons receive their left/top from syncPortraitMapTapHints(). */
.portrait-turn-overlay button,
.map-action-cast{
width:clamp(58px,15.5vw,72px)!important;
font-size:.84rem!important;
}
.portrait-turn-left,.portrait-turn-right{font-size:1.3rem!important}
.portrait-turn-back{font-size:.68rem!important}
.map-action-cast{font-size:.76rem!important}
/* HIT remains separate from the player 3x3 cluster and does not overlap it. */
.map-action-hit{
width:clamp(80px,23vw,108px)!important;
font-size:1.12rem!important;
}
/* Six frequent actions spend one compact row, leaving room for the log. */
.basic-action-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
.basic-action-grid button{
min-height:18px!important;
height:18px!important;
padding:0 1px!important;
font-size:.50rem!important;
line-height:1!important;
}
.right-pane .log{
height:clamp(160px,26dvh,290px)!important;
min-height:150px!important;
}
.chat .interaction-overlay{bottom:38px!important}
}
/* v0.5.37: desktop keyboard-first layout. Mobile retains its dedicated controls. */
@media (min-width:900px) and (pointer:fine){
.app{max-width:1180px;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:8px;overflow-x:hidden}
.game-wrap{width:min(100%,560px)}
.left-pane{justify-items:center}.left-pane #playerStatusPanel{width:min(100%,560px)}
.pc-basic-actions{display:grid;margin-top:8px;grid-template-columns:repeat(4,1fr)}
.pc-more-actions{display:block;width:100%;margin-top:6px}
.utility-command-panel .basic-action-grid,.utility-command-panel .more-actions{display:none}
.right-pane .controls{order:2}.right-pane .combat-utility-drawer{order:1}
.pc-keypad{display:grid;grid-template-columns:repeat(3,minmax(88px,1fr));max-width:420px;margin:auto}
.pc-keypad button{min-height:64px;font-size:.9rem}.pc-keypad .keypad-zero{grid-column:2}
.keymap-toggle{display:block}.keymap-panel:not([hidden]){display:block;font-size:.9rem}.keymap-open .control-pads,.keymap-open .pc-keypad,.keymap-open .pc-keypad-ops{display:none!important}
.utility-select-grid{grid-template-columns:1.15fr .85fr}
.controls .dpad{display:none}.pc-keypad-ops{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:420px;margin:5px auto}.pc-keypad-ops button{min-height:34px;border:0;border-radius:7px;background:#334155;color:#fff;font-weight:800}
.combat-utility-drawer>.world-action-row{display:grid;width:100%;margin:0 0 6px;grid-template-columns:minmax(0,1.45fr) minmax(180px,.75fr)}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
/* The input remains at the visual viewport edge; viewport listeners only resize this pane. */
#chatForm{position:relative;z-index:8;background:#111827}
.pc-keypad,.pc-keypad-ops,.keymap-toggle,.keymap-panel,.pc-basic-actions,.pc-more-actions{display:none!important}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
/* A real three-row chat keeps the input rendered even on short iPhones. */
.right-pane{min-height:0!important;overflow:hidden!important}
.right-pane .combat-utility-drawer{min-height:0!important;overflow:hidden!important}
.right-pane .chat{
display:grid!important;
grid-template-rows:auto minmax(0,1fr) auto!important;
min-height:0!important;
height:100%!important;
overflow:hidden!important;
}
.right-pane .log{
min-height:0!important;
height:auto!important;
overflow:auto!important;
-webkit-overflow-scrolling:touch;
}
#chatForm{display:grid!important;min-height:30px!important}
#chatInput,#chatForm button{display:block!important}
.mobile-turn-row button{
min-height:67px!important;
height:67px!important;
}
.mobile-more-actions,.mobile-system-magic{
order:5;
display:block!important;
width:100%;
min-height:28px;
height:28px;
margin:0;
padding:1px 3px;
border:1px solid #475569;
border-radius:7px;
background:#0f172a;
color:#fff;
font-size:.56rem;
}
.mobile-system-magic{order:6}
}
/* v0.5.35: actual portrait touch sizes and deterministic landscape chat ownership. */
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
/* All eight player-adjacent tap controls use one touch target size. */
.portrait-turn-overlay button,
.portrait-map-tap-hint,
.map-action-overlay .map-action-cast{
width:clamp(58px,15.5vw,72px)!important;
height:clamp(58px,15.5vw,72px)!important;
min-height:0!important;
border-color:rgba(226,232,240,.24)!important;
color:rgba(248,250,252,.90)!important;
box-shadow:0 1px 5px rgba(0,0,0,.10)!important;
}
.portrait-turn-overlay button{background:rgba(30,41,59,.16)!important}
.portrait-map-tap-hint{background:rgba(15,23,42,.12)!important}
.map-action-overlay .map-action-cast{background:rgba(67,56,202,.16)!important}
.portrait-map-tap-hint:active,
.portrait-turn-overlay button:active,
.map-action-cast:active{
background:rgba(71,85,105,.32)!important;
border-color:rgba(248,250,252,.48)!important;
}
/* Safari's glyph can be visually thin even at 900 weight. Stroke it explicitly. */
.portrait-turn-left,.portrait-turn-right{
font-size:1.35rem!important;
font-weight:900!important;
-webkit-text-stroke:1.2px currentColor;
text-shadow:-1px 0 currentColor,1px 0 currentColor,0 -1px currentColor,0 1px currentColor;
}
/* Real-device feedback: make HIT unmistakably larger in both dimensions. */
.map-action-overlay .map-action-hit{
width:clamp(96px,28vw,128px)!important;
height:clamp(96px,28vw,128px)!important;
min-height:0!important;
aspect-ratio:1!important;
transform:translate(-50%,-50%)!important;
background:rgba(127,29,29,.18)!important;
border-color:rgba(254,202,202,.24)!important;
color:rgba(255,255,255,.90)!important;
box-shadow:0 1px 6px rgba(0,0,0,.12)!important;
font-size:1.22rem!important;
}
/* Keep six actions on one row, but restore a practical finger height. */
.basic-action-grid button{
min-height:36px!important;
height:36px!important;
padding:0 2px!important;
font-size:.62rem!important;
line-height:1!important;
}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
/* Only the left-hand mobile selector remains in landscape. */
.right-pane .portrait-system-magic,
.right-pane #systemMagicSelect,
.right-pane .utility-select-grid label:last-child{
display:none!important;
}
/* HTML contains a cache note between log and form; remove it so the grid is truly 3 rows. */
.right-pane .log-cache-note{display:none!important}
/* The right pane owns a fixed controls row; details/chat fills the remaining row. */
.right-pane{
display:grid!important;
grid-template-rows:minmax(0,1fr) auto!important;
height:100%!important;
min-height:0!important;
overflow:hidden!important;
align-self:stretch!important;
}
.right-pane .combat-utility-drawer{
grid-row:1!important;
display:grid!important;
grid-template-rows:minmax(0,1fr)!important;
height:100%!important;
min-height:0!important;
overflow:hidden!important;
}
.right-pane .chat{
grid-row:1!important;
display:grid!important;
grid-template-rows:auto minmax(0,1fr) 30px!important;
min-height:0!important;
height:100%!important;
overflow:hidden!important;
}
.right-pane .log{
min-height:0!important;
height:auto!important;
overflow-y:auto!important;
overflow-x:hidden!important;
-webkit-overflow-scrolling:touch;
touch-action:pan-y;
}
#chatForm{
display:grid!important;
grid-template-columns:minmax(0,1fr) 42px!important;
gap:3px!important;
width:100%!important;
height:30px!important;
min-height:30px!important;
margin:0!important;
align-self:end!important;
}
#chatInput{
display:block!important;
visibility:visible!important;
opacity:1!important;
width:100%!important;
min-width:0!important;
height:30px!important;
min-height:30px!important;
padding:3px 5px!important;
}
#chatForm button{
display:block!important;
height:30px!important;
min-height:30px!important;
padding:0!important;
}
}
/* v0.5.39 final overrides: one authoritative responsive surface + graphical Eagle Eye. */
.desktop-last-action{display:none}
.pc-keymap-shell,.mobile-landscape-number-pad,.pc-more-actions-select{display:none}
.pc-keypad[data-mode="actions"] .keypad-zero{display:none!important}
.pc-keypad[data-mode="digits"] .keypad-zero{display:grid!important;grid-column:2}
.eagle-eye-popup[hidden]{display:none!important}
.eagle-eye-popup{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:1000;
width:min(92vw,520px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px));
max-height:min(92vh,620px);
max-height:min(92dvh,620px,calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px));
display:grid;
grid-template-rows:auto minmax(0,1fr) auto;
gap:6px;
padding:8px;
border:1px solid #64748b;
border-radius:12px;
background:#0f172a;
color:#f8fafc;
box-shadow:0 18px 60px rgba(0,0,0,.55),0 0 0 100vmax rgba(2,6,23,.42);
}
.eagle-eye-popup-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.eagle-eye-popup-head strong{font-size:.9rem}
.eagle-eye-popup-head button{width:32px;height:32px;min-height:32px;padding:0;border:0;border-radius:7px;background:#334155;color:#fff;font-size:1.1rem;font-weight:900}
.eagle-eye-popup-body{min-height:0;overflow:auto;padding:4px;border:1px solid #334155;border-radius:8px;background:#020617}
#eagleEyeCanvas{display:block;width:100%;max-width:440px;height:auto;margin:auto;image-rendering:pixelated;touch-action:none}
#eagleEyeStatus{display:block;text-align:center;color:#cbd5e1;font-size:.68rem}
/* Fast log scanning: separators are compact and long protocol/chat lines never wrap. */
.log{white-space:pre!important;overflow-x:auto!important;overflow-y:auto!important;overflow-wrap:normal!important;word-break:normal!important}
.log .separator{margin:.32rem 0!important;padding:.18rem .2rem!important}
@media (min-width:900px) and (pointer:fine){
.app{
max-width:1180px!important;
grid-template-columns:minmax(0,1.02fr) minmax(410px,.98fr)!important;
grid-template-rows:30px minmax(0,1fr)!important;
gap:8px!important;
align-items:start!important
}
.topbar{
grid-column:1!important;
grid-row:1!important;
display:flex!important;
align-items:center!important;
gap:6px!important;
min-height:30px!important;
padding:2px 4px!important
}
.topbar .status{flex:0 0 auto}
.desktop-last-action{
display:inline-flex!important;
align-items:center!important;
min-width:0!important;
max-width:210px!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
padding:3px 7px!important;
border-radius:999px!important;
background:#1e293b!important;
color:#e2e8f0!important;
font-size:.68rem!important
}
.portrait-character-select,.portrait-connect-button{display:none!important}
.left-pane{
grid-column:1!important;
grid-row:2!important;
justify-items:center!important;
position:static!important;
top:auto!important;
align-self:start!important
}
.game-wrap{width:min(100%,470px)!important;max-width:470px!important;min-width:0!important}
.left-pane #playerStatusPanel{width:min(100%,470px)!important;margin:.18rem 0 .3rem!important;padding:.36rem .5rem!important}
.player-status-head strong,#playerLevelSummary{font-size:.84rem!important}
.player-meter-row{margin:0!important;font-size:.68rem!important}
.player-meter-row progress{height:.42rem}
.pc-basic-actions{display:grid!important;margin-top:4px!important;grid-template-columns:repeat(4,1fr)!important;gap:3px!important}
.pc-basic-actions button{min-height:29px!important;height:29px!important;padding:1px!important;font-size:.68rem!important}
.pc-more-actions{display:none!important}
.right-pane{
grid-column:2!important;
grid-row:1 / span 2!important;
display:flex!important;
flex-direction:column!important;
gap:5px!important;
min-width:0!important;
width:100%!important;
max-height:calc(100vh - 16px)!important;
max-height:calc(100dvh - 16px)!important;
overflow-y:auto!important;
overflow-x:hidden!important;
position:static!important;
top:auto!important;
align-self:start!important
}
.combat-utility-drawer{
order:1!important;
display:flex!important;
flex-wrap:wrap!important;
align-items:stretch!important;
gap:4px!important;
width:100%!important;
min-height:0!important;
margin:0!important;
padding:4px!important;
overflow:visible!important
}
.combat-utility-drawer>summary{
flex:0 0 100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-height:28px!important;
height:28px!important;
margin:0!important;
padding:1px 6px!important;
position:static!important
}
.combat-utility-drawer>.world-action-row{
flex:1 1 42%!important;
display:block!important;
width:auto!important;
min-width:0!important;
margin:0!important;
position:static!important
}
.world-action-row #worldInfo{
display:flex!important;
align-items:center!important;
width:100%!important;
min-height:32px!important;
height:32px!important;
padding:.2rem .4rem!important;
font-size:.68rem!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important
}
.combat-utility-drawer>.session-panel{
flex:1 1 54%!important;
display:grid!important;
grid-template-columns:auto minmax(120px,1fr) auto!important;
align-items:center!important;
gap:4px!important;
width:auto!important;
min-width:0!important;
min-height:32px!important;
height:32px!important;
margin:0!important;
padding:1px 3px!important;
background:#111827!important;
border:1px solid #334155!important;
position:static!important
}
.session-panel .player-launch{display:contents!important}
.session-panel .player-launch label{grid-column:2!important;font-size:0!important;margin:0!important;min-width:0!important}
.session-panel .player-launch select{width:100%!important;min-width:0!important;min-height:27px!important;height:27px!important;font-size:.7rem!important}
.session-panel #characterCacheState{grid-column:3!important;font-size:.62rem!important;padding:0!important;white-space:nowrap!important}
.session-panel .connection-actions{
position:static!important;
right:auto!important;
left:auto!important;
top:auto!important;
bottom:auto!important;
grid-column:1!important;
grid-row:1!important;
margin:0!important
}
.session-panel .connection-actions button{min-height:27px!important;height:27px!important;padding:1px 6px!important;font-size:.68rem!important}
.combat-utility-drawer>.chat{
flex:0 0 100%!important;
display:block!important;
width:100%!important;
margin:0!important;
position:relative!important
}
.chat-head{margin-bottom:3px!important}
.log{
height:clamp(260px,38vh,380px)!important;
height:clamp(260px,38dvh,380px)!important
}
#chatForm{margin-top:3px!important}
.chat .interaction-overlay.pay{
top:34px!important;
bottom:auto!important;
left:6px!important;
right:6px!important;
width:auto!important;
max-width:none!important;
max-height:116px!important;
padding:5px!important
}
.chat .interaction-overlay.pay .interaction-overlay-body{overflow:visible!important;max-height:none!important}
.chat .interaction-overlay.pay .interaction-overlay-hint{display:none!important}
.chat .interaction-overlay.pay .interaction-pay-form{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:5px!important
}
.chat .interaction-overlay.pay .interaction-pay-form input{
min-height:32px!important;
height:32px!important;
padding:3px 7px!important;
font-size:.82rem!important
}
.chat .interaction-overlay.pay .interaction-pay-actions{
display:grid!important;
grid-template-columns:auto auto!important;
gap:4px!important
}
.chat .interaction-overlay.pay .interaction-pay-actions button{min-height:32px!important;height:32px!important;padding:2px 8px!important}
.pc-keymap-shell{
order:2!important;
display:block!important;
width:100%!important;
margin:0!important;
position:static!important
}
.keymap-panel{margin:0!important;position:static!important}
.keymap-panel:not([hidden]){display:block!important;max-height:none!important;overflow:visible!important}
.right-pane .controls{
order:3!important;
display:grid!important;
grid-template-columns:minmax(126px,.38fr) minmax(0,1fr)!important;
gap:5px!important;
width:100%!important;
margin:0!important;
padding:5px!important;
position:static!important
}
.control-pads{
grid-column:2!important;
grid-row:1!important;
display:block!important;
width:100%!important;
min-width:0!important
}
.controls .dpad{display:none!important}
.pc-keypad{
display:grid!important;
width:100%!important;
max-width:none!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:3px!important;
margin:0!important
}
.pc-keypad button{min-height:42px!important;height:42px!important;font-size:.82rem!important}
.pc-keypad[data-mode="actions"] .keypad-zero{display:none!important}
.pc-keypad-ops{display:none!important}
.utility-command-panel{
grid-column:1!important;
grid-row:1!important;
display:grid!important;
grid-template-rows:repeat(4,32px)!important;
align-content:start!important;
gap:3px!important;
width:100%!important;
min-width:0!important;
margin:0!important;
padding:0!important;
border:0!important;
background:transparent!important
}
.utility-command-panel>.keymap-toggle{
display:block!important;
width:100%!important;
min-width:0!important;
min-height:32px!important;
height:32px!important;
margin:0!important;
padding:1px 4px!important;
font-size:.68rem!important
}
.utility-command-panel .basic-action-grid,.utility-command-panel .more-actions{display:none!important}
.utility-select-grid{
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:repeat(3,32px)!important;
gap:3px!important;
width:100%!important;
min-width:0!important
}
.utility-select-grid label{display:contents!important}
.utility-select-grid select{
display:block!important;
width:100%!important;
min-width:0!important;
min-height:32px!important;
height:32px!important;
padding:1px 4px!important;
font-size:.66rem!important
}
.pc-more-actions-select{display:block!important}
.right-pane>.connection{order:4!important;width:100%!important;margin:0!important}
.right-pane>.developer-tools{order:5!important;width:100%!important;margin:0!important}
body.keymap-open .right-pane{
display:flex!important;
flex-direction:column!important;
overflow-y:auto!important;
overflow-x:hidden!important
}
.keymap-open .pc-keymap-shell{order:2!important;position:static!important;background:transparent!important;height:auto!important;overflow:visible!important}
/* When the keymap is open, the gameplay pad is hidden. Collapse the now-empty
second grid track so the return button/selectors do not sit beside a large
blank controls area. Normal desktop play keeps the two-column layout. */
.keymap-open .controls{
display:block!important;
order:3!important;
width:100%!important;
height:auto!important;
min-height:0!important;
align-self:flex-start!important;
padding:0!important;
border:0!important;
background:transparent!important
}
.keymap-open .controls .utility-command-panel{
width:100%!important;
max-width:none!important;
margin:0!important
}
.keymap-open .combat-utility-drawer{display:flex!important;order:1!important}
}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
.desktop-last-action,.utility-command-panel>.keymap-toggle{display:none!important}
.right-pane .controls{display:block!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.right-pane .control-pads{display:block!important}
.right-pane .control-pads .dpad{display:none!important}
.pc-keymap-shell,.mobile-landscape-number-pad{display:none!important}
.right-pane .pc-keypad{display:none!important}
.right-pane .pc-keypad[data-mode="digits"]{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:4px 0 0!important;width:100%!important;max-width:none!important}
.right-pane .pc-keypad[data-mode="digits"] button{display:grid!important;place-items:center!important;min-height:38px!important;height:38px!important;padding:0!important;font-size:.82rem!important}
.right-pane .pc-keypad[data-mode="digits"] .keypad-zero{grid-column:2}
.eagle-eye-popup{width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 12px);max-height:calc(100vh - 12px);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12px);padding:6px}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.pc-keypad,.pc-keymap-shell,.pc-basic-actions,.pc-more-actions,.pc-more-actions-select{display:none!important}
/* Keep both bottom selectors visible on short iPhone landscape screens. */
.mobile-stick-panel{gap:3px!important;padding:4px!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain}
.mobile-turn-row{margin-top:0!important;flex:0 0 auto}
.mobile-turn-row button{
min-height:46px!important;
height:46px!important;
font-size:1.18rem!important;
border-radius:9px!important;
}
.virtual-stick{
width:min(100%,clamp(96px,29vh,136px))!important;
width:min(100%,clamp(96px,29dvh,136px))!important;
margin:2px auto!important;
}
.mobile-cast-button{
min-height:clamp(32px,8vh,38px)!important;
min-height:clamp(32px,8dvh,38px)!important;
height:clamp(32px,8vh,38px)!important;
height:clamp(32px,8dvh,38px)!important;
margin-top:0!important;
flex:0 0 clamp(32px,8vh,38px)!important;
flex-basis:clamp(32px,8dvh,38px)!important;
}
.mobile-more-actions,.mobile-system-magic{
display:block!important;
width:100%!important;
min-height:27px!important;
height:27px!important;
flex:0 0 27px!important;
margin:0!important;
padding:1px 3px!important;
font-size:.56rem!important;
}
.mobile-more-actions{order:5!important}
.mobile-system-magic{order:6!important}
.mobile-session-row{align-items:center!important}
.mobile-connection-status,.mobile-character-select,.mobile-connect-button{align-self:center!important;min-height:30px!important;height:30px!important}
.mobile-character-select{padding:0 4px!important;line-height:normal!important;text-align:center!important;text-align-last:center}
.right-pane .controls{display:block!important;padding:3px!important}
.right-pane .control-pads{display:block!important}
.right-pane .controls .dpad{display:grid!important;grid-template-columns:1fr!important;gap:0!important;margin:0 0 3px!important}
.right-pane .controls .dpad button{display:none!important}
.right-pane .controls .dpad .attack{display:grid!important;place-items:center!important;width:100%!important;min-height:42px!important;height:42px!important;padding:0!important}
.right-pane .controls .dpad .cast{display:none!important}
.right-pane .utility-command-panel{display:none!important}
.mobile-landscape-number-pad{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:0}
.mobile-landscape-number-pad button{display:grid!important;place-items:center!important;min-height:30px!important;height:30px!important;padding:0;border:0;border-radius:6px;background:#334155;color:#fff;font-weight:800}
/* iOS Safari zooms focused inputs smaller than 16px. */
#chatInput{font-size:16px!important}
.game-wrap{position:relative!important}
.map-hud-status{align-items:center!important}
#mapHudPlayerName{display:flex!important;align-items:center!important;line-height:1.1!important}
.landscape-action-strip{position:absolute!important;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:3px!important;left:4px!important;right:31%!important;bottom:4px!important;top:auto!important;z-index:8!important}
.landscape-action-strip button{display:grid!important;place-items:center!important;height:34px!important;min-height:34px!important;padding:0 2px!important;text-align:center!important;line-height:1!important}
.landscape-map-tools{position:absolute!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important;left:70%!important;right:4px!important;bottom:4px!important;top:auto!important;transform:none!important;z-index:8!important}
.landscape-map-tools button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;height:34px!important;min-height:34px!important;padding:0 2px!important;text-align:center!important;line-height:1.05!important}
.landscape-map-tools .landscape-map-mode{position:static!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;grid-row:auto!important;align-self:stretch!important}
.landscape-map-tools button span{display:block;width:100%;text-align:center;line-height:1.05}
.eagle-eye-popup{width:min(68vw,500px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 10px));max-height:calc(100vh - 10px);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10px);padding:5px}
}
/* v0.5.40 usability polish: desktop session row, compact logs, PAY digits, and mobile landscape fit. */
.log .separator{margin:.32rem 0 0!important;padding:.18rem .2rem!important}
.interaction-pay-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}
@media (min-width:900px) and (pointer:fine){
/* World, active character and connect/disconnect stay on one compact desktop row. */
.combat-utility-drawer>.world-action-row{
flex:1 1 40%!important;
min-width:150px!important;
}
.combat-utility-drawer>.session-panel{
flex:1 1 58%!important;
min-width:210px!important;
grid-template-columns:auto minmax(84px,1fr)!important;
}
.session-panel #characterCacheState{display:none!important}
/* The keymap uses an explicit open class so later responsive rules cannot hide it. */
.pc-keymap-shell .keymap-panel.is-open{display:block!important}
.pc-keymap-shell .keymap-panel[hidden]{display:none!important}
body.keymap-open .pc-keymap-shell{display:block!important}
}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
/* Keep the transient digit pad to 1..9; PAY exposes its own 0/backspace/confirm row. */
.right-pane .pc-keypad[data-mode="digits"] .keypad-zero{display:none!important}
.interaction-pay-actions{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.interaction-pay-actions button{min-width:0!important;padding:2px 4px!important}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
/* Use the whole left control rail instead of creating an empty gap below CAST. */
.mobile-stick-panel{
justify-content:flex-start!important;
gap:3px!important;
padding:3px 4px!important;
overflow-y:hidden!important;
}
.mobile-turn-row button{
min-height:54px!important;
height:54px!important;
font-size:1.34rem!important;
}
.virtual-stick{
width:min(100%,clamp(112px,32vh,150px))!important;
width:min(100%,clamp(112px,32dvh,150px))!important;
margin:1px auto!important;
flex:0 0 auto!important;
}
.mobile-cast-button{
min-height:40px!important;
height:40px!important;
flex:0 0 40px!important;
flex-basis:40px!important;
margin:0!important;
}
.mobile-more-actions{
margin-top:0!important;
}
.mobile-stick-caption{display:none!important}
/* Give more of the right rail to the DM log. */
.right-pane .controls{padding:2px!important}
.right-pane .controls .dpad{margin:0 0 2px!important}
.right-pane .controls .dpad .attack{
min-height:34px!important;
height:34px!important;
}
.right-pane .controls .dpad .attack span{font-size:1.18rem!important}
.mobile-landscape-number-pad{
gap:2px!important;
margin:0!important;
}
.mobile-landscape-number-pad button{
min-height:25px!important;
height:25px!important;
font-size:.64rem!important;
}
.right-pane .log{
min-height:0!important;
height:auto!important;
}
/* PAY uses the in-page keypad; keep all four PAY controls visible above chat input. */
.chat .interaction-overlay.pay{
top:2px!important;
bottom:32px!important;
max-height:none!important;
padding:4px!important;
overflow:visible!important;
}
.chat .interaction-overlay.pay .interaction-overlay-body{
overflow:visible!important;
max-height:none!important;
}
.chat .interaction-overlay.pay .interaction-overlay-hint{display:none!important}
.chat .interaction-overlay.pay .interaction-pay-form{
display:grid!important;
grid-template-rows:28px 30px!important;
gap:3px!important;
min-height:61px!important;
}
.chat .interaction-overlay.pay .interaction-pay-form input{
width:100%!important;
min-height:28px!important;
height:28px!important;
padding:2px 5px!important;
font-size:.72rem!important;
}
.chat .interaction-overlay.pay .interaction-pay-actions{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:3px!important;
}
.chat .interaction-overlay.pay .interaction-pay-actions button{
min-width:0!important;
min-height:30px!important;
height:30px!important;
padding:1px 2px!important;
font-size:.68rem!important;
}
/* Keep the graphical Eagle Eye fully inside short landscape viewports. */
.eagle-eye-popup{
width:min(74vw,520px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 10px))!important;
max-height:calc(100vh - 10px)!important;
max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 10px)!important;
}
#eagleEyeCanvas{
width:auto!important;
max-width:100%!important;
max-height:calc(100vh - 74px)!important;
max-height:calc(100dvh - 74px)!important;
margin:auto!important;
}
}
/* v0.5.40 reader/writer + Eagle Eye interaction polish (cache 05404). */
.interaction-read-actions,
.interaction-write-actions{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:5px!important;
}
.interaction-read-actions{
position:sticky;
bottom:0;
margin-top:6px;
padding-top:5px;
background:#0f172a;
}
.interaction-read-actions button,
.interaction-write-actions button{
min-width:0;
min-height:36px;
border:0;
border-radius:7px;
background:#334155;
color:#fff;
font-weight:800;
}
.interaction-write-form{display:grid;gap:6px}
.interaction-write-form textarea{
display:block;
width:100%;
min-width:0;
min-height:96px;
resize:vertical;
padding:6px 8px;
border:1px solid #64748b;
border-radius:7px;
background:#020617;
color:#f8fafc;
font:inherit;
line-height:1.35;
}
.chat .interaction-overlay.multi-edit .interaction-overlay-body{
overflow:auto!important;
max-height:none!important;
}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
.chat .interaction-overlay.multi-edit{
top:30px!important;
bottom:auto!important;
max-height:min(56dvh,360px)!important;
}
.interaction-write-form textarea{min-height:110px}
.interaction-read-actions button,
.interaction-write-actions button{min-height:38px}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
/* The left rail should finish at System Magic, not with a blank tail. */
.mobile-stick-panel{
justify-content:space-between!important;
gap:2px!important;
padding:3px 4px!important;
}
.mobile-turn-row button{
min-height:clamp(52px,14vh,58px)!important;
min-height:clamp(52px,14dvh,58px)!important;
height:clamp(52px,14vh,58px)!important;
height:clamp(52px,14dvh,58px)!important;
}
.virtual-stick{
width:min(100%,clamp(112px,calc(var(--phi-mobile-available-height,100dvh) - 214px),170px))!important;
margin:1px auto!important;
}
.virtual-stick-ring{width:96%!important}
.mobile-cast-button{
min-height:clamp(40px,11vh,44px)!important;
min-height:clamp(40px,11dvh,44px)!important;
height:clamp(40px,11vh,44px)!important;
height:clamp(40px,11dvh,44px)!important;
flex:0 0 clamp(40px,11dvh,44px)!important;
}
.mobile-more-actions,.mobile-system-magic{
min-height:29px!important;
height:29px!important;
flex-basis:29px!important;
}
.mobile-more-actions{margin-top:0!important}
.mobile-system-magic{margin-bottom:0!important}
/* Dedicated writer uses the log surface and leaves chat input reachable. */
.chat .interaction-overlay.multi-edit{
top:2px!important;
bottom:32px!important;
max-height:none!important;
padding:4px!important;
}
.chat .interaction-overlay.multi-edit .interaction-overlay-body{
overflow:auto!important;
max-height:none!important;
}
.interaction-write-form{
grid-template-rows:minmax(52px,1fr) 30px!important;
gap:3px!important;
height:100%;
}
.interaction-write-form textarea{
min-height:52px!important;
height:100%!important;
resize:none!important;
padding:3px 5px!important;
font-size:.68rem!important;
}
.interaction-write-actions button,
.interaction-read-actions button{
min-height:30px!important;
height:30px!important;
padding:1px 3px!important;
font-size:.66rem!important;
}
}
/* v0.5.40 readability + protocol polish (cache 05405). */
/* Conversation is the densest text surface. Use paper-like contrast for faster scanning. */
.log{
background:#fff!important;
color:#111827!important;
border-color:#94a3b8!important;
}
.log .rx,
.log .tx{
color:#111827!important;
}
.log .separator{
color:#1f2937!important;
}
/* Desktop PAY: amount on one row, all four local controls on the next row. */
@media (min-width:900px) and (pointer:fine){
.chat .interaction-overlay.pay{
max-height:122px!important;
}
.chat .interaction-overlay.pay .interaction-pay-form{
display:grid!important;
grid-template-columns:minmax(0,1fr)!important;
grid-template-rows:32px 32px!important;
gap:4px!important;
}
.chat .interaction-overlay.pay .interaction-pay-actions{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:4px!important;
width:100%!important;
}
.chat .interaction-overlay.pay .interaction-pay-actions button{
min-width:0!important;
min-height:32px!important;
height:32px!important;
padding:2px 5px!important;
}
/* Keep the keyboard guide compact enough that the operation rail remains reachable.
The right pane itself becomes the scroll container if a short desktop viewport still clips it. */
body.keymap-open .right-pane{
min-height:0!important;
max-height:calc(100dvh - 12px)!important;
overflow-y:auto!important;
overscroll-behavior:contain;
}
body.keymap-open .keymap-panel{
padding:5px!important;
}
body.keymap-open .keymap-layout{
margin-top:4px!important;
}
body.keymap-open .keymap-key-row{
gap:2px!important;
margin:2px 0!important;
}
body.keymap-open .keymap-key{
min-height:36px!important;
padding:2px 1px!important;
font-size:.68rem!important;
}
body.keymap-open .keymap-key small{
min-height:1.3em!important;
margin-top:2px!important;
font-size:.50rem!important;
}
body.keymap-open .keymap-space{
min-width:140px!important;
}
}
/* v0.5.40 reader continuity + desktop fit (cache 05406). */
/* Keep each legacy board item visually distinct so its writer/date stays attached
to the text it belongs to when multiple items are read in sequence. */
.interaction-read-article{
margin:0 0 8px!important;
padding:6px!important;
border:1px solid #94a3b8!important;
border-radius:8px!important;
background:#f8fafc!important;
color:#111827!important;
}
.interaction-read-article:last-child{margin-bottom:0!important}
.interaction-read-article-head{
margin:0 0 3px!important;
font-size:.72rem!important;
font-weight:800!important;
color:#334155!important;
}
.interaction-read-article-updater{
margin:0 0 5px!important;
padding:3px 5px!important;
border-left:3px solid #64748b!important;
background:#e2e8f0!important;
color:#0f172a!important;
font-size:.72rem!important;
font-weight:700!important;
white-space:pre-wrap!important;
}
.interaction-read-article .interaction-line{
color:#111827!important;
white-space:pre-wrap!important;
}
/* Reader continuation stays in the same overlay; keep the two controls compact. */
.interaction-read-actions{
width:min(100%,280px)!important;
margin:4px auto 0!important;
padding-top:3px!important;
gap:4px!important;
}
.interaction-read-actions button{
min-height:34px!important;
height:34px!important;
padding:2px 8px!important;
font-size:.72rem!important;
}
/* Desktop refinements from real-device review. */
@media (min-width:900px) and (pointer:fine){
/* Keep connected world + connect/name/registration on one compact row. */
.combat-utility-drawer{
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(300px,.92fr)!important;
grid-template-rows:auto auto auto!important;
align-items:center!important;
gap:4px!important;
}
.combat-utility-drawer>summary{
grid-column:1 / -1!important;
grid-row:1!important;
}
.combat-utility-drawer>.world-action-row{
grid-column:1!important;
grid-row:2!important;
width:100%!important;
min-width:0!important;
}
.combat-utility-drawer>.session-panel{
grid-column:2!important;
grid-row:2!important;
width:100%!important;
min-width:0!important;
}
.combat-utility-drawer>.chat{
grid-column:1 / -1!important;
grid-row:3!important;
width:100%!important;
}
/* PAY is a compact dialog. The PC numeric keypad already contains zero,
so only backspace / confirm / cancel are needed inside the dialog. */
.chat .interaction-overlay.pay{
left:50%!important;
right:auto!important;
width:min(420px,calc(100% - 16px))!important;
max-width:420px!important;
transform:translateX(-50%)!important;
padding:6px!important;
}
.chat .interaction-overlay.pay .interaction-pay-form{
grid-template-rows:34px 36px!important;
gap:5px!important;
}
.chat .interaction-overlay.pay .interaction-pay-form input{
height:34px!important;
min-height:34px!important;
font-size:.92rem!important;
}
.chat .interaction-overlay.pay .interaction-pay-zero{
display:none!important;
}
.chat .interaction-overlay.pay .interaction-pay-actions{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:5px!important;
}
.chat .interaction-overlay.pay .interaction-pay-actions button{
height:36px!important;
min-height:36px!important;
padding:2px 6px!important;
font-size:.82rem!important;
}
/* Readable keyboard guide: scroll the guide instead of shrinking labels. */
body.keymap-open .keymap-panel:not([hidden]){
display:block!important;
max-height:min(58dvh,520px)!important;
overflow-y:auto!important;
overflow-x:auto!important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
}
body.keymap-open .keymap-layout{
min-width:520px!important;
}
body.keymap-open .keymap-key{
min-height:44px!important;
padding:4px 2px!important;
font-size:.82rem!important;
line-height:1.05!important;
}
body.keymap-open .keymap-key small{
margin-top:3px!important;
min-height:1.5em!important;
font-size:.60rem!important;
line-height:1.1!important;
}
body.keymap-open .keymap-space{
min-width:180px!important;
}
}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
.interaction-read-actions{
width:min(100%,250px)!important;
}
.interaction-read-actions button{
min-height:34px!important;
height:34px!important;
font-size:.70rem!important;
}
}
/* v0.5.40 desktop log recovery + newest board item first (cache 05407). */
/* The DM log must use the full chat width and wrap long lines. */
.log{
white-space:pre-wrap!important;
overflow-x:hidden!important;
overflow-y:auto!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
}
.chat,
.chat .log{
width:100%!important;
min-width:0!important;
}
/* Each board item uses its writer/date as the header; newest item is rendered first. */
.interaction-read-article-head{
margin:0 0 5px!important;
padding:4px 6px!important;
border-left:3px solid #64748b!important;
background:#e2e8f0!important;
color:#0f172a!important;
font-size:.74rem!important;
font-weight:800!important;
line-height:1.25!important;
white-space:pre-wrap!important;
}
.interaction-read-article-updater{display:none!important}
/* Desktop details/grid rendering was leaving the chat at half width.
Use ordinary block flow plus floats for the compact connection row. */
@media (min-width:900px) and (pointer:fine){
.combat-utility-drawer{
display:block!important;
width:100%!important;
min-width:0!important;
overflow:visible!important;
}
.combat-utility-drawer>summary{
display:flex!important;
width:100%!important;
min-width:0!important;
margin:0 0 4px!important;
}
.combat-utility-drawer>.world-action-row{
float:left!important;
display:block!important;
width:calc(50% - 2px)!important;
min-width:0!important;
margin:0!important;
}
.combat-utility-drawer>.session-panel{
float:right!important;
display:grid!important;
width:calc(50% - 2px)!important;
min-width:0!important;
margin:0!important;
}
.combat-utility-drawer>.chat{
clear:both!important;
display:grid!important;
width:100%!important;
min-width:0!important;
margin-top:4px!important;
}
.combat-utility-drawer::after{
content:"";
display:block;
clear:both;
}
.world-action-row #worldInfo{
width:100%!important;
min-width:0!important;
}
}
/* v0.5.40 desktop log/keymap recovery + board metadata bridge (cache 05408). */
@media (min-width:900px) and (pointer:fine){
/* The compact connection row saved vertical space; spend it on the DM log. */
.combat-utility-drawer>.world-action-row,
.combat-utility-drawer>.session-panel{
min-height:34px!important;
}
.combat-utility-drawer>.chat .log{
height:clamp(300px,38dvh,420px)!important;
min-height:300px!important;
}
/* Keymap view owns the top of the right pane. Let lower operation/chat
sections flow below the viewport instead of clipping the keyboard guide. */
body.keymap-open .right-pane{
display:flex!important;
flex-direction:column!important;
max-height:none!important;
overflow:visible!important;
align-items:stretch!important;
}
.keymap-open .pc-keymap-shell{
order:1!important;
width:100%!important;
overflow:visible!important;
}
.keymap-open .controls{
order:2!important;
}
.keymap-open .combat-utility-drawer{
order:3!important;
}
body.keymap-open .keymap-panel:not([hidden]){
display:block!important;
max-height:none!important;
overflow:visible!important;
padding:4px!important;
}
body.keymap-open .keymap-layout{
min-width:0!important;
width:100%!important;
margin-top:3px!important;
}
body.keymap-open .keymap-key-row{
gap:2px!important;
margin:2px 0!important;
}
body.keymap-open .keymap-key{
min-height:38px!important;
padding:3px 1px!important;
font-size:.74rem!important;
line-height:1!important;
}
body.keymap-open .keymap-key small{
margin-top:2px!important;
min-height:1.3em!important;
font-size:.54rem!important;
line-height:1.05!important;
}
body.keymap-open .keymap-space{
min-width:150px!important;
}
}
/* v0.5.40 desktop keymap below chat input (cache 05409). */
@media (min-width:900px) and (pointer:fine){
/* Preserve the usual connection, log and input positions. The guide follows
the chat form in normal document order instead of moving to pane top. */
body.keymap-open .right-pane{
max-height:calc(100vh - 16px)!important;
max-height:calc(100dvh - 16px)!important;
overflow-y:auto!important;
overflow-x:hidden!important;
}
body.keymap-open .combat-utility-drawer{order:1!important}
body.keymap-open .pc-keymap-shell{
order:2!important;
width:100%!important;
margin:0!important;
overflow:visible!important;
}
body.keymap-open .controls{order:3!important}
/* Spend only log height on the opened guide; the log itself stays scrollable. */
body.keymap-open .combat-utility-drawer>.chat .log{
height:clamp(150px,24dvh,230px)!important;
min-height:150px!important;
overflow-y:auto!important;
overflow-x:hidden!important;
}
body.keymap-open .keymap-panel:not([hidden]){
display:block!important;
max-height:min(30dvh,240px)!important;
overflow-y:auto!important;
overflow-x:hidden!important;
padding:4px!important;
}
body.keymap-open .keymap-layout{
min-width:0!important;
width:100%!important;
margin-top:3px!important;
}
body.keymap-open .keymap-key-row{
gap:2px!important;
margin:2px 0!important;
}
body.keymap-open .keymap-key{
min-height:32px!important;
padding:2px 1px!important;
font-size:.70rem!important;
line-height:1!important;
}
body.keymap-open .keymap-key small{
min-height:1.25em!important;
margin-top:1px!important;
font-size:.52rem!important;
line-height:1.05!important;
}
body.keymap-open .keymap-space{min-width:130px!important}
}
/* v0.5.40 desktop keymap readability polish (cache 05410). */
@media (min-width:900px) and (pointer:fine){
/* Keep the guide below the chat form with an explicit visual separation. */
body.keymap-open .pc-keymap-shell{margin-top:8px!important}
/* Increase labels only; the 05409 height and scroll budgets stay intact. */
body.keymap-open .keymap-key{font-size:.76rem!important}
body.keymap-open .keymap-key small{font-size:.58rem!important}
}
/* v0.5.41 release-candidate UI + log presentation (cache 05411). */
#appVersion{white-space:nowrap}
.manual-open-button{
min-height:28px;
padding:3px 8px;
border:1px solid #475569;
border-radius:7px;
background:#1e293b;
color:#dbeafe;
font-weight:800;
font-size:.72rem;
}
.manual-dialog[hidden]{display:none!important}
.manual-dialog{
position:fixed;
inset:0;
z-index:80;
display:grid;
place-items:center;
padding:12px;
background:rgba(2,6,23,.72);
}
.manual-card{
width:min(760px,calc(100vw - 24px));
max-height:min(82dvh,680px);
overflow:auto;
border:1px solid #64748b;
border-radius:12px;
background:#f8fafc;
color:#172033;
box-shadow:0 18px 55px rgba(0,0,0,.45);
padding:12px;
}
.manual-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.manual-head strong{font-size:1rem}
.manual-head button{min-width:34px;min-height:34px;border:1px solid #94a3b8;border-radius:7px;background:#e2e8f0;color:#0f172a;font-weight:900}
.manual-version{margin:2px 0 8px;color:#475569;font-size:.72rem}
.manual-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;position:sticky;top:-12px;z-index:1;padding:6px 0;background:#f8fafc}
.manual-tabs button{min-height:34px;border:1px solid #94a3b8;border-radius:7px;background:#fff;color:#1e3a5f;font-weight:800;font-size:.78rem}
.manual-tabs button[aria-selected="true"]{background:#334155;color:#fff}
.manual-body{font-size:.86rem;line-height:1.65}
.manual-body h3{margin:.45rem 0 .3rem}
.manual-body p{margin:.35rem 0}
.mobile-hi-button{display:none}
@media (min-width:900px) and (pointer:fine){
/* Keep the chat form inside the drawer's measured flow; spacing on the form
itself is reliable even when the details element contains floated rows. */
body.keymap-open #chatForm{margin-bottom:12px!important}
body.keymap-open .combat-utility-drawer{margin-bottom:4px!important}
body.keymap-open .pc-keymap-shell{margin-top:0!important}
}
@media (pointer:coarse) and (max-width:899px){
.mobile-hi-button{
display:grid!important;
position:fixed!important;
right:max(6px,env(safe-area-inset-right))!important;
z-index:28!important;
place-items:center!important;
width:46px!important;
height:36px!important;
min-height:36px!important;
padding:0!important;
border:1px solid rgba(219,234,254,.72)!important;
border-radius:18px!important;
background:rgba(30,41,59,.78)!important;
color:#fff!important;
font-size:.78rem!important;
font-weight:900!important;
box-shadow:0 2px 8px rgba(0,0,0,.28)!important;
backdrop-filter:blur(2px);
}
}
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
.mobile-hi-button{top:42dvh!important}
.manual-open-button{
position:fixed!important;
right:max(6px,env(safe-area-inset-right))!important;
top:max(42px,calc(env(safe-area-inset-top) + 42px))!important;
z-index:27!important;
min-height:25px!important;
padding:2px 6px!important;
font-size:.58rem!important;
opacity:.88;
}
}
@media (orientation:landscape) and (pointer:coarse){
.mobile-hi-button{top:50dvh!important}
.manual-open-button{display:none!important}
}
/* Conversation wraps for readability; PHI/DM system output keeps fixed-width
columns and can be panned horizontally inside the same log surface. */
.log{
white-space:normal!important;
overflow-x:auto!important;
overflow-y:auto!important;
overflow-wrap:normal!important;
word-break:normal!important;
}
.log>div.log-chat{
width:auto!important;
min-width:0!important;
white-space:pre-wrap!important;
overflow-wrap:anywhere!important;
word-break:normal!important;
}
.log>div.log-system{
width:max-content!important;
min-width:100%!important;
white-space:pre!important;
overflow-wrap:normal!important;
word-break:normal!important;
}
/* v0.5.42 mobile acceptance polish + expanded manual (cache 05412). */
.manual-table-wrap{overflow-x:auto;margin:.45rem 0}
.manual-table{width:100%;border-collapse:collapse;font-size:.78rem}
.manual-table th,.manual-table td{border:1px solid #cbd5e1;padding:5px 7px;text-align:left;vertical-align:top}
.manual-table th{background:#e2e8f0;color:#0f172a}
.manual-table code{font:700 .78rem ui-monospace,monospace}
.manual-steps{margin:.35rem 0 .6rem;padding-left:1.35rem}
.manual-steps li{margin:.28rem 0}
.manual-license{margin:.45rem 0;padding:.6rem .7rem;border:1px solid #cbd5e1;border-radius:7px;background:#f1f5f9;color:#0f172a}
.manual-license p{margin:.32rem 0}
.manual-license details{margin-top:.45rem}
.manual-license summary{cursor:pointer;font-weight:800;color:#1e3a5f}
.manual-license details p{font-size:.74rem;line-height:1.5;overflow-wrap:anywhere}
@media (pointer:coarse) and (max-width:899px){
/* HI belongs to the map, not to the viewport. This keeps it in the same
map-relative position when landscape control rails are swapped. */
.game-wrap .mobile-hi-button{
position:absolute!important;
right:2.2%!important;
top:58%!important;
transform:translateY(-50%)!important;
background:rgba(30,41,59,.46)!important;
border-color:rgba(219,234,254,.52)!important;
box-shadow:0 2px 7px rgba(0,0,0,.20)!important;
color:rgba(255,255,255,.94)!important;
}
}
@media (orientation:landscape) and (pointer:coarse){
.game-wrap .mobile-hi-button{top:56%!important}
/* Earlier short-landscape rules were intentionally vertical-only
(overflow-x:hidden + touch-action:pan-y). Fixed-width DM/system rows now
need two-axis panning, just like portrait. */
.right-pane .log{
overflow-x:auto!important;
overflow-y:auto!important;
touch-action:auto!important;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
}
}
/* v0.5.42 desktop keymap final overlap fix (cache 05412). */
@media (min-width:900px) and (pointer:fine){
/* Margin-based spacing can collapse or be consumed by the surrounding
details/grid layout. Put the separation inside the keymap shell instead. */
body.keymap-open #chatForm{margin-bottom:0!important}
body.keymap-open .combat-utility-drawer{margin-bottom:0!important}
body.keymap-open .pc-keymap-shell{
margin-top:0!important;
padding-top:12px!important;
box-sizing:border-box!important;
flex:0 0 auto!important;
clear:both!important;
}
/* Keep the heading visible even when the compact keymap panel itself scrolls. */
body.keymap-open .keymap-head{
position:sticky!important;
top:0!important;
z-index:3!important;
margin:0!important;
padding:2px 0 4px!important;
background:#0f172a!important;
}
}
/* v0.5.43 portrait fixed-width log text autosizing guard (cache 05413). */
@media (orientation:portrait) and (pointer:coarse) and (max-width:899px){
/* iOS Safari can auto-enlarge text after a very wide fixed-width row such as
Wizard Eye is inserted. Keep the already-defined portrait log size stable;
rotation should not be required to restore it. */
.right-pane .log,
.right-pane .log>div{
-webkit-text-size-adjust:100%!important;
text-size-adjust:100%!important;
}
.right-pane .log>div{
font-size:inherit!important;
line-height:inherit!important;
}
}
/* v0.5.43 desktop details discoverability + registration flow (cache 05413). */
.combat-utility-drawer>summary::before,
.right-pane>.connection>summary::before{
display:inline-block;
width:1.1em;
margin-right:.35rem;
text-align:center;
font-weight:900;
content:"▸";
}
.combat-utility-drawer[open]>summary::before,
.right-pane>.connection[open]>summary::before{
content:"−";
}
@media (min-width:900px) and (pointer:fine){
/* When registration/admin is open, let the right column extend in normal page
flow instead of trapping the long form inside the viewport-height pane. */
body.connection-panel-open .right-pane{
max-height:none!important;
overflow-y:visible!important;
overflow-x:visible!important;
}
.right-pane>.connection{
order:4!important;
position:relative!important;
}
.right-pane>.connection[open]>summary{
position:sticky!important;
top:4px!important;
z-index:12!important;
background:#263449!important;
box-shadow:0 2px 8px rgba(0,0,0,.28)!important;
}
}
/* v0.5.44 board reader metadata + surface consistency (cache 05414). */
.interaction-read-article{
background:transparent!important;
color:#f8fafc!important;
border-color:#475569!important;
}
.interaction-read-article .interaction-line{
background:transparent!important;
color:#f8fafc!important;
}
.interaction-read-article-head{
display:block!important;
margin:0 0 5px!important;
padding:3px 2px 5px!important;
border-left:0!important;
border-bottom:1px solid #475569!important;
background:transparent!important;
color:#e2e8f0!important;
font-weight:800!important;
white-space:pre-wrap!important;
}
@media (pointer:coarse) and (max-width:899px){
.interaction-read-article-head{
display:block!important;
font-size:.68rem!important;
line-height:1.3!important;
}
}
/* v0.5.45 mobile board metadata + redaction polish (cache 05415). */
.interaction-read-article-meta-mobile{display:none!important}
@media (pointer:coarse){
.interaction-read-article-head{display:none!important}
.interaction-read-article-meta-mobile{
display:block!important;
margin:0 0 5px!important;
padding:3px 2px 5px!important;
border-bottom:1px solid #475569!important;
background:transparent!important;
color:#e2e8f0!important;
font-size:.68rem!important;
font-weight:800!important;
line-height:1.3!important;
white-space:pre-wrap!important;
}
}
/* v0.5.46 landscape writer keyboard-safe actions (cache 05416). */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.chat .interaction-overlay.multi-edit .interaction-overlay-hint{
display:none!important;
}
.chat .interaction-overlay.multi-edit .interaction-overlay-body{
display:flex!important;
flex:1 1 auto!important;
min-height:0!important;
overflow:auto!important;
}
.chat .interaction-overlay.multi-edit .interaction-write-form{
display:grid!important;
flex:1 1 auto!important;
min-height:0!important;
height:auto!important;
grid-template-rows:30px minmax(40px,1fr)!important;
gap:3px!important;
}
.chat .interaction-overlay.multi-edit .interaction-write-actions{
grid-row:1!important;
position:sticky!important;
top:0!important;
z-index:2!important;
margin:0!important;
padding:0 0 2px!important;
background:#0f172a!important;
}
.chat .interaction-overlay.multi-edit .interaction-write-form textarea{
grid-row:2!important;
min-height:40px!important;
height:100%!important;
}
}
/* v0.5.47 stable mobile board reader/writer surface (cache 05417). */
@media (pointer:coarse){
.interaction-read-article-head{
display:block!important;
}
.interaction-read-article-meta-mobile{
display:none!important;
}
}
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse){
.chat .interaction-overlay.multi-edit{
position:absolute!important;
overflow-anchor:none!important;
overscroll-behavior:contain!important;
}
.chat .interaction-overlay.multi-edit .interaction-overlay-body{
overflow-anchor:none!important;
}
}
/* v1.0.1 / 10003: low-overhead performance diagnostics. */
.performance-panel{margin:.55rem 0;padding:.5rem .6rem;border:1px solid #334155;border-radius:.45rem;background:#0f172a}
.performance-panel>summary{cursor:pointer;color:#cbd5e1;font-size:.82rem;font-weight:700;user-select:none}
.performance-panel[open]>summary{margin-bottom:.45rem}
.performance-metrics{margin:0;padding:.5rem;border:1px solid #334155;border-radius:.4rem;background:#020617;color:#dbeafe;white-space:pre-wrap;overflow-wrap:anywhere;font:11px/1.5 ui-monospace,monospace}
.performance-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:.4rem;margin:.4rem 0}
.performance-actions button{min-height:34px;border:0;border-radius:7px;padding:4px 10px;background:#334155;color:#fff;font-weight:700}
.performance-panel>label{display:block;margin:.5rem 0 .25rem;color:#cbd5e1;font-size:.78rem}
.performance-panel>select{max-width:100%;margin-bottom:.45rem;background:#1e293b;color:#fff;border:1px solid #475569;border-radius:6px;padding:.35rem}
.performance-panel small{display:block;color:#94a3b8;font-size:.72rem;line-height:1.45}
/* v1.0.1 / 10006: PHI legacy display markup.
Only fixed classes generated by the parser are accepted; legacy text never
becomes inline CSS/HTML. */
.log .rx.phi-dm-message{color:#6b7280!important}
.log-auto-save-toggle{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;color:#cbd5e1;font-size:.72rem;font-weight:600}
.log-auto-save-toggle input{margin:0;accent-color:currentColor}
.phi-color-red{color:#ff5c5c}
.phi-color-blue{color:#5b8cff}
.phi-color-navy{color:#7c86ff}
.phi-color-cyan{color:#22d3ee}
.phi-color-purple{color:#c084fc}
.phi-color-magenta{color:#f472d0}
.phi-color-yellow{color:#fde047}
.phi-color-green{color:#4ade80}
.phi-color-lime{color:#84cc16}
.phi-color-teal{color:#2dd4bf}
.phi-color-gray{color:#9ca3af}
.phi-color-silver{color:#cbd5e1}
.phi-color-maroon{color:#fb7185}
.phi-color-olive{color:#a3a33a}
.phi-color-white{color:#f8fafc}
.phi-color-plus-hp{color:#4ade80}
.phi-color-minus-hp{color:#ff5c5c}
.phi-color-plus-mp{color:#60a5fa}
.phi-color-minus-mp{color:#ff5c5c}
/* White paper-style log: preserve readable legacy colors without altering
the dark board/read overlay palette. The old .log .rx rule has !important. */
.log .phi-color-red,.log .phi-color-minus-hp,.log .phi-color-minus-mp{color:#b91c1c}
.log .phi-color-blue,.log .phi-color-plus-mp{color:#1d4ed8}
.log .phi-color-navy{color:#3730a3}
.log .phi-color-cyan{color:#0e7490}
.log .phi-color-purple{color:#7e22ce}
.log .phi-color-magenta{color:#a21caf}
.log .phi-color-yellow{color:#854d0e}
.log .phi-color-green,.log .phi-color-plus-hp{color:#166534}
.log .phi-color-lime{color:#3f6212}
.log .phi-color-teal{color:#0f766e}
.log .phi-color-gray{color:#6b7280}
.log .phi-color-silver{color:#475569}
.log .phi-color-maroon{color:#9f1239}
.log .phi-color-olive{color:#4d7c0f}
/* Explicit white text needs a dark backing on the white log surface. */
.log .phi-color-white{color:#f8fafc;background:#334155}
.phi-size-large{font-size:1.22em}
.phi-size-small{font-size:.82em}
.phi-style-bold{font-weight:700}
.phi-style-italic{font-style:italic}
.phi-style-strike{text-decoration-line:line-through}
.phi-style-under{text-decoration-line:underline}
.phi-style-sup{vertical-align:super;font-size:.8em}
.phi-style-sub{vertical-align:sub;font-size:.8em}
/* v1.0.1 / 10008: phone board paging stays concise; desktop keyboard hints
remain visible even when a desktop window is resized to a narrow width. */
@media (pointer:coarse){
.interaction-read-actions .read-paging-key-hint{display:none!important}
}
/* cache 10009 — destructive saved-character action uses a native modal,
with Cancel/No as initial keyboard focus and no backdrop click shortcut. */
dialog.character-delete-confirm{
position:fixed;
inset:0;
margin:auto;
width:min(92vw,440px);
max-height:min(85dvh,620px);
overflow:auto;
padding:20px;
border:1px solid #6b7280;
border-radius:14px;
background:#111827;
color:#f8fafc;
box-shadow:0 20px 75px rgba(0,0,0,.55);
z-index:100000;
}
dialog.character-delete-confirm::backdrop{background:rgba(2,6,23,.78)}
.character-delete-confirm h2{font-size:1.15rem;margin:0 0 12px}
.character-delete-confirm p{margin:9px 0;line-height:1.5;overflow-wrap:anywhere}
.character-delete-confirm strong{color:#f8fafc}
.character-delete-confirm #deleteCharacterConfirmHelp{font-size:.88rem;color:#cbd5e1}
.character-delete-confirm #deleteCharacterUnknownAckRow{
display:flex;
align-items:flex-start;
gap:9px;
line-height:1.5;
border:1px solid #a16207;
border-radius:8px;
padding:10px;
background:rgba(120,53,15,.24);
}
.character-delete-confirm #deleteCharacterUnknownAckRow input{margin-top:4px;flex:none}
.character-delete-confirm #deleteCharacterUnknownAckRow[hidden],
.character-delete-confirm #deleteCharacterConfirmSavedRow[hidden]{display:none}
.character-delete-confirm #confirmDeleteCharacterBtn:disabled{opacity:.45;cursor:not-allowed}
.character-delete-confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.character-delete-confirm-actions button{
min-height:48px;
padding:8px 10px;
border:1px solid #64748b;
border-radius:8px;
background:#334155;
color:#fff;
font-size:.89rem;
font-weight:700;
}
.character-delete-confirm-actions #confirmDeleteCharacterBtn{border-color:#f87171;background:#7f1d1d}
.character-delete-confirm-actions #cancelDeleteCharacterBtn:focus-visible{outline:3px solid #60a5fa;outline-offset:2px}
@media(max-width:380px){
.character-delete-confirm-actions{grid-template-columns:1fr}
.character-delete-confirm-actions #cancelDeleteCharacterBtn{order:1}
.character-delete-confirm-actions #confirmDeleteCharacterBtn{order:2}
}