:root{color-scheme:dark;font-family:"Microsoft JhengHei",system-ui,sans-serif;color:#eadfca;background:#030504;font-size:15px;--gold:#b89a5d}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:radial-gradient(circle at 50% 20%,#202b1d,#020302 70%)}button{font:inherit;color:#e9dfc9;cursor:pointer;border:1px solid #665a43;border-radius:2px;background:linear-gradient(#34352f,#151713);box-shadow:inset 0 0 0 1px #111,0 1px 2px #000;padding:7px 10px;min-height:38px}button:hover{color:#fff3cf;border-color:#c1a66a;background:linear-gradient(#514a37,#26271f)}button:disabled{opacity:.38;cursor:default}button:focus-visible{outline:2px solid #f4d183;outline-offset:2px}main,.game{height:100dvh}.game{position:relative;display:grid;grid-template-rows:48px minmax(0,1fr) 102px;background:#050805}.topbar{z-index:4;display:flex;align-items:center;gap:12px;padding:5px 12px;border-bottom:1px solid #76643d;background:linear-gradient(180deg,#26271f,#10120f);box-shadow:0 3px 10px #000b}.crest{width:34px;height:34px;display:grid;place-items:center;border:1px solid #c2a768;border-radius:50%;font:700 20px Georgia;color:#e0c47c;background:radial-gradient(circle,#493d25,#111)}.server{display:grid;line-height:1.15}.server strong{font-family:serif;font-size:16px;color:#ead8ad}.server small{font-size:11px;color:#9b9c91}.topbar #mode{margin-left:18px;color:#bfa66f;font-size:12px}.online{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:12px;color:#aeb0a6}.online i{width:7px;height:7px;border-radius:50%;background:#b18e47;box-shadow:0 0 7px #d6ac52}.topbar button{min-height:32px;padding:4px 9px;font-size:12px}#viewport{position:relative;min-height:0;overflow:hidden;display:grid;place-items:center;touch-action:none;cursor:grab;background:#030503}canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;transform-origin:center;display:block;min-width:0;min-height:0}#loading{position:absolute;padding:16px 24px;border:1px solid #7f6d45;background:#10140fed;color:#dbc18b;box-shadow:0 8px 30px #000}.maptools{position:absolute;right:12px;top:12px;display:flex;gap:3px;align-items:center}.maptools button{min-height:32px;min-width:34px;padding:3px;background:#0c100dcc}.maptools output{width:40px;text-align:center;color:#d9c796;text-shadow:0 1px #000;font-size:12px}.world-chat{position:absolute;left:14px;bottom:10px;width:min(520px,55vw);pointer-events:none;text-shadow:1px 1px #000}.world-chat>div{color:#eadab0;font-size:13px;margin-bottom:5px}.world-chat ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;max-height:110px;overflow:hidden}.world-chat li{font-size:12px;color:#e7e3d7;padding:2px 0}.dpad{position:absolute;right:16px;bottom:14px;display:none;grid-template-columns:repeat(3,38px);gap:2px}.dpad button{min-height:36px;padding:0;font-size:18px;background:#101510d9}.dpad span{display:grid;place-items:center;color:#9b8d6c;font-size:10px}.hud{z-index:4;display:flex;align-items:center;gap:11px;padding:8px 12px;border-top:1px solid #8b7546;background:linear-gradient(180deg,#24261f,#0c0e0c);box-shadow:0 -5px 15px #000a}.portrait{width:74px;height:74px;display:grid;place-items:center;flex:none;border:3px double #a88d54;border-radius:50%;background:radial-gradient(circle,#4c5942,#171b17 70%);box-shadow:inset 0 0 18px #000,0 0 8px #000}.portrait span{font:700 17px Georgia;color:#d8bc78}.character{width:205px;display:grid;gap:3px;flex:none}.character>strong{font-family:serif;color:#e7d6ad}.character>small{font-size:10px;color:#aaa99d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gauge{position:relative;height:15px;background:#080a08;border:1px solid #4e4b3d;overflow:hidden}.gauge span{position:absolute;inset:0 auto 0 0;width:0;transition:width .2s}.gauge b{position:relative;display:block;text-align:center;font-size:10px;line-height:13px;text-shadow:1px 1px #000}.hp span{background:linear-gradient(90deg,#691b17,#c34835)}.mp span{background:linear-gradient(90deg,#173963,#3c78b4)}.quickslots{display:grid;grid-template-columns:repeat(8,minmax(38px,1fr));gap:3px;flex:1}.quickslots button{height:54px;min-width:0;padding:4px;color:#8f8a7a;font-size:10px;background:radial-gradient(circle,#32362d,#11130f 70%)}.combat{display:grid;grid-template-columns:repeat(3,auto);gap:4px;align-items:center}.combat small{grid-column:1/-1;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;color:#b6aa8d;font-size:10px}.primary{border-color:#b18e4c;color:#fff0c8;background:linear-gradient(#755d31,#362813)}.menu{display:grid;grid-template-columns:repeat(2,52px);gap:3px}.menu button{font-size:11px;padding:5px}.telemetry{position:absolute;z-index:5;right:12px;top:58px;pointer-events:none;opacity:.65}.telemetry dl{display:flex;gap:10px;margin:0;padding:5px 8px;background:#070907b8;border:1px solid #4d4939;font-size:10px}.telemetry dl div{display:flex;gap:3px}.telemetry dt{color:#888}.telemetry dd{margin:0;color:#ccb982}#chat-form{position:absolute;z-index:7;left:12px;bottom:112px;width:min(520px,60vw);display:flex;gap:4px;background:#080a08d9;padding:5px;border:1px solid #56503c}#chat-form[hidden]{display:none}#chat-text{flex:1;min-width:0;color:#eee;background:#11160f;border:1px solid #5d5948;padding:7px}dialog{max-width:570px;width:calc(100% - 30px);max-height:82vh;overflow:auto;color:#e7ddca;background:linear-gradient(#22281e,#10140f);border:1px solid #a78d58;border-radius:3px;padding:18px;box-shadow:0 15px 55px #000}dialog::backdrop{background:#000c}.dialoghead{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #61563f}.dialoghead h2{font-family:serif;font-size:19px;font-weight:400;color:#e7cf9c}.dialoghead button{font-size:20px}#dialogbody{line-height:1.75}#dialogbody button{margin:4px}.nearby-row{display:flex;align-items:center;gap:8px;border-top:1px solid #47483d;padding:8px 0}.nearby-row span{flex:1}button[hidden]{display:none!important}
@media(max-width:900px){.game{grid-template-rows:44px minmax(0,1fr) 142px}.topbar{padding:4px 8px}.topbar #mode{display:none}.crest{width:30px;height:30px}.hud{padding:6px;gap:6px;flex-wrap:wrap}.portrait{width:52px;height:52px}.character{width:170px}.quickslots{order:3;width:100%;flex-basis:100%;grid-template-columns:repeat(8,1fr)}.quickslots button{height:38px}.combat{margin-left:auto}.menu{grid-template-columns:repeat(4,45px)}.menu button{min-height:32px;padding:3px}.dpad{display:grid}.world-chat{width:55vw}.telemetry{display:none}}@media(max-width:600px){.game{grid-template-rows:42px minmax(0,1fr) 176px}.online b,.topbar #fullscreen{display:none}.portrait{display:none}.character{width:145px}.combat button{font-size:11px;padding:5px}.combat small{max-width:170px}.menu{width:100%;order:4;grid-template-columns:repeat(4,1fr)}.world-chat{bottom:132px;width:65vw}.dpad{bottom:8px}.hud{align-content:center}}

/* Packet diagnostics remain available in the information dialog. */
.world-chat{pointer-events:none}#log{display:none}#explanation{font-size:12px;opacity:.8}

.world-chat{bottom:60px}
#chat-history{display:flex;flex-direction:column;max-height:110px;overflow:hidden}
#chat-history:empty{display:none}
#chat-history li{white-space:pre-wrap;overflow-wrap:anywhere;background:#080a0880}
@media(max-width:900px){#chat-form{bottom:154px}.world-chat{bottom:60px}}
@media(max-width:600px){#chat-form{bottom:188px;width:calc(100% - 24px)}.world-chat{bottom:60px;width:65vw}}

#chat-channel,#chat-recipient{color:#eee;background:#11160f;border:1px solid #5d5948;min-width:0}#chat-recipient{width:90px}#chat-recipient[hidden]{display:none}

#sound-volume{width:72px;min-width:40px;accent-color:#b89a5d}@media(max-width:600px){.topbar{gap:5px}#sound-volume{width:48px}}

.quickslots{grid-template-columns:repeat(7,minmax(38px,1fr))}.quickslots button{height:34px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.quickslots button:nth-child(8){grid-column:1}.quickslots button:nth-child(n+8){border-color:#736544}@media(max-width:900px){.game{grid-template-rows:44px minmax(0,1fr) 186px}}@media(max-width:600px){.game{grid-template-rows:42px minmax(0,1fr) 220px}}

/* Keep the complete control set reachable as menus grow on short screens. */
.hud{min-height:0}.menu{max-height:100%;overflow-y:auto}
@media(max-width:900px){.hud{overflow-y:auto;overscroll-behavior:contain;align-content:flex-start}.hud>*{flex-shrink:0}.menu{max-height:none;overflow:visible}}

.core-statuses{display:grid;gap:3px;pointer-events:none;margin-top:4px}.core-status{position:relative;width:22px;height:22px;color:white;font:7px sans-serif;text-align:center;text-shadow:1px 1px #000;line-height:11px}.core-status img{width:20px;height:20px;margin:1px;image-rendering:pixelated}.core-status small{position:absolute;bottom:0;left:0;right:0;font:7px sans-serif}
.core-statuses[hidden]{display:none}