/* Painted navigation; game scenes and the existing functional panels keep their renderers. */
#screen #overlay[data-view=menu] {
  position:fixed!important;inset:0!important;width:auto!important;height:auto!important;box-sizing:border-box;
  padding:20px max(20px,calc((100vw - 1200px)/2))!important;overflow:visible;background:linear-gradient(90deg,#04161266,transparent 80%)!important;
  border:0!important;box-shadow:none!important;z-index:15010;font:15px/1.4 'Segoe UI',system-ui,sans-serif;
}
#screen #overlay .trainer-menu-shell {display:none;}
#screen #overlay[data-view=menu] .trainer-menu-shell {
  position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;width:min(370px,100%);height:100%;min-height:0;box-sizing:border-box;
  padding:12px 14px 10px;border:5px solid #584735;border-radius:13px;
  background:radial-gradient(ellipse at 15% 0,#88936425,transparent 62%),linear-gradient(125deg,#112e29e8,#101b1ce0 65%,#122920eb);
  backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%);
  box-shadow:0 0 0 1px #e6d391,0 0 0 3px #253628,inset 0 0 0 1px #dbc48c88,inset 0 0 34px #0007,8px 14px 40px #0008;
  color:#f5edda;isolation:isolate;
}
.trainer-menu-shell::before {content:'';position:absolute;inset:5px;border:1px solid #cfbd7955;border-radius:5px;pointer-events:none;}
#screen #overlay[data-view=menu] .trainer-menu-top {display:block;position:relative;grid-column:auto;padding:0 0 8px;min-width:0;}
#screen #overlay[data-view=menu] .menu-edition {display:block;margin:0 38px 10px 4px;font:600 10px/22px 'Segoe UI',sans-serif;letter-spacing:.19em;color:#cdcca8;}
#screen #overlay[data-view=menu] .menu-close {position:absolute;top:-4px;right:-2px;display:grid;place-items:center;width:30px;height:30px;min-height:30px;padding:0!important;margin:0;border:1px solid #d7c58b44;border-radius:6px!important;background:#142b25;color:#eaddb7;box-shadow:none;font:24px/1 system-ui;}
#screen #overlay[data-view=menu] .menu-close:hover {background:#4c5736;border-color:#efda96;}
#screen #overlay[data-view=menu] #menu {
  position:relative;inset:auto;display:flex;flex-direction:column;gap:1px;width:100%!important;max-width:none!important;min-width:0;min-height:0;max-height:none;
  padding:4px 0!important;margin:0;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;
  overflow:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#a7945b66 transparent;scroll-padding:8px;
}
#screen #overlay[data-view=menu] #menu button {
  display:flex;align-items:center;flex-shrink:0;gap:12px;width:100%;min-height:43px;box-sizing:border-box;margin:0;padding:1px 14px 1px 9px!important;
  border:1px solid transparent;border-radius:4px!important;position:relative;background:transparent;color:#f7f0df;box-shadow:none;
  font:500 17px/1.2 'Segoe UI',system-ui,sans-serif;letter-spacing:.015em;text-align:left;text-transform:uppercase;text-shadow:0 2px 2px #000c;
  transition:background .16s,color .16s,border-color .16s;
}
#screen #overlay[data-view=menu] #menu button::before {content:none!important;}
#screen #overlay[data-view=menu] #menu button:is(:hover,:focus-visible,[aria-current=page]) {
  background:linear-gradient(90deg,#e3c36408,#cbb36555 30%,#d9c47b33 76%,transparent);color:#fff9df;
  border-color:transparent;box-shadow:inset 0 1px #e8d29b99,inset 0 -1px #9a92544d;
}
#screen #overlay[data-view=menu] #menu button:focus-visible {outline:1px solid #f7dd94;outline-offset:-2px;}
#screen #overlay[data-view=menu] #menu button:active {background-color:#8f84483b;}
#screen #overlay[data-view=menu] #menu .menu-option-label {min-width:0;overflow-wrap:anywhere;font:inherit;color:inherit;}
#screen #overlay[data-view=menu] .menu-art-icon {
  display:block;flex:0 0 40px;width:40px;height:40px;border:0;background-image:url('/assets/ui/trainer-menu-atlas-v1.png');
  background-repeat:no-repeat;background-size:400% 400%;background-position:calc(var(--icon-x)*100%/3) calc(var(--icon-y)*100%/3);
  image-rendering:auto;filter:drop-shadow(0 2px 2px #0007);pointer-events:none;
}
#screen #overlay[data-view=menu] .menu-extra {margin-top:9px;border-top:1px solid #c7b77844;padding:8px 0 2px;}
#screen #overlay[data-view=menu] .menu-extra summary {cursor:pointer;color:#c9ccb1;font:600 12px/1.4 'Segoe UI',sans-serif;padding:8px 12px;min-height:34px;box-sizing:border-box;}
#screen #overlay[data-view=menu] .menu-extra summary:focus-visible {outline:1px solid #e5cf8e;}
#screen #overlay[data-view=menu] .menu-extra button {font-size:14px;}
#screen #overlay[data-view=menu] .trainer-menu-foot {display:block;grid-column:auto;padding:9px 6px 0;border-top:1px solid #c3b47144;}
#screen #overlay[data-view=menu] .menu-identity {position:static;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;}
#screen #overlay[data-view=menu] .menu-identity strong {font:600 12px/1.4 'Segoe UI',sans-serif;color:#e7d5a1;max-width:55%;overflow-wrap:anywhere;white-space:normal;}
#screen #overlay[data-view=menu] .menu-identity span {font:10px/1.4 'Segoe UI',sans-serif;color:#b5c1ad;}
#screen #overlay[data-view=menu] .menu-shortcut {display:block;margin-top:5px;text-align:center;font:9px/1.4 'Segoe UI',sans-serif;letter-spacing:.12em;color:#849f8c;}
.menu-ornaments {position:absolute;inset:0;pointer-events:none;z-index:2;}
.menu-gem {position:absolute;width:20px;height:20px;transform:rotate(45deg);box-sizing:border-box;border:3px solid #d4c48b;background:conic-gradient(from 20deg,#c8ffda,#288760,#0e664e,#91ecb6,#d3ffe0);box-shadow:0 0 0 1px #344a30,inset 0 0 0 1px #d4ffe699,0 0 13px #4ddb9844;}
.menu-gem::before {content:'';position:absolute;inset:-7px;border:1px solid #bfa66c99;}
.menu-gem.tl {top:-10px;left:-10px;}.menu-gem.tr {top:-10px;right:-10px;}.menu-gem.bl {bottom:-10px;left:-10px;}.menu-gem.br {bottom:-10px;right:-10px;}
#screen #overlay[data-view=menu] .menu-presence-slot #server-presence {
  position:relative;inset:auto;translate:none;z-index:3;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 7px;width:100%;max-width:none;padding:5px 6px;
  border:1px solid #bdc19c55;border-radius:6px!important;background:#a7b18e12;box-shadow:inset 0 1px #f3efcb13;font:11px/1.3 'Segoe UI',system-ui,sans-serif;color:#e8ecd9;
}
#screen #overlay[data-view=menu] #server-presence button {padding:3px 2px;min-height:26px;border:0!important;background:transparent;color:#e8dfbf;box-shadow:none;font:11px/1.3 'Segoe UI',sans-serif;}
#screen #overlay[data-view=menu] #server-presence>span::before {content:'';display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;background:#7be789;box-shadow:0 0 7px #7cfc75;}
#screen #overlay[data-view=menu] #game-audio-toggle {min-width:42px;}
#screen #overlay[data-view=menu] #server-online-list {background:#122b24fa;border-color:#cabc80;z-index:5;}
#screen:has(#overlay:not([hidden])[data-view=menu]) :is(#companion-chat-toggle,#chat-toggle) {visibility:hidden;}
body:has(#overlay:not([hidden])[data-view=menu]) .game-frame-ornaments {visibility:hidden!important;}
body:has(#overlay:not([hidden])[data-view=menu]) {overflow:hidden;}
@media(max-width:760px),(any-pointer:coarse),(orientation:landscape) and (max-height:600px) and (max-width:1100px) {
  #screen #overlay[data-view=menu] {padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))!important;background:linear-gradient(90deg,#06181299,#06181230)!important;}
  #screen #overlay[data-view=menu] .trainer-menu-shell {width:min(370px,100%);height:100%;max-height:100%;padding:10px 11px;}
  #screen #overlay[data-view=menu] #menu button {min-height:44px;font-size:16px;gap:10px;}
  #screen #overlay[data-view=menu] .menu-shortcut {display:none;}
  body:has(#overlay:not([hidden])[data-view=menu]) :is(#touch-controls,#exit-immersive-btn,.game-frame-ornaments) {visibility:hidden!important;pointer-events:none!important;}
}
@media(max-width:360px) {
  #screen #overlay[data-view=menu] .trainer-menu-shell {padding:9px 8px;}
  #screen #overlay[data-view=menu] #menu button {font-size:15px;padding-left:3px!important;gap:8px;}
  #screen #overlay[data-view=menu] .menu-presence-slot #server-presence {gap:4px;font-size:10px;}
  #screen #overlay[data-view=menu] #server-presence button {font-size:10px;}
}
@media(prefers-reduced-motion:reduce) {#screen #overlay[data-view=menu] #menu button {transition:none;}}